/* ═══════════════════════════════════════════════════════════════════════════
   Bianca Rodríguez Salas — sistema de diseño
   Reescrito limpio: la versión anterior eran tres rondas de parches encima.

   Reglas de marca (docs/BRAND.md), no negociables:
     · 3 colores: tinta #1A1212 · blanco puro · rojo #D7263D.
       Los grises salen de mezclar tinta con papel, nunca hex sueltos.
     · 2 tipografías: Fraunces (titulares) e Inter (texto).
     · Lunares grandes y cortados por el borde. Nunca de textura repetida.

   Cómo lo hacen las marcas que se ven bien, y que es lo que se aplica aquí:
     · Escala fluida con clamp(): el tamaño se adapta al ancho sin saltos bruscos
       entre móvil y escritorio. Nada de "versión móvil" aparte.
     · Ritmo vertical con una sola variable por sección, no márgenes sueltos.
     · Movimiento contenido: solo transform y opacity (las dos propiedades que el
       navegador anima sin repintar), 200-400 ms, y desactivado entero para quien
       tenga activado "reducir movimiento" en su sistema.
     · Cada zona táctil, mínimo 44 px. Es la medida a partir de la cual un dedo
       acierta sin ampliar.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --tinta:#1A1212;
  --papel:#FFFFFF;
  --rojo:#D7263D;
  --tinta-72:color-mix(in srgb,var(--tinta) 72%,var(--papel));
  --tinta-58:color-mix(in srgb,var(--tinta) 58%,var(--papel));
  --tinta-38:color-mix(in srgb,var(--tinta) 38%,var(--papel));
  --tinta-12:color-mix(in srgb,var(--tinta) 12%,var(--papel));
  --tinta-05:color-mix(in srgb,var(--tinta) 5%,var(--papel));
  --sombra:0 1px 2px color-mix(in srgb,var(--tinta) 6%,transparent),
           0 14px 40px color-mix(in srgb,var(--tinta) 8%,transparent);

  /* escala tipográfica fluida: crece con la pantalla, sin saltos */
  --t-xs:clamp(13px,.75rem + .1vw,14px);
  --t-sm:clamp(14.5px,.85rem + .15vw,15.5px);
  --t-base:clamp(16.5px,1rem + .2vw,18px);
  --t-lg:clamp(18px,1.05rem + .4vw,21px);
  --t-h3:clamp(19px,1.1rem + .55vw,24px);
  --t-h2:clamp(26px,1.5rem + 1.6vw,42px);
  --t-h1:clamp(32px,1.9rem + 2.4vw,58px);

  /* ritmo vertical, también fluido */
  --v-xs:clamp(8px,1.2vw,12px);
  --v-sm:clamp(14px,2vw,20px);
  --v-md:clamp(24px,3.4vw,40px);
  --v-lg:clamp(40px,6vw,80px);
  --v-xl:clamp(64px,9vw,124px);

  --lectura:min(100% - 2.5rem, 780px);   /* ancho cómodo de lectura */
  --ancho:min(100% - 2.5rem, 1200px);    /* ancho de escaparate */
  --radio:16px;
  --curva:cubic-bezier(.22,.68,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font-family:'Inter',system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:var(--t-base);line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}

h1,h2,h3,h4{
  font-family:'Fraunces',Georgia,serif;font-weight:900;
  line-height:1.05;letter-spacing:-.022em;text-wrap:balance;margin:0;
}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);letter-spacing:-.01em}
p{margin:0 0 1.15em;text-wrap:pretty}
strong{font-weight:600}
em{font-style:italic;color:var(--tinta-72)}

/* foco visible: quien navega con teclado tiene que ver dónde está */
:where(a,button,input,select,textarea,summary):focus-visible{
  outline:3px solid var(--rojo);outline-offset:3px;border-radius:6px;
}

/* ─────────────────────────── maquetación ─────────────────────────── */
main.site-main{display:block!important;width:100%!important;max-width:none!important;padding:0!important}
main.site-main>.page-content,main.site-main>article,.entry-content{
  width:var(--lectura);margin-inline:auto;padding-block:var(--v-lg);
}
.home main.site-main>.page-content{width:var(--ancho)}
.home .entry-content>p,.home .entry-content>h2+p{max-width:64ch}

/* ─────────────────────────── cabecera ─────────────────────────── */
.site-header{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb,var(--papel) 88%,transparent);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--tinta-12);
}
.site-header>div,.site-header-inner{
  width:var(--ancho);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--v-sm);padding-block:clamp(10px,1.4vw,16px);
}
.site-title,.site-header .site-title a{
  font-family:'Fraunces',serif!important;font-weight:900!important;
  font-size:clamp(17px,1.3vw,21px)!important;letter-spacing:-.02em;
  text-decoration:none!important;color:var(--tinta)!important;white-space:nowrap;
}
.site-title::before{
  content:"";display:inline-block;width:10px;height:10px;border-radius:50%;
  background:var(--rojo);margin-right:9px;vertical-align:baseline;
}
.site-header nav ul{display:flex;gap:2px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.site-header nav a{
  display:flex;align-items:center;min-height:44px;padding:0 clamp(9px,1vw,14px);
  border-radius:10px;text-decoration:none;font-size:var(--t-sm);font-weight:500;
  color:var(--tinta-58);transition:color .18s var(--curva),background .18s var(--curva);
}
.site-header nav a:hover{color:var(--tinta);background:var(--tinta-05)}
.site-header nav .current-menu-item>a,
.site-header nav .current_page_ancestor>a{color:var(--tinta);font-weight:600;background:var(--tinta-05)}

/* ─────────────────────────── secciones ─────────────────────────── */
.entry-content>h2{
  position:relative;margin-top:var(--v-xl);margin-bottom:var(--v-sm);padding-top:var(--v-sm);
}
.entry-content>h2::before{
  content:"";position:absolute;top:0;left:0;width:38px;height:5px;
  border-radius:99px;background:var(--rojo);
}
.entry-content>h2:first-child{margin-top:0}
.entry-content>h3{margin-top:var(--v-md);margin-bottom:var(--v-xs)}

/* ─────────────────────────── listas ─────────────────────────── */
.entry-content ul{list-style:none;padding:0;margin:0 0 var(--v-md)}
.entry-content ul li{
  position:relative;padding-left:28px;margin-bottom:.7em;
}
.entry-content ul li::before{
  content:"";position:absolute;left:2px;top:.62em;
  width:9px;height:9px;border-radius:50%;background:var(--rojo);
}

/* ─────────────────────────── enlaces ─────────────────────────── */
.entry-content a:not(.wp-block-button__link){
  color:var(--tinta);text-decoration:underline;
  text-decoration-color:color-mix(in srgb,var(--rojo) 45%,transparent);
  text-decoration-thickness:2px;text-underline-offset:3px;
  transition:color .16s var(--curva),text-decoration-color .16s var(--curva);
}
.entry-content a:not(.wp-block-button__link):hover{
  color:var(--rojo);text-decoration-color:var(--rojo);
}

/* ─────────────────────────── botones ─────────────────────────── */
.wp-block-buttons{display:flex;gap:12px;flex-wrap:wrap;margin:var(--v-md) 0}
.wp-block-button__link,.wp-element-button{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 clamp(22px,2.6vw,32px);
  background:var(--rojo);color:#fff!important;border:1.5px solid var(--rojo);
  border-radius:999px;font-family:inherit;font-size:var(--t-sm);font-weight:600;
  text-decoration:none!important;
  transition:transform .18s var(--curva),background .18s var(--curva),box-shadow .18s var(--curva);
}
.wp-block-button__link:hover{
  background:color-mix(in srgb,var(--rojo) 88%,var(--tinta));
  transform:translateY(-2px);box-shadow:0 8px 22px color-mix(in srgb,var(--rojo) 28%,transparent);
}
.wp-block-button__link:active{transform:translateY(0) scale(.98)}
.wp-block-button.is-style-outline .wp-block-button__link{
  background:transparent;color:var(--tinta)!important;border-color:var(--tinta-12);box-shadow:none;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover{
  background:var(--tinta-05);border-color:var(--tinta);transform:translateY(-2px);
}

/* ─────────────────────────── citas ─────────────────────────── */
.wp-block-quote{
  margin:var(--v-md) 0;padding:var(--v-sm) 0 var(--v-sm) var(--v-sm);
  border-left:3px solid var(--rojo);background:none;
}
.wp-block-quote p{
  font-family:'Fraunces',serif;font-size:var(--t-lg);line-height:1.4;
  font-weight:400;margin-bottom:.5em;
}
.wp-block-quote cite{
  font-family:'Inter',sans-serif;font-size:var(--t-xs);font-style:normal;
  color:var(--tinta-38);text-transform:uppercase;letter-spacing:.09em;
}

/* ─────────────────────────── imágenes ─────────────────────────── */
.entry-content figure.wp-block-image{margin:var(--v-md) 0}
.entry-content figure.wp-block-image img{border-radius:var(--radio)}
.wp-post-image{
  width:100%;aspect-ratio:16/9;object-fit:cover;
  border-radius:var(--radio);margin-bottom:var(--v-md);
}

/* ───────────────── rejilla de tratamientos (portada) ───────────────── */
.tratamientos-destacados{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));
  gap:clamp(16px,2vw,24px)!important;margin:var(--v-md) 0!important;
}
.tratamientos-destacados .wp-block-column{
  margin:0!important;flex-basis:auto!important;
  border:1px solid var(--tinta-12);border-radius:var(--radio);overflow:hidden;
  background:var(--papel);
  transition:transform .28s var(--curva),box-shadow .28s var(--curva),border-color .28s var(--curva);
}
.tratamientos-destacados .wp-block-column:hover{
  transform:translateY(-4px);box-shadow:var(--sombra);
  border-color:color-mix(in srgb,var(--rojo) 35%,var(--tinta-12));
}
.tratamientos-destacados figure{margin:0;overflow:hidden}
.tratamientos-destacados img{
  width:100%;aspect-ratio:16/11;object-fit:cover;border-radius:0;
  transition:transform .5s var(--curva);
}
.tratamientos-destacados .wp-block-column:hover img{transform:scale(1.04)}
.tratamientos-destacados h3{
  font-size:var(--t-h3);margin:var(--v-sm) var(--v-sm) 6px;padding:0;
}
.tratamientos-destacados h3::before{display:none}
.tratamientos-destacados h3 a{text-decoration:none!important;color:var(--tinta)}
.tratamientos-destacados .wp-block-column:hover h3 a{color:var(--rojo)}
.tratamientos-destacados p{
  margin:0 var(--v-sm) var(--v-sm);font-size:var(--t-sm);color:var(--tinta-58);
}

/* ─────────────────────────── separador ─────────────────────────── */
.wp-block-separator{
  border:0;height:1px;background:var(--tinta-12);
  margin:var(--v-lg) 0;width:100%;max-width:none;
}

/* ─────────────────────────── pie ─────────────────────────── */
.site-footer{
  background:var(--tinta);color:var(--papel);
  margin-top:var(--v-xl);padding:var(--v-lg) 0 var(--v-md);
  position:relative;overflow:hidden;text-align:center;
}
.site-footer::after{           /* el lunar de la marca, cortado por el borde */
  content:"";position:absolute;right:-120px;bottom:-150px;
  width:300px;height:300px;border-radius:50%;background:var(--rojo);opacity:.14;
}
.site-footer>*{position:relative;z-index:1;width:var(--ancho);margin-inline:auto}
.site-footer a{
  color:color-mix(in srgb,var(--papel) 74%,var(--tinta));text-decoration:none;
  transition:color .16s var(--curva);
}
.site-footer a:hover{color:var(--papel)}
.site-footer nav ul{
  display:flex;gap:clamp(14px,2.5vw,28px);justify-content:center;
  list-style:none;padding:0;margin:0;flex-wrap:wrap;
}
.site-footer nav a{display:flex;align-items:center;min-height:44px;font-size:var(--t-sm)}
.site-footer .copyright{
  color:color-mix(in srgb,var(--papel) 52%,var(--tinta));
  font-size:var(--t-xs);margin-top:var(--v-sm);
}

/* ───────────────── movimiento: entradas al hacer scroll ─────────────────
   Solo transform y opacity. Sutil y corto: la animación acompaña, no llama
   la atención. Se apaga entera si el sistema pide reducir movimiento.     */
@media (prefers-reduced-motion:no-preference){
  .aparece{opacity:0;transform:translateY(18px);
    transition:opacity .55s var(--curva),transform .55s var(--curva)}
  .aparece.visible{opacity:1;transform:none}
}

/* ─────────────────────────── móvil ─────────────────────────── */
@media(max-width:880px){
  .site-header>div,.site-header-inner{flex-wrap:wrap;gap:8px}
  .site-header nav ul{width:100%;overflow-x:auto;flex-wrap:nowrap;
    scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px}
  .site-header nav ul::-webkit-scrollbar{display:none}
  .site-header nav a{white-space:nowrap}
  .wp-block-buttons .wp-block-button{flex:1 1 100%}
  .wp-block-button__link{width:100%}
  .wp-post-image{aspect-ratio:4/3}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}
/* ═══════════════════════════════════════════════════════════════════════════
   RITMO VERTICAL — parche que corrige el fallo de selector

   Hello Elementor mete el contenido en  div.page-content , no en
   .entry-content . Todo el bloque de "secciones/listas/enlaces/botones" del
   sistema apuntaba solo a .entry-content, así que NO se aplicaba nada: los
   titulares se quedaban con margin:0 y la página salía apelmazada.

   Aquí se re-declara todo con :is(.entry-content,.page-content) y, de paso,
   se abre el ritmo: un titular de 42px necesita más aire que uno de 18px, y
   una pregunta frecuente necesita separarse de la respuesta anterior o el
   ojo no distingue dónde acaba una y empieza otra.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --v-titular:clamp(16px,2.2vw,26px);   /* titular → su primer párrafo */
  --v-parrafo:1.45em;                   /* párrafo → párrafo */
}

/* el texto respira: interlineado algo más abierto que el de un titular */
body{line-height:1.72}
:is(.entry-content,.page-content) p{margin:0 0 var(--v-parrafo)}

/* los titulares dejan de ir pegados: h3 de 24px con 1.05 se leía como un bloque */
h2{line-height:1.09}
h3{line-height:1.28}

/* ── el H1 vive fuera del contenido, en .page-header ── */
.page-header{
  width:var(--lectura);margin-inline:auto;
  padding-block:var(--v-lg) 0;
}
.page-header .entry-title{margin:0}
.page-header + .page-content{padding-block-start:var(--v-md)}

/* ── secciones ── */
:is(.entry-content,.page-content)>h2{
  position:relative;
  margin-top:var(--v-xl);margin-bottom:var(--v-titular);padding-top:var(--v-sm);
}
:is(.entry-content,.page-content)>h2::before{
  content:"";position:absolute;top:0;left:0;width:38px;height:5px;
  border-radius:99px;background:var(--rojo);
}
:is(.entry-content,.page-content)>h2:first-child{margin-top:0}

/* ── subtítulos ── */
:is(.entry-content,.page-content)>h3{
  margin-top:var(--v-md);margin-bottom:clamp(10px,1.2vw,15px);
}
/* el primero justo debajo de su sección no necesita el hueco entero */
:is(.entry-content,.page-content)>h2+h3{margin-top:var(--v-sm)}

/* Preguntas frecuentes y similares: cada bloque se separa del anterior con
   una línea fina. Es lo que convierte una lista apelmazada en una lista que
   se recorre con la vista sin releer. */
:is(.entry-content,.page-content)>:is(p,ul,ol,figure,.wp-block-buttons)+h3{
  margin-top:var(--v-md);
  padding-top:var(--v-md);
  border-top:1px solid var(--tinta-12);
}

/* ── entradilla: el primer párrafo de la página entra más grande ── */
.page-content>p:first-of-type,
.page-content>.wp-post-image+p{
  font-size:var(--t-lg);line-height:1.6;color:var(--tinta-72);
}

/* ── listas ── */
:is(.entry-content,.page-content) ul{list-style:none;padding:0;margin:0 0 var(--v-md)}
:is(.entry-content,.page-content) ul li{position:relative;padding-left:30px;margin-bottom:.85em}
:is(.entry-content,.page-content) ul li::before{
  content:"";position:absolute;left:2px;top:.66em;
  width:9px;height:9px;border-radius:50%;background:var(--rojo);
}

/* ── enlaces ── */
:is(.entry-content,.page-content) a:not(.wp-block-button__link){
  color:var(--tinta);text-decoration:underline;
  text-decoration-color:color-mix(in srgb,var(--rojo) 45%,transparent);
  text-decoration-thickness:2px;text-underline-offset:3px;
  transition:color .16s var(--curva),text-decoration-color .16s var(--curva);
}
:is(.entry-content,.page-content) a:not(.wp-block-button__link):hover{
  color:var(--rojo);text-decoration-color:var(--rojo);
}

/* ── imágenes dentro del contenido ── */
:is(.entry-content,.page-content) figure.wp-block-image{margin:var(--v-md) 0}
:is(.entry-content,.page-content) figure.wp-block-image img{border-radius:var(--radio)}

/* ── el cierre de página (pide cita) se despega del texto anterior ── */
:is(.entry-content,.page-content)>.wp-block-buttons{margin-block:var(--v-md) var(--v-sm)}
/* ═══════════════════════════════════════════════════════════════════════════
   REJILLA DE TRATAMIENTOS + LUNARES DE MARCA
   ═══════════════════════════════════════════════════════════════════════════ */

/* overflow-x: clip en vez de hidden.
   hidden convierte el <body> en contenedor de scroll y eso rompe el menú
   pegajoso de arriba. clip recorta igual pero sin crear scroll, así que el
   menú sigue funcionando. Los navegadores viejos ignoran clip y usan hidden. */
body{overflow-x:hidden;overflow-x:clip;position:relative}

/* ─────────────────── rejilla de tratamientos con foto ─────────────────── */
.rejilla{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));
  gap:clamp(14px,1.8vw,22px);
  margin:0 0 var(--v-lg);padding:0;list-style:none;
}
.rejilla li{margin:0;padding:0}
.rejilla li::before{display:none}          /* aquí no va el punto de lista */

.rejilla a{
  display:flex;flex-direction:column;height:100%;
  text-decoration:none!important;color:inherit;
  border:1px solid var(--tinta-12);border-radius:var(--radio);
  overflow:hidden;background:var(--papel);
  transition:transform .3s var(--curva),box-shadow .3s var(--curva),border-color .3s var(--curva);
}
.rejilla a:hover,.rejilla a:focus-visible{
  transform:translateY(-4px);box-shadow:var(--sombra);
  border-color:color-mix(in srgb,var(--rojo) 38%,var(--tinta-12));
}
.rejilla .foto{overflow:hidden;background:var(--tinta-05)}
.rejilla img{
  width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  transition:transform .55s var(--curva);
}
.rejilla a:hover img{transform:scale(1.05)}
.rejilla .texto{padding:clamp(13px,1.5vw,17px);display:flex;flex-direction:column;gap:5px}
.rejilla h3{
  font-size:clamp(17px,1rem + .35vw,20px);margin:0!important;
  padding:0!important;border:0!important;line-height:1.25;
}
.rejilla h3::before{display:none!important}
.rejilla a:hover h3{color:var(--rojo)}
.rejilla p{
  margin:0;font-size:var(--t-sm);line-height:1.5;color:var(--tinta-58);
}
/* la flecha aparece al pasar por encima: dice "esto se puede pulsar" */
.rejilla .mas{
  margin-top:auto;padding-top:9px;font-size:var(--t-xs);font-weight:600;
  color:var(--rojo);letter-spacing:.02em;
  opacity:0;transform:translateX(-4px);
  transition:opacity .25s var(--curva),transform .25s var(--curva);
}
.rejilla a:hover .mas,.rejilla a:focus-visible .mas{opacity:1;transform:none}
@media (hover:none){.rejilla .mas{opacity:1;transform:none}}

/* ─────────────────────────── LUNARES ───────────────────────────
   Regla de marca: grandes (≥100px), cortados por el borde, como mucho 5 por
   página. Nunca de textura repetida. Aquí hay tres, colocados a propósito:
   uno arriba, uno a media página y el del pie. Van detrás del texto y no
   capturan el ratón.
   El movimiento es una deriva muy lenta: solo transform (el navegador la
   resuelve en la tarjeta gráfica, no repinta) y se apaga entera si el sistema
   pide reducir movimiento.                                                    */
.lunar{
  position:absolute;border-radius:50%;background:var(--rojo);
  pointer-events:none;z-index:0;
  will-change:transform;backface-visibility:hidden;
}
.page-header,.page-content,.site-footer{position:relative}
.page-header>*,.page-content>*{position:relative;z-index:1}

/* arriba a la derecha, cortado por el borde de la pantalla */
.page-header::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:clamp(210px,26vw,380px);aspect-ratio:1;border-radius:50%;
  background:var(--rojo);opacity:.085;
  top:calc(var(--v-lg) * -.55);right:calc(var(--ancho) * -.08 - 90px);
  will-change:transform;backface-visibility:hidden;
}
/* a media página, asomando por la izquierda */
.page-content::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:clamp(170px,20vw,300px);aspect-ratio:1;border-radius:50%;
  background:var(--rojo);opacity:.06;
  top:58%;left:-140px;
  will-change:transform;backface-visibility:hidden;
}

@media (prefers-reduced-motion:no-preference){
  @keyframes deriva-a{
    from{transform:translate3d(0,0,0)}
    to  {transform:translate3d(-14px,20px,0)}
  }
  @keyframes deriva-b{
    from{transform:translate3d(0,0,0)}
    to  {transform:translate3d(16px,-16px,0)}
  }
  .page-header::before{animation:deriva-a 21s var(--curva) infinite alternate}
  .page-content::after{animation:deriva-b 27s var(--curva) infinite alternate}
  .site-footer::after {animation:deriva-a 24s var(--curva) infinite alternate}
}

/* ─────────── el movimiento no puede dejar la página en blanco ───────────
   Antes .aparece ponía opacity:0 siempre. Si el JS no llegaba a ejecutarse
   (bloqueado, error, red lenta), el contenido se quedaba invisible del todo.
   Ahora solo se esconde si el JS ha confirmado que está vivo, marcando <html>
   con .js-mov. Sin JS, se ve todo desde el primer momento.                  */
@media (prefers-reduced-motion:no-preference){
  .js-mov .aparece{
    opacity:0;transform:translate3d(0,18px,0);
    will-change:opacity,transform;
    transition:opacity .55s var(--curva),transform .55s var(--curva);
  }
  .js-mov .aparece.visible{opacity:1;transform:none;will-change:auto}
}
/* ═══════════════════════════════════════════════════════════════════════════
   IDENTIDAD — el lunar como sistema, no como adorno

   Su marca son lunares ROJOS y GRANDES sobre blanco (pin-up modernizado).
   Antes salían rosa pálido: correcto de paleta, pero tímido. Un lunar de
   marca tiene que leerse rojo.

   Cómo se resuelve el conflicto rojo-fuerte / texto-legible: el lunar vive
   SIEMPRE en el margen exterior y se corta con el borde de la pantalla. El
   texto ocupa 780 px centrados; en una pantalla de 1280 sobran 250 px a cada
   lado. Ahí es donde entra el lunar, a plena saturación, sin pisar una letra.
   En móvil no hay margen, así que se va casi entero fuera y baja de opacidad.

   Tope de marca: 5 lunares por página como máximo.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --rosa:#FAD4D9;                       /* el tercer color de su paleta */
  --lunar-1:clamp(180px,30vw,400px);
  --lunar-2:clamp(120px,20vw,260px);
}

/* ── 1 · el lunar grande de la cabecera: rojo pleno, cortado a la derecha ── */
.page-header::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:var(--lunar-1);aspect-ratio:1;border-radius:50%;
  background:var(--rojo);opacity:1;
  /* se ancla al borde de la ventana, no al texto: siempre cortado */
  top:calc(var(--v-lg) * -.35);
  right:calc(50% - 50vw - var(--lunar-1) * .52);
  will-change:transform;backface-visibility:hidden;
}

/* ── 2 · el rosa de acompañamiento, arriba a la izquierda ── */
.page-header::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:var(--lunar-2);aspect-ratio:1;border-radius:50%;
  background:var(--rosa);
  top:calc(var(--v-lg) * 1.15);
  left:calc(50% - 50vw - var(--lunar-2) * .58);
  will-change:transform;backface-visibility:hidden;
}

/* ── 3 · a media página, rojo asomando por la izquierda ── */
.page-content::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:var(--lunar-2);aspect-ratio:1;border-radius:50%;
  background:var(--rojo);opacity:1;
  top:52%;left:calc(50% - 50vw - var(--lunar-2) * .6);
  will-change:transform;backface-visibility:hidden;
}

/* ── 4 · rosa antes del cierre, a la derecha ── */
.page-content::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:var(--lunar-2);aspect-ratio:1;border-radius:50%;
  background:var(--rosa);
  bottom:6%;right:calc(50% - 50vw - var(--lunar-2) * .55);
  will-change:transform;backface-visibility:hidden;
}
/* (el 5º es el del pie, que ya estaba) */

/* en pantallas estrechas no hay margen: se retiran casi del todo */
@media(max-width:900px){
  .page-header::before{right:calc(50% - 50vw - var(--lunar-1) * .68);opacity:.9}
  .page-header::after,.page-content::before{opacity:.7}
  .page-content::after{opacity:.85}
}

/* ── marcador de sección: un lunar, no una barra ──
   Su marca son círculos. Una barra era un recurso editorial cualquiera; el
   punto rojo repite el mismo gesto que el logotipo y las viñetas. */
:is(.entry-content,.page-content)>h2::before{
  width:14px!important;height:14px!important;border-radius:50%!important;
  top:calc(var(--v-sm) - 20px)!important;
}

/* ── antetítulo: dónde estoy (y de paso, migas para el buscador) ── */
.antetitulo{
  display:block;font-family:'Inter',sans-serif;font-size:var(--t-xs);
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta-38);margin-bottom:clamp(10px,1.4vw,16px);
}
.antetitulo a{color:inherit;text-decoration:none}
.antetitulo a:hover{color:var(--rojo)}
.antetitulo .punto{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--rojo);margin-right:9px;vertical-align:middle;
}

/* ── la rejilla necesita más ancho que una columna de lectura ── */
.page-content:has(.rejilla,.videoclub){width:var(--ancho)}
.page-content:has(.rejilla,.videoclub)>:is(p,h2,h3,ul:not(.rejilla):not(.videoclub),ol,.wp-block-buttons){
  max-width:780px;
}
.page-content:has(.rejilla,.videoclub)>.wp-post-image{max-width:none}

/* ── movimiento de los lunares: deriva lenta, solo transform ── */
@media (prefers-reduced-motion:no-preference){
  @keyframes deriva-c{from{transform:translate3d(0,0,0)}to{transform:translate3d(10px,26px,0)}}
  .page-header::before{animation:deriva-a 21s var(--curva) infinite alternate}
  .page-header::after {animation:deriva-c 25s var(--curva) infinite alternate}
  .page-content::after{animation:deriva-b 27s var(--curva) infinite alternate}
  .page-content::before{animation:deriva-c 31s var(--curva) infinite alternate}
}

/* ── tarjetas: el nombre manda, la frase acompaña ── */
.rejilla h3{font-size:clamp(17px,1rem + .3vw,19px)}
.rejilla .texto{gap:6px}

/* ═══════════════════════════════════════════════════════════════════════════
   PARCHES VERIFICADOS CON NAVEGADOR REAL (puppeteer, 3 anchos × 7 páginas)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · recorte de los lunares, donde SÍ funciona ──
   Medido: poner overflow-x en el <body> NO recortaba nada (el navegador
   propaga ese valor al lienzo de la ventana y deja de aplicarlo como caja), y
   cada página se iba entre 116 y 193 px a la derecha → barra horizontal.
   El recorte tiene que ir en una caja normal: <main>, que ocupa justo el ancho
   de la ventana. Así el lunar se corta exactamente en el borde, que es el
   efecto buscado.
   clip y no hidden: hidden convertiría <main> en zona de scroll. */
body{overflow-x:visible}
main.site-main{overflow-x:clip}

/* ── 2 · ritmo: el hueco antes de cada sección era excesivo ──
   Hasta 124 px sobre una columna de 780 partía la página en trozos sueltos.
   Con el lunar de marcador encima ya hay separación de sobra. */
:is(.entry-content,.page-content)>h2{margin-top:var(--v-lg)}
:is(.entry-content,.page-content)>h2::before{top:calc(var(--v-sm) - 12px)!important}

/* ── 3 · portada: titular y contenido al mismo ancho ──
   El titular salía a 780 px y el texto a 1200: descuadrado. En la portada
   mandan los 1200 (hay escaparate), y el texto corrido se limita a 64
   caracteres para que se siga leyendo cómodo. */
.home .page-header{width:var(--ancho)}
.home .page-content>p,
.home .page-content>.wp-block-buttons{max-width:64ch}

/* mismo criterio en el índice de tratamientos, que también va ancho */
.page-content:has(.rejilla,.videoclub){width:var(--ancho)}
body:has(.rejilla,.videoclub) .page-header{width:var(--ancho)}

/* ── 4 · las imágenes a todo ancho no pueden salirse del contenedor ── */
.page-content .alignfull,
.page-content .alignwide{width:100%;max-width:100%;margin-left:0;margin-right:0}

/* ═══════════════════════════════════════════════════════════════════════════
   CARRUSEL DE RESEÑAS

   Pasa solo, despacio y en bucle sin salto: la tira está duplicada y se
   desplaza exactamente la mitad, así que el fotograma final coincide con el
   inicial.

   Solo se anima transform. Es la única propiedad (con opacity) que el
   navegador resuelve en la tarjeta gráfica sin recalcular la página: por eso
   un carrusel así no mueve la aguja del rendimiento aunque esté siempre
   girando.

   Se para al pasar el ratón o al llegar con el tabulador, para poder leer.
   Y si el sistema pide reducir movimiento, no se mueve nada: se convierte en
   una lista que se arrastra con el dedo.
   ═══════════════════════════════════════════════════════════════════════════ */

.resenas{margin:var(--v-md) 0 var(--v-lg)}

.resenas-resumen{
  margin:0 0 var(--v-sm);font-size:var(--t-sm);color:var(--tinta-58);
}
.resenas-resumen b{color:var(--tinta);font-weight:600}

/* el marco recorta; se va difuminando por los lados para que se entienda
   que la tira sigue más allá del borde */
.resenas-marco{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}

.resenas-pista{
  display:flex;align-items:stretch;gap:clamp(12px,1.4vw,18px);
  width:max-content;margin:0;padding:4px 0;list-style:none;
  will-change:transform;backface-visibility:hidden;
}
.resenas-pista>.copia{display:flex;gap:inherit}
.resenas-pista li::before{display:none}          /* aquí no van viñetas */

.resena{margin:0;padding:0;width:clamp(250px,25vw,318px);flex:0 0 auto;display:flex}
.resena article{
  display:flex;flex-direction:column;gap:9px;width:100%;
  padding:clamp(15px,1.7vw,20px);
  border:1px solid var(--tinta-12);border-radius:var(--radio);background:var(--papel);
}
.resena header{display:flex;align-items:center;gap:10px}
.resena .inicial{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--rojo);color:#fff;
  font-family:'Fraunces',serif;font-weight:900;font-size:17px;line-height:1;
}
.resena .quien{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.resena .quien b{
  font-size:var(--t-sm);font-weight:600;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.resena time{font-size:var(--t-xs);color:var(--tinta-38);text-transform:capitalize}
.resena .fuente{
  flex:0 0 auto;font-size:11px;font-weight:600;letter-spacing:.04em;
  color:var(--tinta-38);border:1px solid var(--tinta-12);
  border-radius:99px;padding:3px 9px;
}
.resena p{
  margin:0;font-size:var(--t-sm);line-height:1.55;color:var(--tinta-72);
}

/* Las estrellas van en el ámbar de Google a propósito: dentro de una tarjeta
   de reseña son una cita de la fuente, como lo sería su logotipo, y es lo que
   hace que se reconozca al instante. Fuera de estas tarjetas no se usa este
   color en ningún otro sitio de la web. */
.estrellas{display:inline-flex;gap:2px}
.estrellas svg{width:15px;height:15px;display:block}
.estrellas svg.on{fill:#FBBC04}
.estrellas svg.off{fill:var(--tinta-12)}

/* ── el desfile ── */
@media (prefers-reduced-motion:no-preference){
  @keyframes desfile{
    from{transform:translate3d(0,0,0)}
    to  {transform:translate3d(-50%,0,0)}
  }
  .resenas-pista{animation:desfile 78s linear infinite}
  .resenas:hover .resenas-pista,
  .resenas:focus-within .resenas-pista{animation-play-state:paused}
}

/* si el sistema pide menos movimiento, se arrastra con el dedo */
@media (prefers-reduced-motion:reduce){
  .resenas-marco{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-mask-image:none;mask-image:none}
  .resena{scroll-snap-align:start}
  .resenas-pista>.copia{display:none}
}

/* en móvil la tarjeta se estrecha para que se vea que hay más detrás */
@media(max-width:600px){
  .resena{width:min(78vw,290px)}
}

/* ── el carrusel de reseñas va más ancho que la columna de lectura ──
   Un carrusel solo se entiende si se ve que hay más tarjetas entrando por el
   lado. Encajado en 780 px apenas caben dos y media. Se le da el ancho de
   escaparate y el difuminado de los bordes hace el resto. */
.page-content>.resenas{
  width:var(--ancho);
  margin-left:calc(50% - var(--ancho) / 2);
  margin-right:calc(50% - var(--ancho) / 2);
  max-width:none;
}
@media(max-width:1260px){
  .page-content>.resenas{
    width:calc(100vw - 2.5rem);
    margin-left:calc(50% - (100vw - 2.5rem) / 2);
    margin-right:calc(50% - (100vw - 2.5rem) / 2);
  }
}

/* Corrección: --ancho está definido con porcentajes, así que dentro del
   carrusel se resolvía contra los 780 px de la columna (740 px) en vez de
   contra la ventana, y salía aún más estrecho. Se calcula desde el ancho de
   la ventana, que es lo que se quiere de verdad. */
.page-content>.resenas{
  --escaparate:min(100vw - 2.5rem, 1200px);
  width:var(--escaparate);
  margin-left:calc(50% - var(--escaparate) / 2);
  margin-right:calc(50% - var(--escaparate) / 2);
  max-width:none;
}

/* ── el lunar marcador tenía −2 px de hueco: se metía dentro de la caja del
   titular y se leía como un acento sobre la primera letra. Medido con
   navegador. Ahora el titular reserva 36 px arriba y el punto ocupa 12, así
   que quedan 24 px limpios entre el punto y la letra. ── */
:is(.entry-content,.page-content)>h2{padding-top:36px}
:is(.entry-content,.page-content)>h2::before{
  top:0!important;width:12px!important;height:12px!important;
}

/* El punto de sección medía 12 px y las viñetas 9: demasiado parecidos, el
   marcador se leía como una viñeta suelta. A 17 px la jerarquía se entiende
   sola — es el mismo gesto de marca, en su papel de titular. */
:is(.entry-content,.page-content)>h2{padding-top:41px}
:is(.entry-content,.page-content)>h2::before{width:17px!important;height:17px!important}

/* ═══════════════════════════════════════════════════════════════════════════
   BRANDING · segunda vuelta al marcador de sección

   Qué estaba mal: el lunar iba SUELTO encima del titular. Un círculo rojo
   flotando en medio del blanco, sin tocar nada, no se lee como marca — se lee
   como algo que se ha colado. Y da igual el tamaño o el hueco que le pongas:
   el fallo es que no tiene relación con ningún otro elemento.

   Qué se hace en su lugar: el lunar pasa a ser el PUNTO FINAL del titular.

   Por qué funciona:
     · Nunca puede flotar: va pegado a la última letra, forma parte de la frase.
     · Cierra una idea. "En lo que creo●" es una afirmación, no una etiqueta.
     · Cierra el sistema de marca: el logotipo ABRE con un lunar
       (● Bianca Rodríguez Salas) y cada sección CIERRA con otro. Mismo gesto,
       principio y final.
     · Es tipográfico, no decorativo: se escala con la letra, así que en móvil
       y en escritorio guarda siempre la misma proporción.
   ═══════════════════════════════════════════════════════════════════════════ */

/* fuera el lunar suelto de encima */
:is(.entry-content,.page-content)>h2::before{display:none!important}

/* el titular recupera su espacio: ya no tiene que reservar sitio arriba */
:is(.entry-content,.page-content)>h2{
  padding-top:0;
  /* el hueco de antes era de hasta 120 px sobre una columna de 780: la página
     se rompía en trozos sin relación. Este respira sin desconectar. */
  margin-top:clamp(38px,5vw,68px);
  margin-bottom:clamp(14px,1.8vw,22px);
}

/* el lunar, ahora punto final */
:is(.entry-content,.page-content)>h2::after{
  content:"";
  display:inline-block;
  width:.30em;height:.30em;          /* en em: crece con el titular */
  border-radius:50%;
  background:var(--rojo);
  margin-left:.14em;
  vertical-align:baseline;
}

/* el H1 de cada página cierra igual: es el titular mayor de todos */
.page-header .entry-title::after{
  content:"";display:inline-block;
  width:.26em;height:.26em;border-radius:50%;
  background:var(--rojo);margin-left:.15em;vertical-align:baseline;
}

/* En las tarjetas y en las preguntas frecuentes NO se pone: allí el punto
   rojo sería ruido repetido, y esos titulares no cierran una sección. */
.rejilla h3::after,.rejilla h3::before{display:none!important}

/* la etiqueta de origen baja a la fila de las estrellas: en tarjeta estrecha
   robaba el sitio al nombre y lo partía */
.resena .fila{display:flex;align-items:center;justify-content:space-between;gap:10px}
.resena header{gap:11px}
.resena time{white-space:nowrap}
.resena .quien b{white-space:normal}

/* ── franja de precio y duración ──
   Es lo primero que busca quien entra a una ficha de tratamiento, así que va
   arriba del todo y se lee de un vistazo, sin competir con el titular. */
.ficha-servicio{
  display:inline-flex;align-items:center;gap:10px;
  margin:0 0 var(--v-md);padding:9px 16px;
  border:1px solid var(--tinta-12);border-radius:999px;
  font-size:var(--t-sm);color:var(--tinta-58);
  font-variant-numeric:tabular-nums;
}
.ficha-servicio strong{color:var(--rojo);font-weight:600;font-size:var(--t-base)}
.ficha-servicio em{font-style:normal}

/* ── formulario de empleo ──
   Dos columnas en escritorio, una en móvil. Las zonas de toque, 48 px:
   quien rellena esto lo hace a menudo desde el móvil y con prisa. */
.empleo{margin:var(--v-md) 0 var(--v-lg)}
.empleo .campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:clamp(14px,1.8vw,20px)}
.empleo .campos>p{margin:0;display:flex;flex-direction:column;gap:7px}
.empleo .campos>p.ancho{grid-column:1/-1}
.empleo label{font-size:var(--t-xs);font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--tinta-58)}
.empleo label span{text-transform:none;letter-spacing:0;font-weight:400;color:var(--tinta-38)}
.empleo input[type=text],.empleo input[type=tel],.empleo input[type=email],
.empleo select,.empleo textarea{
  width:100%;min-height:48px;padding:12px 14px;
  font:inherit;font-size:var(--t-sm);color:var(--tinta);
  background:var(--papel);border:1px solid var(--tinta-12);border-radius:12px;
  transition:border-color .16s var(--curva),box-shadow .16s var(--curva);
}
.empleo textarea{min-height:130px;resize:vertical;line-height:1.55}
.empleo :is(input,select,textarea):focus{
  outline:none;border-color:var(--rojo);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--rojo) 16%,transparent);
}
.empleo select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--tinta-58) 50%),
                   linear-gradient(135deg,var(--tinta-58) 50%,transparent 50%);
  background-position:calc(100% - 20px) 21px,calc(100% - 14px) 21px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:42px}
.empleo input[type=file]{font-size:var(--t-sm);padding:12px 0}
.empleo input[type=file]::file-selector-button{
  margin-right:12px;padding:11px 18px;min-height:44px;
  border:1px solid var(--tinta-12);border-radius:999px;background:var(--papel);
  font:inherit;font-size:var(--t-xs);font-weight:600;text-transform:uppercase;
  letter-spacing:.07em;color:var(--rojo);cursor:pointer}
.empleo input[type=file]::file-selector-button:hover{background:var(--tinta-05);border-color:var(--rojo)}
.empleo .consentimiento label{text-transform:none;letter-spacing:0;font-weight:400;
  font-size:var(--t-sm);color:var(--tinta-58);flex-direction:row;display:flex;
  align-items:flex-start;gap:10px;line-height:1.5}
.empleo .consentimiento input{margin-top:3px;width:18px;height:18px;accent-color:var(--rojo);flex:0 0 auto}
.empleo .enviar{margin:var(--v-md) 0 0}
.empleo button{
  min-height:52px;padding:0 clamp(24px,3vw,36px);
  background:var(--rojo);color:#fff;border:1.5px solid var(--rojo);border-radius:999px;
  font:inherit;font-size:var(--t-sm);font-weight:600;cursor:pointer;
  transition:transform .18s var(--curva),background .18s var(--curva),box-shadow .18s var(--curva)}
.empleo button:hover{background:color-mix(in srgb,var(--rojo) 88%,var(--tinta));
  transform:translateY(-2px);box-shadow:0 8px 22px color-mix(in srgb,var(--rojo) 28%,transparent)}
.empleo button:active{transform:translateY(0) scale(.98)}
/* el campo trampa: invisible para personas, presente para los robots */
.empleo .trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.empleo-aviso{padding:14px 18px;border-radius:12px;margin:0 0 var(--v-sm);font-size:var(--t-sm)}
.empleo-aviso.ok{background:#e7f6ec;color:#0a5c2b;border:1px solid #b6e0c4}
.empleo-aviso.mal{background:color-mix(in srgb,var(--rojo) 8%,var(--papel));
  color:var(--rojo);border:1px solid color-mix(in srgb,var(--rojo) 30%,transparent)}
@media(max-width:600px){.empleo button{width:100%}}

/* ── el reservador de la app, incrustado ── */
.reservador{margin:var(--v-md) 0 var(--v-lg);min-height:420px}
.reservador iframe{width:100%!important;border:0;border-radius:var(--radio);
  background:var(--papel);box-shadow:var(--sombra)}

/* ── videoclub de formaciones ──
   Cuadrados de verdad (1:1). Se ven varios de un vistazo, así que no hay que
   bajar media página para saber qué ofrece. Al pulsar, cada uno abre su
   propia página con el vídeo, el temario y el precio. */
.videoclub{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));
  gap:clamp(14px,1.8vw,22px);margin:var(--v-md) 0 var(--v-lg);padding:0;list-style:none;
}
.videoclub li{margin:0;padding:0}
.videoclub li::before{display:none}
.videoclub a{
  display:flex;flex-direction:column;height:100%;text-decoration:none!important;color:inherit;
  border:1px solid var(--tinta-12);border-radius:var(--radio);overflow:hidden;background:var(--papel);
  transition:transform .3s var(--curva),box-shadow .3s var(--curva),border-color .3s var(--curva);
}
.videoclub a:hover,.videoclub a:focus-visible{
  transform:translateY(-4px);box-shadow:var(--sombra);
  border-color:color-mix(in srgb,var(--rojo) 38%,var(--tinta-12));
}
.videoclub .cuadro{position:relative;display:block;aspect-ratio:1;overflow:hidden;background:var(--tinta-05)}
.videoclub .cuadro img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .55s var(--curva)}
.videoclub a:hover .cuadro img{transform:scale(1.05)}
.videoclub .sinfoto{display:block;width:100%;height:100%;
  background:radial-gradient(circle at 70% 30%,color-mix(in srgb,var(--rosa) 70%,var(--papel)),var(--tinta-05))}
/* el triángulo de reproducir: dice que ahí dentro hay vídeo */
.videoclub .play{
  position:absolute;inset:auto auto 12px 12px;width:38px;height:38px;border-radius:50%;
  background:color-mix(in srgb,var(--tinta) 62%,transparent);backdrop-filter:blur(6px);
  display:grid;place-items:center;transition:background .25s var(--curva),transform .25s var(--curva);
}
.videoclub .play::after{content:"";border-style:solid;border-width:7px 0 7px 12px;
  border-color:transparent transparent transparent #fff;margin-left:3px}
.videoclub a:hover .play{background:var(--rojo);transform:scale(1.08)}
.videoclub .modo{
  position:absolute;top:12px;right:12px;
  background:var(--papel);color:var(--tinta);border-radius:999px;
  padding:5px 12px;font-size:11px;font-weight:600;letter-spacing:.04em;
}
.videoclub .texto{padding:clamp(13px,1.5vw,17px);display:flex;flex-direction:column;gap:6px;flex:1}
.videoclub h3{font-size:clamp(17px,1rem + .3vw,19px);margin:0!important;padding:0!important;
  border:0!important;line-height:1.25}
.videoclub h3::before,.videoclub h3::after{display:none!important}
.videoclub a:hover h3{color:var(--rojo)}
.videoclub .texto p{margin:0;font-size:var(--t-sm);line-height:1.5;color:var(--tinta-58)}
.videoclub .pie{margin-top:auto;padding-top:10px;display:flex;align-items:baseline;
  gap:10px;flex-wrap:wrap;border-top:1px solid var(--tinta-12)}
.videoclub .pie b{color:var(--rojo);font-size:var(--t-base);font-weight:600;font-variant-numeric:tabular-nums}
.videoclub .pie i{font-style:normal;font-size:var(--t-xs);color:var(--tinta-38)}

/* dentro de cada formación */
.video-formacion{margin:0 0 var(--v-md);border-radius:var(--radio);overflow:hidden;
  background:var(--tinta);box-shadow:var(--sombra)}
.video-formacion iframe,.video-formacion video{width:100%;aspect-ratio:16/9;height:auto;display:block;border:0}
.dosier{margin:var(--v-md) 0 0}
.dosier a{
  display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 24px;
  border:1.5px solid var(--tinta-12);border-radius:999px;
  text-decoration:none!important;font-size:var(--t-sm);font-weight:600;color:var(--tinta)!important;
  transition:border-color .18s var(--curva),background .18s var(--curva),transform .18s var(--curva);
}
.dosier a::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--rojo);flex:0 0 auto}
.dosier a:hover{border-color:var(--rojo);background:var(--tinta-05);transform:translateY(-2px)}

/* En móvil, un cuadrado de 318 px ocupa toda la pantalla y solo se ve UNO:
   parece que hay una formación en vez de tres. A dos columnas se ven cuatro
   de un vistazo, que es de lo que va un videoclub. */
@media(max-width:600px){
  .videoclub{grid-template-columns:repeat(2,1fr);gap:12px}
  .videoclub .texto{padding:11px;gap:4px}
  .videoclub h3{font-size:15px;line-height:1.2}
  .videoclub .texto p{font-size:13px;line-height:1.4;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .videoclub .pie{padding-top:8px;gap:6px}
  .videoclub .pie b{font-size:15px}
  .videoclub .modo{font-size:10px;padding:4px 9px;top:8px;right:8px}
  .videoclub .play{width:30px;height:30px;bottom:8px;left:8px}
  .videoclub .play::after{border-width:6px 0 6px 10px}
}

/* ── La foto de Bianca aparece, no aterriza ──
   Sube 22 px mientras se despeja de un desenfoque suave y de una escala
   ligeramente mayor. El desenfoque es lo que le da el aire de foto revelándose
   en vez de "elemento que entra": empieza en 14 px y termina en cero.
   Un segundo largo con una curva que frena al final — si va rápido parece un
   fallo de carga; si va lento, se nota que es a propósito.
   Solo se animan filter, transform y opacity. Ninguna obliga al navegador a
   recalcular la página. */
@media (prefers-reduced-motion:no-preference){
  @keyframes revelar{
    from{opacity:0;transform:translate3d(0,22px,0) scale(1.04);filter:blur(14px) saturate(.8)}
    60% {opacity:1}
    to  {opacity:1;transform:none;filter:blur(0) saturate(1)}
  }
  .page-content>.wp-post-image{
    animation:revelar 1.15s cubic-bezier(.16,.84,.34,1) both;
    will-change:transform,opacity,filter;backface-visibility:hidden;
  }
  /* al terminar deja de reservar memoria de vídeo */
  .page-content>.wp-post-image{animation-fill-mode:both}
}

/* El retrato es cuadrado: recortarlo a 16/9 le corta la cara. En la página de
   Bianca se muestra entero y a un ancho contenido, que es lo que pide un
   retrato: no compite con el texto, lo acompaña. */
body.page .page-content>.wp-post-image{aspect-ratio:auto}
.page-content>.wp-post-image[src*="bianca-retrato"]{
  aspect-ratio:1;width:min(100%,420px);margin-inline:auto;object-fit:cover;
}

/* ── El retrato de Bianca, sangrado ──
   La foto viene recortada sobre blanco, igual que el fondo de la web: si se
   le pone marco, sombra o esquinas redondeadas se ve el corte. Sin nada de
   eso, la figura sale directamente del papel. Es el mismo recurso que usan las
   marcas de moda con los recortes de producto.
   Se le da un lunar rojo detrás, descentrado, para que no flote en el vacío:
   así el blanco alrededor se lee como decisión, no como hueco. */
.page-content>.wp-post-image[src*="bianca-recorte"]{
  aspect-ratio:auto;width:min(100%,520px);height:auto;
  margin:0 auto var(--v-md);display:block;object-fit:contain;
  border-radius:0;box-shadow:none;background:none;
  position:relative;z-index:1;
}
.page-content:has(.wp-post-image[src*="bianca-recorte"])::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:clamp(190px,26vw,330px);aspect-ratio:1;border-radius:50%;
  background:var(--rosa);opacity:1;
  top:clamp(90px,12vw,150px);left:50%;
  transform:translateX(-46%);
  bottom:auto;right:auto;
}
@media(max-width:600px){
  .page-content>.wp-post-image[src*="bianca-recorte"]{width:min(100%,340px)}
}

/* El lunar que había puesto detrás del retrato chocaba con el que ya tiene la
   página y salía cortado a su derecha. La página ya tiene sus lunares: uno
   más era ruido. Se anula y la figura se queda sola sobre el blanco, que es
   lo que hace que funcione un recorte. */
.page-content:has(.wp-post-image[src*="bianca-recorte"])::before{content:none}
/* Un poco más contenida: a 520px dejaba demasiado hueco a los lados. */
.page-content>.wp-post-image[src*="bianca-recorte"]{width:min(100%,430px);margin-bottom:var(--v-sm)}

/* ── El retrato, a un lado y con vida ──
   Centrada dejaba dos columnas de blanco a los lados y obligaba a bajar para
   empezar a leer. A la derecha, el texto arranca a su altura: se lee su
   historia mientras se la ve. En móvil no hay sitio para dos columnas, así
   que vuelve arriba y a lo ancho.

   Y no se queda quieta: después de aparecer entra en una flotación muy lenta
   (8 s, ±7 px, con un giro de medio grado). Es el mismo recurso que los
   lunares de la marca — movimiento que no se mira, se siente. Solo transform:
   la resuelve la tarjeta gráfica sin repintar nada. */
.page-content>.wp-post-image[src*="bianca-recorte"]{
  float:right;
  width:min(46%,340px);
  margin:0 0 var(--v-sm) clamp(20px,3vw,38px);
  shape-outside:circle(52% at 50% 45%);   /* el texto abraza la figura */
  animation:revelar 1.15s cubic-bezier(.16,.84,.34,1) both,
            flotar 8s 1.15s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion:no-preference){
  @keyframes flotar{
    from{transform:translate3d(0,0,0) rotate(0deg)}
    to  {transform:translate3d(0,-7px,0) rotate(.5deg)}
  }
}
/* el titular manda: el retrato no se le sube encima */
.page-content>h2{clear:both}

@media(max-width:760px){
  .page-content>.wp-post-image[src*="bianca-recorte"]{
    float:none;width:min(100%,320px);margin:0 auto var(--v-sm);shape-outside:none;
  }
}

/* ── Entrada de verdad ──
   La aparición anterior era tan discreta que se acababa antes de que el ojo
   llegara. Ahora es una entrada: espera medio segundo a que la página se
   asiente, y entonces Bianca ENTRA desde su lado — 70 px a la derecha, un
   punto más grande y con 26 px de desenfoque que se despeja — mientras un
   lunar rosa crece detrás de ella.

   El lunar es lo que convierte el movimiento en marca: no es una foto que
   aparece, es su lunar el que la trae. Sale con 0,15 s de adelanto para que
   se lea como causa y no como acompañamiento.

   Sigue siendo solo transform, opacity y filter. Y sigue apagándose entera
   con "reducir movimiento". */
@media (prefers-reduced-motion:no-preference){
  @keyframes entrar-bianca{
    0%  {opacity:0;transform:translate3d(70px,26px,0) scale(1.09);filter:blur(26px) saturate(.65)}
    55% {opacity:1}
    100%{opacity:1;transform:none;filter:blur(0) saturate(1)}
  }
  @keyframes crecer-lunar{
    0%  {opacity:0;transform:translate(-50%,-50%) scale(.35)}
    70% {opacity:1}
    100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  }
  @keyframes latir-lunar{
    from{transform:translate(-50%,-50%) scale(1)}
    to  {transform:translate(-50%,-50%) scale(1.06)}
  }

  .page-content>.wp-post-image[src*="bianca-recorte"]{
    animation:entrar-bianca 1.45s .5s cubic-bezier(.16,.86,.3,1) both,
              flotar 8s 1.95s ease-in-out infinite alternate;
  }

  /* el lunar que la trae */
  .page-content:has(.wp-post-image[src*="bianca-recorte"])::before{
    content:"";position:absolute;z-index:0;pointer-events:none;
    width:clamp(200px,24vw,300px);aspect-ratio:1;border-radius:50%;
    background:var(--rosa);
    top:min(430px,32vw);left:min(74%,calc(100% - 150px));
    animation:crecer-lunar 1.1s .35s cubic-bezier(.2,.9,.3,1) both,
              latir-lunar 7s 1.45s ease-in-out infinite alternate;
    will-change:transform,opacity;backface-visibility:hidden;
  }
}
.page-content>.wp-post-image[src*="bianca-recorte"]{position:relative;z-index:1}

@media(max-width:760px){
  .page-content:has(.wp-post-image[src*="bianca-recorte"])::before{
    width:210px;top:330px;left:50%;
  }
}

/* El lunar quedaba a sus pies, cortado por el párrafo siguiente. Va detrás de
   ella, a la altura del torso: es de donde tiene que salir la figura. */
.page-content:has(.wp-post-image[src*="bianca-recorte"])::before{
  top:clamp(150px,17vw,225px);
  left:min(76%,calc(100% - 140px));
  width:clamp(215px,25vw,320px);
}
@media(max-width:760px){
  .page-content:has(.wp-post-image[src*="bianca-recorte"])::before{
    width:200px;top:190px;left:50%;
  }
}

/* La foto es un JPEG recortado sobre blanco, no un PNG transparente: su
   rectángulo blanco tapaba el lunar. mix-blend-mode:multiply hace que el
   blanco desaparezca (multiplicar por blanco deja el fondo intacto) y solo
   quede la figura. Es lo que permite que el lunar se vea DETRÁS de ella de
   verdad, sin tener que recortar la imagen a mano. */
.page-content>.wp-post-image[src*="bianca-recorte"]{mix-blend-mode:multiply}
/* El lunar sube a la altura del torso y crece: ahora que se ve entero,
   tiene que envolverla, no asomar por encima. */
.page-content:has(.wp-post-image[src*="bianca-recorte"])::before{
  top:clamp(200px,22vw,290px);
  width:clamp(240px,29vw,370px);
}

/* ── la foto de cabecera de un índice es una BANDA, no un retrato ──
   En /tratamientos/ la foto ocupaba media pantalla y el primer cuadrado
   quedaba a 1.180 px: había que bajar dos pantallas y media para ver un
   solo tratamiento. En una página de índice la foto ambienta; lo que se
   viene a ver es la rejilla. */
.page-content:has(.videoclub) > .wp-post-image{
  max-height:min(38vh,340px);width:100%;object-fit:cover;object-position:center 38%;
}
@media(max-width:600px){
  .page-content:has(.videoclub) > .wp-post-image{max-height:180px}
}

/* ── submenús de navegación ──
   El submenú es un <ul> dentro de <nav>, así que heredaba
   `.site-header nav ul{display:flex}` y la píldora de cada enlace: salían seis
   cajas sueltas flotando en vez de un panel. Aquí se le quita esa herencia y
   se trata como lo que es: UN panel con filas dentro.

   En táctil no existe "pasar por encima" (regla dura de la skill: no depender
   del hover), así que a partir de 768px hacia abajo los grupos se ven siempre
   dentro del menú abierto, indentados bajo su padre. */

.site-header nav .menu-item-has-children{position:relative}

/* la flecha: dice que ahí dentro hay más */
.site-header nav .menu-item-has-children>a::after{
  content:"";width:.34em;height:.34em;margin-left:.45em;flex:0 0 auto;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:translateY(-2px) rotate(45deg);opacity:.45;
  transition:transform .2s var(--curva),opacity .2s var(--curva);
}

@media(min-width:769px){
  .site-header nav .menu-item-has-children:hover>a::after,
  .site-header nav .menu-item-has-children:focus-within>a::after{
    opacity:1;transform:translateY(1px) rotate(225deg);
  }

  /* EL PANEL — uno solo, no seis cajas */
  .site-header nav .sub-menu{
    display:block;position:absolute;top:calc(100% + 6px);left:0;z-index:80;
    min-width:max-content;margin:0;padding:6px;list-style:none;
    background:var(--papel);border:1px solid var(--tinta-12);
    border-radius:14px;box-shadow:0 12px 32px -8px rgba(26,18,18,.18),0 2px 8px -2px rgba(26,18,18,.08);
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .18s var(--curva),transform .18s var(--curva),visibility .18s;
  }
  /* puente invisible: el ratón cruza el hueco sin que se cierre */
  .site-header nav .menu-item-has-children::after{
    content:"";position:absolute;top:100%;left:0;width:100%;height:8px;
  }
  .site-header nav .menu-item-has-children:hover>.sub-menu,
  .site-header nav .menu-item-has-children:focus-within>.sub-menu{
    opacity:1;visibility:visible;transform:none;
  }

  /* las FILAS de dentro: sin píldora heredada, ancho completo */
  .site-header nav .sub-menu li{margin:0;width:100%}
  .site-header nav .sub-menu li::before{display:none}
  .site-header nav .sub-menu a{
    display:flex;align-items:center;width:100%;min-height:42px;
    padding:0 14px;border-radius:9px;white-space:nowrap;
    font-size:var(--t-sm);font-weight:500;color:var(--tinta-58);background:none;
  }
  .site-header nav .sub-menu a:hover{color:var(--tinta);background:var(--tinta-05)}
  .site-header nav .sub-menu a:focus-visible{
    outline:2px solid var(--rojo);outline-offset:-2px;color:var(--tinta);
  }
  /* punto rojo de marca al pasar: el mismo lenguaje que el resto de la web */
  .site-header nav .sub-menu a::before{
    content:"";width:5px;height:5px;border-radius:50%;background:var(--rojo);
    margin-right:9px;flex:0 0 auto;opacity:0;transform:scale(.4);
    transition:opacity .18s var(--curva),transform .18s var(--curva);
  }
  .site-header nav .sub-menu a:hover::before,
  .site-header nav .sub-menu a:focus-visible::before{opacity:1;transform:none}
}

/* TÁCTIL — sin hover: los grupos van siempre visibles dentro del menú abierto */
@media(max-width:768px){
  .site-header nav .menu-item-has-children>a::after{transform:translateY(1px) rotate(225deg);opacity:.6}
  .site-header nav .sub-menu{
    display:block;position:static;width:100%;
    margin:0 0 6px;padding:0 0 0 13px;list-style:none;
    border-left:2px solid color-mix(in srgb,var(--rojo) 45%,transparent);
  }
  .site-header nav .sub-menu li{margin:0;width:100%}
  .site-header nav .sub-menu li::before{display:none}
  .site-header nav .sub-menu a{
    display:flex;align-items:center;min-height:44px;   /* objetivo táctil */
    padding:0 10px;border-radius:8px;background:none;
    font-size:var(--t-sm);color:var(--tinta-58);
  }
  .site-header nav .sub-menu a:focus-visible{outline:2px solid var(--rojo);outline-offset:-2px}
}