@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fuentes/fraunces-latin-normal.woff2") format("woff2") }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("fuentes/fraunces-latin-italic.woff2") format("woff2") }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("fuentes/figtree-latin-normal.woff2") format("woff2") }

:root {
  --crema: #fbf8f1;
  --papel: #ffffff;
  --menta: #e6f2e8;
  --menta-2: #cfe6d4;
  --salvia: #8fbf9b;
  --salvia-osc: #4e6b4c;
  --bosque: #363d2b;
  --tinta: #262b21;
  --tinta-2: #4f5647;
  --tinta-3: #6f7566;
  --linea: #e5e7dc;
  --melocoton: #f7e8d4;
  --lavanda: #e8eee0;
  --lima: #eef5d6;
  --arena: #f5ecd8;
  --aviso: #fff4d6;
  --marca: #ffe98a;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radio: 20px;
  --radio-g: 32px;
  --sombra: 0 1px 2px rgba(54, 61, 43, .05), 0 14px 36px -16px rgba(54, 61, 43, .22);
  --sombra-s: 0 1px 2px rgba(54, 61, 43, .06), 0 6px 18px -10px rgba(54, 61, 43, .2);
  --ancho: 1180px;
}

*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px }
body {
  margin: 0;
  background: var(--crema);
  color: var(--tinta);
  font: 400 17px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100% }
a { color: var(--salvia-osc); text-underline-offset: 3px; text-decoration-thickness: 1px }
a:hover { color: var(--bosque) }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.12; letter-spacing: -.015em; margin: 0; font-variation-settings: "SOFT" 60, "opsz" 72 }
h2 { font-size: clamp(30px, 3.6vw, 44px) }
h3 { font-size: 22px; line-height: 1.25 }
p { margin: 0 0 1em }
p:last-child { margin-bottom: 0 }
em { font-style: italic; color: var(--salvia-osc) }
ul { padding: 0; margin: 0; list-style: none }
button { font: inherit; color: inherit; cursor: pointer }
:focus-visible { outline: 3px solid var(--salvia); outline-offset: 3px; border-radius: 6px }

.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.saltar { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--bosque); color: #fff; padding: 10px 16px; border-radius: 10px; text-decoration: none }
.saltar:focus { top: 12px; color: #fff }

.contenedor { width: min(var(--ancho), 100% - 40px); margin-inline: auto }
.seccion { padding: clamp(64px, 9vw, 112px) 0 }
.seccion-s { padding: clamp(40px, 6vw, 72px) 0 }
.antetitulo { display: inline-flex; align-items: center; gap: 10px; font: 600 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--salvia-osc); margin: 0 0 18px }
.antetitulo::before { content: ""; width: 22px; height: 1.5px; background: currentColor; border-radius: 2px }
.intro { max-width: 640px; color: var(--tinta-2); font-size: 18px; margin-top: 16px }
.titular { max-width: 760px; margin-bottom: clamp(32px, 5vw, 56px) }
.titular.centro { margin-inline: auto; text-align: center }
.titular.centro .intro { margin-inline: auto }
.titular.centro .antetitulo::after { content: ""; width: 22px; height: 1.5px; background: currentColor; border-radius: 2px }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: 999px; border: 1.5px solid transparent;
  font: 600 16px/1 var(--sans); text-decoration: none; white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.boton svg { width: 20px; height: 20px; flex: none }
.boton:hover { transform: translateY(-1px) }
.boton-primario { background: var(--salvia-osc); color: #fff; box-shadow: 0 10px 24px -12px rgba(78, 107, 76, .7) }
.boton-primario:hover { background: var(--bosque); color: #fff }
.boton-secundario { background: transparent; color: var(--bosque); border-color: rgba(54, 61, 43, .22) }
.boton-secundario:hover { border-color: var(--bosque); color: var(--bosque); background: rgba(255, 255, 255, .6) }
.boton-claro { background: #fff; color: var(--bosque) }
.boton-claro:hover { background: var(--menta); color: var(--bosque) }
.boton-borde-claro { border-color: rgba(255, 255, 255, .45); color: #fff }
.boton-borde-claro:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, .08) }
.botones { display: flex; flex-wrap: wrap; gap: 12px }
.enlace-flecha { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; color: var(--salvia-osc) }
.enlace-flecha svg { width: 18px; height: 18px; transition: transform .2s }
.enlace-flecha:hover svg { transform: translateX(3px) }

.cabecera { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid transparent; transition: border-color .25s, box-shadow .25s }
.cabecera::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(251, 248, 241, .86); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px) }
.menu-abierto .cabecera::before { background: var(--crema) }
.menu-abierto .vista-previa, .menu-abierto .flotante-wa, .menu-abierto .cookies { display: none }
.con-sombra .cabecera { border-bottom-color: var(--linea); box-shadow: 0 8px 24px -20px rgba(54, 61, 43, .5) }
.cabecera-fila { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 84px }
.marca { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--tinta) }
.marca-signo { width: 46px; height: 50px; display: grid; place-items: center; flex: none }
.marca-signo img { width: 100%; height: 100%; object-fit: contain }
.marca-texto { display: grid; line-height: 1.15 }
.marca-texto b { font: 500 21px/1.1 var(--serif); letter-spacing: -.01em }
.marca-texto small { font-size: 12.5px; color: var(--tinta-3); letter-spacing: .02em; margin-top: 3px }
.marca:hover { color: var(--tinta) }

.menu { display: flex; align-items: center; gap: 28px }
.menu > ul { display: flex; align-items: center; gap: 4px }
.menu > ul > li > a, .desplegable > button {
  white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px; border-radius: 10px;
  font-size: 15.5px; font-weight: 500; color: var(--tinta-2); text-decoration: none; background: none; border: 0;
}
.menu > ul > li > a:hover, .desplegable > button:hover { color: var(--tinta); background: rgba(54, 61, 43, .05) }
.menu a[aria-current="page"], .desplegable.activo > button { color: var(--salvia-osc) }
.desplegable { position: relative }
.desplegable > button svg { width: 16px; height: 16px; transition: transform .2s }
.desplegable > button[aria-expanded="true"] svg { transform: rotate(180deg) }
.submenu {
  position: absolute; top: calc(100% + 10px); left: -12px; min-width: 300px; padding: 8px;
  background: var(--papel); border: 1px solid var(--linea); border-radius: 18px; box-shadow: var(--sombra);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s, transform .18s, visibility .18s;
}
.desplegable > button[aria-expanded="true"] + .submenu { opacity: 1; visibility: visible; transform: none }
.submenu a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: var(--tinta); font-size: 15px; font-weight: 500 }
.submenu a:hover { background: var(--crema) }
.submenu a[aria-current="page"] { background: var(--menta); color: var(--bosque) }
.submenu .icono-s { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; color: var(--salvia-osc) }
.submenu .icono-s svg { width: 18px; height: 18px }
.menu-cta { min-height: 46px; padding: 0 22px; font-size: 15px }
.menu-boton { display: none; width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--linea); background: var(--papel); position: relative }
.menu-boton span:not(.oculto) { position: absolute; left: 13px; right: 13px; height: 2px; border-radius: 2px; background: var(--tinta); transition: transform .25s, top .25s }
.menu-boton span:nth-child(1) { top: 18px }
.menu-boton span:nth-child(2) { top: 26px }
.menu-abierto .menu-boton span:nth-child(1) { top: 22px; transform: rotate(45deg) }
.menu-abierto .menu-boton span:nth-child(2) { top: 22px; transform: rotate(-45deg) }

.tono-menta { background: var(--menta) }
.tono-melocoton { background: var(--melocoton) }
.tono-lavanda { background: var(--lavanda) }
.tono-lima { background: var(--lima) }
.tono-arena { background: var(--arena) }

.portada { position: relative; overflow: hidden; padding: clamp(40px, 6vw, 80px) 0 clamp(64px, 8vw, 104px) }
.portada::before { content: ""; position: absolute; width: 620px; height: 620px; right: -140px; top: -180px; border-radius: 50%; background: radial-gradient(circle, rgba(245, 232, 205, .9), rgba(245, 232, 205, 0) 68%); pointer-events: none }
.portada::after { content: ""; position: absolute; width: 520px; height: 520px; left: -220px; bottom: -260px; border-radius: 50%; background: radial-gradient(circle, rgba(207, 230, 212, .85), rgba(207, 230, 212, 0) 68%); pointer-events: none }
.portada-rejilla { position: relative; z-index: 1; display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(32px, 6vw, 88px); align-items: center }
.portada h1 { font: 600 14px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--salvia-osc); margin-bottom: 22px; display: flex; align-items: center; gap: 12px }
.portada h1::before { content: ""; width: 28px; height: 1.5px; background: currentColor; border-radius: 2px; flex: none }
.lema { font: 350 clamp(40px, 5.6vw, 70px)/1.04 var(--serif); letter-spacing: -.025em; margin: 0 0 26px; font-variation-settings: "SOFT" 80, "opsz" 144 }
.lema em { font-weight: 300 }
.portada-texto { font-size: 19px; color: var(--tinta-2); max-width: 560px; margin-bottom: 34px }
.sellos { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--linea) }
.sellos li { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 500; color: var(--tinta-2) }
.sellos svg { width: 19px; height: 19px; color: var(--salvia-osc) }

.retrato { position: relative; max-width: 460px; margin-left: auto; width: 100% }
.arco { position: relative; aspect-ratio: 4 / 5; border-radius: 999px 999px var(--radio-g) var(--radio-g); overflow: hidden; background: linear-gradient(170deg, #d3e8d8 0%, #eef5e6 55%, #f6ead2 100%); box-shadow: var(--sombra) }
.arco img { width: 100%; height: 100%; object-fit: cover }
.arco-vacio { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 14px; color: var(--salvia-osc); text-align: center; padding: 24px }
.arco-vacio svg { width: 58%; height: auto; opacity: .55 }
.arco-vacio span { font-size: 14px; font-weight: 600; letter-spacing: .04em }
.tarjeta-flotante { position: absolute; display: flex; align-items: center; gap: 12px; background: var(--papel); border-radius: 18px; padding: 14px 18px; box-shadow: var(--sombra); font-size: 14px; line-height: 1.35 }
.tarjeta-flotante b { display: block; font-size: 15px; color: var(--tinta) }
.tarjeta-flotante span { color: var(--tinta-3) }
.tarjeta-flotante .icono-c { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--salvia-osc); flex: none }
.tarjeta-flotante .icono-c svg { width: 20px; height: 20px }
.tf-1 { left: -36px; bottom: 44px }
.tf-2 { right: -18px; top: 38px }

.servicios { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px }
.servicio-tarjeta {
  grid-column: span 2; position: relative; display: flex; flex-direction: column; gap: 14px;
  padding: 30px; border-radius: var(--radio-g); background: var(--papel); border: 1px solid var(--linea);
  text-decoration: none; color: var(--tinta); transition: transform .25s, box-shadow .25s, border-color .25s;
}
.servicio-tarjeta:hover { transform: translateY(-3px); box-shadow: var(--sombra); border-color: transparent; color: var(--tinta) }
.servicio-tarjeta.ancha { grid-column: span 3 }
.servicio-tarjeta.principal { background: var(--bosque); color: #f0f2e8; border-color: var(--bosque) }
.servicio-tarjeta.principal h3 { color: #fff }
.servicio-tarjeta.principal p { color: #d3d8c4 }
.servicio-tarjeta.principal .enlace-flecha { color: #fff }
.servicio-tarjeta.principal .icono-g { background: rgba(255, 255, 255, .1); color: #dfe8cf }
.servicio-tarjeta p { color: var(--tinta-2); font-size: 16px; flex: 1 }
.servicio-tarjeta .enlace-flecha { margin-top: 4px }
.icono-g { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; color: var(--salvia-osc) }
.icono-g svg { width: 26px; height: 26px }
.etiqueta { display: inline-flex; align-items: center; align-self: flex-start; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; background: var(--menta); color: var(--salvia-osc) }
.principal .etiqueta { background: rgba(255, 255, 255, .12); color: #dfe8cf }

.enfoque { background: var(--menta); border-radius: clamp(28px, 4vw, 48px); padding: clamp(36px, 6vw, 80px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center }
.enfoque .intro { color: var(--tinta-2) }
.pilares { display: grid; gap: 16px }
.pilar { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; background: rgba(255, 255, 255, .72); border-radius: 22px; padding: 22px 24px }
.pilar-num { font: 400 30px/1 var(--serif); color: var(--salvia-osc); width: 36px }
.pilar h3 { font-size: 20px; margin-bottom: 6px }
.pilar p { color: var(--tinta-2); font-size: 16px }

.video { position: relative; border-radius: var(--radio-g); overflow: hidden; background: linear-gradient(135deg, #48503a, #363d2b 60%, #4a5a3f); aspect-ratio: 16 / 9; display: grid; place-items: center; color: #fff; box-shadow: var(--sombra) }
.video::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 20%, rgba(179, 216, 186, .3), transparent 50%), radial-gradient(circle at 85% 90%, rgba(220, 194, 138, .18), transparent 45%) }
.video-centro { position: relative; display: grid; justify-items: center; gap: 18px; text-align: center; padding: 24px }
.video-boton { width: 86px; height: 86px; border-radius: 50%; background: rgba(255, 255, 255, .95); color: var(--bosque); display: grid; place-items: center; box-shadow: 0 0 0 12px rgba(255, 255, 255, .12) }
.video-boton svg { width: 30px; height: 30px; margin-left: 4px }
.video-centro p { color: #dfe3d2; font-size: 15px; max-width: 340px }
.dos-col { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 80px); align-items: center }

.consultas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px }
.consulta { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio-g); padding: 30px; display: flex; flex-direction: column; gap: 10px }
.consulta .icono-g { margin-bottom: 8px }
.consulta h3 { font-size: 24px }
.consulta p { color: var(--tinta-2); font-size: 16px }
.consulta .enlace-flecha { margin-top: auto; padding-top: 10px }

.tarifas { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio-g); overflow: hidden }
.tarifa { display: grid; grid-template-columns: 1fr auto; gap: 8px 24px; align-items: center; padding: 22px 30px; border-top: 1px solid var(--linea) }
.tarifa:first-child { border-top: 0 }
.tarifa h3 { font: 600 17px/1.35 var(--sans); letter-spacing: 0 }
.tarifa p { color: var(--tinta-3); font-size: 15px; margin: 2px 0 0 }
.precio { font: 400 28px/1 var(--serif); color: var(--bosque); white-space: nowrap; text-align: right }
.precio small { display: block; font: 500 13px/1.3 var(--sans); color: var(--tinta-3); margin-top: 6px }
.tarifas-nota { display: flex; gap: 12px; align-items: flex-start; padding: 18px 30px; background: var(--crema); border-top: 1px solid var(--linea); color: var(--tinta-2); font-size: 15px }
.tarifas-nota svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--salvia-osc) }

.preguntas { display: grid; gap: 12px; max-width: 860px }
.pregunta { background: var(--papel); border: 1px solid var(--linea); border-radius: 20px; transition: border-color .2s, box-shadow .2s }
.pregunta[open] { border-color: transparent; box-shadow: var(--sombra-s) }
.pregunta summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 22px 26px; font: 600 17.5px/1.4 var(--sans) }
.pregunta summary::-webkit-details-marker { display: none }
.pregunta summary .mas { width: 34px; height: 34px; border-radius: 50%; background: var(--menta); color: var(--salvia-osc); display: grid; place-items: center; flex: none; transition: transform .25s, background .25s }
.pregunta summary .mas svg { width: 18px; height: 18px }
.pregunta[open] summary .mas { transform: rotate(45deg); background: var(--salvia-osc); color: #fff }
.pregunta .respuesta { padding: 0 26px 24px; color: var(--tinta-2) }
.rejilla-preguntas { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 6vw, 80px); align-items: start }
.rejilla-preguntas .titular { position: sticky; top: 120px }

.articulos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px }
.articulo { display: flex; flex-direction: column; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio-g); overflow: hidden }
.articulo-imagen { aspect-ratio: 16 / 10; display: grid; place-items: center; color: var(--salvia-osc) }
.articulo-imagen svg { width: 34%; opacity: .5 }
.articulo-cuerpo { padding: 24px 26px 28px; display: flex; flex-direction: column; gap: 12px; flex: 1 }
.articulo-cuerpo h3 { font-size: 21px }
.articulo-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; color: var(--tinta-3); margin-top: auto; padding-top: 6px }
.categorias { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px }
.categorias li { padding: 9px 16px; border-radius: 999px; background: var(--papel); border: 1px solid var(--linea); font-size: 14.5px; font-weight: 500; color: var(--tinta-2) }
.categorias li:first-child { background: var(--bosque); border-color: var(--bosque); color: #fff }

.llamada { position: relative; overflow: hidden; background: var(--bosque); color: #eef0e6; border-radius: clamp(28px, 4vw, 48px); padding: clamp(40px, 7vw, 88px); display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: center }
.llamada::before { content: ""; position: absolute; width: 480px; height: 480px; right: -120px; top: -200px; border-radius: 50%; background: radial-gradient(circle, rgba(179, 216, 186, .35), transparent 65%) }
.llamada::after { content: ""; position: absolute; width: 360px; height: 360px; left: 30%; bottom: -260px; border-radius: 50%; background: radial-gradient(circle, rgba(220, 194, 138, .2), transparent 65%) }
.llamada > * { position: relative; z-index: 1 }
.llamada h2 { color: #fff }
.llamada p { color: #d0d5c2; font-size: 18px; margin-top: 16px }
.llamada .botones { justify-content: flex-end }
.llamada .antetitulo { color: #b3d8ba }

.pagina-cabecera { position: relative; overflow: hidden; padding: clamp(40px, 6vw, 72px) 0 clamp(48px, 7vw, 88px) }
.pagina-cabecera::before { content: ""; position: absolute; width: 560px; height: 560px; right: -160px; top: -220px; border-radius: 50%; background: radial-gradient(circle, rgba(207, 230, 212, .9), rgba(207, 230, 212, 0) 68%); pointer-events: none }
.pagina-cabecera > .contenedor { position: relative; z-index: 1 }
.pagina-cabecera h1 { font-size: clamp(38px, 5vw, 62px); letter-spacing: -.025em; font-weight: 350; max-width: 900px; font-variation-settings: "SOFT" 80, "opsz" 144 }
.pagina-cabecera .intro { font-size: 19px; max-width: 700px; margin-top: 20px }
.pagina-cabecera .botones { margin-top: 32px }
.cabecera-servicio { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 6vw, 80px); align-items: center }
.cabecera-servicio .arco { border-radius: var(--radio-g) var(--radio-g) var(--radio-g) 140px; aspect-ratio: 5 / 4 }
.migas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--tinta-3); margin-bottom: 26px }
.migas a { color: var(--tinta-3); text-decoration: none }
.migas a:hover { color: var(--salvia-osc) }
.migas svg { width: 14px; height: 14px }
.migas [aria-current] { color: var(--tinta-2); font-weight: 500 }

.situaciones { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px }
.situacion { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 20px 22px; background: var(--papel); border: 1px solid var(--linea); border-radius: 18px }
.situacion .punto { width: 30px; height: 30px; border-radius: 50%; background: var(--menta); color: var(--salvia-osc); display: grid; place-items: center }
.situacion .punto svg { width: 16px; height: 16px }
.situacion b { display: block; font-weight: 600; margin-bottom: 2px }
.situacion span { color: var(--tinta-2); font-size: 15.5px }

.pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: paso }
.paso { position: relative; padding: 28px 24px; background: var(--papel); border-radius: 24px; border: 1px solid var(--linea) }
.paso::before { counter-increment: paso; content: "0" counter(paso); display: block; font: 400 34px/1 var(--serif); color: var(--salvia); margin-bottom: 18px }
.paso h3 { font-size: 20px; margin-bottom: 8px }
.paso p { color: var(--tinta-2); font-size: 15.5px }

.urgencia { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; padding: 24px 28px; border-radius: 22px; background: var(--melocoton); color: #4a2e1f }
.urgencia svg { width: 26px; height: 26px; color: #a4502a }
.urgencia b { color: #3b2216 }
.urgencia a { color: #7a3a1c; font-weight: 700 }

.bloque-texto { max-width: 760px }
.bloque-texto h2 { margin-bottom: 22px }
.bloque-texto p { color: var(--tinta-2); font-size: 18px }
.lista-simple { display: grid; gap: 12px; margin: 18px 0 0 }
.lista-simple li { display: grid; grid-template-columns: auto 1fr; gap: 12px; color: var(--tinta-2) }
.lista-simple li svg { width: 20px; height: 20px; color: var(--salvia-osc); margin-top: 4px }
.columnas-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px }
.caja { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio-g); padding: clamp(26px, 4vw, 40px) }
.caja h3 { font-size: 26px; margin-bottom: 8px }
.caja > p { color: var(--tinta-2) }
.datos-clave { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px }
.dato { padding: 20px 22px; border-radius: 20px; background: var(--papel); border: 1px solid var(--linea) }
.dato small { display: block; font-size: 13px; color: var(--tinta-3); margin-bottom: 4px }
.dato b { font: 400 22px/1.2 var(--serif) }

.contacto-rejilla { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(28px, 5vw, 64px); align-items: start }
.vias { display: grid; gap: 14px }
.via { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; padding: 20px 22px; border-radius: 20px; background: var(--papel); border: 1px solid var(--linea); text-decoration: none; color: var(--tinta); transition: border-color .2s, box-shadow .2s }
a.via:hover { border-color: transparent; box-shadow: var(--sombra-s); color: var(--tinta) }
.via .icono-g { width: 48px; height: 48px; border-radius: 14px }
.via .icono-g svg { width: 22px; height: 22px }
.via small { display: block; font-size: 13.5px; color: var(--tinta-3) }
.via b { font-size: 17px; font-weight: 600; overflow-wrap: anywhere }
.formulario { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio-g); padding: clamp(26px, 4vw, 44px); box-shadow: var(--sombra-s) }
.formulario h2 { font-size: 32px; margin-bottom: 8px }
.formulario > p { color: var(--tinta-2) }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px }
.campo { display: grid; gap: 7px }
.campo.entero { grid-column: 1 / -1 }
.campo label { font-size: 14.5px; font-weight: 600 }
.campo input, .campo textarea { width: 100%; font: inherit; font-size: 16px; color: var(--tinta); background: var(--crema); border: 1.5px solid var(--linea); border-radius: 14px; padding: 13px 15px; transition: border-color .2s, box-shadow .2s, background .2s }
.campo textarea { min-height: 140px; resize: vertical }
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--salvia); background: #fff; box-shadow: 0 0 0 4px rgba(134, 171, 145, .22) }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }
.aviso-salud { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--aviso); color: #5d4a12; font-size: 14.5px }
.aviso-salud svg { width: 20px; height: 20px; margin-top: 1px }
.consentimiento { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; font-size: 15px; color: var(--tinta-2) }
.consentimiento input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--salvia-osc) }
.info-basica { grid-column: 1 / -1; font-size: 13px; line-height: 1.55; color: var(--tinta-3); margin: 0 }
.formulario .boton { grid-column: 1 / -1; justify-self: start }
.form-respuesta { grid-column: 1 / -1; padding: 14px 16px; border-radius: 14px; background: var(--menta); color: var(--bosque); font-size: 15px; font-weight: 500 }
.mapa { position: relative; aspect-ratio: 16 / 7; border-radius: var(--radio-g); overflow: hidden; background: linear-gradient(135deg, var(--menta), var(--cielo)); display: grid; place-items: center; text-align: center; color: var(--salvia-osc) }
.mapa svg.fondo-mapa { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5 }
.mapa-centro { position: relative; display: grid; justify-items: center; gap: 12px; padding: 20px }
.mapa-centro .icono-g { background: var(--papel); box-shadow: var(--sombra-s) }
.mapa-centro p { font-size: 15px; color: var(--tinta-2); max-width: 420px }

.legal { max-width: 820px }
.legal h2 { font-size: 28px; margin: 44px 0 14px }
.legal h2:first-child { margin-top: 0 }
.legal p, .legal li { color: var(--tinta-2) }
.legal ul { display: grid; gap: 8px; margin: 0 0 1em; padding-left: 20px; list-style: disc }
.tabla-legal { width: 100%; border-collapse: separate; border-spacing: 0; margin: 8px 0 24px; font-size: 15px; background: var(--papel); border: 1px solid var(--linea); border-radius: 18px; overflow: hidden }
.tabla-legal th, .tabla-legal td { text-align: left; vertical-align: top; padding: 14px 16px; border-top: 1px solid var(--linea) }
.tabla-legal thead th { border-top: 0; background: var(--menta); font-weight: 600; color: var(--bosque) }
.tabla-legal td { color: var(--tinta-2) }
.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch }

.pie { background: var(--bosque); color: #d5d8c8; margin-top: clamp(64px, 9vw, 112px); padding: clamp(56px, 7vw, 88px) 0 28px; font-size: 15.5px }
.pie a { color: #eef0e6; text-decoration: none }
.pie a:hover { color: #fff; text-decoration: underline }
.pie-rejilla { display: grid; grid-template-columns: 1.4fr 1fr 1fr .8fr; gap: 40px }
.pie h2 { font: 600 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #b3d8ba; margin-bottom: 18px }
.pie ul { display: grid; gap: 10px }
.pie .marca { color: #fff; margin-bottom: 18px }
.pie .marca-signo { width: 54px; height: 54px; padding: 6px; border-radius: 16px; background: var(--crema) }
.pie .marca-texto small { color: #aeb3a0 }
.pie-marca p { max-width: 340px }
.pie-colegiado { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .07); font-size: 13.5px; color: #e3e6d8 }
.pie-colegiado svg { width: 16px; height: 16px; color: #b3d8ba }
.pie-contacto li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start }
.pie-contacto svg { width: 18px; height: 18px; color: #b3d8ba; margin-top: 3px }
.pie-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 24px; margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 14px; color: #aeb3a0 }
.pie-legal ul { display: flex; flex-wrap: wrap; gap: 8px 22px }
.pie-legal button { background: none; border: 0; padding: 0; color: #eef0e6; font-size: 14px }
.pie-legal button:hover { color: #fff; text-decoration: underline }

.flotante-wa { position: fixed; right: 22px; bottom: 22px; z-index: 45; width: 58px; height: 58px; border-radius: 50%; background: var(--salvia-osc); color: #fff; display: grid; place-items: center; box-shadow: 0 14px 30px -10px rgba(54, 61, 43, .6); transition: transform .2s, background .2s }
.flotante-wa:hover { transform: scale(1.06); background: var(--bosque); color: #fff }
.flotante-wa svg { width: 28px; height: 28px }

.cookies { position: fixed; left: 20px; bottom: 20px; z-index: 60; width: min(440px, calc(100% - 40px)); background: var(--papel); border: 1px solid var(--linea); border-radius: 22px; box-shadow: var(--sombra); padding: 22px 22px 20px; font-size: 14.5px; color: var(--tinta-2) }
.cookies[hidden] { display: none }
.cookies b { display: block; font: 500 19px/1.2 var(--serif); color: var(--tinta); margin-bottom: 8px }
.cookies-config { display: grid; gap: 10px; margin: 14px 0 4px; padding: 14px; background: var(--crema); border-radius: 14px }
.cookies-config[hidden] { display: none }
.cookies-config label { display: flex; gap: 10px; align-items: center }
.cookies-config input { width: 18px; height: 18px; accent-color: var(--salvia-osc) }
.cookies-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px }
.cookies-botones .boton { min-height: 44px; padding: 0 16px; font-size: 15px }
.boton-cookies { background: var(--bosque); color: #fff }
.boton-cookies:hover { background: var(--salvia-osc); color: #fff }
.cookies-enlace { grid-column: 1 / -1; background: none; border: 0; padding: 6px; font-size: 14px; font-weight: 600; color: var(--salvia-osc); text-decoration: underline; text-underline-offset: 3px }
.cookies-enlace[hidden] { display: none }

mark.pendiente { background: var(--marca); color: #3d3200; padding: 0 .25em; border-radius: 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; box-shadow: 0 0 0 1px rgba(160, 120, 0, .25) }
.sin-marcas mark.pendiente { background: none; box-shadow: none; padding: 0; color: inherit }
.vista-previa { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 70; display: flex; align-items: center; gap: 12px; padding: 7px 7px 7px 16px; border-radius: 999px; background: #2a2a2a; color: #f2f2f2; font-size: 13.5px; box-shadow: 0 10px 28px -10px rgba(0, 0, 0, .5); white-space: nowrap }
.vista-previa::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--marca) }
.vista-previa button { border: 0; border-radius: 999px; background: #fff; color: #222; padding: 6px 12px; font-size: 13px; font-weight: 600 }

.js .aparece { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease }
.js .aparece.visible { opacity: 1; transform: none }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after { transition: none !important; animation: none !important }
  .js .aparece { opacity: 1; transform: none }
}

@media (max-width: 1080px) {
  .pie-rejilla { grid-template-columns: 1fr 1fr }
}

@media (max-width: 1120px) {
  .menu-boton { display: block }
  .menu {
    position: fixed; inset: 84px 0 0; z-index: 39; flex-direction: column; align-items: stretch; gap: 20px;
    padding: 20px 20px 32px; background: var(--crema); overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s, transform .2s, visibility .2s;
  }
  .menu-abierto .menu { opacity: 1; visibility: visible; transform: none }
  .menu-abierto body { overflow: hidden }
  .menu > ul { flex-direction: column; align-items: stretch; gap: 2px }
  .menu > ul > li > a, .desplegable > button { width: 100%; justify-content: space-between; padding: 16px 12px; font-size: 19px; border-bottom: 1px solid var(--linea); border-radius: 0 }
  .submenu { position: static; min-width: 0; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: transparent; padding: 6px 0 10px; display: none }
  .desplegable > button[aria-expanded="true"] + .submenu { display: block }
  .menu-cta { min-height: 54px; font-size: 17px }
}

@media (max-width: 960px) {
  .portada-rejilla, .enfoque, .dos-col, .cabecera-servicio, .contacto-rejilla, .rejilla-preguntas, .llamada { grid-template-columns: 1fr }
  .rejilla-preguntas .titular { position: static }
  .retrato { margin: 8px auto 0; max-width: 400px }
  .tf-1 { left: -8px }
  .tf-2 { right: -8px }
  .servicio-tarjeta, .servicio-tarjeta.ancha { grid-column: span 3 }
  .consultas, .articulos { grid-template-columns: 1fr 1fr }
  .pasos { grid-template-columns: 1fr 1fr }
  .llamada .botones { justify-content: flex-start }
  .datos-clave { grid-template-columns: 1fr 1fr }
}

@media (max-width: 640px) {
  body { font-size: 16.5px }
  .contenedor { width: calc(100% - 32px) }
  .cabecera-fila { min-height: 72px }
  .menu { inset: 72px 0 0 }
  .marca-texto b { font-size: 19px }
  .marca-texto small { font-size: 11.5px }
  .marca-signo { width: 40px; height: 40px }
  .servicios, .consultas, .articulos, .pasos, .situaciones, .columnas-2, .datos-clave, .campos { grid-template-columns: 1fr }
  .servicio-tarjeta, .servicio-tarjeta.ancha { grid-column: auto; padding: 26px }
  .tarjeta-flotante { position: relative; left: auto; right: auto; top: auto; bottom: auto; margin-top: 12px }
  .tf-2 { display: none }
  .tarifa { grid-template-columns: 1fr; padding: 20px 22px }
  .precio { text-align: left }
  .tarifas-nota { padding: 16px 22px }
  .botones .boton { flex: 1 1 100% }
  .pie-rejilla { grid-template-columns: 1fr }
  .vista-previa { bottom: 86px; font-size: 12.5px }
  .vp-extra { display: none }
  .flotante-wa { right: 16px; bottom: 16px; width: 54px; height: 54px }
  .cookies { left: 12px; bottom: 12px; width: calc(100% - 24px) }
  .pregunta summary { padding: 18px 20px; font-size: 16.5px }
  .pregunta .respuesta { padding: 0 20px 20px }
}

.servicios.otros { grid-template-columns: repeat(4, 1fr) }
.servicios.otros .servicio-tarjeta { grid-column: auto; padding: 26px }
.servicios.otros .servicio-tarjeta h3 { font-size: 20px }
.servicios.otros .servicio-tarjeta p { font-size: 15px }
@media (max-width: 960px) { .servicios.otros { grid-template-columns: 1fr 1fr } }
@media (max-width: 640px) { .servicios.otros { grid-template-columns: 1fr } }

.motivos { border: 0; padding: 0; margin: 0; min-width: 0 }
.motivos legend { font-size: 14.5px; font-weight: 600; padding: 0; margin-bottom: 8px }
.motivos > div { display: flex; flex-wrap: wrap; gap: 10px }
.motivo { position: relative; cursor: pointer }
.motivo input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer }
.motivo span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--linea); background: var(--crema); font-size: 15px; font-weight: 500; color: var(--tinta-2); transition: background .2s, border-color .2s, color .2s }
.motivo input:checked + span { background: var(--salvia-osc); border-color: var(--salvia-osc); color: #fff }
.motivo input:focus-visible + span { outline: 3px solid var(--salvia); outline-offset: 3px }

.arco-retrato .retrato-foto { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); height: 94%; width: auto; max-width: none; object-fit: contain }
.cabecera-servicio .arco-retrato { aspect-ratio: 4 / 5; border-radius: 999px 999px var(--radio-g) var(--radio-g); width: 100%; max-width: 400px; margin-left: auto }
.trayectoria { list-style: none; margin: 26px 0 0; padding: 0 0 0 4px; display: grid; border-left: 2px solid var(--menta-2) }
.trayectoria li { position: relative; padding: 0 0 22px 24px }
.trayectoria li:last-child { padding-bottom: 0 }
.trayectoria li::before { content: ""; position: absolute; left: -8px; top: 5px; width: 14px; height: 14px; border-radius: 50%; background: var(--crema); border: 2px solid var(--salvia) }
.trayectoria b { display: block; font: 600 12.5px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--salvia-osc); margin-bottom: 4px }
.trayectoria span { display: block; color: var(--tinta-2); font-size: 16px; line-height: 1.6 }
@media (max-width: 960px) { .cabecera-servicio .arco-retrato { margin: 8px auto 0 } }

.foto-ancha { border-radius: var(--radio-g); overflow: hidden; aspect-ratio: 16 / 9; box-shadow: var(--sombra) }
.foto-ancha img, .foto-lateral img { width: 100%; height: 100%; object-fit: cover }
.foto-lateral { border-radius: var(--radio-g) var(--radio-g) var(--radio-g) 120px; overflow: hidden; aspect-ratio: 4 / 5; max-width: 440px; margin-left: auto; box-shadow: var(--sombra) }
.vias-anchas { grid-template-columns: repeat(2, 1fr) }
@media (max-width: 960px) { .foto-lateral { margin: 0 auto } }
@media (max-width: 640px) { .vias-anchas { grid-template-columns: 1fr } }

.fases { position: relative; display: grid; gap: 28px; max-width: 980px; margin: 0 auto }
.fases::before { content: ""; position: absolute; left: 50%; top: 10px; bottom: 10px; width: 3px; margin-left: -1.5px; border-radius: 3px; background: var(--menta-2) }
.fase { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: start }
.fase-cab { display: flex; align-items: center; justify-content: flex-end; gap: 16px; text-align: right; padding-top: 18px }
.fase-cab h3 { font-size: 24px }
.fase-cab small { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); margin-top: 4px }
.fase-num { position: absolute; left: 50%; top: 18px; width: 44px; height: 44px; margin-left: -22px; border-radius: 50%; background: var(--salvia-osc); color: #fff; display: grid; place-items: center; font: 400 20px/1 var(--serif); box-shadow: 0 0 0 8px var(--crema) }
.fase-tarjeta { background: var(--papel); border: 1px solid var(--linea); border-radius: 24px; padding: 24px 26px; box-shadow: var(--sombra-s) }
.fase-tarjeta b { display: block; font: 400 21px/1.25 var(--serif); margin-bottom: 12px }
.fase-tarjeta ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none }
.fase-tarjeta li { position: relative; padding-left: 22px; color: var(--tinta-2); font-size: 15.5px; line-height: 1.5 }
.fase-tarjeta li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--salvia) }
.fase:nth-child(even) .fase-cab { order: 2; justify-content: flex-start; text-align: left }
.fase:nth-child(even) .fase-tarjeta { order: 1 }

.historia { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 6vw, 80px); align-items: start }
.historia .foto-lateral { position: sticky; top: 120px; margin: 0 }
.historia-texto h2 { margin-bottom: 22px }
.historia-texto h3 { font-size: 24px; margin: 30px 0 12px }
.historia-texto p { color: var(--tinta-2); font-size: 18px }
.tres-cajas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px }
.tres-cajas .caja p { font-size: 16px }
.logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 0; padding: 0; list-style: none }
.logos li { flex: 0 0 calc((100% - 6 * 14px) / 7); display: grid; place-items: center; height: 116px; padding: 18px 22px; border-radius: 20px; background: #fff; border: 1px solid var(--linea) }
.logos img { width: auto; height: auto; max-width: 100%; max-height: 72px; object-fit: contain }
.via-destacada { grid-column: 1 / -1 }
.via-logo { width: 48px; height: 48px; border-radius: 14px; overflow: hidden; display: block }
.via-logo img { width: 100%; height: 100%; display: block }

@media (max-width: 1100px) { .logos li { flex-basis: calc((100% - 4 * 14px) / 5) } }
@media (max-width: 960px) {
  .historia, .tres-cajas { grid-template-columns: 1fr }
  .historia .foto-lateral { position: static; max-width: 380px }
}
@media (max-width: 760px) {
  .logos { gap: 10px }
  .logos li { flex-basis: calc((100% - 10px) / 2); height: 96px; padding: 14px 16px }
  .logos img { max-height: 58px }
  .fases::before { left: 21px }
  .fase { grid-template-columns: 1fr; gap: 12px; padding-left: 60px }
  .fase-num { left: 0; margin-left: 0; top: 0 }
  .fase-cab, .fase:nth-child(even) .fase-cab { order: 0; justify-content: flex-start; text-align: left; padding-top: 4px }
  .fase:nth-child(even) .fase-tarjeta { order: 1 }
  .fase-tarjeta { padding: 20px }
}