/* ============================================================
   Dott.ssa Maria Cecilia Ardaist — Medicina estetica, Olbia
   Sistema Editorial Tecnico. Tokens primero, nada "a ojo".
   Decisiones documentadas en contenido/diseno-web.md
   ============================================================ */

:root{
  /* --- neutros con temperatura calida: papel de recetario --- */
  /* Escala rehecha el 4/9 sobre la referencia que eligio Marcelo
     (flawlessskincenter.com): papel mas claro y calido, y sobre todo TEXTO MUCHO MAS
     OSCURO. Esa es la clave que traia la referencia —usan negro puro— y es lo que da
     margen para poner un fondo fuerte sin que nada deje de leerse.
     Con estos valores la capa de luz sube al 48%: casi cuatro veces la que habia. */
  --papel:      #FCF6F4;
  --papel-alt:  #F5E8E4;
  --papel-hond: #EEDAD4;
  --linea:      #988A86;   /* los filetes tambien tienen que sobrevivir a la sombra */
  --tinta-3:    #433535;   /* mucho mas oscuro: es lo que habilita la sombra fuerte */
  --tinta-2:    #3A2C2C;
  --tinta:      #171010;   /* 16.4:1 sobre papel */

  /* --- acento unico: el dorado MCA bajado hasta contrastar --- */
  --bronce:     #583630;
  --bronce-alt: #513029;

  /* --- semanticos, solo los cuatro autorizados --- */
  --borde-control: #8C8478;
  --foco:          #1F5F7A;
  --alerta:        #8C3A1E;
  --ok:            #2F6B45;

  /* --- tipografia --- */
  --voz:   "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --texto: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;

  /* escala modular 1.25, contraste display/cuerpo > 4x */
  --t-display: clamp(4rem, 8.5vw, 7.5rem);
  --t-h1:      clamp(2.6rem, 5vw, 4rem);
  --t-h2:      clamp(1.9rem, 3vw, 2.6rem);
  --t-h3:      1.45rem;
  --t-cuerpo:  1.0625rem;   /* 17px */
  --t-nota:    0.9375rem;
  --t-micro:   0.75rem;

  /* --- ritmo --- */
  --u: 8px;
  --margen-izq: clamp(20px, 7vw, 120px);
  --margen-der: clamp(20px, 4vw, 64px);
  --medida: 66ch;
}

*, *::before, *::after{ box-sizing: border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; animation:none !important; }
}

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--texto);
  font-size:var(--t-cuerpo);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Grilla asimetrica: el contenido no se centra por defecto
   ============================================================ */
.lienzo{
  max-width:1360px;
  margin:0 auto;
  padding-left:var(--margen-izq);
  padding-right:var(--margen-der);
}
.col-texto{ max-width:var(--medida); }

/* ============================================================
   Tipografia
   ============================================================ */
h1,h2,h3,h4{ font-family:var(--voz); font-weight:400; margin:0; }
h1{ font-size:var(--t-h1); line-height:1.06; letter-spacing:-.02em; text-wrap:balance; }
h2{ font-size:var(--t-h2); line-height:1.1;  letter-spacing:-.015em; text-wrap:balance; }
h3{ font-size:var(--t-h3); line-height:1.2;  letter-spacing:-.01em;
    margin-bottom:calc(var(--u)*1.25); }
.col-texto h3 + p{ margin-top:0; }
.col-texto h3:not(:first-child){ margin-top:calc(var(--u)*4); }

p{ margin:0 0 calc(var(--u)*2); }
a{ color:var(--bronce-alt); text-decoration:underline; text-underline-offset:.18em;
   text-decoration-thickness:1px; }
a:hover{ color:var(--tinta); }
a:focus-visible, button:focus-visible{ outline:2px solid var(--foco); outline-offset:3px; }

.rotulo{
  font-family:var(--texto); font-size:var(--t-micro); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-3);
}
.entradilla{ font-size:1.2rem; line-height:1.5; color:var(--tinta-2); max-width:56ch; }

/* ============================================================
   Cabecera: sin barra flotante ni vidrio esmerilado
   ============================================================ */
.cabecera{
  border-bottom:1px solid var(--linea);
  padding-block:calc(var(--u)*2.5);
}
.cabecera .fila{ display:flex; flex-wrap:wrap; gap:calc(var(--u)*3);
  align-items:baseline; justify-content:space-between; }
.marca{ font-family:var(--voz); font-size:1.35rem; letter-spacing:-.01em;
  color:var(--tinta); text-decoration:none; }
.marca span{ display:block; font-family:var(--texto); font-size:var(--t-micro);
  letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-3); margin-top:2px; }
.nav{ display:flex; flex-wrap:wrap; gap:calc(var(--u)*2.5); align-items:baseline; }
.nav a{ font-size:var(--t-nota); color:var(--tinta-2); text-decoration:none;
  border-bottom:1px solid transparent; padding-bottom:2px; transition:border-color .15s ease-out; }
.nav a:hover, .nav a[aria-current="page"]{ border-bottom-color:var(--bronce); color:var(--tinta); }

.idioma{ display:flex; gap:calc(var(--u)); align-items:baseline; font-size:var(--t-micro);
  letter-spacing:.1em; text-transform:uppercase; }
.idioma a{ color:var(--tinta-3); text-decoration:none; }
.idioma a[aria-current]{ color:var(--tinta); border-bottom:1px solid var(--bronce); }

/* ============================================================
   Apertura: declaracion de metodo, no promesa
   ============================================================ */
.apertura{ padding-block:calc(var(--u)*9) calc(var(--u)*7); border-bottom:1px solid var(--linea);
 }
.apertura .display{
  font-family:var(--voz); font-size:var(--t-display); line-height:1.02;
  letter-spacing:-.035em; margin:0 0 calc(var(--u)*4); max-width:15ch; text-wrap:balance;
}
.apertura .display em{ font-style:italic; color:var(--bronce-alt); }

/* dato duro arriba, antes que cualquier promesa */
.ficha-datos{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:calc(var(--u)*3); margin-top:calc(var(--u)*5);
  border-top:1px solid var(--linea); padding-top:calc(var(--u)*3);
}
.ficha-datos div .rotulo{ display:block; margin-bottom:6px; }
.ficha-datos div p{ margin:0; font-size:var(--t-nota); color:var(--tinta-2); }

/* ============================================================
   Secciones
   ============================================================ */
section{ padding-block:calc(var(--u)*8); border-bottom:1px solid var(--linea); }
.seccion-cab{ display:flex; gap:calc(var(--u)*2); align-items:baseline;
  margin-bottom:calc(var(--u)*4); }
.seccion-cab .num{
  font-family:var(--texto); font-size:var(--t-micro); font-weight:600; letter-spacing:.12em;
  color:var(--bronce); padding-top:.5em; flex:none;
}

/* --- indice numerado de tratamientos: no son tarjetas --- */
.indice{ list-style:none; margin:0; padding:0; border-top:1px solid var(--linea); }
.indice li{ border-bottom:1px solid var(--linea); }
.indice a{
  display:grid; grid-template-columns:3.5rem minmax(0,1fr) auto; gap:calc(var(--u)*2);
  align-items:baseline; padding:calc(var(--u)*2.5) 0;
  text-decoration:none; color:var(--tinta); transition:background-color .15s ease-out;
}
.indice a:hover{ background:var(--papel-alt); }
/* Al iluminar la fila, --bronce sobre --papel-alt cae a 4,19:1 y deja de cumplir
   AA justo cuando la paciente esta apuntando ahi. --bronce-alt da 5,93:1. */
.indice a:hover .n{ color:var(--bronce-alt); }
.indice .n{ font-size:var(--t-nota); color:var(--bronce); font-variant-numeric:tabular-nums; }
.indice .nombre{ font-family:var(--voz); font-size:1.5rem; line-height:1.15; }
.indice .nombre small{ display:block; font-family:var(--texto); font-size:var(--t-nota);
  color:var(--tinta-3); margin-top:4px; max-width:52ch; line-height:1.5; }
.indice .precio{ font-size:var(--t-nota); color:var(--tinta-2); white-space:nowrap; }

/* ============================================================
   EL GESTO PROPIO: marginalia de los "no"
   Las contraindicaciones como aparato de notas, no escondidas
   ============================================================ */
.con-notas{
  display:grid;
  grid-template-columns:minmax(0,var(--medida)) minmax(0,20rem);
  gap:calc(var(--u)*5);
  align-items:start;
}
/* La nota de CRITERIO: rubrica, no etiqueta.
   Estaba con el titulo en 12 px, mayusculas y espaciado — es decir, en el mismo
   registro con el que se rotula una columna de tabla. Un rotulo se saltea. Al
   pasar la rubrica a la serif del sitio, "Quando conviene un'altra strada" deja de
   ser una etiqueta y vuelve a ser lo que es: una frase que dice algo.
   En telefono ya se veia asi (.nota-toggle .nota-titulo, mas abajo): esto alinea
   el escritorio con el telefono, no invita algo nuevo.
   Y el filete pasa arriba y en tinta: un borde lateral grueso es un cuadro de
   aviso; una linea arriba es una nota. */
.nota-margen{
  font-size:var(--t-nota); line-height:1.6; color:var(--tinta-2);
  border-top:1px solid var(--tinta-3); padding-top:calc(var(--u)*2);
  position:sticky; top:calc(var(--u)*4);
}
.nota-margen h3{
  font-family:var(--voz); font-size:1.3rem; font-weight:400;
  letter-spacing:-.01em; line-height:1.2; text-transform:none;
  color:var(--bronce-alt); margin-bottom:calc(var(--u)*2); text-wrap:balance;
}
.nota-margen ul{ margin:0; padding-left:1.1em; }
.nota-margen li{ margin-bottom:calc(var(--u)); }
.nota-margen p:last-child{ margin-bottom:0; }

/* La nota de DATOS: referencia, no criterio.
   Direccion, telefono, que traer. Se lee cuando hace falta y no compite con el
   aparato. Sin filete y con la rubrica chica: la jerarquia dice cual de las dos
   cosas importa. */
.nota-margen.nota-datos{
  border-top:0; padding-top:0; color:var(--tinta-3);
}
.nota-margen.nota-datos h3{
  font-family:var(--texto); font-size:var(--t-micro); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-3);
  margin-bottom:calc(var(--u)*1.5);
}

@media (max-width: 900px){
  .con-notas{ grid-template-columns:1fr; gap:calc(var(--u)*3); }
  /* En telefono la nota deja de estar al margen —no hay margen— y pasa a ser un
     bloque sobre papel sombreado, con el filete arriba mantenido. */
  .nota-margen{ position:static; background:var(--papel-alt);
    padding:calc(var(--u)*2.5); border-top:2px solid var(--tinta-3); }
  .nota-margen.nota-datos{ background:none; padding:0; border-top:0; }
}

/* ============================================================
   Tabla de precios: dato a la vista, sin caja con sombra
   ============================================================ */
.listino{ width:100%; border-collapse:collapse; margin-top:calc(var(--u)*3); }
.listino caption{ text-align:left; font-size:var(--t-nota); color:var(--tinta-3);
  margin-bottom:calc(var(--u)*2); max-width:60ch; }
.listino th{
  text-align:left; font-size:var(--t-micro); font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--tinta-3); padding:0 calc(var(--u)*2) calc(var(--u)) 0;
  border-bottom:1px solid var(--tinta-3);
}
.listino td{ padding:calc(var(--u)*1.75) calc(var(--u)*2) calc(var(--u)*1.75) 0;
  border-bottom:1px solid var(--linea); vertical-align:top; }
.listino td:last-child, .listino th:last-child{ text-align:right; padding-right:0;
  white-space:nowrap; }
.listino tr:hover td{ background:var(--papel-alt); }
.tabla-scroll{ overflow-x:auto; }

/* ============================================================
   Bloques de apoyo
   ============================================================ */
.aviso{
  border-left:3px solid var(--bronce); background:var(--papel-alt);
  padding:calc(var(--u)*2.5) calc(var(--u)*3); margin:calc(var(--u)*3) 0;
  font-size:var(--t-nota);
}
.aviso p:last-child{ margin-bottom:0; }
.aviso.pendiente{ border-left-color:var(--alerta); }
.aviso .rotulo{ display:block; margin-bottom:calc(var(--u)); color:var(--bronce-alt); }
.aviso.pendiente .rotulo{ color:var(--alerta); }

/* faq */
.faq{ border-top:1px solid var(--linea); margin-top:calc(var(--u)*4); }
.faq details{ border-bottom:1px solid var(--linea); }
.faq summary{ cursor:pointer; list-style:none; padding:calc(var(--u)*2.25) 0;
  font-family:var(--voz); font-size:1.2rem; display:flex; justify-content:space-between;
  gap:calc(var(--u)*2); align-items:baseline; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--bronce); font-family:var(--texto);
  font-size:1.1rem; flex:none; }
.faq details[open] summary::after{ content:"\2013"; }
.faq .cuerpo{ padding-bottom:calc(var(--u)*2.5); max-width:var(--medida); }
.faq .cuerpo p:last-child{ margin-bottom:0; }

/* boton de contacto: rectangulo con linea dura, sin sombra difusa */
.accion{
  display:inline-block; font-family:var(--texto); font-size:var(--t-nota); font-weight:600;
  letter-spacing:.02em; color:var(--papel); background:var(--tinta);
  padding:calc(var(--u)*1.75) calc(var(--u)*3.5); text-decoration:none;
  border:1px solid var(--tinta); box-shadow:3px 3px 0 var(--bronce);
  transition:background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out;
}
/* El bloque de :hover de esta epoca se retiro entero: reponia la sombra dorada
   desplazada que la vuelta del 3/9 saco de .accion. Las reglas vivas estan mas
   abajo, en "CTA: rectangulo con filete". */

/* ============================================================
   Pie
   ============================================================ */
.pie{ padding-block:calc(var(--u)*6); font-size:var(--t-nota); color:var(--tinta-3);
  border-bottom:0; }
.pie .fila{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:calc(var(--u)*4); }
.pie h4{ font-family:var(--texto); font-size:var(--t-micro); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-2);
  margin-bottom:calc(var(--u)*1.5); }
.pie ul{ list-style:none; margin:0; padding:0; }
.pie li{ margin-bottom:calc(var(--u)); }
.pie a{ color:var(--tinta-3); }
.legal{ border-top:1px solid var(--linea); margin-top:calc(var(--u)*5);
  padding-top:calc(var(--u)*3); font-size:var(--t-micro); line-height:1.6; }

/* banda de demo: solo mientras es borrador */
.banda-demo{
  background:var(--tinta); color:var(--papel); font-size:var(--t-micro);
  letter-spacing:.1em; text-transform:uppercase; text-align:center;
  padding:calc(var(--u)*1.25) var(--margen-der);
}

.saltar{ position:absolute; left:-9999px; }
.saltar:focus{ position:static; display:inline-block; margin:var(--u); }

/* --- agregados 27-8-2026: copyright/volver, CTA de apertura y CTA fijo movil --- */
.volver{ margin-top:calc(var(--u)*2); }
.volver a{ color:var(--tinta-3); text-decoration:none; border-bottom:1px solid var(--linea); }
.volver a:hover{ color:var(--bronce); border-color:var(--bronce); }


.cta-movil{ display:none; }
@media (max-width:900px){
  .cta-movil{
    display:block; position:fixed; left:0; right:0; bottom:0; z-index:60;
    text-align:center; padding:14px 16px;
    background:var(--bronce); color:var(--papel); text-decoration:none;
    font-weight:600; letter-spacing:.02em;
    border-top:1px solid var(--bronce-alt);
  }
  .cta-movil:hover{ background:var(--bronce-alt); color:var(--papel); }
  body{ padding-bottom:52px; }
}

/* --- fotos 27-8: retrato y consultorio --- */
.foto-retrato{ margin:calc(var(--u)*4) 0 0; max-width:380px; }
.foto-retrato img, .foto-studio img{
  display:block; width:100%; height:auto;
  border:1px solid var(--linea); background:var(--papel-alt);
}
.foto-studio{ margin:0 0 calc(var(--u)*4); max-width:720px; }



/* --- la cita, compuesta con la foto ---------------------------------------
   `mca-banda-01.jpg` es una foto VERTICAL (1536x2048). Estaba usada a sangre como
   franja horizontal de 460 px: de una foto en vertical se veia una tira angosta,
   con la lampara en el medio y ella cortada. Y el HTML declaraba height="672",
   que es falso, asi que el navegador reservaba el espacio con otra proporcion.
   Ahora la foto conserva su forma y la cita va al lado: un bloque compuesto, no
   dos bloques apilados. -------------------------------------------------------- */
.bloque-cita{
  display:grid; grid-template-columns:minmax(0,22rem) minmax(0,1fr);
  gap:calc(var(--u)*7); align-items:center;
  padding-block:calc(var(--u)*9);
  border-bottom:1px solid var(--linea);
}
.cita-foto{ margin:0; }
.cita-foto img{ display:block; width:100%; height:auto; border:1px solid var(--linea); }
.cita-grande{
  max-width:34ch; margin:0;
  font-family:var(--voz);
  font-size:clamp(1.5rem, 2.6vw, 2.1rem); line-height:1.35;
  color:var(--tinta-2); font-style:italic; text-wrap:balance;
}
@media (max-width:900px){
  .bloque-cita{ grid-template-columns:1fr; gap:calc(var(--u)*4);
    padding-block:calc(var(--u)*6); }
  .cita-foto{ max-width:22rem; }
  .cita-grande{ max-width:none; }
}
.cita-grande em{ color:var(--bronce); font-style:normal; }


/* --- fotos de secciones y tratamientos (27-8, segunda tanda) --- */
.foto-ancha{ margin:calc(var(--u)*5) 0 0; }
.foto-ancha img{ display:block; width:100%; height:auto; max-height:420px; object-fit:cover;
  border:1px solid var(--linea); }
.foto-paso{ float:right; width:min(300px, 38%); margin:0 0 calc(var(--u)*3) calc(var(--u)*4); }
.foto-paso img{ display:block; width:100%; height:auto; border:1px solid var(--linea); }
.foto-tratamiento{ margin:calc(var(--u)*6) auto; max-width:560px; position:relative; }
.foto-tratamiento img{ display:block; width:100%; height:auto; border:1px solid var(--linea); }
.foto-tratamiento::after{
  content:""; position:absolute; z-index:-1;
  top:calc(var(--u)*2); left:calc(var(--u)*2);
  right:calc(var(--u)*-2); bottom:calc(var(--u)*-2);
  border:1px solid var(--bronce);
}
@media (max-width:900px){
  .foto-paso{ float:none; width:100%; max-width:340px; margin:0 0 calc(var(--u)*3); }
}

/* Se borraron ademas, tras auditar el 3/9, seis clases que definia el rediseno
   del 27/8 y que no usa ninguna de las 34 paginas: .apertura-cta, .apertura-grid,
   .apertura-foto (con su media query), .foto-lado, .foto-retrato-chica y
   .hero-lema. Eran la portada anterior a la anterior.
   ============================================================ */

/* ============================================================
   VUELTA DE DISENO 3-9-2026 — se retira la capa "oro y carbon"
   ------------------------------------------------------------
   El 27/8 se apilo sobre el sistema Editorial Tecnico una segunda
   piel ("MCA oro y carbon") que le devolvio justo lo que el punto 3
   y el 4 de contenido/diseno-web.md habian descartado: portada con
   degradado oscuro sobre una foto, oro sobre negro, animacion de
   entrada, numerales fantasma y un globo que late. Es la estetica
   por defecto de cualquier clinica estetica, y es la que Marcelo
   marco el 3/9 como "el mismo generico".

   Los NOMBRES de los tokens se conservan (--carbon, --crema, --oro)
   porque propuestas-paleta/_generar.py los sobrescribe para armar
   las tres muestras que esta mirando Cecilia. Lo que cambia es su
   VALOR: apuntan al papel, la tinta y el bronce que ya definia el
   sistema original, arriba en este mismo archivo. Los dos sistemas
   quedan colapsados en uno.
   ============================================================ */
/* Los alias --carbon/--carbon-alt/--crema/--oro se borraron el 3/9 despues de
   auditar: ya no los lee nadie. Las paletas de propuestas-paleta/ pasaron a
   sobrescribir los tokens de verdad (--tinta, --papel, --bronce), que es lo que
   corresponde, y el ultimo consumidor que quedaba en esta hoja era .sentirti,
   que ninguna de las 34 paginas usa. */

/* --- banda de borrador: sigue siendo la mas oscura de la pagina,
       porque tiene que interrumpir. Es lo unico que desaparece al
       publicar (_build/preparar-sitio.py --publicar). --- */
.banda-demo{ background:var(--tinta); color:var(--papel); border-bottom:0; }
/* --bronce esta calibrado para leerse sobre PAPEL (4,58:1). Sobre tinta cae a
   3,55:1 y no llega a AA — y justo en la palabra que da sentido a la banda,
   "NON PUBBLICATA", a 12px en negrita. Va en papel: 16,26:1. */
.banda-demo strong{ color:var(--papel); text-decoration:underline;
  text-underline-offset:.2em; text-decoration-thickness:1px; }

/* --- cabecera: papel y un filete, como el resto del documento.
       Una barra oscura arriba de un sitio claro es un cintillo de
       plantilla; aca la jerarquia la da la linea, no el bloque. --- */
.cabecera{ background:var(--papel); border-bottom:1px solid var(--tinta-3); }
.cabecera .marca{ color:var(--tinta); }
.cabecera .marca span{ color:var(--tinta-3); letter-spacing:.14em; }
.cabecera .nav a{ color:var(--tinta-2); text-transform:none; font-size:var(--t-nota);
  letter-spacing:0; font-weight:400; }
.cabecera .nav a:hover{ color:var(--tinta); border-bottom-color:var(--bronce); }
.cabecera .idioma a{ color:var(--tinta-3); }
.cabecera .idioma a[aria-current]{ color:var(--tinta); border-color:var(--bronce); }

/* ------------------------------------------------------------
   Portada editorial (solo index)

   Cambia el planteo, no el tamano de la foto. Ceci pidio dos veces
   que la foto se achicara y las dos veces se la achico: 50% → 42%,
   86vh → 72vh. Y las dos veces volvio a decir que invadia, porque el
   problema no era el ancho: era que estaba DEBAJO del texto, con un
   degradado negro encima para poder leer las letras. Una foto que
   necesita que la tapen para que el titulo se lea siempre va a
   estorbar.

   Aca deja de ser fondo y pasa a ser retrato: ocupa su propia columna,
   con su filete, al lado del texto. Se lee como la foto de una medica
   en una publicacion, no como un cartel. Y el degradado no hace falta,
   asi que se va.
   ------------------------------------------------------------ */
.hero-full{ background:var(--papel); border-bottom:1px solid var(--linea); }
.hero-cont{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,20rem);
  grid-template-areas:
    "kicker  retrato"
    "titulo  retrato"
    "sub     retrato"
    "cta     retrato"
    "seo     retrato";
  grid-auto-rows:min-content;
  column-gap:calc(var(--u)*7);
  padding-top:calc(var(--u)*9);
  padding-bottom:calc(var(--u)*8);
  align-items:start;
}
.hero-kicker{ grid-area:kicker; }
.hero-title { grid-area:titulo; }
.hero-sub   { grid-area:sub; }
.hero-cta   { grid-area:cta; }
.hero-seo   { grid-area:seo; }
.hero-retrato{ grid-area:retrato; margin:0; align-self:start; }
.hero-retrato img{
  display:block; width:100%; height:auto;
  border:1px solid var(--linea);
}
/* El pie del retrato. No es un epigrafe de foto: es el unico dato de la portada que
   ninguna competidora de Olbia puede escribir, y estaba enterrado en la seccion 06.
   Compuesto como pie de figura de una publicacion — filete, cuerpo chico, sin punto
   final de parrafo — para que se lea como un dato y no como un eslogan. */
.hero-pie{
  margin-top:calc(var(--u)*1.5); padding-top:calc(var(--u)*1.5);
  border-top:1px solid var(--linea);
  font-size:var(--t-nota); line-height:1.45; color:var(--tinta-2);
  text-wrap:balance;
}

.hero-kicker{ color:var(--tinta-3); text-transform:uppercase; letter-spacing:.14em;
  font-size:var(--t-micro); font-weight:600; margin:0 0 calc(var(--u)*3); }
.hero-title{ font-family:var(--voz); font-weight:400;
  font-size:clamp(2.6rem, 6vw, 4.2rem); line-height:1.04; letter-spacing:-.025em;
  color:var(--tinta); margin:0 0 calc(var(--u)*4); max-width:20ch; text-wrap:balance; }
.hero-title em{ color:var(--bronce-alt); font-style:italic; }
.hero-sub{ color:var(--tinta-2); font-size:1.2rem; line-height:1.5;
  max-width:46ch; margin:0 0 calc(var(--u)*4); }
.hero-cta{ margin:0; }
/* La linea de SEO es para el buscador, no para la paciente: va ultima y en gris. */
.hero-seo{ color:var(--tinta-3); font-size:var(--t-nota);
  margin:calc(var(--u)*4) 0 0; }

/* El corte del hero se unifica con el del resto del sitio en 900px, y no en 760.
   Entre 761 y 782px la columna fija del retrato (20rem = 320px) quedaba mas ancha
   que la columna de texto, asi que a 768px —iPad vertical, que no es un caso raro
   en un consultorio— la foto volvia a dominar la portada: exactamente de lo que
   Cecilia se quejo dos veces. A 901px el texto mide 425px contra 320 de la foto,
   que es la proporcion que el diseno busca. */
@media (max-width:900px){
  .hero-cont{
    grid-template-columns:1fr;
    grid-template-areas: "kicker" "titulo" "retrato" "sub" "cta" "seo";
    row-gap:0;
    padding-top:calc(var(--u)*5); padding-bottom:calc(var(--u)*6);
  }
  /* El retrato completo mide 754x840: a ancho de telefono son casi 400 px de alto,
     y entre la cabecera y el titular empujaba la bajada — la frase donde ella dice
     que no te va a hacer parecer otra — abajo del pliegue. Se recorta a 4:3 sobre
     la cara: la foto se ve, y el mensaje entra en la primera pantalla. */
  .hero-retrato{ margin:0 0 calc(var(--u)*4); max-width:none; }
  .hero-retrato img{ aspect-ratio:4/3; object-fit:cover; object-position:50% 18%; }
  .hero-title{ font-size:clamp(2.2rem, 9vw, 3rem); max-width:none; }
  .hero-sub{ max-width:none; }
}

/* il manifesto di Cecilia: la sua voce, su carta, firmato */
.manifiesto{ background:var(--papel); border-top:1px solid var(--linea);
  border-bottom:1px solid var(--linea); }
/* padding-block y no el atajo `padding: X 0`: el atajo le pone 0 al padding
   lateral que trae .lienzo (--margen-izq / --margen-der) y el texto se va pegado
   al borde de la pantalla. Aca no se notaba en escritorio porque
   .texto-manifiesto se centra con margin auto, pero en telefono, donde 34rem es
   mas ancho que la pantalla, el manifiesto tocaba los dos bordes. */
.manifiesto .lienzo{ padding-block:calc(var(--u)*16); }
/* Alineados a la izquierda, como .pausa-marca. El punto 2 del sistema dice que el
   contenido no se centra por defecto, y un manifiesto centrado es exactamente la
   composicion de folleto que se retiro del resto de la pagina. */
.rotulo-manifiesto{ color:var(--bronce-alt); text-transform:uppercase; letter-spacing:.18em;
  font-size:.8rem; margin:0 0 calc(var(--u)*6); }
/* El manifiesto es su voz, firmado, y es el momento mas importante de la pagina
   despues del titular. Estaba compuesto como un parrafo mas: 38rem de ancho en una
   seccion de 1360, o sea una columna angosta flotando en un 60% de papel vacio. Se
   leia como algo sin terminar.
   Sube de cuerpo y de medida hasta ocupar lo que le corresponde. No se centra —el
   punto 2 del sistema— pero deja de ser un susurro. */
.texto-manifiesto{ max-width:50rem; }
.texto-manifiesto p{ font-family:var(--voz);
  font-size:clamp(1.5rem, 2.9vw, 2.25rem); line-height:1.42;
  margin:0 0 calc(var(--u)*4.5); text-wrap:balance; }
.texto-manifiesto em{ color:var(--bronce); }
.cierre-manifiesto{ font-size:clamp(1.9rem, 4vw, 3rem) !important; font-style:italic;
  margin-top:calc(var(--u)*6) !important; }
/* La firma se separa del cierre con un filete corto, como una firma al pie de un
   documento. Antes quedaba pegada, como si fuera otra linea del texto. */
.firma-manifiesto{ font-style:normal; color:var(--tinta-3);
  margin-top:calc(var(--u)*5) !important; padding-top:calc(var(--u)*2);
  border-top:1px solid var(--linea); display:inline-block;
  font-family:var(--texto); letter-spacing:.04em;
  font-size:clamp(1.1rem, 1.8vw, 1.35rem) !important; margin-bottom:0 !important; }
.firma-manifiesto::before{ content:""; }

/* Pausa: la frase de marca, grande y sola.
   Ceci la pidio asi y se queda asi: grande y sola. Lo que cambia es como esta
   compuesta. Estaba centrada, en italica, sobre una banda negra — que es la
   pausa emotiva de cualquier plantilla. Ahora ancla a la izquierda, sobre papel,
   entre dos filetes: sigue siendo lo unico en pantalla, pero se lee como la cita
   destacada de un texto y no como el corte de un folleto. El punto 2 del sistema
   ya lo decia: el contenido no se centra por defecto. */
.pausa-marca{ background:var(--papel-alt);
  border-top:1px solid var(--linea); border-bottom:1px solid var(--linea); }
/* Mismo arreglo que en .manifiesto, y aca se veia en cualquier pantalla: la frase
   "Non vedo una ruga. Vedo la tua storia." arrancaba en x=0, pegada al borde
   izquierdo del navegador, porque .frase-marca no lleva margin auto que lo tape. */
.pausa-marca .lienzo{ padding-block:calc(var(--u)*11); text-align:left; }
.frase-marca{ font-family:var(--voz); font-weight:400;
  font-size:clamp(2rem, 5vw, 3.6rem); line-height:1.1; letter-spacing:-.025em;
  color:var(--tinta); margin:0; max-width:24ch; text-wrap:balance; }
.frase-marca em{ color:var(--bronce-alt); font-style:italic; }
.pausa-marca.cierre .hero-cta{ margin:calc(var(--u)*5) 0 0; }

/* Sin movimiento de entrada.
   Habia dos animaciones: la foto de portada hacia un zoom de 14 segundos y el
   titulo, la bajada y el boton entraban desvanecidos y escalonados. Las dos son
   de las cosas que Marcelo marco el 3/9. Y el punto 5 de diseno-web.md ya las
   prohibia: "nada que aparezca al hacer scroll", un solo gesto con intencion.
   Las transiciones de estado (150 ms al pasar el mouse) se quedan: son respuesta
   a una accion de la paciente, no decoracion. */

/* Numeral de seccion: un rotulo, no un fantasma.
   Estaba como un "01" de 176 px en contorno detras del titulo. Un numero gigante
   vaciado es ornamento: no se lee y no ordena nada. Vuelve al tamano de rotulo,
   pegado al titulo, que es como numera sus secciones un documento. */
.seccion-cab{ position:static; }
.seccion-cab .num{
  position:static; transform:none;
  font-family:var(--texto); font-size:var(--t-micro); font-weight:600;
  letter-spacing:.12em; color:var(--bronce);
  -webkit-text-stroke:0; padding-top:.55em; flex:none;
}

/* --- pie sobre papel, separado por un filete --- */
/* Sin border-top: la ultima seccion ya cierra con su propio filete y los dos
   juntos daban una linea doble, una clara y una oscura, en las 34 paginas. */
.pie{ background:var(--papel); color:var(--tinta-3); border-top:0; }
main > section:last-of-type{ border-bottom:1px solid var(--tinta-3); }
.pie h4{ color:var(--tinta-2); text-transform:uppercase; letter-spacing:.14em;
  font-size:var(--t-micro); }
.pie a{ color:var(--tinta-3); }
.pie a:hover{ color:var(--bronce-alt); }
.pie .legal{ color:var(--tinta-3); border-top:1px solid var(--linea); }
.pie .legal a{ color:var(--tinta-2); }
.pie .volver a{ color:var(--bronce-alt); border-color:var(--linea); }

/* --- CTA: rectangulo con filete, sin sombra difusa ni pastilla dorada --- */
.accion{ background:var(--tinta); color:var(--papel); border:1px solid var(--tinta);
  box-shadow:none; text-transform:none; letter-spacing:.01em; }
.accion:hover{ background:var(--bronce-alt); border-color:var(--bronce-alt);
  color:var(--papel); transform:none; box-shadow:none; }
.accion.secundaria{ background:transparent; color:var(--tinta); box-shadow:none; }
.accion.secundaria:hover{ background:var(--tinta); color:var(--papel); }
.cta-movil{ background:var(--tinta); color:var(--papel); border-top:1px solid var(--tinta); }
.cta-movil:hover{ background:var(--bronce-alt); color:var(--papel); }

/* --- widget de WhatsApp con avatar --- */
.wa-widget{ position:fixed; right:22px; bottom:22px; z-index:80;
  display:flex; flex-direction:column; align-items:flex-end; gap:12px; }
.wa-btn{ width:60px; height:60px; border-radius:50%; border:1px solid var(--tinta-3);
  padding:0; cursor:pointer; position:relative; background:var(--papel); overflow:hidden; }
.wa-btn > img{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; }
.wa-btn:hover{ border-color:var(--bronce); }

/* Se fue el anillo que latia en loop (wa-pulse, escala 1.45, infinite) y se fue el
   punto verde de "en linea".
   El anillo es el tic de plantilla mas reconocible que tenia el sitio, y el punto
   verde ademas afirmaba algo que no es cierto: no esta disponible en ese momento,
   contesta cuando puede. En la pagina de una medica eso no es un detalle grafico.
   El boton queda: lo que se va es el parpadeo y la promesa. */
.wa-dot{ display:none; }
.wa-card{ background:rgba(249,235,226,.78); color:#3d2d27; width:min(320px, 84vw);
  padding:24px; border:1px solid rgba(255,250,245,.72); border-radius:26px; position:relative;
  -webkit-backdrop-filter:blur(22px) saturate(115%); backdrop-filter:blur(22px) saturate(115%);
  box-shadow:0 12px 38px rgba(93,61,46,.13),inset 0 1px 0 rgba(255,255,255,.55); }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .wa-card{background:rgba(249,235,226,.97);}
}
.wa-card[hidden]{ display:none; }
.wa-card img{ width:52px; height:52px; border-radius:50%; object-fit:cover;
  float:left; margin:0 12px 4px 0; border:1px solid var(--linea); }
.wa-card p{ margin:0 0 12px; font-size:.92rem; line-height:1.45; }
.wa-card strong{ color:var(--tinta); }
.wa-go{ display:block; text-align:center; background:var(--tinta); color:var(--papel);
  text-decoration:none; padding:11px 14px; font-weight:600; font-size:.85rem;
  letter-spacing:.01em; clear:both; border-radius:16px; background:#755346; color:#fffaf6; }
.wa-go:hover{ background:var(--bronce-alt); color:var(--papel); }
.wa-x{ position:absolute; top:8px; right:8px; width:32px; height:32px; border-radius:50%; background:rgba(255,250,245,.45); border:none;
  color:#654a3e; font-size:20px; cursor:pointer; line-height:1; }
@media (max-width:900px){
  .wa-widget{ bottom:66px; }
}

/* El bloque que habia aca ajustaba la portada vieja en telefono: la foto a 44vh
   recortada, otro degradado encima y el texto sobre fondo negro. Ya no existe
   ninguna de las tres cosas — el orden en telefono (titulo, foto, bajada) lo
   resuelve la grilla de .hero-cont, arriba en este archivo. */

/* la ficha de datos bajo el hero, sobre papel */
.franja-datos{ background:var(--papel); border-bottom:1px solid var(--linea); }
.franja-datos .ficha-datos{ margin:0; padding:calc(var(--u)*5) 0; }
.banda-demo{ margin:0; }

/* ============================================================
   "Che cosa vorresti migliorare?" — el puente deseo → tratamiento
   Pedido de Cecilia el 29/8: "esta muy cargada en palabras y transmite
   muy poco", "el enganche no esta ahi". Sale de las tres paginas que
   ella mando como referencia, que ordenan por deseo y no por catalogo.
   Fiel al sistema: sin tarjetas, filetes y jerarquia tipografica.
   ============================================================ */
.deseos{
  list-style:none; margin:calc(var(--u)*5) 0 0; padding:0;
  /* min(19rem,100%) y no 19rem pelado: por debajo de 348px de ancho util la
     columna de 304px ya no entra y arrastraba a TODA la portada a scroll
     horizontal. Arriba de 348px no cambia nada. */
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(19rem,100%),1fr));
  gap:0 calc(var(--u)*5);
  border-top:1px solid var(--linea);
}
.deseos li{
  border-bottom:1px solid var(--linea);
  padding:calc(var(--u)*3) 0;
}
.deseos .frase{
  font-family:var(--voz); font-size:1.5rem; line-height:1.15; color:var(--tinta);
  margin:0 0 calc(var(--u)*1.25); text-wrap:balance;
}
.deseos .que{
  font-size:var(--t-nota); color:var(--tinta-3); line-height:1.5;
  margin:0 0 calc(var(--u)*1.5); max-width:40ch;
}
.deseos .vias{ margin:0; font-size:var(--t-nota); color:var(--tinta-3); }
.deseos .vias a{ color:var(--bronce-alt); text-decoration:none;
  border-bottom:1px solid var(--linea); padding-bottom:1px; }
.deseos .vias a:hover{ color:var(--tinta); border-bottom-color:var(--bronce); }

/* ============================================================
   Notas de margen plegables en telefono (assets/plegables.js)
   Cecilia, 29/8: "esta muy cargada en palabras". En movil las notas
   del margen caian dentro del texto y sumaban 300+ palabras por
   pagina. Se pliegan; la informacion sigue completa a un toque.
   Si el JS no corre, no hay .nota-toggle y todo se ve como siempre.
   ============================================================ */
.nota-toggle{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--u);
  width:100%; padding:0; margin:0; background:none; border:none; cursor:pointer;
  font:inherit; color:inherit; text-align:left;
}
.nota-toggle .nota-titulo{
  font-family:var(--voz); font-size:var(--t-h3); line-height:1.2;
  letter-spacing:-.01em; color:var(--tinta);
}
.nota-toggle .nota-accion{
  flex:none; font-family:var(--texto); font-size:var(--t-micro); font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--bronce-alt);
}
.nota-toggle[aria-expanded="true"] .nota-titulo{ color:var(--tinta); }
.nota-cuerpo{ margin-top:calc(var(--u)*2); }

/* Desde el 3/9 el boton de plegar va DENTRO del <h3> y no en su lugar, para que
   las contraindicaciones no salgan del arbol de encabezados en telefono. El <h3>
   queda como puro contenedor: el tamano y el color los pone .nota-toggle. */
.nota-margen[data-plegable="si"] h3{
  margin:0; font-size:inherit; line-height:inherit; font-family:inherit;
}
.nota-cuerpo > :last-child{ margin-bottom:0; }

/* Red de seguridad: en escritorio la marginalia se lee entera, esté como esté
   la clase que dejó el JS. Nunca se esconde un riesgo en pantalla grande. */
@media (min-width: 901px){
  .nota-margen.plegada .nota-cuerpo{ display:block; }
  .nota-toggle{ cursor:default; }
  .nota-toggle .nota-accion{ display:none; }
}
@media (max-width: 900px){
  .nota-margen.plegada .nota-cuerpo{ display:none; }
}

/* Menu plegado en telefono (assets/plegables.js).
   Con siete secciones el nav ocupaba cuatro renglones y se comia la primera
   pantalla: se abria el sitio y no se veia un solo mensaje, solo enlaces.
   En escritorio no cambia nada: el boton no existe y el nav se ve entero. */
.menu-toggle{
  display:none;
  font-family:var(--texto); font-size:var(--t-nota); font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--tinta-2);
  background:none; border:none; padding:calc(var(--u)) 0; margin:0;
  cursor:pointer; text-align:left;
}
.menu-toggle::after{ content:" +"; color:var(--bronce); }
.menu-toggle[aria-expanded="true"]::after{ content:" –"; }

@media (max-width: 900px){
  .menu-toggle{ display:block; }
  .cabecera .nav.plegado{ display:none; }
  .cabecera .nav{ width:100%; }
}

/* Se borro un bloque que achicaba el globo de WhatsApp en telefono y otro que lo
   subia sobre la barra del pie: los dos eran codigo muerto desde que el globo se
   oculta entero por debajo de 900px (mas abajo, punto 1 de la revision movil), y
   ademas su comentario decia lo contrario de lo que hace el sitio. */

/* ============================================================
   Revision del sitio en telefono (375x812), 29/8/2026.
   Cinco defectos medidos en las 33 paginas, todos reales.
   ============================================================ */

/* 1. El globo flotante de WhatsApp se va en telefono.
      La barra fija del pie (.cta-movil) ya ofrece el contacto en las 33
      paginas, asi que el globo era redundante — y al ser fijo terminaba
      tapando texto: el titular de la portada, el precio de 250 EUR en las
      paginas de tratamiento. El contacto no se pierde: la barra queda. */
@media (max-width: 900px){
  .wa-widget{ display:none; }
}

/* 2. Zona tactil de 44px donde el dedo tiene que acertar.
      Medido: los botones de las notas plegables quedaban en 28px, las migas
      de pan en 15px y los enlaces de la seccion de deseos en 20px. */
@media (max-width: 900px){
  .nota-toggle{ min-height:44px; align-items:center; }
  .menu-toggle{ min-height:44px; display:flex; align-items:center; }
  .rotulo a{ display:inline-block; padding-block:calc(var(--u)*1.5); }
  .deseos .vias a{ display:inline-block; padding-block:calc(var(--u)*1.25); }
  .indice a{ padding-block:calc(var(--u)*3); }
  /* El conmutador de idioma quedaba en 18x19px, el objetivo mas chico del sitio,
     y es justo el que necesita una paciente hispanohablante recien llegada. */
  .idioma a{ display:inline-block; padding-block:calc(var(--u)*1.5); }
}

/* 3. Los marcadores de dato pendiente se veian a 10,8px: ilegibles en un
      telefono. Suben al minimo de 12,5px que ya usa el resto del sitio. */
/* Marcador de dato pendiente. Vivia repetido en un <style> incrustado en las 34
   paginas, con un valor distinto al de esta hoja: tres definiciones de lo mismo.
   Se unifico aca el 3/9.
   Va acotado a `span` a proposito: `.pendiente` a secas tambien agarraba las nueve
   cajas `.aviso.pendiente`, que son un parrafo entero, y les pintaba el texto
   completo de color de alerta con subrayado punteado. */
span.pendiente{
  font-size:max(0.78rem, 12.5px); color:var(--alerta);
  border-bottom:1px dotted var(--alerta); cursor:help;
}

/* Tabla comparativa filler / biostimolatore: dos columnas de texto, no de precios.
   Estaba solo en el <style> de la italiana y la espanola; la inglesa usaba la clase
   sin tener las reglas, asi que su ultima columna salia alineada a la derecha y con
   white-space:nowrap heredados de .listino — el texto no podia cortar. */
.confronto td:last-child, .confronto th:last-child{ text-align:left; white-space:normal; }
.confronto tbody th{
  text-align:left; text-transform:none; letter-spacing:0; font-weight:500;
  font-size:var(--t-nota); color:var(--tinta-2);
  padding:calc(var(--u)*1.75) calc(var(--u)*2) calc(var(--u)*1.75) 0;
  border-bottom:1px solid var(--linea); vertical-align:top; white-space:nowrap;
}

/* 4. Enlaces sueltos que hacen de boton: el que cierra una seccion
      ("Leggi il profilo completo →") y el telefono de la ficha del estudio.
      Medidos en 21px y 18px de alto: no se aciertan con el dedo. */
@media (max-width: 900px){
  /* :not(.accion) — el selector tambien agarraba los botones de WhatsApp, que ya
     tienen su propio relleno, y se lo pisaba dejandolos mas bajos que antes. */
  p > a:only-child:not(.accion),
  .nota-margen a[href^="tel:"]{ display:inline-block; padding-block:calc(var(--u)*1.5); }
}

/* ============================================================
   MATERIA — 3-9-2026, segunda vuelta
   ------------------------------------------------------------
   Marcelo, mirando el sitio publicado: "es horrible el diseño todavia,
   como q falta algo de fondo q no sea solo blanco... esta todo muy
   planchado, muy estatico".

   Tiene razon y el diagnostico es exacto: el sistema Editorial Tecnico
   es sobrio a proposito, pero sobrio y barato se parecen bastante si no
   hay MATERIA. Un papel sin grano, sin luz y sin profundidad se lee como
   una maqueta sin terminar, no como una decision.

   Lo que se agrega no es decoracion. Son cuatro capas de material:
   grano, luz, profundidad y aire. Ninguna dibuja nada: cambian de que
   esta hecha la pagina.

   Y una distincion que importa, porque el 3/9 el mismo Marcelo pidio
   sacar las animaciones: lo que se retiro fueron animaciones de ENTRADA
   —el titulo que aparece, la foto que hace zoom, el globo que late—,
   que son el tic de plantilla. Lo que se agrega es movimiento AMBIENTE:
   luz que se desplaza en noventa segundos, como se desplaza la luz de
   verdad. No entra nada, no aparece nada. Son cosas distintas.
   ============================================================ */

/* --- 1. GRANO ---------------------------------------------------------
   El papel del sitio (#F7F4EE) es un color plano. El papel de verdad
   tiene grano, y esa es la diferencia entre "fondo claro" y "papel".
   Ruido fractal generado por SVG, en linea: no pesa nada, no pide nada
   al servidor y se tine solo con la paleta que este activa.
   Va por encima de todo con multiply para que tambien granule las fotos:
   asi la pagina entera parece impresa en el mismo papel, en vez de tener
   fotos digitales pegadas sobre un fondo liso.
   z-index 400: arriba del contenido, debajo del banner de cookies (9999)
   y del CTA fijo del telefono. pointer-events:none, obviamente. */
body::after{
  content:""; position:fixed; inset:0; z-index:400; pointer-events:none;
  opacity:.055; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}
@media print{ body::after{ display:none; } }

/* --- 2. LUZ, DETRAS DE TODA LA PAGINA ---------------------------------
   Antes la luz vivia dentro de cada apertura, con overflow:hidden. Eso dejaba un
   borde horizontal visible donde terminaba la portada y empezaba el papel liso:
   "quedo mal la pagina, como con un bug". Y ademas solo se veia arriba, cuando lo
   que se pedia era "que se vean en todo el fondo de la pagina".

   Ahora es UNA sola capa fija detras de todo el documento. No se recorta, no tiene
   bordes, y al ser fija se queda quieta mientras la pagina scrollea — que es como
   se comporta la luz de una habitacion.

   LA OPACIDAD NO ES UN GUSTO, ES UN CALCULO. Con multiply, un pixel de la sombra
   oscurece el papel. Medido sobre la escala del sitio: para que los rotulos
   (--tinta-3) mantengan 4,5:1, el papel NO puede bajar de #E2E0DA. El pixel mas
   oscuro de la foto es 90/255, asi que la opacidad maxima es 0,13. Por encima de
   eso hay texto del sitio que deja de cumplir AA.
   Se probo tambien comprimir el rango de la imagen para poder subir la opacidad:
   da exactamente el mismo piso y peor degradado. Asi que va la imagen entera, suave. */
html{ background:var(--papel); }
body{ background:transparent; }
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:url("img/mca-luz-foglie.jpg");
  background-size:cover; background-position:50% 50%;
  /* 0.24 y no 0.13. Marcelo, tres veces: que la sombra se vea, todo el tiempo y en
     toda la pantalla. El techo anterior no venia de la imagen sino del TEXTO — el
     papel no podia oscurecerse mas sin que los rotulos dejaran de cumplir AA — asi
     que la solucion no fue bajar la luz, fue oscurecer --tinta-3, --bronce y --linea
     hasta que la aguanten. Los tres valores estan CALCULADOS: son el tono mas claro
     que todavia da 4,5:1 sobre el papel en sombra.
     No sube mas de 0.24 porque la direccion que pidio despues es "minimalismo
     higienico, pulcritud": una sombra mas fuerte ensucia el papel en vez de
     iluminarlo. Ese es el limite estetico, no el tecnico. */
  opacity:.28; mix-blend-mode:multiply; filter:grayscale(1) sepia(.42) saturate(.7);
  transform:scale(1.14);
}

/* --- EL FONDO EN MOVIMIENTO CONTINUO ---------------------------------
   Marcelo, tres veces: la sombra se ve poco, son pocas hojas, y tiene que estar en
   movimiento TODO EL TIEMPO. Y la referencia que eligio (flawlessskincenter.com)
   resuelve exactamente eso: un video en loop, autoplay y muteado, de fondo.
   Asi que el fondo pasa a ser video. La imagen fija queda de poster — se ve al
   instante mientras el video carga, y es lo que queda si el navegador bloquea el
   autoplay o si la persona pidio menos movimiento. Muteado y sin controles: es
   fondo, no contenido. */
.fondo-luz{
  position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
  /* .40 y no .48: el video de follaje denso cubre mucho mas que la hoja sola que
     habia antes, asi que al mismo porcentaje oscurece el doble. A .40 se ve igual
     de presente y deja de ensuciar. El validador de contraste sigue midiendo al
     .48, o sea con margen. */
  opacity:.28; mix-blend-mode:multiply;
}
.fondo-luz video{
  width:100%; height:100%; object-fit:cover;
  /* sepia y no gris: una sombra neutra sobre papel calido lo ENFRIA, y las
     secciones con mucha hoja encima salian gris ceniza. Con un toque de sepia la
     sombra es marron-calida, como la sombra real de una hoja sobre una pared
     crema. Es la diferencia entre "limpio" y "sucio", que es justo lo que pidio
     Marcelo con "pulcritud". */
  filter:grayscale(1) sepia(.42) saturate(.7); transform:scale(1.08);
}
/* Con el video puesto, la capa de imagen sobra: se apaga para no sumar dos sombras.
   Se detecta con :has() y no con una clase, asi no hace falta JS para nada. */
body:has(.fondo-luz)::before{ opacity:0; }

@media (prefers-reduced-motion: reduce){
  /* Quien pidio menos movimiento ve la imagen fija, no el video. */
  .fondo-luz{ display:none; }
  body:has(.fondo-luz)::before{ opacity:.28; }
}

@media (prefers-reduced-motion: no-preference){
  /* BRISA: la luz se desplaza sola, ochenta segundos de ida y ochenta de vuelta. */
  body::before{ animation:luz-brisa 80s ease-in-out infinite alternate; }
  @keyframes luz-brisa{
    from{ background-position:44% 46%; }
    to  { background-position:56% 54%; }
  }
}
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){
    /* PARALAJE: ademas responde al scroll — la sombra sube mientras la pagina baja.
       Esto es lo que Marcelo pedia como "movimiento cuando deslizas". No es una
       animacion de entrada: nada aparece ni se desvanece. Es la misma luz vista
       desde un punto que se mueve. Van sobre propiedades distintas
       (background-position y transform) justamente para que compongan. */
    body::before{
      animation:luz-brisa 80s ease-in-out infinite alternate,
                luz-paralaje linear;
      animation-timeline:auto, scroll(root block);
    }
    @keyframes luz-paralaje{
      from{ transform:scale(1.14) translateY(-3.5%); }
      to  { transform:scale(1.14) translateY(3.5%); }
    }
  }
}

/* Las bandas que pintaban papel opaco tapaban la capa. Las que usaban --papel
   —el mismo color del fondo— pasan a transparente: se ven igual y dejan pasar la
   luz. Las que usaban --papel-alt conservan su tinte, pero translucido. */
.cabecera, .franja-datos, .manifiesto, .pie, .hero-full{ background:transparent; }
/* Fallback primero: los navegadores sin color-mix (Safari anterior a 16.2) se quedan
   con el tinte opaco, que se ve bien — solo no dejan pasar la luz ahi. */
.pausa-marca{ background:var(--papel-alt); }
@supports (background:color-mix(in srgb, red 50%, transparent)){
  .pausa-marca{ background:color-mix(in srgb, var(--papel-alt) 72%, transparent); }
}

/* --- 4. PROFUNDIDAD ---------------------------------------------------
   El retrato estaba apoyado sobre el papel, al mismo nivel que todo lo
   demas. Ahora tiene un panel detras que se sale de la grilla por la
   derecha: dos planos en vez de uno. La profundidad no la da una sombra
   difusa —eso es lo que se saco—, la da el solapamiento. */
.hero-retrato{ position:relative; }
/* El panel que habia detras del retrato se retiro el 3/9.
   Tenia un borde duro y visible, arrancaba corrido respecto de la foto —la foto
   sobresalia por la izquierda de su propio panel— y el corte inferior dibujaba otro
   rectangulo. Marcelo: "la foto de Ceci tiene un cuadrado atras que queda horrible y
   esta descentrado". Tenia razon: se leia como un error de maquetado, no como una
   decision. La profundidad la da la luz, que no necesita bordes. */


/* --- 5. UN SEGUNDO MOMENTO DE LUZ, EN EL MEDIO ------------------------
   La luz de la apertura arregla la primera pantalla, pero de ahi para abajo
   el papel volvia a ser plano durante ocho mil pixeles. La pausa de marca
   —"Non vedo una ruga. Vedo la tua storia."— es el unico bloque de la
   portada sin texto de lectura alrededor, asi que es donde la luz puede
   entrar sin competir con nada. Espejada y mas abierta que la de arriba,
   para que no se lea como la misma imagen repetida. */
.pausa-marca .pausa-marca 
/* --- 6. RITMO TONAL ---------------------------------------------------
   La luz esta topeada por el contraste: mas del 13% y hay texto del sitio
   que deja de cumplir AA (los numeros, en _build/contraste.py). Asi que lo
   plano no se arregla subiendo la luz — se arregla dandole ARQUITECTURA a
   la pagina.

   Las secciones alternan entre papel limpio y papel apenas entonado. La
   diferencia es de nueve niveles sobre 247: no se ve como rayas, se siente
   como que la pagina tiene capitulos. Es el recurso de una revista, donde
   los pliegos cambian de tono, y no cuesta un solo pixel de red.

   Sobre el tono va la luz igual, porque el fondo es translucido. */
main > section:nth-of-type(even){
  background:color-mix(in srgb, var(--papel-alt) 55%, transparent);
}
@supports not (background:color-mix(in srgb, red 50%, transparent)){
  main > section:nth-of-type(even){ background:var(--papel-alt); }
}
/* La franja de datos y el bloque de la cita entran en el mismo ritmo. */
.franja-datos{ background:color-mix(in srgb, var(--papel-alt) 55%, transparent); }

/* Y los filetes entre secciones se apagan: con el cambio de tono ya no hacen
   falta dos separadores, y dos juntos es lo que hace que se vea "rayado". */
main > section{ border-bottom:0; }
main > section + section{ border-top:1px solid var(--linea); }


/* ============================================================
   MINIMALISMO HIGIENICO — 4-9-2026
   ------------------------------------------------------------
   Direccion que dio Marcelo, textual: "espacios en blanco amplios,
   tipografias muy limpias y colores neutros/pasteles que evoquen
   salud, pulcritud y exclusividad".

   Dos cosas, y ninguna es decorativa.
   ============================================================ */

/* --- 1. AIRE ----------------------------------------------------------
   Lo que hace que una pagina se lea como cara casi nunca es lo que tiene:
   es lo que la rodea. Las secciones respiraban 64px arriba y abajo; pasan
   a 112px, y en pantalla grande a 144. El margen izquierdo, que es el que
   define la grilla, pasa de 120 a 168.
   No se agrega nada. Se separa. */
section{ padding-block:clamp(72px, 9vw, 144px); }
.apertura{ padding-block:clamp(64px, 8vw, 128px) clamp(56px, 7vw, 112px); }
:root{
  --margen-izq: clamp(24px, 9vw, 168px);
  --margen-der: clamp(24px, 5vw, 88px);
}
.seccion-cab{ margin-bottom:clamp(32px, 4vw, 56px); }
.franja-datos .ficha-datos{ padding-block:clamp(40px, 5vw, 72px); }
.hero-cont{
  padding-top:clamp(56px, 8vw, 128px);
  padding-bottom:clamp(48px, 7vw, 112px);
}
.bloque-cita{ padding-block:clamp(64px, 8vw, 128px); }
.manifiesto .lienzo{ padding-block:clamp(80px, 11vw, 176px); }
.pausa-marca .lienzo{ padding-block:clamp(72px, 10vw, 160px); }
.pie{ padding-block:clamp(56px, 7vw, 104px); }

/* Y el texto tambien respira por dentro: interlineado mas abierto en el
   cuerpo, que es la mitad silenciosa de "espacios amplios". */
body{ line-height:1.68; }
.col-texto p{ margin-bottom:calc(var(--u)*2.75); }


/* --- 2. UN SOLO CRITERIO TIPOGRAFICO ----------------------------------
   Marcelo: "cambias mucho de tipografia, habria que tener siempre la misma
   o tener un mejor criterio".
   Tenia razon en el sintoma. Hay dos familias y eso esta bien, pero la
   REGLA no se veia, porque la serif aparecia en lugares que no le
   correspondian —los nombres del indice, la rubrica de las notas, el
   titulo del boton de plegar— y ahi se leia como capricho.
   La regla, ahora sin excepciones:

     SERIF (Instrument Serif)  =  la VOZ de Cecilia.
                                  Titulares, el manifiesto, sus frases.
                                  Nada mas. Nunca un rotulo, nunca un dato.

     SANS (Libre Franklin)     =  todo lo demas.
                                  Cuerpo, datos, rotulos, precios, notas,
                                  navegacion, botones.

   Se lee de un vistazo: si esta en serif, lo dijo ella. */
.indice .nombre{ font-family:var(--texto); font-size:1.12rem; font-weight:600;
  letter-spacing:-.005em; }
.nota-margen h3{ font-family:var(--texto); font-size:.95rem; font-weight:600;
  letter-spacing:.01em; line-height:1.4; text-transform:none; }
.nota-toggle .nota-titulo{ font-family:var(--texto); font-size:1rem; font-weight:600;
  letter-spacing:0; }
.faq summary{ font-family:var(--texto); font-size:1rem; font-weight:600; }
.marca{ font-family:var(--texto); font-weight:600; font-size:1.02rem;
  letter-spacing:-.01em; }

/* La serif se queda donde importa, y ahi se agranda: si es la voz, que se oiga. */
.hero-title{ font-size:clamp(2.8rem, 6.4vw, 4.6rem); }
.frase-marca{ font-size:clamp(2.1rem, 5.4vw, 3.9rem); }

/* ============================================================
   LLEVADO POR IMAGENES — 4-9-2026
   ------------------------------------------------------------
   Marcelo, con dos referencias en la mano (flawlessskincenter.com y
   upkeepmedspa.com): "una portada gigante de punta a punta que me
   ocupa toda la pantalla, cada tratamiento con una hermosa foto
   representando el tratamiento".
   Las dos referencias van LLEVADAS POR IMAGENES. Lo que habia aca
   era un documento llevado por texto. No se pule uno hasta que sea
   el otro: se le ponen las imagenes. Son abstractas y sensoriales
   —agua, piedra, petalo, hoja— a proposito: en Italia una medica no
   puede publicar caras ni "pieles perfectas" (L. 145/2018), y
   ademas es lo que hacen las referencias.
   ============================================================ */

/* --- 1. LA PORTADA, A PANTALLA COMPLETA -------------------------------
   100svh y no 100vh: en el telefono, vh cuenta la barra del navegador y la
   portada queda mas alta que la pantalla; svh es la altura real visible. */
.hero-full{
  position:relative; isolation:isolate;
  /* Topeado en 960px: en un monitor de 27" un hero de 1400px de alto es un
     cartel, no una portada. Ocupa la pantalla entera hasta ahi, y de ahi en mas
     deja ver que hay pagina debajo. */
  min-height:min(100svh, 960px); display:grid; align-items:end;
  background:transparent; border-bottom:0;
}
.hero-fondo{
  position:absolute; inset:0; z-index:0; overflow:hidden;
}
.hero-fondo img{
  width:100%; height:100%; object-fit:cover; object-position:62% 50%;
  display:block;
}
/* Un velo que va de opaco a nada, de izquierda a derecha, para que el
   texto se lea sobre la foto. No es el degradado negro de antes: es papel
   sobre papel, del mismo color que la pagina, y desaparece a la mitad. */
.hero-fondo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,
    color-mix(in srgb, var(--papel) 92%, transparent) 0%,
    color-mix(in srgb, var(--papel) 78%, transparent) 38%,
    color-mix(in srgb, var(--papel) 22%, transparent) 62%,
    transparent 82%);
}
.hero-cont{
  position:relative; z-index:1;
  grid-template-columns:minmax(0,1fr) minmax(0,22rem);
  padding-bottom:clamp(56px, 8vw, 120px);
}
/* El retrato sigue estando —"la foto de Ceci tiene que estar"— pero ya no
   compite con la imagen de fondo: se apoya abajo a la derecha, mas chico,
   con la credencial debajo. La imagen grande dice "calma"; ella dice "medica". */
.hero-retrato{ align-self:end; max-width:18rem; justify-self:end; }
.hero-retrato img{ border:1px solid color-mix(in srgb, var(--tinta) 18%, transparent); }
.hero-title{ font-size:clamp(3rem, 7.2vw, 5.6rem); max-width:12ch; }
.hero-sub{ font-size:1.12rem; max-width:40ch; }

/* En telefono la imagen ocupa la parte de arriba y el texto va abajo, sobre
   papel: no se superponen. */
@media (max-width:900px){
  .hero-full{ min-height:0; display:block; }
  .hero-fondo{ position:relative; height:58svh; min-height:320px; }
  .hero-fondo::after{ background:linear-gradient(180deg, transparent 55%, var(--papel) 100%); }
  /* UNA columna. La regla de escritorio de arriba pone dos (texto + retrato) y
     sin esto en telefono seguian siendo dos: seis areas de una columna sobre una
     grilla de dos hacia que el navegador autocolocara todo en una columna
     angostisima — el rotulo salia con una palabra por linea y el hero media
     2248px de alto. */
  .hero-cont{ grid-template-columns:1fr;
    grid-template-areas:"kicker" "titulo" "sub" "cta" "seo" "retrato";
    padding-top:0; margin-top:-64px; align-items:start; }
  .hero-retrato{ max-width:14rem; justify-self:start; margin-top:24px; }
}

/* --- 2. LOS TRATAMIENTOS, CON SU IMAGEN --------------------------------
   Del indice numerado de lineas a una serie de bloques: cada tratamiento
   con su imagen a un lado y su texto al otro, alternando el lado. Es la
   estructura de las dos referencias y de cualquier revista. La grilla
   asimetrica del sistema se conserva: el texto sigue anclando a la
   izquierda de su columna, nunca se centra. */
.tratamientos{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(48px, 7vw, 112px); }
.tratamientos li{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px, 5vw, 72px);
  align-items:center; }
.tratamientos li:nth-child(even) .trat-img{ order:2; }
.trat-img{ margin:0; aspect-ratio:4/3; overflow:hidden; }
.trat-img img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1.2s cubic-bezier(.2,.6,.2,1); }
.tratamientos li:hover .trat-img img{ transform:scale(1.04); }
.trat-txt{ min-width:0; }
.trat-txt .n{ font-size:var(--t-micro); font-weight:600; letter-spacing:.14em;
  color:var(--bronce); display:block; margin-bottom:14px; }
.trat-txt h3{ font-family:var(--voz); font-size:clamp(1.7rem, 3vw, 2.4rem); line-height:1.08;
  letter-spacing:-.02em; margin:0 0 14px; text-wrap:balance; }
.trat-txt .lead{ font-weight:600; color:var(--tinta); }
.trat-txt p{ max-width:44ch; color:var(--tinta-2); }
.trat-txt .precio{ font-size:var(--t-nota); color:var(--tinta-3); margin-top:14px; display:block; }
.trat-txt .ir{ display:inline-block; margin-top:18px; font-weight:600; font-size:var(--t-nota);
  color:var(--tinta); text-decoration:none; border-bottom:1px solid var(--bronce);
  padding-bottom:3px; }
.trat-txt .ir:hover{ color:var(--bronce-alt); }
@media (max-width:900px){
  .tratamientos li{ grid-template-columns:1fr; gap:20px; }
  .tratamientos li:nth-child(even) .trat-img{ order:0; }
}

/* Con imagen y scroll-driven: cada imagen de tratamiento se desplaza un poco
   mientras cruza la pantalla (paralaje suave). Nada aparece: ya esta ahi. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .trat-img img{ animation:trat-paralaje linear both; animation-timeline:view();
      animation-range:entry 0% exit 100%; }
    @keyframes trat-paralaje{ from{ transform:scale(1.12) translateY(4%); }
                              to  { transform:scale(1.12) translateY(-4%); } }
    .tratamientos li:hover .trat-img img{ transform:none; }
  }
}


/* ============================================================
   TELÉFONO — 4-9-2026, después de la auditoría móvil
   Ver _build/ajustar-movil.py para el porqué de cada regla.
   ============================================================ */
@media (max-width:900px){
  /* 1. La tabla de precios: que la última columna pueda cortar. */
  .listino td:last-child, .listino th:last-child{ white-space:normal; }
  .listino td:first-child{ min-width:7rem; }

  /* 2. "Leggi tutto →" a 44px de alto. */
  .trat-txt .ir{ display:inline-block; padding-block:calc(var(--u)*1.5); }

  /* 3. En teléfono la barra fija es el botón: el del hero sobra, y la línea de SEO
        es para Google, no para la paciente. */
  .hero-cta, .hero-seo{ display:none; }

  /* 4. Los enlaces de deseos: subrayado de texto, no filete por enlace. */
  .deseos .vias a{ border-bottom:0; text-decoration:underline; text-underline-offset:.2em;
    text-decoration-thickness:1px; text-decoration-color:var(--bronce); }
}


/* ============================================================
   EL AGUA SE MUEVE — 4-9-2026
   Ver _build/agua-en-movimiento.py.
   ============================================================ */
.hero-fondo{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-fondo video, .hero-fondo img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:62% 50%; display:block;
}
/* El video va encima de la imagen. Si no puede reproducir, queda transparente y
   se ve la imagen de abajo, que es el mismo fotograma. */
.hero-fondo video{ z-index:1; }
.hero-fondo img{ z-index:0; }
/* En telefono: solo la imagen. Un video de portada mas el video de fondo son dos
   videos a la vez en un telefono — bateria, datos, y en iOS con Low Power Mode
   ninguno arranca igual. La imagen es el mismo fotograma. */
@media (max-width:900px){ .hero-fondo video{ display:none; } }
@media (prefers-reduced-motion: reduce){ .hero-fondo video{ display:none; } }


/* ============================================================
   LO QUE DIJO CECI — 4-9-2026, 9:47
   "El color me gusto el Cipria" · "La foto quedo muy chica ahora y parece
   cortada de mas" · "Las palmeras de fondo estan muy lindas pero te distrae
   y no terminas viendo nada. Si se aumenta el color de las letras mas
   intensas por ahi las palmeras no quedarian mal."
   La paleta y la tinta se cambiaron arriba, en :root. Esto es la foto.
   ============================================================ */
/* Escritorio: de 18rem a 24rem. En una portada a pantalla completa, 288px de
   retrato era un sello, no una foto. */
.hero-retrato{ max-width:24rem; }
/* Telefono: SIN recorte. El aspect-ratio 4/3 que se le habia puesto para que
   entrara en la primera pantalla le cortaba la frente y el menton: "parece
   cortada de mas". Vuelve a su proporcion natural, un poco mas chica de ancho
   para que no se coma la pantalla entera. */
@media (max-width:900px){
  .hero-retrato{ max-width:16rem; }
  .hero-retrato img{ aspect-ratio:auto; object-fit:contain; object-position:center; }
}

/* ============================================================
   TELÉFONO, SEGUNDA TANDA — 4-9-2026 (de la auditoría móvil)
   ============================================================ */
/* 1. Sin video de fondo en teléfono. Tres auditores por separado: con autoplay
      el video se baja y reproduce igual aunque diga preload=none (470 KB en cada
      una de las 34 páginas), la fuente es apaisada y en vertical se estira casi
      cinco veces, y en iPhone con Modo de bajo consumo Safari dibuja un botón de
      play en el medio de la página. En teléfono queda la imagen fija, que es la
      misma sombra. */
@media (max-width:900px){
  .fondo-luz{ display:none; }
  body:has(.fondo-luz)::before{ opacity:.28; }
}
/* 2. Fallback para navegadores sin :has() (iOS 15.3 y anteriores, Chrome < 105):
      sin esto se apilaban la imagen Y el video, doble sombra. La imagen arranca
      apagada y solo se enciende donde no hay video. */
body::before{ opacity:0; }
@supports not selector(:has(a)){
  body::before{ opacity:.28; }
  .fondo-luz{ display:none; }
}
@supports selector(:has(a)){
  body:not(:has(.fondo-luz))::before{ opacity:.28; }
}
/* 3. 100svh sin fallback: en iOS 15.0-15.3 la declaración entera era inválida y
      la portada perdía el alto mínimo. vh primero, svh después. */
.hero-full{ min-height:min(100vh, 960px); min-height:min(100svh, 960px); }
/* 4. El velo del hero con color-mix sin fallback: en Safari 15.4-16.1 desaparecía
      y el título caía directo sobre la foto. Degradado plano primero. */
.hero-fondo::after{
  background:linear-gradient(100deg, rgba(252,246,244,.92) 0%, rgba(252,246,244,.78) 38%,
    rgba(252,246,244,.22) 62%, transparent 82%);
}
@supports (background:color-mix(in srgb, red 50%, transparent)){
  .hero-fondo::after{
    background:linear-gradient(100deg,
      color-mix(in srgb, var(--papel) 92%, transparent) 0%,
      color-mix(in srgb, var(--papel) 78%, transparent) 38%,
      color-mix(in srgb, var(--papel) 22%, transparent) 62%,
      transparent 82%);
  }
}

/* Zonas táctiles que faltaban (auditoría móvil): los siete enlaces del menú
   plegado medían 28px de alto; el conmutador de idioma 14-19px de ANCHO — el
   arreglo del 29/8 solo le había dado alto. Y los enlaces del pie, 18px. */
@media (max-width:900px){
  .cabecera .nav a{ display:block; padding-block:calc(var(--u)*1.5); min-height:44px; }
  .idioma a{ min-width:44px; text-align:center; }
  .pie li a{ display:inline-block; padding-block:calc(var(--u)*1.5); min-height:44px; }
}

/* Nota, 4/9 tarde: en TELEFONO la portada quedo con el agua de fondo detras del
   texto (no como bloque arriba), porque las reglas del video —.hero-fondo
   absolute y el velo lateral— van al final y ganan a las de 900px de mas arriba.
   Se deja asi A PROPOSITO: medido con canvas sobre la imagen real, el peor punto
   de contraste de la tinta sobre el agua bajo el velo da 6,68:1 (AA pide 4,5), y
   el hero pasa de 1280px a 853px de alto. Mas compacto y mas cerca de la version
   de escritorio. Si algun dia hay que volver al bloque apilado, hay que subir
   estas dos reglas por encima del @media (max-width:900px) del hero. */


/* ============================================================
   TELÉFONO, TERCERA TANDA — 4-9-2026 (correcciones de los verificadores)
   ============================================================ */
@media (max-width:900px){
  /* (1) El menú plegado: en columna, sin huecos de 20px, cada enlace a todo el ancho. */
  .cabecera .nav{ flex-direction:column; gap:0; align-items:stretch; }
  .cabecera .nav a{ width:100%; padding-block:calc(var(--u)*1.5); border-bottom-color:transparent; }
  .cabecera .nav a[aria-current="page"]{ border-bottom-color:var(--bronce); }
  /* (35) El subrayado del idioma activo colgaba 12px debajo de las letras. */
  .idioma a[aria-current]{ border-bottom:0; text-decoration:underline; text-underline-offset:.28em;
    text-decoration-color:var(--bronce); }
  /* (16) En teléfono el agua de la portada terminaba en una línea dura contra el
     papel. El velo pasa a fundir hacia abajo, además de proteger el texto. */
  .hero-fondo::after{ background:linear-gradient(180deg, rgba(252,246,244,.62) 0%,
    rgba(252,246,244,.40) 45%, rgba(252,246,244,.85) 82%, #FCF6F4 100%); }
}
/* (8)(26) Las tablas comparativas (biostimolatori) y la de datos identificativos
   (note legali) desbordan a 360-390: por debajo de 600px se apilan como fichas. */
@media (max-width:600px){
  .confronto, .confronto tbody, .confronto tr, .confronto th, .confronto td,
  .tabla-datos, .tabla-datos tbody, .tabla-datos tr, .tabla-datos th, .tabla-datos td{ display:block; width:100%; }
  .confronto thead, .tabla-datos thead{ display:none; }
  .confronto tr, .tabla-datos tr{ padding-block:calc(var(--u)*1.5); border-bottom:1px solid var(--linea); }
  .confronto th, .confronto td, .tabla-datos th, .tabla-datos td{ border:0; padding:2px 0; white-space:normal; text-align:left; }
  .confronto tbody th, .tabla-datos tbody th{ font-weight:600; }
}

/* 18/9/2026: la navegación permanece visible hasta que plegables.js inserta
   el botón y aplica .plegado. Si el archivo falla, no se pierde el menú móvil. */


/* ---- 5/9/2026: pedidos de Ceci — CTA con sottotitolo, aree dei trattamenti ---- */
.cta-sub{ display:block; font-family:var(--texto); font-size:.95rem; opacity:.82; margin:calc(var(--u)*1) 0 0; max-width:36rem; }
.trat-grupo{ margin-top:calc(var(--u)*7); }
.col-texto + .trat-grupo{ margin-top:calc(var(--u)*3); }
.trat-cat{ font-family:var(--texto); font-size:var(--t-micro); font-weight:600; letter-spacing:.14em; text-transform:uppercase; opacity:.75; margin:0 0 calc(var(--u)*3); padding-bottom:calc(var(--u)*1); border-bottom:1px solid currentColor; }

/* 8/9/2026 — Cipria, una sola dirección visual.
   Fondos estáticos; retrato real; un único ritmo de interacción de 180ms.
   Sustituye las capas de agua, palmeras y paralaje anteriores. */
:root{--papel:#fbf5f2;--papel-alt:#f3e7e2;--papel-hond:#ead7d0;--linea:#d1bcb3;
 --tinta:#302420;--tinta-2:#51413b;--tinta-3:#66534b;--bronce:#704a3e;--bronce-alt:#51372e;}
body::before,body::after,.fondo-luz{display:none!important;}
body{background:var(--papel);}
.cabecera{background:var(--papel);}
.banda-demo{font-size:11px;letter-spacing:.04em;padding:6px 16px;background:#6b5046;}
.hero-full{min-height:0;display:block;background:var(--papel);overflow:hidden;}
.hero-fondo{inset:0;position:absolute;min-height:0;height:auto;
 background:radial-gradient(ellipse at 82% 45%,#e5c9bb 0%,#f2e4dc 38%,#fbf5f2 76%);}
.hero-fondo::after{display:none;}
.hero-cont{width:100%;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
 grid-template-areas:"kicker retrato" "titulo retrato" "sub retrato" "cta retrato" "seo retrato";
 gap:0 clamp(20px,4vw,64px);padding-top:clamp(36px,5vw,72px);padding-bottom:32px;align-items:start;}
.hero-kicker{margin:0 0 24px;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--bronce);}
.hero-title{font-size:clamp(3.4rem,6.1vw,5.6rem);line-height:1.02;max-width:12ch;letter-spacing:-.035em;margin:0;}
.hero-title em{color:var(--bronce);font-weight:400;}
.hero-sub{font-size:16px;line-height:1.7;max-width:43ch;margin:26px 0 0;}
.hero-cta{display:block;margin:28px 0 0;}
.hero-cta .accion{font-size:13px;padding:17px 21px;line-height:1.45;border-radius:2px;}
.hero-cta .cta-sub{font-size:12px;line-height:1.65;max-width:39ch;margin-top:12px;opacity:1;color:var(--tinta-2);}
.hero-seo{display:block;font-size:10px;letter-spacing:.06em;margin-top:24px;color:var(--tinta-3);}
.hero-retrato{width:100%;max-width:510px;align-self:center;justify-self:end;margin:0;position:relative;}
.hero-retrato img{width:100%;height:auto;display:block;object-fit:contain;border:0;border-radius:0;
 -webkit-mask-image:radial-gradient(ellipse 62% 62% at 51% 44%,#000 45%,rgba(0,0,0,.95) 62%,transparent 88%);
 mask-image:radial-gradient(ellipse 62% 62% at 51% 44%,#000 45%,rgba(0,0,0,.95) 62%,transparent 88%);}
.hero-pie{font-size:11px;line-height:1.6;text-align:center;max-width:32ch;margin:0 auto;color:var(--tinta-2);}
.franja-datos{background:var(--papel-alt);border:0;padding-block:26px;}
.ficha-datos{gap:24px;}
section{padding-block:clamp(48px,7vw,96px);}
.tratamientos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 32px;}
.tratamientos li{display:flex;flex-direction:column;gap:22px;align-items:stretch;}
.tratamientos li:nth-child(even) .trat-img{order:0;}
.trat-img{aspect-ratio:16/10;border-radius:3px;width:100%;background:var(--papel-alt);}
.trat-img img,.tratamientos li:hover .trat-img img{animation:none!important;transform:none!important;transition:none;}
.trat-txt h3{font-size:clamp(1.6rem,2.4vw,2rem);line-height:1.12;max-width:24ch;}
.trat-txt .n{font-size:10px;margin-bottom:10px;}
.trat-txt p{font-size:14px;line-height:1.7;max-width:52ch;}
.trat-txt .ir{font-size:12px;margin-top:14px;}
.trat-cat{font-size:13px;letter-spacing:.17em;opacity:1;color:var(--bronce);padding-bottom:14px;margin-bottom:28px;}
.bloque-cita{padding-block:60px;gap:clamp(30px,6vw,88px);}
.cita-foto{border-radius:3px;overflow:hidden;}
.pausa-marca .lienzo,.manifiesto .lienzo{padding-block:64px;}
.frase-marca{font-size:clamp(2.2rem,4.6vw,4rem);}
.accion,.trat-txt .ir,.nav a{transition:color 180ms ease,background-color 180ms ease,border-color 180ms ease;}
@media(max-width:900px){
 .hero-cont{grid-template-columns:1fr;grid-template-areas:"kicker" "titulo" "sub" "cta" "retrato" "seo";
 margin:0;padding-top:32px;padding-bottom:24px;}
 .hero-title{font-size:clamp(3.2rem,10vw,5rem);max-width:13ch;}
 .hero-sub{font-size:15px;margin-top:22px;max-width:46ch;}
 .hero-retrato{max-width:390px;justify-self:center;margin:28px 0 0;}
 .hero-cta,.hero-seo{display:block;}
 .hero-seo{text-align:center;}
 .hero-fondo{background:radial-gradient(ellipse at 65% 70%,#e5c9bb 0%,#f2e4dc 32%,#fbf5f2 67%);}
 .tratamientos{gap:32px 22px;}
 .trat-txt h3{font-size:1.7rem;}
}
@media(max-width:600px){
 .tratamientos{grid-template-columns:1fr;gap:36px;}
 .hero-kicker{font-size:10px;margin-bottom:20px;}
 .hero-cta .accion{font-size:12px;}
 .hero-pie{font-size:10px;}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto;}
 *,*::before,*::after{animation:none!important;transition:none!important;}
}
/* Máscara separada: los píxeles del retrato original permanecen intactos. */
@supports(mask-mode:luminance){
 .hero-retrato img{mask-image:url('img/ceci-mascara-2026-09-08.png');mask-mode:luminance;mask-size:100% 100%;mask-repeat:no-repeat;}
}
@supports(mask-mode:luminance){
 .hero-retrato img{
  mask-image:radial-gradient(ellipse 6% 6% at 40% 59%,white 95%,transparent 100%),radial-gradient(ellipse 4% 6% at 76% 45%,white 95%,transparent 100%),url('img/ceci-mascara-2026-09-08.png');
  mask-mode:luminance,luminance,luminance;mask-size:100% 100%;mask-composite:add;
 }
}
.hero-pie{border:0;padding-top:8px;}
@supports(mask-mode:luminance){
 .hero-retrato img{mask-image:radial-gradient(ellipse 6% 6% at 40% 59%,white 95%,transparent 100%),radial-gradient(ellipse 4% 6% at 76% 45%,white 95%,transparent 100%),url('img/ceci-mascara-2026-09-08.png'),linear-gradient(white 80%,transparent 100%);mask-mode:luminance,luminance,luminance,luminance;mask-composite:add,add,intersect;}
}
@media(max-width:600px){
 .cabecera{padding-block:16px;}
 .cabecera .fila{gap:8px 16px;}
 .idioma a{padding-block:8px;}
 .hero-cont{grid-template-columns:1.15fr .85fr;grid-template-areas:"kicker kicker" "titulo retrato" "sub sub" "cta cta" "seo seo";column-gap:8px;}
 .hero-title{font-size:clamp(2.45rem,10.5vw,3.4rem);text-wrap:initial;}
 .hero-retrato{width:118%;max-width:none;margin:0 -12% 0 0;align-self:center;}
 .hero-pie{display:none;}
 .hero-sub{margin-top:22px;font-size:14px;}
 .hero-cta{margin-top:22px;}
 .hero-seo{text-align:left;font-size:9px;}
}
@media(max-width:600px){
 .hero-cont{grid-template-columns:1fr;grid-template-areas:"kicker" "titulo" "retrato" "sub" "cta" "seo";}
 .hero-title{font-size:clamp(2.9rem,12vw,4.2rem);max-width:13ch;}
 .hero-retrato{width:86%;max-width:320px;margin:18px 0 0;justify-self:center;}
 .hero-sub{margin-top:6px;}
}
/* Las fotografías reales mantienen su contenido; ajuste de presentación común. */
.cita-foto img{filter:brightness(1.06) saturate(.9);border:0;}
.foto-studio img{filter:brightness(1.12) saturate(.85);border:0;}
.foto-retrato img{filter:saturate(.82);border:0;}
.imagenes-nota{font-size:11px;line-height:1.6;color:var(--tinta-3);margin:16px 0 24px;max-width:65ch;}
.foto-tratamiento{max-width:840px;}
.foto-tratamiento::after{display:none;}
.foto-tratamiento img{border:0;border-radius:3px;}
.wa-btn>img,.wa-card img{object-position:50% 28%;}
body::before,body::after{animation:none!important;}

/* 8/9 — Transiciones continuas, sin filetes decorativos. */
.cabecera,.apertura,.hero-full,section,main>section:last-of-type,
.franja-datos,.manifiesto,.pausa-marca,.pausa-marca+section,
.trat-cat,.firma-manifiesto,.pie .legal,.ficha-datos,
.deseos,.deseos li,.indice,.indice li{border-top:0;border-bottom:0;}
.franja-datos{background:linear-gradient(180deg,var(--papel),var(--papel-alt) 40%,var(--papel-alt) 60%,var(--papel));padding-block:48px;}
.pausa-marca{background:linear-gradient(180deg,var(--papel),var(--papel-alt) 25%,var(--papel-alt) 75%,var(--papel));}
.trat-cat{padding-bottom:0;}
.deseos{gap:16px 40px;}
.indice li+li{margin-top:12px;}

/* Retrato con fondo continuo: sin recortar el contorno del pelo. */
.hero-fondo{background:var(--papel);}
.hero-retrato img{-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-mode:alpha;mask-composite:add;mask-size:100% 100%;border:0;}
.hero-retrato{isolation:isolate;}
.hero-retrato::after{content:"";position:absolute;inset:0 0 26px;pointer-events:none;background:linear-gradient(180deg,var(--papel),transparent 6%,transparent 92%,var(--papel));}
.cita-foto img,.foto-retrato img{filter:none;}
.hero-retrato::after{display:none;}
.hero-retrato img{-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent),linear-gradient(#000 87%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent),linear-gradient(#000 87%,transparent);mask-mode:alpha,alpha;mask-composite:intersect;}
.hero-retrato img{-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent),linear-gradient(transparent,#000 5%,#000 87%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent),linear-gradient(transparent,#000 5%,#000 87%,transparent);}

/* Consultorio retocado: evitar sumar filtros sobre la corrección de luz. */
.foto-studio img{filter:none;}

/* Payment methods: readable, responsive, no imitation brand marks. */
.payment-methods{display:flex;flex-wrap:wrap;gap:12px;list-style:none;padding:0;margin:24px 0;}
.payment-methods li{display:flex;align-items:center;justify-content:center;min-height:60px;min-width:112px;padding:14px 20px;border-radius:16px;background:rgba(255,255,255,.7);border:1px solid rgba(88,54,48,.12);font-size:.95rem;font-weight:600;color:var(--tinta-2);box-shadow:0 4px 18px rgba(88,54,48,.035);}
@media(max-width:420px){.payment-methods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}.payment-methods li{min-width:0;padding:14px 10px;}}

/* Original payment marks: retain aspect ratio and native brand colours. */
.payment-methods li{min-height:76px;padding:12px 14px;}
.payment-logo{display:flex;align-items:center;justify-content:center;width:116px;height:46px;max-width:100%;}
.payment-logo img{display:block;width:100%;height:36px;object-fit:contain;}
.payment-logo--bancomat{background:#092946;border-radius:7px;padding:9px;}
.payment-logo--visa img{width:72px;height:auto;}
.payment-logo--mastercard img{width:58px;height:36px;}
.payment-logo--postepay img{width:104px;height:auto;max-height:36px;object-fit:contain;}
.payment-logo--mercadopago{width:160px;height:65px;}
.payment-logo--mercadopago img{width:100%;height:auto;max-height:65px;}
.payment-transfer{display:flex;align-items:center;justify-content:center;gap:10px;line-height:1.3;text-align:left;}
.payment-transfer svg{flex-shrink:0;}
@media(max-width:420px){.payment-methods--argentina li:first-child,.payment-methods--argentina li:last-child{grid-column:1/-1;}}

/* Contacto directo, sin widgets ni solicitudes a las redes hasta abrir el enlace. */
.social-block{margin-top:24px;}
.social-heading{font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--tinta-2);margin:0 0 12px;}
.social-links{display:flex;flex-wrap:wrap;gap:10px;}
.social-links .social-link{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:10px 16px;border:1px solid var(--linea);border-radius:999px;color:var(--tinta);background:rgba(255,255,255,.45);font-size:13px;font-weight:500;line-height:1.3;text-decoration:none;transition:background-color .15s ease-out,border-color .15s ease-out;}
.social-link svg{width:20px;height:20px;flex:none;}
.social-links .social-link:hover{color:var(--tinta);background:rgba(255,255,255,.85);border-color:var(--bronce);}
.social-links .social-link:focus-visible{outline:2px solid var(--bronce);outline-offset:4px;}
.social-block--footer{padding-block:24px 12px;}
@media(max-width:420px){.social-links{gap:8px;}.social-links .social-link{padding-inline:12px;}}