/* Las tipografías se sirven desde este mismo dominio: van en css/fuentes.css,
   que cada página carga con su propio <link> (lo genera descargar_fuentes.ps1).
   Antes había aquí un @import a fonts.googleapis.com: se quitó porque mandaba
   la IP del visitante a Google antes de que aceptara las cookies. */

:root{
  --teal: #00c4cc;
  --teal-dark: #039199;
  /* Color de las olas: el de la cabecera de las páginas interiores (los tres
     path se pintan con él a 0.33 / 0.66 / 1 de opacidad) y el del círculo claro
     que va detrás de las fotos redondas. Lo pinta el CSS, no el atributo fill
     del SVG, para no tenerlo escrito a mano en cada página. */
  --wave: #d4eced;
  --teal-pale: #e6f8f9;
  /* El amarillo del logo es #ddc556 (muestreado del propio logo.png, es un color
     plano). Este es el mismo, tirado un poco a dorado para que se vea mejor:
     idéntica saturación (67%), 4° más cálido (45° en vez de 49°) y 6% más
     oscuro. Sube de 1,7:1 a 2:1 sobre blanco, así que sigue sin valer para
     texto; se usa como acento (aros, barritas, asteriscos). Con la tinta encima
     da 6,5:1. */
  --yellow: #d8b13c;
  --ink: #26313a;
  /* Errores del formulario */
  --error: #c4453d;
  --error-ink: #8d2b26;
  --error-bg: #fdeceb;
  /* Verde azulado oscuro del «gracias por contactar»: 7:1 sobre --teal-pale.
     (Se probó en coral y se descartó: daba lugar a equívocos con el aviso de
     error, 17 agosto 2026.) */
  --ok-ink: #0b5c60;
  --ink-soft: #5c6b73;
  --bg: #ffffff;
  --bg-soft: #f4f9fa;
  --bg-panel: #f5fafb;
  --border: #e2eaec;
  --serif: 'Lora', Georgia, serif;
  --sans: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius: 8px;
  --container: 1160px;
  /* Ancho de lectura de las páginas legales (aviso legal, privacidad, cookies).
     El bloque sigue ocupando el .container entero: esto limita solo el texto. */
  --legal-medida: 1022px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.2;margin:0 0 .5em;color:var(--ink);}
p{margin:0 0 1.1em;}
/* El aire lateral de todo el sitio. De 721 para arriba son 36px: a 820 (iPad
   Air) los 24 de antes dejaban el texto casi tan pegado al borde como en el
   móvil (Mariola, 26 agosto 2026). En móvil se quedan los 24, que ahí sí
   estaban bien. Ojo: con box-sizing:border-box el padding se come el ancho de
   contenido, así que en escritorio esto no separa del borde —ya hay margen de
   sobra por el centrado— sino que estrecha el contenido de 1112 a 1088. */
.container{max-width:var(--container);margin:0 auto;padding:0 36px;}
@media (max-width:720px){
  .container{padding:0 24px;}
}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}

/* Skip link */
.skip-link{position:absolute;left:-999px;top:0;background:var(--teal);color:#fff;padding:10px 16px;z-index:999;}
.skip-link:focus{left:12px;top:12px;}

/* Topbar */
.topbar{background:#fff;color:var(--ink-soft);font-size:.85rem;border-bottom:1px solid var(--border);}
.topbar .container{display:flex;align-items:center;justify-content:space-between;padding-top:10px;padding-bottom:10px;box-sizing:border-box;}
.topbar-info{display:flex;align-items:center;gap:22px;color:#9aa7ad;}
.topbar-info a{color:#9aa7ad;display:inline-flex;align-items:center;gap:7px;}
.topbar-info a:hover{color:var(--teal-dark);}
.topbar-info span{display:inline-flex;align-items:center;gap:7px;}
.topbar-social{display:flex;gap:16px;}
.topbar-social a{color:#9aa7ad;display:inline-flex;align-items:center;}
.topbar-social a:hover{color:var(--teal-dark);}
.icon{width:18px;height:18px;flex-shrink:0;display:block;}
.icon-brand{width:20px;height:20px;}
.material-symbols-outlined.msi{
  display:flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  font-size:20px;
  line-height:1;
  font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 20;
}
.material-symbols-outlined.msi.msi-mail{width:22px;height:22px;font-size:22px;}

/* Header / nav */
/* Sombra en vez de línea, igual que el original (The7: .masthead.shadow-decoration). */
.site-header{position:sticky;top:0;background:#fff;z-index:50;box-shadow:0 0 15px 1px rgba(0,0,0,.07);}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding-top:14px;padding-bottom:14px;gap:24px;box-sizing:border-box;}
.logo{display:flex;align-items:center;color:var(--ink);min-width:0;}
/* Con height fija, cuando la cabecera se queda sin sitio el flex encoge el ancho
   del <img> pero no el alto, y el logo salía aplastado (a 375px se veía a
   244×50 en vez de 280×50). Con los dos "auto" y los dos "max-" encoge
   proporcionado. */
.logo img{height:auto;width:auto;max-height:50px;max-width:100%;display:block;}

.main-nav{display:flex;align-items:center;gap:2px;}
.main-nav > ul{display:flex;align-items:center;gap:4px;flex-wrap:nowrap;}
.main-nav > ul > li{position:relative;}
.main-nav > ul > li > a{display:flex;align-items:center;gap:6px;padding:10px 14px;font-weight:500;font-size:.98rem;line-height:1.3;color:#4a5560;border-radius:6px;transition:color .15s;position:relative;white-space:nowrap;}
.main-nav > ul > li > a:hover{color:var(--teal-dark);}
.main-nav > ul > li.current > a{color:var(--teal-dark);font-weight:700;}
.main-nav > ul > li.current > a::before{content:'';position:absolute;left:14px;right:14px;bottom:4px;height:2px;background:var(--teal);border-radius:3px;}
.main-nav .sub-menu{display:none;position:absolute;left:0;top:100%;background:#fff;min-width:220px;box-shadow:0 12px 28px rgba(20,40,45,.12);border-radius:10px;padding:8px;border:1px solid var(--border);}
@media (min-width:1181px){
  .main-nav li:hover > .sub-menu,
  .main-nav li:focus-within > .sub-menu{display:block;}
}
.main-nav .sub-menu li a{display:block;padding:10px 12px;border-radius:6px;font-size:.92rem;white-space:nowrap;}
.main-nav .sub-menu li a:hover{background:var(--teal-pale);color:var(--teal-dark);}
.main-nav .has-children > a::after{content:'▾';font-size:1.3em;line-height:1;opacity:.6;flex-shrink:0;}

.nav-toggle{display:none;align-items:center;justify-content:center;background:none;border:0;cursor:pointer;padding:0;width:44px;height:44px;border-radius:12px;color:var(--ink);flex-shrink:0;transition:background .15s,color .15s;}
.nav-toggle:hover{background:var(--teal-pale);color:var(--teal-dark);}
.nav-toggle svg{width:26px;height:26px;display:block;}
.nav-toggle svg line{stroke:currentColor;stroke-width:2;stroke-linecap:round;transition:transform .25s ease;transform-origin:center;}
/* el trazo de abajo es más corto: da un aire menos rígido que las tres barras iguales */
.nav-toggle:hover svg line:nth-child(3){transform:translateX(3px);}

.nav-close{display:none;}

.cta-nav-btn{background:var(--teal);color:#fff !important;padding:10px 20px !important;border-radius:999px !important;font-weight:700 !important;}
.cta-nav-btn:hover{background:var(--teal-dark);color:#fff !important;}

/* Hero */
.hero{position:relative;overflow:hidden;background:var(--bg-soft);padding:72px 0 190px;text-align:left;}
.hero.has-photo{background-size:cover;background-position:center;}
.hero-inner{max-width:930px;}
.hero-title{font-family:var(--sans);font-weight:700;font-size:17px;letter-spacing:.12em;text-transform:uppercase;color:#00C4CC;line-height:1.4;margin-bottom:.9em;}
.hero-desc{font-family:var(--serif);font-weight:500;font-size:clamp(1.15rem,.9rem + .8vw,1.5rem);line-height:1.35;color:var(--ink);max-width:700px;margin-bottom:1.2em;}
.hero-quote{font-family:var(--serif);font-weight:500;font-style:italic;font-size:clamp(1.8rem,1rem + 3vw,3.125rem);line-height:1.25;color:#222;margin:0;white-space:normal;}
/* En tablet la frase se corta siempre por "créalo": con el ancho suelto unas
   veces cabía entera y otras no. Fuera de ese tramo va como texto normal. */
.quote-end{display:inline;}
.quote-end::before{content:' ';}
@media (min-width:721px) and (max-width:1180px){
  .quote-end{display:block;}
  .quote-end::before{content:none;}
}
.hero-quote cite{display:block;font-style:normal;font-family:var(--sans);font-weight:400;color:var(--ink-soft);font-size:clamp(1rem,.8rem + .5vw,1.3125rem);margin-top:.5em;}

/* ── La frase, 20px más abajo entre 641 y 1400 ────────────────────────
   En esa franja «oportuno,» caía justo sobre la caseta oscura del muelle y no
   se leía (Mariola, 25 agosto 2026). Medido sobre los píxeles de muelle5.jpg,
   traduciendo el cover a coordenadas de la foto: el brillo medio del fondo bajo
   el peor tramo de la frase pasa de 150 a 192 sobre 255. A 900px, que era lo
   peor, de 150 a 194.
   Va con position:relative + top y NO con margen: el margen empujaría el
   contenido y el hero crecería, que es lo que pasaba al tocarlo a mano; la foto
   es el fondo del hero, así que al crecer se recolocaba entera. Comprobado: la
   altura del .hero no cambia en ninguno de los anchos.
   **Son 20 y no más porque con 20 la firma «G.B. Shaw» NO toca la onda blanca:
   queda a 1px de ella.** Con 40 se metía 19px dentro y Mariola pidió dejarlo en
   20 (25 agosto 2026). Es decir, 20 es el máximo posible: no subirlo.
   La franja tiene los dos topes medidos:
   - Por debajo de 641 BAJARLA EMPEORA (a 640 el fondo cae de 196 a 168, y a
     375 de 188 a 151): ahí la frase se sale de la caseta por la izquierda y
     bajarla la mete en la sombra del agua. Por eso el corte es el mismo 640
     que ya usaba el hero.
   - Por encima de 1400 no hace falta: el fondo ya está en 209. */
@media (min-width:641px) and (max-width:1400px){
  .hero-quote{position:relative;top:20px;}
}
.hero-wave{position:absolute;left:0;width:100%;bottom:-1px;height:170px;line-height:0;overflow:hidden;transform:rotate(180deg);}
.hero-wave svg{display:block;width:150%;height:100%;}
@media (max-width:640px){
  .hero{padding:56px 0 110px;}
  .hero-wave{height:90px;}
}

.feature-strip{background:#fff;padding:16px 0;}
.feature-strip ul{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.feature-strip li{display:flex;align-items:center;gap:14px;text-align:left;background:#fff;border:1px solid var(--border);border-radius:14px;padding:16px 18px;box-shadow:0 6px 20px rgba(20,40,45,.05);transition:transform .2s ease,box-shadow .2s ease;}
.feature-strip li:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(20,40,45,.09);}
/* Mismo aro dorado que las fichas de sobre-mi y de contacto: círculo blanco
   con aro de 2,5px. Si se cambia el font-size del icono, revisar el grosor. */
.feature-icon{position:relative;width:42px;height:42px;border-radius:50%;background:#fff;border:2.5px solid var(--yellow);flex-shrink:0;}
.feature-icon .material-symbols-outlined{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--yellow);font-size:22px;line-height:1;}
.feature-strip li > span:last-child{font-family:var(--sans);font-weight:700;font-size:.95rem;color:var(--ink);line-height:1.35;}

/* ─── Cabecera de página con ondas (plantilla de páginas interiores) ───────
   Clonada del original: es el mismo SVG de 3 capas que el hero de la portada,
   pero SIN girar y colocado arriba de la sección, sobre fondo blanco.
   Relleno #d4eced con opacidades 0.33 / 0.66 / 1: al superponerse dejan el
   título sobre la franja oscura y el subtítulo sobre la clara.
   Medidas copiadas del original (Elementor): ancho 263%, alto 205px, centrado.
   OJO: overflow:hidden es obligatorio; sin él, el 263% provoca scroll lateral. */
/* EL HUECO BAJO LA CABECERA (26 agosto 2026, regla de Mariola)
   Entre lo ultimo que se ve de la cabecera y lo primero que viene debajo
   (la foto del titulo o la primera tarjeta) tiene que haber SIEMPRE el mismo
   hueco. Lo que cambia de una pagina a otra es desde donde se mide:

   - Cabecera corta (blog, formacion, contacto, las legales, las de terapia sin
     cita): lo mas bajo que se ve es la propia onda, y se mide desde ella.
   - Cabecera larga (psicoterapia, ansiedad, depresion, estres, crisis, y casi
     todas en movil, donde el subtitulo se parte en 3 o 4 lineas): lo mas bajo
     es el texto, y se mide desde el texto.

   Se resuelve con dos medidas y nada mas:

   - min-height = lo que mide el banner de blog, que es LA REFERENCIA de todo el
     sitio: 214 / 170 / 140 segun el corte. Mientras el texto no llegue tan
     abajo, el banner mide eso exacto en todas las paginas, asi que el hueco
     desde la onda es el mismo en todas.
   - padding-bottom del .container = 10 / 8 / 7. Cuando el texto SI baja mas
     que la onda, el banner crece con el y el hueco pasa a ser
     padding-bottom + los 28 de .page-banner + .section = 38 / 36 / 35, que es
     exactamente el hueco que ya tenia blog.

   OJO CON DONDE ACABA LA ONDA. No acaba donde se ve cortarse el palido fuerte
   (la capa de opacidad 0.66, a 166px del borde de arriba del banner), sino
   ABAJO DEL TODO de su bloque de 205px, que es donde se corta la capa de 0.33.
   Esa capa es #d4eced al 33% sobre blanco, casi invisible en una captura, pero
   en pantalla Mariola la ve y mide desde ahi. La diferencia entre las dos
   lecturas son 38px, o sea el hueco entero: si se toma la equivocada salen
   valores del doble y las paginas con cita quedan descuadradas.

   NO poner display:flex con justify-content:flex-end aqui (lo estuvo del 25 al
   26 de agosto). Al pegar el contenido abajo, el sobrante del min-height se iba
   arriba y el texto de blog bajaba 18px: la pagina de referencia dejaba de
   valer como referencia. Con el bloque normal, el sobrante se queda debajo del
   texto, que es justo el hueco que se busca, y el titulo arranca a la misma
   altura (padding-top) en las 19 paginas.

   min-height tiene ademas la funcion de siempre: sin el, las paginas de solo
   titulo (las legales) cortaban la onda en plano, porque aqui hace falta
   overflow:hidden por el 263% de ancho y la onda no puede salirse por abajo
   como en el original. */
.page-banner{position:relative;background:#fff;overflow:hidden;min-height:214px;}
.page-banner-wave{position:absolute;top:-1px;left:50%;transform:translateX(-50%);width:263%;height:205px;line-height:0;pointer-events:none;}
.page-banner-wave svg{display:block;width:100%;height:100%;}
/* El color de las tres capas lo pone el CSS, no un fill="#d4eced" repetido en
   cada página: así se cambia en un sitio. Las opacidades (0.33 / 0.66 / 1) sí
   van en el SVG, porque cada path lleva la suya. */
.page-banner-wave path{fill:var(--wave);}
/* width:100%: el .container lleva max-width:1160px + margin:0 auto, y eso basta
   mientras .page-banner sea un bloque normal. Se dejo puesto de cuando fue flex
   (25-26 agosto 2026), porque un elemento flex con margenes automaticos se
   encoge a su contenido y «Aviso legal» salia en un container de 284px
   centrado. Es la red de seguridad por si alguien vuelve a hacerlo flex. */
.page-banner .container{position:relative;z-index:1;width:100%;padding-top:50px;padding-bottom:10px;}
.page-banner h1{font-size:48px;line-height:1.2;color:#222;margin:0 0 20px;}
.page-banner h1:last-child{margin-bottom:0;}
.page-banner-sub{font-family:'Nunito Sans',var(--sans);font-weight:400;font-size:30px;line-height:1.2;color:#222;margin:0;}
/* Autoría de la cita, cuando la página lleva una (18px en el original, 20px por
   debajo del subtítulo). */
.page-banner-cite{font-family:'Nunito Sans',var(--sans);font-weight:400;font-size:18px;line-height:1;color:#222;margin:20px 0 0;}
/* Los 28px son la mitad de abajo del hueco: el banner pone el resto (su
   padding-bottom o el sobrante de su min-height). Van en una sola regla para
   las 19 paginas con onda, no pagina a pagina; .section-legal pone los mismos
   28 por su cuenta. Si hay que cambiar el aire bajo la onda NO se toca aqui,
   se tocan el min-height y el padding-bottom del banner a la vez. */
.page-banner + .section:not(.section-legal){padding-top:28px;}
@media (max-width:900px){
  .page-banner{min-height:170px;}
  .page-banner-wave{height:163px;}
  .page-banner .container{padding-top:40px;padding-bottom:8px;}
  .page-banner h1{font-size:38px;margin-bottom:16px;}
  .page-banner-sub{font-size:24px;}
  .page-banner-cite{font-size:16px;margin-top:16px;}
}
@media (max-width:720px){
  .page-banner{min-height:140px;}
  .page-banner-wave{height:134px;}
  .page-banner .container{padding-top:34px;padding-bottom:7px;}
  .page-banner h1{font-size:30px;margin-bottom:12px;}
  .page-banner-sub{font-size:20px;}
  .page-banner-cite{font-size:15px;margin-top:12px;}
  /* 28px tambien en movil: el hueco lo reparten esta regla y el banner. */
  .page-banner + .section:not(.section-legal){padding-top:28px;}
}

/* (La antigua .page-hero gris se ha eliminado: las 13 páginas usan ya la
   cabecera de ondas .page-banner.) */

/* Encabezados del cuerpo de las páginas interiores. Sin esto se quedan con el
   tamaño por defecto del navegador (24 y 18,7px), que no es el del original:
   allí estos títulos de sección van a 22px. */
.page-content h2{font-size:22px;}
.page-content h3{font-size:19px;}

/* Cita destacada para el cierre de una página interior. Misma caja que la de
   "Sobre mí" (.about-quote): fondo --bg-panel y comilla dorada. La autoría va
   en <cite>, en gris: --ink-soft, no dorado, que a ese tamaño no llega a
   4,5:1. */
.page-quote{margin:36px 0 0;background:var(--bg-panel);border:1px solid var(--border);border-radius:16px;padding:30px 34px;}
.page-quote::before{content:'\201C';display:block;font-family:var(--serif);font-weight:500;font-size:76px;line-height:.8;height:42px;color:var(--yellow);}
.page-quote p{font-family:var(--serif);font-weight:500;font-size:22px;line-height:1.45;color:var(--ink);margin:0;}
.page-quote cite{display:block;margin-top:14px;font-style:normal;font-size:15px;font-weight:700;color:var(--ink-soft);}
@media (max-width:720px){
  .page-quote{padding:24px 20px;border-radius:14px;}
  .page-quote::before{font-size:60px;height:34px;}
  .page-quote p{font-size:19px;}
}

/* Sections */
.section{padding:64px 0;}
.section-soft{background:var(--bg-soft);}
.section-title{font-size:clamp(1.6rem,3vw,2.1rem);margin-bottom:.35em;}
.section-kicker{font-family:var(--sans);text-transform:uppercase;letter-spacing:.1em;font-size:.75rem;color:var(--teal-dark);font-weight:700;margin-bottom:10px;display:block;}

.bio-grid{display:grid;grid-template-columns:420px 1fr;gap:56px;align-items:center;}
/* Foto circular con el círculo pálido desplazado por detrás (el mismo efecto
   que el retrato de sobre-mi.html). Nada de overflow:hidden en el contenedor:
   recortaría el círculo de detrás; el redondeo lo lleva la propia <img>. */
.bio-photo{position:relative;width:100%;aspect-ratio:1/1;}
/* Dos sombras superpuestas, con los mismos valores que el retrato de
   sobre-mi.html: las dos del tamaño de la foto y por la misma zona
   (abajo-derecha), pero con ÁNGULOS distintos — la clara cae casi en vertical
   (65°) y la oscura casi horizontal (23°). Se probó a achicar la oscura para
   que la clara asomara también en el lateral y quedaba peor: van las dos
   iguales. La clara va en el color de la ola más oscura de la cabecera de las
   páginas interiores, no en --teal-pale, que se quedaba demasiado claro. */
.bio-photo::before,.bio-photo::after{content:'';position:absolute;border-radius:50%;}
.bio-photo::before{top:19px;left:9px;right:-9px;bottom:-19px;background:var(--wave);}
.bio-photo::after{top:5px;left:12px;right:-12px;bottom:-5px;background:var(--teal-dark);}
.bio-photo img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;border-radius:50%;}
.bio-grid .btn{margin-top:8px;}
.bio-name{font-family:var(--sans);font-weight:700;font-size:17px;letter-spacing:.1em;text-transform:uppercase;line-height:1.4;color:#00C4CC;margin-bottom:.8em;}
/* Es un <p>, no un encabezado: hace de subtítulo de .bio-name, no abre sección.
   El margin va completo porque el <p> traería 1em por arriba del navegador. */
.bio-role{font-family:var(--serif);font-weight:500;font-style:normal;font-size:25px;line-height:1.35;color:var(--ink);margin:0 0 1em;}
.bio-text{font-family:'Nunito Sans',var(--sans);font-weight:300;font-size:18px;line-height:26px;color:#666;}

.figure-block{margin:32px 0;border-radius:var(--radius);overflow:hidden;}
.figure-block img{width:100%;height:auto;object-fit:cover;max-height:420px;}

.btn{display:inline-block;background:var(--teal);color:#fff;font-weight:700;padding:14px 30px;border-radius:999px;font-size:.95rem;transition:background .15s,transform .15s;border:none;cursor:pointer;}
.btn:hover{background:var(--teal-dark);transform:translateY(-1px);}
.btn-outline{background:transparent;color:var(--teal-dark);border:2px solid var(--teal);padding:12px 28px;}
.btn-outline:hover{background:var(--teal);color:#fff;}

.cta-banner{background-size:auto;background-position:center center;background-repeat:no-repeat;text-align:center;padding:72px 24px;}
.cta-banner .cta-box{max-width:var(--container);margin:0 auto;background:rgba(255,255,255,.9);padding:56px 40px;}
.cta-banner h2{font-family:var(--serif);font-weight:500;color:#222;font-size:clamp(2rem,4vw,3rem);line-height:1.15;margin-bottom:.35em;}
.cta-banner p{font-family:'Nunito Sans',var(--sans);font-weight:400;font-size:18px;line-height:26px;color:#666;max-width:560px;margin:0 auto 26px;}

/* Lists with checkmarks */
.check-list li{position:relative;padding-left:30px;margin-bottom:12px;}
.check-list li::before{content:'✓';position:absolute;left:0;top:0;color:var(--teal-dark);font-weight:800;}

.question-list{display:grid;gap:6px;margin:22px 0;font-family:var(--serif);font-size:1.15rem;font-style:italic;color:var(--ink);}

/* FAQ */
.faq-item{border-bottom:1px solid var(--border);padding:22px 0;}
.faq-item h3{font-size:1.15rem;margin-bottom:.4em;}

/* ─── Índice del blog (blog.html) ──────────────────────────────────────
   Diseño propio, no copia del original: sin recuadros ni sombras, la foto
   manda y el texto va suelto debajo. La primera entrada va destacada a dos
   columnas y el resto en rejilla de tres. */
/* Destacada: panel con la foto a la izquierda. El fondo (--bg-panel) es el
   turquesa grisáceo del resto de la web con algo más de blanco */
.entry-lead{background:var(--bg-panel);border-radius:16px;padding:36px;display:grid;grid-template-columns:47% 1fr;gap:40px;align-items:center;margin-bottom:60px;}
.entry-lead .entry-thumb{border-radius:12px;}
.entry-lead .entry-body{padding-right:8px;}
/* Barrita turquesa de 46×5. Nació en la entrada destacada del blog y se usa
   también sobre el «Horario» de la página de contacto. */
.entry-rule{display:block;width:46px;height:5px;border-radius:999px;background:var(--teal);margin-bottom:20px;}
.entry-lead .entry-date{margin:0 0 12px;}
.entry-lead .entry-title{font-size:34px;line-height:1.22;margin:0 0 16px;}
.entry-lead .entry-excerpt{font-size:17px;margin:0 0 22px;}

/* Resto de entradas: fichas en dos columnas, con borde fino y una sombra que
   solo aparece al pasar por encima */
.entry-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:44px 52px;}
.entry[hidden]{display:none;}
.entry-grid .entry{background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .25s ease,transform .25s ease;}
/* tiene que ir DESPUÉS de la regla de arriba: con la misma especificidad, el
   display:flex de la ficha ganaba y las entradas de otras páginas se veían */
.entry-grid .entry[hidden]{display:none;}
.entry-grid .entry:hover{box-shadow:0 16px 34px rgba(20,40,45,.10);transform:translateY(-3px);}
.entry-grid .entry-thumb{border-radius:0;}
.entry-grid .entry-body{padding:20px 26px 28px;}
.entry-grid .entry-date{margin-top:0;}

.entry-thumb{display:block;aspect-ratio:16/9;overflow:hidden;border-radius:10px;background:var(--bg-soft);}
.entry-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.entry:hover .entry-thumb img{transform:scale(1.04);}
.entry-date{display:block;margin:18px 0 8px;font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);}
.entry-title{font-family:var(--serif);font-weight:500;font-size:23px;line-height:1.3;margin:0 0 10px;}
.entry-title a{transition:color .15s;}
.entry:hover .entry-title a{color:var(--teal-dark);}
.entry-excerpt{font-family:'Nunito Sans',var(--sans);font-weight:300;font-size:16px;line-height:1.6;color:var(--ink-soft);margin:0;}
/* el extracto no pasa de tres líneas: lo que sobra se corta con puntos
   suspensivos, así todas las fichas ocupan lo mismo */
.entry-grid .entry-excerpt{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;}
/* Enlace de la destacada: grueso, en mayúsculas y con subrayado de 2px.
   El texto va en tinta (4,5:1 a 13px) y el turquesa en el subrayado y en la
   flecha, que no son texto. Aquí funciona porque el subrayado hace de señal de
   enlace; las fichas de "Sobre mí", que no lo llevan, van en turquesa. */
.entry-more{font-family:var(--sans);font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);display:inline-flex;align-items:center;gap:9px;padding-bottom:6px;border-bottom:2px solid var(--teal);transition:border-color .15s;}
.entry-more::after{content:'→';font-size:1.6em;line-height:1;color:var(--teal);transition:transform .2s ease,color .15s;}
.entry-lead:hover .entry-more{border-color:var(--teal-dark);}
.entry-lead:hover .entry-more::after{color:var(--teal-dark);transform:translateX(5px);}

/* Paginador */
.blog-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin-top:60px;}
.blog-pager button{font-family:var(--sans);font-weight:700;font-size:13px;color:var(--ink);background:#fff;border:1px solid var(--border);border-radius:999px;cursor:pointer;transition:border-color .15s,color .15s,background .15s;}
/* altura fija para que "Anterior/Siguiente" case con los botones de número:
   la flecha grande hacía crecer el botón */
.pager-step{display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 24px;letter-spacing:.08em;text-transform:uppercase;}
.pager-arrow{font-size:1.6em;line-height:1;}
.pager-num{width:42px;height:42px;padding:0;display:inline-flex;align-items:center;justify-content:center;}
.pager-gap{width:22px;text-align:center;color:var(--ink-soft);}
.blog-pager button:hover:not(:disabled):not(.is-current){border-color:var(--teal);color:var(--teal-dark);}
.pager-num.is-current{background:var(--teal);border-color:var(--teal);color:#fff;cursor:default;}
.blog-pager button:disabled{opacity:.35;cursor:default;}

/* Blog cards */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.post-card{border:1px solid var(--border);border-radius:var(--radius);padding:24px;background:#fff;display:flex;flex-direction:column;gap:10px;transition:box-shadow .15s,transform .15s;}
.post-card:hover{box-shadow:0 16px 30px rgba(20,40,45,.08);transform:translateY(-2px);}
.post-date{font-size:.8rem;color:var(--teal-dark);font-weight:700;text-transform:uppercase;letter-spacing:.05em;}
.post-card h3{font-size:1.15rem;}
.post-excerpt{color:var(--ink-soft);font-size:.95rem;flex:1;}
.post-link{font-weight:700;color:var(--teal-dark);font-size:.9rem;}
.post-link::after{content:' →';}

/* Carrusel de entradas del blog (portada). Va fuera de .container: ancho completo */
.container-full{width:100%;}
.blog-carousel{position:relative;margin-top:36px;}
.carousel-viewport{overflow:hidden;}
.carousel-track{--slides:3;--gap:28px;display:flex;gap:var(--gap);align-items:stretch;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--gap);scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;padding:0 var(--gap) 26px;}
.carousel-track::-webkit-scrollbar{display:none;}
.slide-card{flex:0 0 calc((100% - (var(--slides) + 1) * var(--gap)) / var(--slides));scroll-snap-align:start;}
.slide-card > a{display:flex;flex-direction:column;height:100%;color:inherit;}
.slide-img{aspect-ratio:16/9;overflow:hidden;background:var(--bg-soft);flex-shrink:0;}
.slide-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease;}
.slide-card:hover .slide-img img{transform:scale(1.05);}
/* Recuadro blanco: mismas medidas que la web original (84% del ancho de la foto,
   subido 70px, de forma que queda medio encima de la foto y medio por debajo).
   Con flex:1 todos miden lo mismo aunque el título sea más corto. */
.slide-title{position:relative;flex:1;display:flex;align-items:center;justify-content:center;width:84%;min-height:140px;margin:-70px auto 0;background:#fff;padding:20px 18px;text-align:center;font-family:var(--serif);font-weight:500;font-size:23px;line-height:1.3;color:var(--ink);box-shadow:0 6px 16px rgba(20,40,45,.10);transition:color .15s;}
.slide-card:hover .slide-title{color:var(--teal-dark);}
.carousel-nav{display:contents;}
.carousel-arrow{position:absolute;top:calc(50% - 13px);transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:#fff;border:2px solid var(--teal);color:var(--teal-dark);cursor:pointer;padding:0;z-index:2;transition:background .15s,color .15s,opacity .15s;}
.carousel-arrow .material-symbols-outlined{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:26px;}
.carousel-arrow:hover{background:var(--teal);color:#fff;}
.carousel-arrow:disabled{opacity:.3;cursor:default;background:#fff;color:var(--teal-dark);}
.carousel-prev{left:18px;}
.carousel-next{right:18px;}

.category-badge{display:inline-block;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;background:var(--teal-pale);color:var(--teal-dark);padding:4px 10px;border-radius:20px;font-weight:700;margin-bottom:6px;}

/* Contact */
/* minmax(0,1fr) y no 1fr: con 1fr el mínimo de la columna es el min-content, y
   el correo (una sola palabra de 300px) ensanchaba la rejilla y provocaba
   scroll lateral en móvil. */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start;}

/* Columna izquierda: los tres medios de contacto, el horario y el mapa.
   Van como bloques separados de 16px de esquina, con 20px entre ellos. */
.contact-aside{display:flex;flex-direction:column;gap:20px;}

/* Ficha de los medios de contacto */
.contact-panel{background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:0 6px 20px rgba(20,40,45,.05);overflow:hidden;}
.contact-ways{padding:8px 28px;}
.contact-ways li{display:flex;align-items:flex-start;gap:16px;padding:20px 0;border-top:1px solid var(--border);}
.contact-ways li:first-child{border-top:0;}
/* El círculo del icono: mismo patrón que .feature-icon — el icono se centra con
   position:absolute + translate, porque con flex las métricas de línea de la
   fuente de iconos lo dejaban descentrado. */
/* Círculo blanco con borde dorado y el icono dorado. El trazo de Material
   Symbols Outlined a peso 400 y 24px mide 2px; el aro va medio píxel por encima
   (2,5px) a petición de Mariola, para que se vea algo más.
   Si se cambia el font-size del icono hay que revisar el grosor del borde. */
.contact-way-ico{position:relative;width:46px;height:46px;border-radius:50%;background:#fff;border:2.5px solid var(--yellow);flex-shrink:0;transition:background .15s;}
.contact-way-ico .material-symbols-outlined{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--yellow);font-size:24px;line-height:1;transition:color .15s;}
.contact-way-text{min-width:0;}
.contact-way-label{display:block;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-soft);margin-bottom:2px;}
.contact-way-value{display:block;font-size:1.06rem;font-weight:700;color:var(--ink);line-height:1.4;overflow-wrap:anywhere;}
a.contact-way-value:hover{color:var(--teal-dark);text-decoration:underline;}
.contact-way-extra{display:block;font-weight:400;color:var(--ink-soft);font-size:.95rem;}
/* Al pasar por encima se invierte: el aro se rellena de dorado y el icono pasa
   a blanco */
.contact-ways li:hover .contact-way-ico{background:var(--yellow);}
.contact-ways li:hover .contact-way-ico .material-symbols-outlined{color:#fff;}
/* Pie de la ficha: el CTA de WhatsApp sobre el turquesa grisáceo */
.contact-panel-foot{background:var(--bg-panel);border-top:1px solid var(--border);padding:20px 28px;}
.contact-wa{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:13px 24px;}
.contact-wa .icon-brand{width:22px;height:22px;}

/* Horario */
.contact-hours{background:var(--bg-panel);border:1px solid var(--border);border-radius:16px;padding:28px;}
/* Aquí la barrita va amarilla, no turquesa: en esta página el amarillo del logo
   es el color que marca el arranque de los bloques. */
.contact-hours .entry-rule{background:var(--yellow);}
.contact-hours h2{font-size:1.35rem;margin:0 0 16px;}
.hours-list li{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 0;border-top:1px dashed var(--border);}
.hours-list li:first-child{border-top:0;}
.hours-day{font-size:.98rem;color:var(--ink);}
.hours-time{flex-shrink:0;background:#fff;border:1px solid var(--border);border-radius:999px;padding:3px 13px;font-size:.88rem;font-weight:700;color:var(--ink);white-space:nowrap;}
/* Viernes y fin de semana: sin chip blanco, para que no compitan con las horas
   de verdad. */
.hours-list li.is-off .hours-day{color:var(--ink-soft);}
.hours-list li.is-off .hours-time{background:transparent;border-color:transparent;color:var(--ink-soft);font-weight:400;padding-left:0;padding-right:0;}

/* Mapa. El iframe no está en el HTML: lo mete js/main.js cuando hay
   consentimiento (ver .embed-consent). El min-height es el alto del propio mapa,
   para que al aceptar no dé un salto la página. */
.map-frame{border:1px solid var(--border);width:100%;height:320px;border-radius:16px;display:block;}
.map-embed{min-height:320px;}
.map-embed .embed-consent{border-radius:16px;text-align:center;height:320px;display:flex;flex-direction:column;align-items:center;justify-content:center;}
/* Con .embed-consent p delante hace falta la clase del padre: si no, gana el
   margin:0 auto 20px de aquella */
.embed-consent .embed-alt{margin:16px 0 0;font-size:.88rem;}
.embed-alt a{text-decoration:underline;color:var(--ink-soft);}
.embed-alt a:hover{color:var(--teal-dark);}
.form-field{margin-bottom:16px;}
.form-field label{display:block;font-weight:600;margin-bottom:6px;font-size:.9rem;}
.form-field input,.form-field textarea{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:6px;font-family:var(--sans);font-size:.95rem;}
.form-field textarea{min-height:120px;resize:vertical;}
.form-check{display:flex;align-items:flex-start;gap:10px;font-size:.88rem;color:var(--ink-soft);margin-bottom:18px;}
.form-check a{text-decoration:underline;}
/* La casilla, a 20px: de fábrica son 13×13, muy poco para el dedo. Se puede
   pulsar el texto entero porque está dentro del <label>, pero quien apunte a la
   casilla merece un blanco decente. El margen la deja a la altura de la primera
   línea del texto (antes iba en un style= dentro del HTML). */
.form-check input[type="checkbox"]{width:20px;height:20px;margin-top:1px;flex-shrink:0;accent-color:var(--teal-dark);}
.form-note{font-size:.82rem;color:var(--ink-soft);margin-top:10px;}
/* Asterisco de campo obligatorio, en el dorado del logo */
.req{color:var(--yellow);font-weight:800;}

/* Avisos de campo obligatorio.
   Los pinta js/main.js: los del navegador son un globo gris con una exclamación
   roja que no se puede tocar desde el CSS. Estos sí llevan la letra, las
   esquinas y los colores de la web, y siguen destacando. */
.field-error{display:flex;align-items:flex-start;gap:8px;margin:8px 0 0;font-size:.85rem;font-weight:600;line-height:1.45;color:var(--error-ink);}
.field-error::before{content:"!";display:flex;align-items:center;justify-content:center;flex-shrink:0;width:18px;height:18px;margin-top:1px;border-radius:50%;background:var(--error);color:#fff;font-size:12px;font-weight:800;line-height:1;}
.form-field.has-error input,.form-field.has-error textarea{border-color:var(--error);box-shadow:0 0 0 3px rgba(196,69,61,.13);}
.form-check.has-error{color:var(--error-ink);}
/* El aviso del consentimiento va fuera del <label>: un <p> dentro de un <label>
   no es HTML válido. Se le quita el margen que trae .form-check. */
.form-check.has-error + .field-error{margin:-10px 0 18px;}
/* Después de las dos anteriores, como .entry[hidden] */
.field-error[hidden]{display:none;}
/* Campo trampa para robots. display:none y no un desplazamiento fuera de
   pantalla: así tampoco lo alcanza el tabulador ni el lector de pantalla. */
.form-trap{display:none;}
/* Aviso de «enviado» / «no se ha podido enviar». Cada frase va en su propio
   <span> (los pone js/main.js), de ahí el display:block. */
.form-status{margin:0 0 16px;padding:12px 16px;border-radius:10px;font-size:.92rem;border:1px solid transparent;}
.form-status span{display:block;}
.form-status.is-error{background:var(--error-bg);border-color:#f3c8c5;color:var(--error-ink);}
/* Mensaje de «gracias por contactar»: turquesa, centrado, más grande y en
   negrita, con el visto dentro de un círculo. El visto es un SVG metido en la
   propia hoja de estilos (data:), así que no hay que pedirle nada a ningún
   servidor ni añadir un icono más a la fuente.
   El círculo va en --teal-dark y no en --teal: el visto blanco necesita 3:1
   contra el círculo y el turquesa normal se queda en 2,2. */
.form-status.is-ok{background:var(--teal-pale);border-color:#b3e5e8;color:var(--ok-ink);text-align:center;padding:24px 20px;font-size:1.06rem;font-weight:700;line-height:1.45;}
.form-status.is-ok::before{content:"";display:block;width:40px;height:40px;margin:0 auto 12px;border-radius:50%;background:var(--teal-dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / 21px 21px no-repeat;}
/* Después de las dos anteriores, como .entry[hidden] */
.form-status[hidden]{display:none;}
.contact-form .btn:disabled{opacity:.6;cursor:default;transform:none;}

/* Instagram (feed de LightWidget) */
.ig-embed{margin:0 0 34px;min-height:180px;}
.ig-embed iframe{display:block;width:100%;border:0;overflow:hidden;}
.embed-consent{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:34px 24px;}
.embed-consent p{max-width:520px;margin:0 auto 20px;color:var(--ink-soft);font-size:.95rem;line-height:1.6;}
.embed-consent .btn{background:#000;}
.embed-consent .btn:hover{background:var(--teal-dark);}

/* Footer */
.site-footer{background:var(--ink);color:#cfd8dc;padding:56px 0 24px;margin-top:0;}
.footer-grid{display:grid;grid-template-columns:1.3fr 1.1fr 1fr;gap:48px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.12);}
.footer-about p{color:#9fb0b6;font-size:.9rem;max-width:320px;line-height:1.6;}
.footer-social{display:flex;gap:14px;margin-top:20px;}
.footer-social a{width:38px;height:38px;border:1px solid rgba(255,255,255,.25);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#cfd8dc;transition:background .15s,border-color .15s,color .15s;}
.footer-social a:hover{background:var(--teal);border-color:var(--teal);color:#fff;}
/* Los tres títulos del pie son <h2>: son bloques de primer orden de la página,
   y como <h4> dejaban un salto de nivel (del h2 del contenido al h4 del pie).
   El tamaño lo da esta regla, no la etiqueta, así que no cambia nada a la vista.
   Aquí había además una `.footer-about h4` que quería poner «Araceli González»
   en Lora a 1.35rem: no llegaba a aplicarse nunca (esta regla, con la misma
   especificidad y escrita después, la pisaba entera), así que se ha quitado. */
.footer-col h2{color:#fff;font-family:var(--sans);font-size:.85rem;text-transform:uppercase;letter-spacing:.07em;margin-bottom:18px;}
.footer-col li{margin-bottom:12px;font-size:.92rem;}
.footer-col a:hover{color:var(--teal);}
.footer-social a:hover{background:var(--teal);border-color:var(--teal);color:#fff;}
.footer-hours li span:first-child{font-weight:400;color:#cfd8dc;}
.footer-contact li{display:flex;align-items:flex-start;gap:11px;line-height:1.5;}
.footer-contact .icon,.footer-contact .material-symbols-outlined{color:var(--teal);flex-shrink:0;margin-top:1px;}
.footer-contact a{word-break:break-word;}
/* Horario del pie con las horas remarcadas, como en la página de contacto, pero
   con los colores del pie: nada de blanco lleno, solo blanco con transparencia.
   Validado por Mariola el 17 agosto 2026, así que va en las 15 páginas. El
   viernes y el fin de semana llevan class="is-off" en el HTML: se quedan sin
   recuadro para no competir con las horas de verdad.
   El margin-bottom:0 pisa el de .footer-col li: con él, la línea de puntos se
   quedaba a 12px de la fila de arriba en vez de pegada. */
.footer-hours li{display:flex;justify-content:space-between;align-items:center;gap:14px;color:#9fb0b6;margin-bottom:0;padding:7px 0;}
.footer-hours li + li{border-top:1px dashed rgba(255,255,255,.13);}
.footer-hours li span:last-child{white-space:nowrap;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.17);border-radius:999px;padding:2px 11px;font-size:.82rem;font-weight:700;color:#fff;}
.footer-hours li.is-off span:last-child{background:transparent;border-color:transparent;padding-left:0;padding-right:0;font-weight:400;color:#9fb0b6;}
.footer-cta{display:inline-block;margin-top:18px;background:var(--teal);color:#fff;font-weight:700;font-size:.88rem;padding:10px 24px;border-radius:999px;transition:background .15s;}
.footer-col a.footer-cta:hover{background:var(--teal-dark);color:#fff;}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px 24px;padding-top:22px;font-size:.82rem;color:#8fa0a6;}
.footer-bottom a:hover{color:var(--teal);}
/* Los tres enlaces legales van juntos a la derecha; si no caben, bajan en
   bloque a la línea siguiente (justify-content actúa por línea, así que ahí
   quedan alineados a la izquierda, igual que el copyright). */
.footer-legal{display:flex;flex-wrap:wrap;gap:6px 22px;}
/* «Configuración de cookies» abre un panel, así que es un <button>, no un
   enlace: hay que quitarle los estilos de botón para que case con los otros */
.footer-legal button{font:inherit;color:inherit;background:none;border:0;padding:0;line-height:inherit;cursor:pointer;}
.footer-legal button:hover{color:var(--teal);}

/* Aviso de cookies */
/* Nace OCULTO y lo enseña el JS (.is-visible) solo si no hay decisión guardada.
   Antes nacía visible y el JS lo escondía al cargar: a quien ya había elegido le
   parpadeaba el aviso en cada página. Sin JavaScript no se inserta nada de
   terceros (el feed y el mapa los mete el propio JS), así que no queda nada que
   preguntar y el aviso puede quedarse sin salir. */
.cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;max-width:520px;background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 20px 40px rgba(20,40,45,.18);padding:22px;z-index:200;display:none;}
.cookie-banner.is-visible{display:block;}
.cookie-banner p{font-size:.85rem;color:var(--ink-soft);margin-bottom:14px;}
.cookie-banner a{color:var(--teal-dark);font-weight:700;}
.cookie-actions{display:flex;gap:10px;flex-wrap:wrap;}
.cookie-actions button{font-family:var(--sans);font-size:.82rem;font-weight:700;padding:9px 16px;border-radius:20px;border:1px solid var(--border);background:#fff;cursor:pointer;}
/* .cookie-actions button (más específica) pisaba el fondo de .btn y dejaba
   "Aceptar todo" en blanco sobre blanco: hay que devolverle el color aquí */
.cookie-actions .btn{background:var(--teal);border-color:var(--teal);color:#fff;padding:9px 18px;font-size:.82rem;}
.cookie-actions .btn:hover{background:var(--teal-dark);border-color:var(--teal-dark);}
/* Con el tercer botón el aviso pasa a dos filas en móvil. Los 9px de relleno
   dejaban los botones en 36px de alto: 13 los sube a 44, el mismo mínimo para
   el dedo que el paginador del blog y los botones del panel. */
@media (max-width:560px){
  .cookie-actions button,.cookie-actions .btn{padding:13px 16px;}
}

/* Panel de configuración de cookies.
   El HTML lo construye js/main.js (ensureModal): así no hay que repetirlo en
   las 15 páginas. Aquí solo van sus estilos. */
.cookie-modal{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(20,40,45,.55);}
/* Mismo caso que .entry[hidden]: sin esta regla el display:flex de arriba le
   gana al atributo hidden y el panel se queda a la vista. Va DESPUÉS. */
.cookie-modal[hidden]{display:none;}
body.cookie-modal-abierto{overflow:hidden;}
.cookie-modal-panel{position:relative;width:100%;max-width:560px;max-height:calc(100vh - 40px);overflow-y:auto;background:#fff;border-radius:16px;padding:32px 30px 26px;box-shadow:0 24px 60px rgba(20,40,45,.28);}
.cookie-modal-panel:focus{outline:none;}
.cookie-modal-panel h2{font-size:1.5rem;margin:0 0 14px;padding-right:40px;}
.cookie-modal-intro{font-size:.85rem;line-height:1.6;color:var(--ink-soft);margin-bottom:22px;}
.cookie-modal-intro a{color:var(--teal-dark);font-weight:700;}
/* 44x44 de zona pulsable con un borde transparente de 4px, igual que el botón
   de cerrar el menú: el círculo del hover se sigue viendo de 36 */
.cookie-modal-cerrar{position:absolute;top:10px;right:10px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:1.7rem;line-height:1;color:var(--ink-soft);background:none;border:4px solid transparent;background-clip:padding-box;border-radius:50%;cursor:pointer;}
.cookie-modal-cerrar:hover{background:var(--bg-soft);color:var(--ink);}
.cookie-cats{display:flex;flex-direction:column;gap:12px;margin-bottom:24px;}
.cookie-cat{background:var(--bg-panel);border:1px solid var(--border);border-radius:12px;padding:15px 18px;}
.cookie-cat-head{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.cookie-cat-nombre{font-weight:800;font-size:.98rem;}
/* En gris, no en turquesa: a 12,8px el turquesa se queda en 3,6:1 sobre la
   ficha y el mínimo para texto pequeño es 4,5:1. Además el turquesa en esta
   web significa «pulsable», y esto justamente no lo es. */
.cookie-cat-fija{font-size:.8rem;font-weight:700;color:var(--ink-soft);white-space:nowrap;}
.cookie-cat-texto{margin:8px 0 0;font-size:.82rem;line-height:1.6;color:var(--ink-soft);}
/* Interruptor: el <input> real va encima, transparente, para que siga
   funcionando con teclado y lectores de pantalla; lo que se ve es el track */
.cookie-switch{position:relative;flex:none;width:48px;height:26px;}
/* El input se sale del track por arriba y por abajo para llegar a los 44px de
   zona pulsable sin que el interruptor se vea más gordo */
.cookie-switch input{position:absolute;top:-9px;bottom:-9px;left:-4px;right:-4px;margin:0;opacity:0;cursor:pointer;z-index:2;}
/* Los dos estados del interruptor tienen que distinguirse del fondo y de la
   bolita blanca con 3:1 (WCAG 1.4.11). El gris claro de antes se quedaba en
   1,4:1 y el turquesa normal en 2:1: apagado no se veía y encendido tampoco. */
.cookie-switch-track{position:absolute;inset:0;background:#7d9095;border-radius:999px;transition:background .18s;pointer-events:none;}
.cookie-switch-track::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;background:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .18s;}
.cookie-switch input:checked+.cookie-switch-track{background:var(--teal-dark);}
.cookie-switch input:checked+.cookie-switch-track::after{transform:translateX(22px);}
.cookie-switch input:focus-visible+.cookie-switch-track{outline:2px solid var(--teal-dark);outline-offset:3px;}
.cookie-modal-acciones{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;}
.cookie-modal-acciones button{font-family:var(--sans);font-size:.82rem;font-weight:700;padding:10px 18px;border-radius:999px;border:1px solid var(--border);background:#fff;color:var(--ink);cursor:pointer;}
.cookie-modal-acciones button:hover{border-color:var(--teal);color:var(--teal-dark);}
.cookie-modal-acciones .btn{background:var(--teal);border-color:var(--teal);color:#fff;}
.cookie-modal-acciones .btn:hover{background:var(--teal-dark);border-color:var(--teal-dark);color:#fff;}
@media (max-width:560px){
  .cookie-modal{padding:12px;}
  .cookie-modal-panel{padding:26px 20px 20px;border-radius:14px;}
  .cookie-modal-panel h2{font-size:1.3rem;}
  /* 13px arriba y abajo para que el botón llegue a 44px de alto */
  .cookie-modal-acciones button{flex:1 1 100%;padding:13px 18px;}
}

/* Legal page */
/* El texto legal está lleno de direcciones largas (www.araceligonzalezpsicologa.com)
   que en móvil no caben en una línea y sacaban 8px de scroll lateral. */
/* El bloque .legal-content usa el .container entero, así que su borde izquierdo
   cae justo debajo del <h1> de la cabecera de ondas (nada de max-width en línea:
   eso lo centraba y lo metía 170px por dentro del título). Lo que se limita es
   el TEXTO, hijo a hijo, para que la línea no llegue a los 1112px. La tabla de
   cookies se queda al ancho completo. */
.legal-content{overflow-wrap:anywhere;}
.legal-content>*{max-width:var(--legal-medida);}
.legal-content>table{max-width:none;}
/* Las páginas legales arrancan más pegadas a la onda que el resto (64px de
   .section dejaban demasiado aire bajo la cabecera). */
/* Los mismos 28 que el resto de páginas (25 agosto 2026). Estuvo en 24 desde
   el principio, cuando la referencia era otra: 4px menos que sus hermanas. */
.section-legal{padding-top:28px;}
/* La privacidad empieza por <h2> y las otras dos por <p>: el 1.6em de arriba
   la dejaba 35px más baja que sus hermanas. Las tres arrancan a 24px. */
.legal-content>*:first-child{margin-top:0;}
/* Mismos tamaños que .page-content, para que los títulos de sección de las
   legales no canten respecto al resto de páginas interiores. */
.legal-content h2{margin-top:1.6em;font-size:22px;}
.legal-content h3{margin-top:1.4em;font-size:19px;}
.legal-content ul{list-style:disc;padding-left:22px;margin-bottom:1.2em;}
.legal-content ol{list-style:decimal;padding-left:22px;margin-bottom:1.2em;}
.legal-content li{margin-bottom:.5em;}
.legal-content table{width:100%;border-collapse:collapse;margin:1.2em 0;font-size:.88rem;}
.legal-content th,.legal-content td{border:1px solid var(--border);padding:10px;text-align:left;vertical-align:top;}
.legal-content th{background:var(--bg-soft);}
/* Apartado sangrado (las preguntas que cuelgan de "Finalidad del tratamiento").
   Se le suma la sangría a la medida para que su texto siga midiendo lo mismo. */
.legal-sub{padding-left:28px;max-width:calc(var(--legal-medida) + 28px);}
.legal-sub>*:first-child{margin-top:1.4em;}
/* Enlaces de las páginas legales: solo subrayado, sin color propio y sin hover.
   El subrayado es la señal, así que se distinguen sin depender del color
   (WCAG 1.4.1) y no cambian de aspecto al pasar por encima. */
.legal-content a{color:inherit;text-decoration:underline;text-underline-offset:3px;}
.legal-content a:hover,.legal-content a:focus{color:inherit;text-decoration:underline;}

/* Responsive */
@media (max-width:1180px){
  .nav-toggle{display:flex;}
  .main-nav{position:fixed;top:0;right:0;height:100vh;width:82%;max-width:340px;background:#fff;transform:translateX(100%);transition:transform .25s ease;overflow-y:auto;box-shadow:-10px 0 30px rgba(0,0,0,.15);padding:80px 24px 24px;z-index:60;align-items:flex-start;scrollbar-width:thin;scrollbar-color:#c7d0d3 transparent;}
  .main-nav::-webkit-scrollbar{width:6px;}
  .main-nav::-webkit-scrollbar-track{background:transparent;}
  .main-nav::-webkit-scrollbar-thumb{background:#c7d0d3;border-radius:10px;}
  .main-nav::-webkit-scrollbar-thumb:hover{background:#9aa7ad;}
  /* 44×44 es el mínimo para que se pueda pulsar con el dedo; el círculo gris del
     hover se queda en 36 con un borde transparente que no se ve pero sí se toca. */
  .nav-close{display:flex;align-items:center;justify-content:center;position:absolute;top:18px;right:18px;width:44px;height:44px;border-radius:50%;background:none;border:4px solid transparent;background-clip:padding-box;color:#9aa7ad;cursor:pointer;padding:0;}
  .nav-close:hover{background:var(--bg-soft);color:var(--teal-dark);}
  .nav-close .material-symbols-outlined{font-size:22px;}
  .main-nav.is-open{transform:translateX(0);}
  .main-nav > ul{flex-direction:column;align-items:stretch;gap:0;flex-wrap:wrap;width:100%;}
  .main-nav > ul > li > a{padding:14px 4px;border-bottom:1px solid var(--border);white-space:normal;}
  /* el último ítem va justo encima del botón "Pide cita": sin raya y con aire */
  .main-nav > ul > li:nth-last-child(2) > a{border-bottom:0;}
  .main-nav > ul > li:last-child{margin-top:14px;}
  .main-nav > ul > li.current > a::before{display:none;}
  .main-nav .sub-menu{position:static;box-shadow:none;border:none;display:block;padding:0 0 0 12px;max-height:0;opacity:0;overflow:hidden;transition:max-height .3s ease,opacity .3s ease;}
  .main-nav li.is-expanded > .sub-menu{opacity:1;}
  .nav-overlay.is-open{display:block;}
  .entry-grid{gap:40px 40px;}
}
@media (max-width:900px){
  .bio-grid{grid-template-columns:1fr;text-align:center;}
  .bio-photo{max-width:260px;margin:0 auto;}
  .post-grid{grid-template-columns:repeat(2,1fr);}
  .entry-lead{grid-template-columns:1fr;gap:26px;padding:26px;margin-bottom:48px;}
  .entry-lead .entry-body{padding-right:0;}
  .entry-lead .entry-title{font-size:26px;}
  .entry-lead .entry-excerpt{font-size:16px;}
  .entry-grid{gap:32px 26px;}
  .entry-grid .entry-body{padding:18px 20px 22px;}
  .entry-title{font-size:20px;}
  .entry-excerpt{font-size:15px;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .contact-grid{grid-template-columns:minmax(0,1fr);gap:40px;}
  .feature-strip ul{grid-template-columns:1fr 1fr;}
  .cta-banner{background-size:cover;}
  .cta-banner .cta-box{padding:40px 24px;}
  .carousel-track{--slides:2;}
  .slide-title{font-size:19px;padding:18px 16px;}
  /* flechas más pequeñas: en tablet tapaban media tarjeta */
  .carousel-arrow{width:40px;height:40px;}
  .carousel-arrow .material-symbols-outlined{font-size:22px;}
  .carousel-prev{left:10px;}
  .carousel-next{right:10px;}
}
@media (max-width:720px){
  .topbar{display:none;}
  /* En móvil sobra ancho: la sangría del apartado baja de 28 a 14px */
  .legal-sub{padding-left:14px;}
  /* En móvil las tarjetas van más contenidas: círculo, icono y texto más
     pequeños, y el texto sin negrita */
  .feature-strip ul{grid-template-columns:1fr;gap:12px;}
  .feature-strip li{gap:12px;padding:14px 16px;border-radius:12px;}
  .feature-icon{width:38px;height:38px;}
  .feature-icon .material-symbols-outlined{font-size:20px;}
  .feature-strip li > span:last-child{font-size:14px;font-weight:400;}
  /* Contacto: la ficha y el horario se estrechan y el mapa pierde alto */
  .contact-ways{padding:6px 20px;}
  .contact-ways li{padding:16px 0;gap:13px;}
  .contact-way-ico{width:40px;height:40px;}
  .contact-way-ico .material-symbols-outlined{font-size:21px;}
  .contact-way-value{font-size:1rem;}
  .contact-panel-foot{padding:16px 20px;}
  .contact-hours{padding:22px 20px;}
  .contact-hours h2{font-size:1.2rem;}
  .map-frame{height:260px;}
  .map-embed{min-height:260px;}
  .map-embed .embed-consent{height:260px;padding:24px 18px;}
  .post-grid{grid-template-columns:1fr;}
  .entry-lead{padding:18px;border-radius:12px;gap:20px;margin-bottom:40px;}
  .entry-lead .entry-title{font-size:23px;}
  .entry-rule{margin-bottom:16px;}
  .entry-grid{grid-template-columns:1fr;gap:24px;}
  /* En móvil el paginador se queda solo con las flechas */
  /* 44px, no 38: es el mínimo para pulsar con el dedo, y aquí hay sitio de
     sobra porque las flechas se quedan sin texto. */
  .blog-pager{gap:8px;margin-top:44px;}
  .pager-step{height:44px;padding:0 16px;}
  .pager-step .pager-label{display:none;}
  .pager-num{width:44px;height:44px;}
  .footer-grid{grid-template-columns:1fr;}
  /* Carrusel: 1 entrada y flechas debajo, centradas */
  .carousel-track{--slides:1;--gap:20px;}
  .slide-title{font-size:18px;}
  .carousel-nav{display:flex;justify-content:center;gap:16px;margin-top:6px;}
  .carousel-arrow{position:relative;top:auto;left:auto;right:auto;transform:none;}
}
.nav-overlay{display:none;position:fixed;inset:0;background:rgba(20,30,35,.4);z-index:40;}

/* ===== Sobre mí ===== */
/* Maquetación propia de sobre-mi.html. Usa el .container entero (nada de
   max-width en línea), así que el borde izquierdo cae justo debajo del <h1>
   de la cabecera de ondas, igual que en las legales y en contacto. */

/* Presentación: retrato de 420px + texto de entrada */
.about-intro{display:grid;grid-template-columns:420px minmax(0,1fr);gap:56px;align-items:start;}
/* Los dos círculos van desplazados abajo/derecha y la foto encima. Nada de
   z-index negativo: los pseudoelementos van antes en el flujo y la img se sube
   con position:relative + z-index:1 (sin el z-index, el ::after tapaba la foto). */
.about-portrait-img{position:relative;}
/* Dos sombras superpuestas: la oscura pegadita a la foto y la clara por detrás,
   las dos del tamaño de la foto y por la misma zona (abajo-derecha), pero con
   ÁNGULOS distintos — la clara cae casi en vertical (65°) y la oscura casi
   horizontal (23°). Se probó a achicar la oscura para que la clara asomara
   también en el lateral y quedaba peor: van las dos iguales. La clara va en el
   color de la ola más oscura de la cabecera, no en --teal-pale. */
.about-portrait-img::before,.about-portrait-img::after{content:'';position:absolute;border-radius:50%;}
.about-portrait-img::before{top:19px;left:9px;right:-9px;bottom:-19px;background:var(--wave);}
.about-portrait-img::after{top:5px;left:12px;right:-12px;bottom:-5px;background:var(--teal-dark);}
.about-portrait-img img{position:relative;z-index:1;width:100%;height:auto;border-radius:50%;}
/* Dos fichas en horizontal debajo del texto de entrada */
.about-cred{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:30px;}
.about-cred li{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 6px 20px rgba(20,40,45,.05);padding:16px 18px;}
/* Mismo aro dorado de la ficha de contacto, un punto más pequeño. El trazo del
   icono a 22px mide ~1,8px: si se cambia el font-size, revisar el aro. */
.about-cred-ico{position:relative;width:42px;height:42px;border-radius:50%;background:#fff;border:2.5px solid var(--yellow);flex-shrink:0;}
.about-cred-ico .material-symbols-outlined{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--yellow);font-size:22px;line-height:1;}
.about-cred-text{min-width:0;}
/* Las etiquetas van en --ink-soft y no en turquesa: a 12,8px hacen falta 4,5:1 */
.about-cred-label{display:block;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-soft);}
.about-cred-value{display:block;font-size:1.02rem;font-weight:700;color:var(--ink);line-height:1.4;}

.about-lead{padding-top:4px;}
.about-lead p{font-family:'Nunito Sans',var(--sans);font-weight:300;font-size:18px;line-height:1.75;color:var(--ink-soft);}
/* Todos los párrafos sueltos de la página van al mismo tamaño, el del cierre:
   18px. Lo que distingue al de entrada es el color (--ink), no el tamaño. */
.about-lead .about-lead-text{font-size:18px;line-height:1.75;color:var(--ink);}
.about-page strong{font-weight:700;color:var(--ink);}

/* Bloques siguientes */
.about-block{margin-top:76px;}
/* Los dos títulos de sección son h2: mismo tamaño, misma jerarquía visual */
.about-block > h2,.about-approach-text h2{font-size:24px;margin:0 0 .5em;}
.about-block-intro{font-family:'Nunito Sans',var(--sans);font-weight:300;font-size:18px;line-height:1.75;color:var(--ink-soft);margin-bottom:28px;}

/* Especialidades: 3 fichas arriba y 2 más anchas abajo (6 columnas de base) */
.about-fields{display:grid;grid-template-columns:repeat(6,1fr);gap:24px;}
.about-fields li{grid-column:span 2;display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:14px;padding:26px 24px 24px;transition:box-shadow .25s ease,transform .25s ease;}
.about-fields li:nth-last-child(-n+2){grid-column:span 3;}
.about-fields li:hover{box-shadow:0 16px 34px rgba(20,40,45,.10);transform:translateY(-3px);}
.about-fields .entry-rule{width:34px;margin-bottom:16px;}
.about-fields h3{font-size:21px;line-height:1.3;margin:0 0 8px;}
.about-fields p{font-family:'Nunito Sans',var(--sans);font-weight:300;font-size:16px;line-height:1.6;color:var(--ink-soft);margin:0;}
/* En turquesa y no en tinta: estas fichas no llevan subrayado y en negro no se
   leían como enlaces (Mariola, 18 agosto 2026). Va en `--teal-dark`, que es lo
   más contrastado de la familia turquesa: 3,81:1 en vez de los 2,15:1 del
   turquesa normal. Sigue por debajo de los 4,5:1 que pide un texto de 13px, y
   es una decisión tomada a sabiendas. En hover se oscurece a `--ok-ink` (7,7:1),
   el único tono más oscuro de la familia que ya está en la paleta.
   18+21+5 = 44px de zona pulsable. */
.about-field-link{margin-top:auto;padding-top:18px;padding-bottom:5px;font-family:var(--sans);font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-dark);display:inline-flex;align-items:center;gap:9px;transition:color .15s;}
.about-field-link::after{content:'→';font-size:1.6em;line-height:1;transition:transform .2s ease;}
.about-fields li:hover .about-field-link{color:var(--ok-ink);}
.about-fields li:hover .about-field-link::after{transform:translateX(5px);}

/* Cómo entiendo la terapia */
/* El texto va suelto a la izquierda; la cita, aparte, en su propia caja */
.about-approach{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;}
.about-quote{margin:0;background:var(--bg-panel);border:1px solid var(--border);border-radius:16px;padding:34px 36px;}
.about-quote::before{content:'\201C';display:block;font-family:var(--serif);font-weight:500;font-size:76px;line-height:.8;height:42px;color:var(--yellow);}
.about-quote p{font-family:var(--serif);font-weight:500;font-size:25px;line-height:1.4;color:var(--ink);margin:0;}
.about-approach-text p{font-family:'Nunito Sans',var(--sans);font-weight:300;font-size:18px;line-height:1.75;color:var(--ink-soft);margin:0;}

/* Cierre */
.about-close{margin:76px auto 0;max-width:720px;text-align:center;}
.about-close p{font-family:'Nunito Sans',var(--sans);font-weight:300;font-size:18px;line-height:1.75;color:var(--ink-soft);}
.about-close .about-sign{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--ink);margin-bottom:1.6em;}

/* Valoración de la ficha de Google, entre la despedida y el botón de contactar
   (Mariola, 27 agosto 2026). Es un DATO —la nota y
   cuántas opiniones hay—, no reseñas: no se copia ni el texto ni el nombre de
   nadie. Y NO lleva marcado aggregateRating a propósito: Google no admite que un
   negocio marque valoraciones sobre sí mismo (self-serving reviews) y es motivo
   de penalización manual. Si algún día se piden las estrellas en el buscador, la
   respuesta sigue siendo que no. Misma caja que las fichas de .about-cred
   (borde, sombra y hover), pero en píldora y centrada con márgenes automáticos.
   Va en flex de nivel de bloque con width:max-content y margen
   automático: si fuese inline-flex compartiría línea con el botón Contactar,
   que también es inline-block, y los dos saldrían uno al lado del otro. */
.about-rating{display:flex;width:max-content;max-width:100%;margin:0 auto 30px;align-items:center;gap:12px;padding:10px 20px;background:#fff;border:1px solid var(--border);border-radius:999px;box-shadow:0 6px 20px rgba(20,40,45,.05);text-align:left;transition:box-shadow .25s ease,transform .25s ease;}
.about-rating:hover{box-shadow:0 16px 34px rgba(20,40,45,.10);transform:translateY(-2px);}
.about-rating-stars{display:inline-flex;gap:2px;flex-shrink:0;}
.about-rating-stars svg{display:block;width:17px;height:17px;fill:var(--yellow);}
.about-rating-text{font-family:var(--sans);font-size:15px;line-height:1.45;color:var(--ink-soft);}
.about-rating-text strong{font-weight:800;color:var(--ink);}

@media (max-width:900px){
  .about-intro{grid-template-columns:1fr;gap:44px;}
  .about-portrait{max-width:420px;margin:0 auto;}
  .about-block{margin-top:60px;}
  .about-fields{grid-template-columns:repeat(2,1fr);}
  .about-fields li,.about-fields li:nth-last-child(-n+2){grid-column:auto;}
  .about-approach{grid-template-columns:1fr;gap:28px;}
  .about-quote p{font-size:23px;}
  .about-close{margin-top:60px;}
}
@media (max-width:720px){
  /* Los dos círculos se quedan también en móvil (antes se retiraba el pálido).
     Con los desplazamientos actuales —9px la clara y 12px la oscura— la foto
     entera cabe sin sacar scroll lateral a 375 y a 320px, así que no hace falta
     achicarla. Si se agrandan esos desplazamientos, volver a medirlo. */
  .about-cred{grid-template-columns:1fr;gap:14px;margin-top:24px;}
  .about-cred li{padding:14px 16px;gap:12px;}
  .about-cred-ico{width:38px;height:38px;}
  .about-cred-ico .material-symbols-outlined{font-size:20px;}
  .about-block > h2,.about-approach-text h2{font-size:21px;}
  /* el h3 de las fichas baja con él: a 21 los dos, la jerarquía se perdía */
  .about-fields h3{font-size:19px;}
  .about-fields{grid-template-columns:1fr;gap:18px;}
  .about-fields li{padding:22px 20px 20px;}
  .about-quote{padding:24px 20px;border-radius:14px;}
  .about-quote::before{font-size:60px;height:34px;}
  .about-quote p{font-size:20px;}
  /* A 375 la píldora entera no cabe en una línea: se deja envolver y se centra,
     con las estrellas encima del texto. Sin el wrap el texto se partía dentro
     de la píldora y se descuadraba respecto a las estrellas. */
  .about-rating{flex-wrap:wrap;justify-content:center;gap:6px 10px;padding:12px 18px;border-radius:18px;margin-bottom:28px;}
  .about-rating-stars svg{width:16px;height:16px;}
  .about-rating-text{font-size:14px;}
}

/* ===== Formación y charlas ===== */
/* Maquetación propia de formacionycharlas.html, con el mismo idioma visual de
   sobre-mi: usa el .container entero (nada de max-width en línea), así que el
   borde izquierdo cae justo debajo del <h1> de la cabecera de ondas. */

.cv-block + .cv-block{margin-top:76px;}
/* Los dos títulos de sección son h2: mismo nivel, mismo tamaño (24px), con los
   h3 de los hitos y las fichas por debajo (21px). */
.cv-block h2{font-size:24px;margin:0 0 .6em;}

/* Enlaces del texto: tinta con subrayado turquesa, no turquesa a secas. El
   turquesa oscuro da 3,81:1 y un texto de 17px pide 4,5:1; aquí la señal de
   enlace la da el subrayado, igual que en «Leer artículo» del blog. */
.cv-link{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--teal);text-decoration-thickness:2px;text-underline-offset:3px;transition:text-decoration-color .15s;}
.cv-link:hover{text-decoration-color:var(--teal-dark);}

/* --- Formación: foto + itinerario --- */
/* La foto a la izquierda y el itinerario a la derecha (Mariola, 18 agosto 2026) */
.cv-edu{display:grid;grid-template-columns:340px minmax(0,1fr);gap:56px;align-items:start;}
/* Sin marco de detrás ni sombra: solo las esquinas redondeadas
   (Mariola, 18 agosto 2026). */
/* Entera, sin recortar: la imagen ya viene en vertical (864x1518) y lleva
   textos escritos que un recorte se comería. En el apilado sí se recorta a
   cuadrada, ver la media query. */
.cv-edu-photo img{width:100%;height:auto;border-radius:20px;}

/* Itinerario: línea vertical con los hitos numerados */
/* El reset de arriba solo alcanza a ul: sin esto la ol se queda con sus 40px
   de padding y con los números nativos al lado de los nuestros. */
.cv-path{position:relative;counter-reset:paso;margin:0;padding:0;list-style:none;}
/* La línea se degrada hacia abajo para que no corte en seco bajo el último
   hito. Va detrás: los círculos la tapan con su fondo blanco. */
.cv-path::before{content:'';position:absolute;left:17px;top:10px;bottom:26px;width:2px;background:linear-gradient(to bottom,var(--teal),var(--teal-pale));}
/* Sin ficha, los hitos necesitan más aire entre ellos y un pelín de padding
   arriba para que la primera línea del titular quede centrada con el número. */
.cv-path li{position:relative;padding-left:60px;padding-top:5px;}
.cv-path li + li{margin-top:30px;}
.cv-path li::before{content:counter(paso,decimal-leading-zero);counter-increment:paso;position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;background:#fff;border:2px solid var(--teal);color:var(--teal-dark);font-family:var(--sans);font-weight:800;font-size:13px;letter-spacing:.02em;display:flex;align-items:center;justify-content:center;}
/* Los titulares de esta página van en Nunito Sans y más pequeños que el resto
   de la web (Mariola, 18 agosto 2026): con el itinerario sin fichas, la Lora a
   21 pesaba demasiado. Los dos al mismo tamaño, hitos y charlas. */
.cv-step h3,.cv-talk-text h3{font-family:'Nunito Sans',var(--sans);font-weight:700;font-size:19px;line-height:1.35;}
.cv-step h3{margin:0 0 6px;}
.cv-step p{font-family:'Nunito Sans',var(--sans);font-weight:300;font-size:16px;line-height:1.65;color:var(--ink-soft);margin:0;}
.cv-step strong{font-weight:700;color:var(--ink);}

/* --- Charlas y ponencias: rejilla de fichas --- */
.cv-talks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;}
.cv-talks li{display:flex;gap:18px;background:#fff;border:1px solid var(--border);border-radius:14px;padding:26px 24px;transition:box-shadow .25s ease,transform .25s ease;}
.cv-talks li:hover{box-shadow:0 16px 34px rgba(20,40,45,.10);transform:translateY(-3px);}
/* Mismo aro dorado de la ficha de contacto. El trazo del icono a 24px mide 2px:
   si se cambia el font-size, hay que revisar el grosor del aro. */
.cv-talk-ico{position:relative;width:46px;height:46px;border-radius:50%;background:#fff;border:2.5px solid var(--yellow);flex-shrink:0;transition:background .15s;}
.cv-talk-ico .material-symbols-outlined{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--yellow);font-size:24px;line-height:1;transition:color .15s;}
.cv-talks li:hover .cv-talk-ico{background:var(--yellow);}
.cv-talks li:hover .cv-talk-ico .material-symbols-outlined{color:#fff;}
.cv-talk-text{min-width:0;}
.cv-talk-text h3{margin:0 0 8px;}
.cv-talk-text p{font-family:'Nunito Sans',var(--sans);font-weight:300;font-size:16px;line-height:1.65;color:var(--ink-soft);margin:0;}

@media (max-width:900px){
  .cv-block + .cv-block{margin-top:60px;}
  .cv-edu{grid-template-columns:1fr;gap:46px;}
  /* Al apilar, la imagen se recorta a cuadrada: a su proporción real (1:2,1)
     ocupaba una pantalla entera de móvil. El 78% de altura deja dentro el
     cuaderno escrito, que es lo que se lee. Si se cambia la foto hay que
     volver a mirar ese porcentaje. */
  .cv-edu-media{max-width:520px;margin:0 auto;}
  .cv-edu-photo img{aspect-ratio:1/1;object-fit:cover;object-position:center 78%;}
  .cv-talks{grid-template-columns:1fr;}
}
@media (max-width:720px){
  .cv-block h2{font-size:21px;}
  /* Los h3 bajan con el h2: si no, la jerarquía se perdía */
  .cv-step h3,.cv-talk-text h3{font-size:17px;}
  .cv-path li{padding-left:48px;padding-top:4px;}
  .cv-path li::before{width:32px;height:32px;font-size:12px;}
  .cv-path::before{left:15px;}
  .cv-talks li{padding:22px 20px;gap:14px;}
  .cv-talk-ico{width:42px;height:42px;}
  .cv-talk-ico .material-symbols-outlined{font-size:22px;}
}

/* ===== Carrusel de fotos (.foto-slider) =====
   Genérico, no solo de "Qué ofrezco". Una foto a la vez, con flechas y
   puntitos. Va con scroll-snap y no con transform: así el dedo lo arrastra
   solo en móvil, sin una línea de JavaScript. Las flechas reutilizan
   .carousel-arrow, que es la misma que la del carrusel del blog. */
.foto-slider{position:relative;}
.slider-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;border-radius:var(--radius);}
.slider-track::-webkit-scrollbar{display:none;}
.slider-slide{flex:0 0 100%;margin:0;scroll-snap-align:start;}
.slider-slide img{display:block;width:100%;height:auto;}
/* La foto es un botón: al pulsarla se abre grande en el .lightbox. El aviso
   de que se puede ampliar es el icono de la esquina, no el cursor: el zoom-in
   del sistema es una lupa que se ve fea (Mariola, 19 agosto 2026). */
.slider-zoom{display:block;position:relative;width:100%;padding:0;border:none;background:none;cursor:pointer;}
.slider-zoom-ico{position:absolute;right:12px;bottom:12px;width:34px;height:34px;border-radius:50%;background:rgba(18,28,32,.45);color:#fff;transition:background .15s;}
.slider-zoom-ico .material-symbols-outlined{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:18px;}
.slider-zoom:hover .slider-zoom-ico,
.slider-zoom:focus-visible .slider-zoom-ico{background:rgba(18,28,32,.75);}
/* Sin aro y un poco más pequeñas que las del blog: el círculo blanco se ve de
   40px, pero el botón mide 44 gracias a un borde transparente de 2px, que es
   la zona pulsable mínima del proyecto. La sombra va con filter y no con
   box-shadow: box-shadow seguiría el borde exterior de 44 y quedaría separada
   del círculo que se ve. */
.foto-slider .carousel-arrow{width:44px;height:44px;border:2px solid transparent;background-clip:padding-box;filter:drop-shadow(0 2px 5px rgba(0,0,0,.18));}
.foto-slider .carousel-arrow .material-symbols-outlined{font-size:30px;}

/* Las flechas se centran en la FOTO, no en el .foto-slider, que incluye
   además la fila de puntitos: 10px de separación + 44 de alto = 54, la mitad
   son los 27px que se descuentan. Si cambia el tamaño de los puntos, hay que
   recalcularlo. (El carrusel del blog hace lo mismo con su -13px.) */
.foto-slider .carousel-arrow{top:calc(50% - 27px);}
.slider-prev{left:14px;}
.slider-next{right:14px;}
/* El punto se ve de 11px, pero el botón mide 30x44: la zona pulsable mínima
   del proyecto. El gris apagado es --ink-soft al 45%, que da 3:1 sobre blanco
   (WCAG 1.4.11: los controles no textuales también lo necesitan). */
.slider-dots{display:flex;justify-content:center;margin-top:10px;}
.slider-dot{width:30px;height:44px;padding:0;border:none;background:none;cursor:pointer;position:relative;}
.slider-dot::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:11px;height:11px;border-radius:50%;background:#93a3a8;transition:background .15s;}
.slider-dot:hover::before{background:var(--ink-soft);}
.slider-dot[aria-current="true"]::before{background:var(--teal-dark);}

/* Foto ampliada. Lo construye js/main.js, como el panel de cookies: así no hay
   que repetirlo en el HTML de cada página que lleve un carrusel.
   Ojo al orden: .lightbox[hidden] va DESPUÉS de .lightbox, o el display:flex
   se lo come (mismo caso que .entry[hidden]). */
.lightbox{position:fixed;inset:0;z-index:320;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(20,40,45,.72);}
.lightbox[hidden]{display:none;}
body.lightbox-abierto{overflow:hidden;}
/* Un poco menos ancho que el .container, que son 1112 */
.lightbox-caja{position:relative;width:100%;max-width:1000px;}
.lightbox-caja img{display:block;width:100%;height:auto;max-height:84vh;object-fit:contain;border-radius:var(--radius);}
.lightbox-caja button{position:absolute;width:44px;height:44px;padding:0;border:2px solid transparent;background:#fff;background-clip:padding-box;border-radius:50%;color:var(--ink);cursor:pointer;filter:drop-shadow(0 2px 6px rgba(0,0,0,.25));transition:background .15s,color .15s;}
.lightbox-caja button:hover{background:var(--teal);color:#fff;}
.lightbox-caja button:disabled{opacity:.35;cursor:default;background:#fff;color:var(--ink);}
/* Centrado del icono: con flex no cuadra por las métricas de la fuente */
.lightbox-caja .material-symbols-outlined{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:24px;}
.lightbox-cerrar{top:12px;right:12px;}
.lightbox-prev{top:50%;left:12px;transform:translateY(-50%);}
.lightbox-next{top:50%;right:12px;transform:translateY(-50%);}
@media (max-width:720px){
  .lightbox{padding:12px;}
  .lightbox-cerrar{top:8px;right:8px;}
  .lightbox-prev{left:8px;}
  .lightbox-next{right:8px;}
}

/* ===== Qué ofrezco (que-ofrezco-terapia.html) =====
   Ocupa el .container entero, como "Sobre mí" y "Formación". */

/* La foto del título arranca a los 28px que da .page-banner + .section, sin
   sumarle los 32 de margen de .figure-block: ese hueco quedaba mayor que en
   las páginas ya cerradas. Por debajo de 720 la sección va a padding-top:0 y
   así la foto queda pegada a la onda, como el resto. */
.ofrezco-tit,
.page-tit{margin-top:0;}

/* Entrada: los tres primeros párrafos, en una columna y sin adornos. Ocupan
   los 1112 enteros: a 820 quedaba un hueco a la derecha bajo la foto (Mariola,
   20 agosto 2026). La primera frase, que es la premisa de la que sale todo lo
   demás, va a 20px con la barrita. */
.ofrezco-intro{margin-top:34px;}
/* La frase de entrada: centrada, en Lora itálica y en su propia caja de 720px,
   como el "Saludos." del cierre de "Sobre mí" (Mariola, 20 agosto 2026). El
   tamaño se queda en los 20px que ya tenía. */
.ofrezco-entrada{max-width:720px;margin:0 auto 34px;text-align:center;}
.ofrezco-entrada .entry-rule{margin-left:auto;margin-right:auto;}
.ofrezco-lead{font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.6;color:var(--ink);margin:0;}
/* Los dos párrafos que siguen, uno al lado del otro: a lo ancho del
   contenedor la línea se iba a 125 caracteres (Mariola, 20 agosto 2026). */
.ofrezco-dos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;}
.ofrezco-dos p{margin:0;}

/* El centro: el texto (barrita, titulo y parrafos) a la izquierda y el carrusel
   a la derecha. align-items:start y no center: Mariola pidio que la barrita de
   antes del titulo arranque a la misma altura que el borde de arriba del
   carrusel (26 agosto 2026). Con center, el carrusel -que es mas alto- subia
   por encima del texto. */
.ofrezco-centro{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;align-items:start;margin-top:52px;}
/* El texto va primero en el HTML y tambien a la izquierda a la vista, asi que ya
   no hace falta ningun `order` (26 agosto 2026). Antes lo llevaba el carrusel
   para dejarlo a la izquierda sin romper el orden de lectura; ahora el orden de
   lectura y el visual coinciden. En una columna, por debajo de 900px, esto
   significa que el titulo va arriba y el carrusel debajo. */
/* Al mismo tamaño que los de "Sobre mí" y "Formación" (Mariola, 20 agosto
   2026): mismo nivel, mismo tamaño. Los 22px vienen de .page-content. */
.ofrezco-centro-texto h2,
.ofrezco-bloque h2{font-size:24px;}
.ofrezco-centro-texto h2{margin:0 0 .6em;}
.ofrezco-centro-texto p:last-child{margin-bottom:0;}

/* Cada apartado: el título a la izquierda y el cuerpo a la derecha, que así
   conserva una medida cómoda aunque el bloque ocupe todo el contenedor. */
.ofrezco-bloque{display:grid;grid-template-columns:300px minmax(0,1fr);gap:48px;align-items:start;margin-top:52px;padding-top:44px;border-top:1px solid var(--border);}
.ofrezco-bloque h2{margin:0;}
.ofrezco-cuerpo p:last-child{margin-bottom:0;}

/* El cuerpo de la página, con la letra de "Sobre mí" (Nunito Sans 300 a 18px).
   Sin esta regla los párrafos heredaban la del body —Mulish 400 en --ink— y la
   página desentonaba con el resto del sitio. Detectado el 21 agosto 2026. */
.ofrezco-dos p,
.ofrezco-centro-texto p,
.ofrezco-cuerpo p{font-family:'Nunito Sans',var(--sans);font-weight:300;font-size:18px;line-height:1.75;color:var(--ink-soft);}

/* Las negritas. Los navegadores le dan a <strong> font-weight:bolder, que es
   relativo: heredado de un párrafo a 300 solo sube a 400 y no se distingue del
   texto normal. Van a 700 y en --ink, como en las páginas de terapia.
   26 agosto 2026. */
.ofrezco-dos strong,
.ofrezco-centro-texto strong,
.ofrezco-cuerpo strong{font-weight:700;color:var(--ink);}

/* La banda de las macetas separa las dos citas, así que el bloque que va
   detrás no necesita además la línea. */
.ofrezco-banda{margin:52px 0 0;}
.ofrezco-banda + .ofrezco-bloque{border-top:none;padding-top:0;margin-top:52px;}

@media (max-width:900px){
  .ofrezco-centro{grid-template-columns:1fr;gap:28px;}
  /* En una columna la foto se iría a 558px de alto y se comería la pantalla. */
  .ofrezco-centro .foto-slider{max-width:620px;width:100%;margin:0 auto;}
  .foto-slider .carousel-arrow{width:44px;height:44px;}
  .ofrezco-bloque{grid-template-columns:1fr;gap:16px;margin-top:40px;padding-top:34px;}
  .ofrezco-banda{margin-top:40px;}
  .ofrezco-banda + .ofrezco-bloque{margin-top:40px;}
}
@media (max-width:720px){
  /* Ya no hace falta margen aquí: desde el 25 agosto 2026 el aire bajo la onda
     en móvil lo da la sección (.page-banner + .section, 28px) para todas las
     páginas por igual. Del 21 al 25 agosto estos 28 eran el parche que solo
     tenían las páginas con foto de título, y por eso formación, contacto y
     sobre-mi se quedaban a 34 mientras el blog estaba a 62. */
  .ofrezco-tit,
  .page-tit{margin-top:0;}
  .ofrezco-intro{margin-top:26px;}
  .ofrezco-entrada{margin-bottom:26px;}
  .ofrezco-lead{font-size:18px;}
  .ofrezco-centro-texto h2,
  .ofrezco-bloque h2{font-size:21px;}
  .ofrezco-dos{grid-template-columns:1fr;gap:1.1em;}
  .ofrezco-centro{margin-top:38px;}
  /* El carrusel del blog saca sus flechas de la foto y las apila debajo en
     móvil. Este no: siguen encima, a los lados, y suben a 44px, que es la
     zona pulsable mínima del proyecto. */
  .foto-slider .carousel-arrow{position:absolute;top:calc(50% - 27px);transform:translateY(-50%);width:44px;height:44px;}
  .foto-slider .carousel-arrow .material-symbols-outlined{font-size:30px;}
  .foto-slider .slider-prev{left:8px;right:auto;}
  .foto-slider .slider-next{right:8px;left:auto;}
}

/* ─── Política de precios (precios.html) ──────────────────────────────
   Dos columnas dentro del .container: la ficha del precio a la izquierda
   y las preguntas frecuentes a la derecha. La ficha habla el idioma de la
   página de contacto (panel blanco con sombra suave y aros dorados); las
   preguntas llevan el círculo turquesa. Por debajo de 900px se apila.
   Los textos de las preguntas son los del original, sin tocar. */
/* Mitad y mitad, el mismo reparto que .contact-grid: con la ficha a 420px
   fijos se quedaba en 420 frente a los 528 del panel de contacto y Mariola la
   vio pequeña (25 agosto 2026). Con minmax(0,1fr) las dos columnas salen a
   528 y la ficha mide igual que el panel. Los minmax(0,...) son los de
   contacto y por lo mismo: con 1fr a secas el minimo de la columna es su
   min-content y una palabra larga ensancha la rejilla. */
.price-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start;}

/* Ficha del precio */
.price-card{background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:0 6px 20px rgba(20,40,45,.05);overflow:hidden;}
.price-card-top{padding:30px 28px 26px;}
/* La barrita va en dorado, como la del horario de contacto. El color se pone
   aquí y no con un style en línea: es una decisión de la hoja, no del HTML. */
.price-card-top .entry-rule{background:var(--yellow);}
/* Los dos <h2> de la página van al mismo tamaño (24px), como en «Sobre mí»
   y «Formación»: mismo nivel, mismo tamaño. */
.price-card-top h2{font-size:24px;margin:0 0 14px;}
.price-card-num{font-family:var(--serif);font-weight:500;font-size:64px;line-height:1;color:var(--ink);margin:0;}
.price-card-num em{font-style:normal;font-size:.5em;color:var(--ink-soft);margin-left:4px;}
.price-card-unit{font-family:'Nunito Sans',var(--sans);font-weight:400;font-size:16px;color:var(--ink-soft);margin:8px 0 0;}
.price-card-rows{padding:0 28px;}
.price-card-rows li{display:flex;align-items:center;gap:16px;padding:20px 0;border-top:1px solid var(--border);}
/* El pie va sobre --bg-panel con el botón a todo el ancho, igual que el de
   WhatsApp en la ficha de contacto. */
.price-card-foot{background:var(--bg-panel);border-top:1px solid var(--border);padding:20px 28px;margin-top:8px;}
.price-card-foot .btn{display:block;width:100%;text-align:center;padding:13px 24px;}
/* Aro dorado, el mismo de .contact-way-ico. Aquí el icono va en SVG y no en
   Material Symbols: los que harían falta (schedule, payments) no están en el
   subconjunto que baja descargar_fuentes.ps1, y se decidió dejarlos así
   (Mariola, 19 agosto 2026). El trazo va a 2px, que es lo que mide el de la
   fuente a peso 400 y 24px; si se cambia el tamaño del icono hay que revisar
   el grosor del aro. */
.price-ico{position:relative;width:46px;height:46px;border-radius:50%;background:#fff;border:2.5px solid var(--yellow);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:background .15s;}
.price-ico svg{width:24px;height:24px;stroke:var(--yellow);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .15s;}
.price-card-rows li:hover .price-ico{background:var(--yellow);}
.price-card-rows li:hover .price-ico svg{stroke:#fff;}
/* Las etiquetas van en --ink-soft y no en turquesa, igual que en contacto: a
   12,8px hacen falta 4,5:1 y el turquesa oscuro se queda en 3,8. */
.price-label{display:block;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-soft);}
.price-value{display:block;font-size:1.02rem;font-weight:700;color:var(--ink);line-height:1.4;}
/* «También online» destacado: no es una nota al pie de la dirección, es la otra
   forma de atender. Píldora con el azul de las olas y el icono de videollamada,
   que hace pareja con el chincheta dorado de «Dónde». El texto va en --ink y no
   en turquesa: a 14,7px en negrita hacen falta 4,5:1 y el turquesa oscuro sobre
   el azul de las olas se queda en 3,1 (en el icono sí vale: basta 3:1). */
.price-online{display:inline-flex;align-items:center;gap:7px;margin-top:8px;padding:3px 12px 3px 9px;border-radius:999px;background:var(--wave);color:var(--ink);font-weight:700;font-size:.92rem;line-height:1.5;}
.price-online svg{width:17px;height:17px;flex-shrink:0;stroke:var(--teal-dark);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
/* Recuadro dorado de puntos para la duración y las formas de pago. Nació como
   marca de «dato sin confirmar», pero Araceli confirmó los datos el 24 agosto
   2026 y Mariola quiso conservarlo: ahora es el estilo de esos dos valores. */
.price-pending{display:inline-block;font-weight:800;font-size:.85em;letter-spacing:.04em;color:var(--ink);background:#fdf4dd;border:1px dashed var(--yellow);border-radius:6px;padding:0 7px;}

/* Preguntas frecuentes */
.price-faq > h2{font-size:24px;margin:0 0 34px;}
.price-faq li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:0 18px;padding:24px 0;border-bottom:1px solid var(--border);}
.price-faq li:first-child{padding-top:0;}
.price-faq li:last-child{border-bottom:0;}
.price-mark{width:36px;height:36px;border-radius:50%;background:var(--teal-pale);color:var(--teal-dark);font-family:var(--sans);font-weight:800;font-size:18px;display:flex;align-items:center;justify-content:center;margin-top:2px;}
.price-faq h3{font-size:21px;line-height:1.3;margin:0 0 6px;}
.price-faq p{font-family:'Nunito Sans',var(--sans);font-weight:300;font-size:17px;line-height:1.7;color:var(--ink-soft);margin:0;}
.price-faq-close{margin:30px 0 0;font-family:'Nunito Sans',var(--sans);font-weight:300;font-size:17px;color:var(--ink-soft);}
/* Enlace en tinta con el subrayado turquesa, como «Leer artículo» del blog:
   el turquesa a este tamaño no llega a 4,5:1, así que el color de marca lo
   pone el subrayado, que no es texto. */
.price-link{font-weight:700;color:var(--ink);text-decoration:underline;text-decoration-color:var(--teal);text-decoration-thickness:2px;text-underline-offset:3px;transition:text-decoration-color .15s;}
.price-link:hover{text-decoration-color:var(--teal-dark);}
@media (max-width:900px){
  .price-grid{grid-template-columns:1fr;gap:40px;}
  /* Al apilarse, la ficha se limita a 480px y se centra: a todo el ancho del
     contenedor eran 837px de ficha para 227 de texto y quedaba muy vacía.
     Esto vale de 900 a 720. Por debajo se suelta (ver el bloque de 720). */
  .price-card{width:100%;max-width:480px;justify-self:center;}
}
@media (max-width:720px){
  /* Aquí se suelta el max-width:480px del bloque de 900. De 900 a 721 la ficha
     centrada se lee como una tarjeta y el margen a los lados es amplio; de 720
     abajo el contenedor se queda tan estrecho que esos 480 dejan la caja a 56px
     de los bordes mientras el h1 y las preguntas arrancan en 24, y se ve
     descuadrada, no centrada (Mariola, 25 agosto 2026). */
  .price-card{max-width:none;}
  .price-card-top{padding:24px 20px 22px;}
  .price-card-rows{padding:0 20px;}
  .price-card-rows li{padding:16px 0;gap:13px;}
  .price-card-foot{padding:18px 20px;}
  .price-card-top h2,
  .price-faq > h2{font-size:21px;}
  .price-faq > h2{margin-bottom:28px;}
  .price-faq h3{font-size:19px;}
  .price-faq li{grid-template-columns:30px minmax(0,1fr);gap:0 12px;padding:20px 0;}
  .price-mark{width:30px;height:30px;font-size:16px;}
}

/* ═══ Terapia de adultos ══════════════════════════════════════════════
   Psicoterapia, ansiedad, depresión, estrés y crisis personal. Las cinco
   ocupan el .container entero, como "Sobre mí", "Formación" y "Qué ofrezco"
   (nada de max-width:820px en línea), y arrancan con la foto de título
   pegada a la onda: la clase .page-tit, compartida con .ofrezco-tit, le
   quita a .figure-block sus 32px de margen y deja los 28 que da
   .page-banner + .section.

   Las tres páginas de trastorno (ansiedad, depresión, estrés) tienen la
   misma estructura y por eso comparten maquetación: foto → ficha lateral
   con los casos y, al lado, la nube de síntomas con el bloque del
   interrogante → flecha → el desarrollo a dos columnas → el cierre en su
   panel.
   El cuerpo va en Nunito Sans 300 a 18px, como el resto del sitio: cada
   página se pone su tipografía en su propio bloque, no hay regla común. */

/* ── Ficha lateral + nube de palabras ─────────────────────────────────
   Los casos van en una ficha a un lado —como en el original, que los pone
   en la columna izquierda— y al lado los síntomas montados como nube de
   palabras, con las preguntas debajo. Las palabras son exactamente las
   mismas y en el mismo orden.
   El reparto de la rejilla era el de .price-grid; desde el 25 agosto 2026 ya
   no, porque .price-grid pasó a mitad y mitad. Aquí se queda en 380px + 1fr. */
/* La clase .page-banner-junta se ha eliminado (25 agosto 2026).
   La llevaron las 10 páginas de terapia entre el 23 y el 25 de agosto para
   dejar el hueco hasta la foto del título en 36/32/28/28 en vez de los
   78/68/62/62 del resto. Mariola fijó blog y «Formación y charlas» como
   referencia de todo el sitio y pidió igualar las 20 páginas, así que la clase
   se quitó de los 10 HTML y sus reglas de aquí.
   Si algún día vuelve a hacer falta un hueco más corto en una página, la forma
   era: .page-banner-X .container{padding-bottom:N} más
   .page-banner-X + .section:not(.section-legal){padding-top:M}, con las dos
   medidas bajando a la par en cada corte. */
/* Las dos columnas arrancan arriba (align-items:start). Con el bloque del
   interrogante dentro de la derecha las dos miden casi lo mismo (591 y 607),
   así que ya no hace falta centrarlas: entre 900 y ~1000 la derecha crece y
   con center la ficha se quedaba colgando a media altura. */
.tera-lateral{display:grid;grid-template-columns:380px minmax(0,1fr);gap:56px;align-items:start;margin-top:44px;}

/* La ficha habla el idioma de la del precio: panel blanco con sombra
   suave, cabecera sobre --bg-panel y las filas separadas por su línea. */
.tera-ficha{background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:0 6px 20px rgba(20,40,45,.05);overflow:hidden;}
.tera-ficha-top{background:var(--bg-panel);border-bottom:1px solid var(--border);padding:28px 28px 24px;}
.tera-ficha-top .entry-rule{margin-bottom:16px;}
.tera-ficha-top h2{font-size:24px;line-height:1.3;margin:0;}
.tera-ficha-list{list-style:none;margin:0;padding:4px 28px 10px;}
.tera-ficha-list li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:15px;align-items:start;padding:17px 0;border-top:1px solid var(--border);font-family:'Nunito Sans',var(--sans);font-weight:400;font-size:16.5px;line-height:1.5;color:var(--ink-soft);}
.tera-ficha-list li:first-child{border-top:0;}
/* El visto va como carácter y no como icono de Material Symbols: así no hay
   que tocar $ICONOS de descargar_fuentes.ps1 ni volver a lanzarlo. Es el
   mismo recurso que usa .check-list. */
.tera-ficha-list li::before{content:'\2713';width:34px;height:34px;border-radius:50%;background:var(--teal-pale);color:var(--teal-dark);font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s;}
.tera-ficha-list li:hover::before{background:var(--teal);color:#fff;}

/* La nube va suelta sobre el fondo de la página: ni panel, ni borde, ni
   sombra. Lo enmarcado es cada palabra, con la misma píldora que los
   valores del horario del pie (.footer-hours li span:last-child) y con su
   misma medida: .82rem, peso 700 y 2px/11px de aire hasta el filete.
   Las palabras van en orden, en filas rectas y centradas, ocupando las
   líneas que hagan falta: se probó escalonándolas y se descartó (Mariola,
   22 agosto 2026). Ninguna manda sobre las demás.
   El max-width no es capricho: la columna mide 676 y a ese ancho salían
   cuatro filas larguísimas; a 540 el bloque hace seis filas y se lee como
   un grupo, no como una tira. */
.tera-nube{list-style:none;margin:0 auto;padding:4px 0;max-width:540px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 9px;font-family:'Nunito Sans',var(--sans);}
/* Un solo color, el turquesa de la casa: fondo --teal-pale, filete un punto
   más vivo y el texto en --ok-ink, el verde azulado que ya se midió a 7:1
   sobre ese fondo. A .82rem en negrita el texto NO cuenta como grande, así
   que hacen falta 4,5:1 y ni --teal-dark (3,4:1) ni --yellow (2:1) valen
   ahí: si se cambia el fondo hay que volver a medir el texto.
   Se probó con cinco colores rotando y se descartó (Mariola, 23 agosto 2026). */
.tera-nube li{background:var(--teal-pale);border:1px solid #b6e6e9;border-radius:999px;padding:2px 11px;font-weight:700;font-size:.82rem;line-height:1.5;color:var(--ok-ink);}

/* ── El interrogante, las preguntas y el veredicto ────────────────────
   Un solo bloque, debajo de la nube y en su misma columna: el círculo, las
   tres preguntas en negrita, la barrita turquesa y la frase del «Si estas
   preguntas…». Es la única forma que queda: las clases que usaban depresión
   y estrés antes de remaquetarlas (.tera-preguntas y .tera-veredicto) se
   borraron el 24 agosto 2026, ya sin usar. */
.tera-cuestion{text-align:center;}
/* El interrogante va en SVG y no en Material Symbols: no hay ninguno de
   interrogación en el subconjunto que baja descargar_fuentes.ps1 y se
   prefirió no ampliarlo, igual que en .price-ico. El círculo es el propio
   SVG (relleno con un degradado --teal → --teal-dark y el signo en blanco),
   así que aquí solo se le da la medida. Va sin sombra: se probó con una
   suave debajo y se quitó (Mariola, 23 agosto 2026). */
.tera-cuestion-ico{display:block;width:78px;height:78px;margin:0 auto 26px;}
.tera-cuestion-ico svg{display:block;width:100%;height:100%;}
.tera-quest{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:9px;}
.tera-quest li{font-family:var(--serif);font-weight:600;font-size:21px;line-height:1.4;color:var(--ink);}
.tera-cuestion .entry-rule{margin:0 auto 22px;}
/* La frase del veredicto se queda en Lora itálica, como estaba, pero un
   punto más apagada que las preguntas: son ellas las que mandan aquí. */
.tera-cuestion-cierre{font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.6;color:var(--ink-soft);margin:0;}

/* La columna de la derecha: la nube arriba y debajo el bloque del
   interrogante. Con las dos cosas dentro suma casi lo mismo que la ficha
   (591px), que es lo que quita el hueco que quedaba al lado. */
.tera-lateral-main{display:grid;gap:38px;}

/* La flecha que separa las dos columnas de arriba de las dos del desarrollo.
   Va en SVG por lo mismo que el interrogante: en el subconjunto de iconos que
   baja descargar_fuentes.ps1 no hay ninguna flecha hacia abajo. En turquesa,
   como la barrita separadora que lleva justo encima. Es decorativa
   (aria-hidden): lo que separa ya se entiende por el aire que deja.
   Los 48px de arriba son los mismos que .tera-texto pone por debajo, así que
   la flecha queda centrada entre los dos bloques. */
.tera-flecha{display:block;width:34px;height:34px;margin:48px auto 0;color:var(--teal);}
.tera-flecha svg{display:block;width:100%;height:100%;}

/* ── El desarrollo, a dos columnas ────────────────────────────────────
   Columnas de texto (column-count), no rejilla: así se reparten solas sea
   cual sea el número de párrafos y no queda media fila vacía. El
   break-inside evita que un párrafo se parta entre columnas. */
.tera-texto{margin-top:48px;column-count:2;column-gap:56px;}
.tera-texto p{font-family:'Nunito Sans',var(--sans);font-weight:300;font-size:18px;line-height:1.75;color:var(--ink-soft);margin:0 0 1.2em;break-inside:avoid;}
.tera-texto p:last-child{margin-bottom:0;}
.tera-texto em{font-family:var(--serif);font-style:italic;color:var(--ink);}
.tera-texto strong{color:var(--ink);font-weight:700;}

/* ── Bloque clave y cierre ────────────────────────────────────────────
   El panel para un párrafo que es la clave del apartado: alineado a la
   izquierda y con la barrita, sin la comilla dorada de .page-quote, que no
   es una cita sino texto de Araceli.
   Va en blanco, con el borde de siempre y la sombra suave de .tera-ficha:
   lo que lo separa del fondo de la página, también blanco. En verde
   (--bg-panel) se leía como un mismo bloque con el .tera-cierre que lleva
   justo debajo en crisis personal, y así el verde queda solo para el
   cierre, que es la conclusión final (Mariola, 23 agosto 2026; en
   psicoterapia igual desde el 24). Lo llevan esas dos páginas.
   Esto estuvo un día como modificador .is-blanca sobre un .tera-clave
   verde; al pasar psicoterapia también a blanco no quedó nadie usando el
   verde y se fundieron. */
.tera-clave{margin-top:48px;background:#fff;border:1px solid var(--border);border-radius:16px;padding:30px 34px;box-shadow:0 6px 20px rgba(20,40,45,.05);}
.tera-clave p{font-family:'Nunito Sans',var(--sans);font-weight:300;font-size:18px;line-height:1.75;color:var(--ink-soft);margin:0;}
.tera-clave strong{color:var(--ink);font-weight:700;}
.tera-cierre{margin:52px auto 0;max-width:860px;text-align:center;background:var(--bg-panel);border:1px solid var(--border);border-radius:16px;padding:32px 36px;}
.tera-cierre p{font-family:var(--serif);font-weight:500;font-size:21px;line-height:1.5;color:var(--ink);margin:0;}

/* ── Aviso de "en preparación" ────────────────────────────────────────
   Las páginas de terapia que todavía no tienen texto (ataque de pánico,
   obsesiones, fobias) llevan solo la foto del título y este bloque. Va con
   las mismas medidas que .psico-entrada —760px, centrado, la raya turquesa
   arriba— para que al escribir el texto definitivo la página no dé un
   salto: el aviso se borra y la entrada real ocupa su sitio. */
.tera-proximo{max-width:760px;margin:44px auto 64px;text-align:center;}
.tera-proximo .entry-rule{margin:0 auto 26px;}
.tera-proximo p{font-family:var(--serif);font-weight:500;font-size:23px;line-height:1.5;color:var(--ink);margin:0;}
/* El segundo párrafo baja a la sans del cuerpo: el primero es el titular del
   aviso y este la explicación, y con la misma serif se leían como uno solo. */
.tera-proximo p + p{margin-top:18px;font-family:'Nunito Sans',var(--sans);font-weight:300;font-size:18px;line-height:1.75;color:var(--ink-soft);}

/* Apartado de texto a una columna: el título arriba y el cuerpo debajo
   (Mariola, 24 agosto 2026). Antes iba a dos —título a la izquierda y cuerpo a
   la derecha, el reparto de .ofrezco-bloque—, pero en esta página la lectura
   arrancaba partida nada más pasar la foto. */
.tera-bloque h2{font-size:24px;margin:0 0 20px;}
.tera-bloque p{font-family:'Nunito Sans',var(--sans);font-weight:300;font-size:18px;line-height:1.75;color:var(--ink-soft);}
.tera-bloque p:last-child{margin-bottom:0;}
/* Sin esto la negrita se quedaba en --ink-soft: sobre Nunito Sans 300 el salto
   a 700 apenas se apreciaba. Es la misma regla que .tera-clave y .psico-texto. */
.tera-bloque strong{color:var(--ink);font-weight:700;}

/* Enlace en tinta con el subrayado turquesa, como los de "Formación" y
   "Leer artículo" del blog: el turquesa a este tamaño no llega a 4,5:1. */
.tera-link{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--teal);text-decoration-thickness:2px;text-underline-offset:3px;transition:text-decoration-color .15s;}
.tera-link:hover{text-decoration-color:var(--teal-dark);}
/* ── Psicoterapia ─────────────────────────────────────────────────────
   Apertura: la definición va sola, la primera y centrada, en Lora itálica,
   como la entrada de "Qué ofrezco" (.ofrezco-entrada). Antes iba dentro de
   un .page-quote a dos columnas con el texto al lado (Mariola, 24 agosto
   2026).
   La barrita va DEBAJO, no encima: entre la foto del título y el párrafo
   no separaba nada, y ahí abajo hace de corte entre la definición y el
   cuerpo (Mariola, 24 agosto 2026). Los 30 de arriba y los 30 que pone
   .psico-texto la dejan centrada en el hueco. */
.psico-entrada{max-width:760px;margin:44px auto 0;text-align:center;}
.psico-entrada .entry-rule{margin:30px auto 0;}
.psico-lead{font-family:var(--serif);font-style:italic;font-size:21px;line-height:1.6;color:var(--ink);margin:0;}
/* Los tres párrafos que siguen: una sola columna y los 1112 enteros del
   contenedor, sin las dos columnas de la apertura (Mariola, 24 agosto 2026). */
.psico-texto{margin-top:30px;}
.psico-texto p{font-family:'Nunito Sans',var(--sans);font-weight:300;font-size:18px;line-height:1.75;color:var(--ink-soft);}
.psico-texto p:last-child{margin-bottom:0;}
.psico-texto strong{color:var(--ink);font-weight:700;}

/* ── La banda del vídeo ───────────────────────────────────────────────
   De lado a lado de la ventana, como en el original: la sección va fuera
   del .container y el vídeo la cubre entera. El clip mide 1920x500
   (3,84:1) y ese es el aspect-ratio de la banda mientras le cabe; el
   min-height evita que a 375px se quede en una tira de 97px, y entonces
   el object-fit:cover recorta por los lados.
   OJO con el width:100%: sin él, aspect-ratio + min-height le pasan la
   medida al ancho (250 x 3,84 = 960px) y a 375px la banda desbordaba la
   pantalla. El traspaso solo ocurre cuando el ancho es auto; poniéndolo
   explícito, el min-height se queda en el alto, que es lo que se quiere.
   El fondo sale del propio clip (su color medio es #659A83), oscurecido para
   que la frase blanca siga en 7:1 el instante que tarda en pintar el poster.
   Va en bucle, sin sonido y sin controles, así que es decoración: con
   aria-hidden y tabindex="-1" no se anuncia ni entra en el tabulador. Y como
   no se puede parar, js/main.js le quita el "autoplay" a quien tenga activado
   "reducir movimiento" (WCAG 2.2.2). El poster (img/barco.jpg, 1920x500, un
   fotograma del propio clip) es lo que se ve entonces. */
.psico-banda{position:relative;overflow:hidden;background:#2e5a4e;width:100%;aspect-ratio:1920/500;min-height:300px;display:flex;align-items:center;}
.psico-banda-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
/* Velo por la derecha, que es por donde va la frase. Medido sobre los
   fotogramas del clip: el blanco sobre el cielo del barco se quedaba en
   1,6:1. Con el velo, el píxel peor de la caja del texto sube a 3,8:1, y
   a 28px eso es texto grande (el umbral son 3:1). A la izquierda es
   transparente, así que no se lee como una capa gris sobre el vídeo. */
.psico-banda::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,42,49,0) 8%,rgba(9,42,49,.8) 100%);}
/* width:100% porque el margin:0 auto de .container, en un elemento flex,
   lo encogería a su contenido (la trampa de .price-card). */
.psico-banda .container{position:relative;z-index:1;width:100%;}
.psico-banda-frase{max-width:640px;margin:0 0 0 auto;text-align:right;font-family:var(--serif);font-weight:500;font-size:28px;line-height:1.45;color:#fff;text-shadow:0 2px 14px rgba(6,28,33,.45);}

/* ── Preguntas frecuentes ─────────────────────────────────────────────
   Tres fichas con el aro dorado de .price-ico encima y una barrita del
   mismo dorado en el borde de arriba. El dorado no llega a 4,5:1 sobre
   blanco, así que no toca el texto: se queda en el aro, en el trazo del
   icono y en la barrita. */
.psico-preguntas{margin-top:56px;}
.psico-faq-tit{font-size:24px;margin:0 0 26px;}
.psico-faq{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;}
/* ⚠️ Va con el combinador de hijo (> li) y no descendiente: la segunda ficha
   lleva dentro su propia lista, y con `.psico-faq li` los tres puntos salían
   con el fondo blanco, el borde, los 30px de relleno y la barrita dorada de
   una ficha (24 agosto 2026). */
.psico-faq > li{position:relative;background:#fff;border:1px solid var(--border);border-radius:14px;padding:30px 26px 28px;overflow:hidden;}
.psico-faq > li::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--yellow);}
/* El trazo va a 1,9 sobre 26px de icono: el mismo grosor relativo que el
   2 sobre 24 de .price-ico. Si se cambia la medida, revisar el aro. */
.psico-faq-ico{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:50%;background:#fff;border:2.5px solid var(--yellow);margin:0 auto 18px;transition:background .15s;}
.psico-faq-ico svg{width:26px;height:26px;stroke:var(--yellow);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:stroke .15s;}
.psico-faq > li:hover .psico-faq-ico{background:var(--yellow);}
.psico-faq > li:hover .psico-faq-ico svg{stroke:#fff;}
.psico-faq h3{font-size:19px;line-height:1.3;margin:0 0 10px;}
.psico-faq p{font-family:'Nunito Sans',var(--sans);font-weight:300;font-size:17px;line-height:1.7;color:var(--ink-soft);margin:0;}
/* La segunda ficha lleva sus tres requisitos en lista, como el original
   (Mariola, 24 agosto 2026). El punto va en dorado, como el aro y la barrita;
   se pinta con ::before y no con list-style para poder darle el color sin
   tocar el del texto. */
.psico-faq-list{list-style:none;margin:0;padding:0;display:grid;gap:9px;}
.psico-faq-list li{position:relative;padding-left:18px;font-family:'Nunito Sans',var(--sans);font-weight:300;font-size:17px;line-height:1.7;color:var(--ink-soft);}
.psico-faq-list li::before{content:'';position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--yellow);}

@media (max-width:900px){
  .tera-lateral{grid-template-columns:1fr;gap:28px;margin-top:38px;}
  .tera-texto{column-gap:40px;}
  .psico-entrada{margin-top:38px;}
  .psico-texto{margin-top:32px;}
  .psico-banda{min-height:280px;}
  .psico-banda-frase{max-width:540px;font-size:24px;}
  .psico-preguntas{margin-top:44px;}
  .psico-faq{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:720px){
  .tera-bloque h2,
  .psico-faq-tit{font-size:21px;}
  .tera-ficha-top{padding:24px 22px 20px;}
  .tera-ficha-top h2{font-size:21px;}
  .tera-ficha-list{padding:2px 22px 8px;}
  .tera-ficha-list li{padding:15px 0;gap:13px;font-size:16px;}
  .tera-lateral-main{gap:30px;}
  /* La nube ya va a la medida del pie: no se toca el tamaño, solo se junta. */
  .tera-nube{gap:8px 7px;}
  .tera-cuestion-ico{width:66px;height:66px;margin-bottom:22px;}
  .tera-quest li{font-size:19px;}
  .tera-cuestion-cierre{font-size:18px;}
  .tera-flecha{width:30px;height:30px;margin-top:38px;}
  .tera-texto{margin-top:38px;column-count:1;}
  .tera-clave{margin-top:38px;padding:24px 20px;border-radius:14px;}
  .tera-cierre{margin-top:40px;padding:24px 20px;border-radius:14px;}
  .tera-cierre p{font-size:19px;}
  .tera-proximo{margin:34px auto 40px;}
  .tera-proximo p{font-size:20px;}
  .tera-proximo p + p{font-size:17px;margin-top:14px;}
  .psico-lead{font-size:19px;}
  .psico-texto{margin-top:26px;}
  /* La banda en móvil (Mariola, 24 agosto 2026): manda el vídeo, no la frase.
     Tres cosas cambian respecto a escritorio.
     1. El barco vive entre el 15% y el 30% del ancho del clip, y a 375px el
        object-fit:cover solo deja ver la franja central (el 39%), justo la de
        agua vacía. Con object-position al 18% el barco cae en la mitad
        izquierda de lo que se ve y la frase queda sobre agua limpia.
     2. Fuera el velo de toda la banda: tapaba el vídeo entero. Queda solo un
        degradado por abajo, donde va la frase; del 55% para arriba —que es
        donde está el barco— el vídeo se ve sin nada encima.
     3. La frase baja de 20 a 13px y se pega abajo: aquí es un apunte, no un
        titular. A ese tamaño el umbral de contraste es 4,5:1; medido sobre el
        póster, el peor píxel de su caja da 5,5:1. Se probó bajando más el
        degradado (.50 arriba) y se quedaba en 4,19. Si se cambia el clip o el
        póster hay que volver a medirlo. */
  .psico-banda{min-height:250px;align-items:flex-end;}
  .psico-banda-video{object-position:18% 50%;}
  .psico-banda::after{background:linear-gradient(to top,rgba(9,42,49,.66) 0%,rgba(9,42,49,.44) 30%,rgba(9,42,49,0) 55%);}
  .psico-banda .container{padding-bottom:16px;}
  .psico-banda-frase{max-width:none;font-size:13px;line-height:1.5;text-shadow:0 1px 6px rgba(6,28,33,.7);}
  .psico-faq{grid-template-columns:1fr;gap:16px;}
  .psico-faq > li{padding:26px 22px 24px;}
  .psico-faq-ico{width:48px;height:48px;margin-bottom:14px;}
  .psico-faq-ico svg{width:23px;height:23px;}
  .psico-faq h3{font-size:18px;}
}