/* ============================================================================
   TIPOGRAFIAS AUTOHOSPEDADAS
   Antes venian de Google Fonts. Se trajeron al servidor por tres motivos:
     1. Velocidad: se eliminan dos conexiones a dominios de terceros
        (fonts.googleapis.com y fonts.gstatic.com) antes de poder dibujar texto.
     2. Privacidad: cada visita dejaba de avisarle a Google que alguien entro
        a la pagina de una profesional de la salud.
     3. Seguridad: permite una CSP que no confie en ningun dominio externo.

   font-display:swap muestra el texto con la tipografia del sistema mientras
   baja la definitiva. Sin esto hay un parpadeo de texto invisible.
   ============================================================================ */

@font-face{font-family:'Outfit';font-style:normal;font-weight:300;font-display:swap;
  src:url('fuentes/outfit-latin-300-normal.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:400;font-display:swap;
  src:url('fuentes/outfit-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:500;font-display:swap;
  src:url('fuentes/outfit-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:600;font-display:swap;
  src:url('fuentes/outfit-latin-600-normal.woff2') format('woff2')}

@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;
  src:url('fuentes/cormorant-garamond-latin-300-normal.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;
  src:url('fuentes/cormorant-garamond-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;
  src:url('fuentes/cormorant-garamond-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;
  src:url('fuentes/cormorant-garamond-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300;font-display:swap;
  src:url('fuentes/cormorant-garamond-latin-300-italic.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;
  src:url('fuentes/cormorant-garamond-latin-400-italic.woff2') format('woff2')}

/* Reemplazan los style= que estaban en el HTML. La CSP no permite estilos
   inline, y debilitarla con 'unsafe-inline' por tres margenes no tiene
   sentido: 'unsafe-inline' tambien habilita cualquier estilo que logre
   inyectar un atacante. */
.form-group.separado{margin-bottom:1.2rem}
.form-submit.compacto{width:auto;display:inline-block;padding:.8rem 2rem;margin-top:1.6rem}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --cream:#F7F3EE;--sand:#E8E0D5;--blush:#D4A89A;--rose:#C07C6E;
  --deep:#3A2E2A;--olive:#6B6254;--gold:#B8956A;--white:#FFFDF9;
  --font-display:'Cormorant Garamond',serif;
  --font-body:'Outfit',sans-serif;
}
html{scroll-behavior:smooth}
/* El nav es position:fixed (~72px): sin esto, al saltar a #reservar el
   titulo de la seccion queda escondido debajo de la barra. */
section[id],div[id]{scroll-margin-top:90px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Quien pide menos movimiento (ajuste del sistema) no ve ninguna animacion.
   Es accesibilidad, y de paso le ahorra trabajo a los telefonos mas lentos. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
}
body{background:var(--cream);color:var(--deep);font-family:var(--font-body);font-weight:300;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  background-size:128px 128px;opacity:.4}

nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:1.5rem 3rem;display:flex;justify-content:space-between;align-items:center;
  background:rgba(247,243,238,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(58,46,42,.06);
  /* transition acotada a lo que cambia al scrollear: 'all' animaba tambien el
     padding-top con la zona segura y en iOS eso causaba un salto en el notch. */
  transition:padding .4s,box-shadow .4s,background .4s}
nav.scrolled{padding:.8rem 3rem;box-shadow:0 2px 20px rgba(58,46,42,.06)}
.nav-logo{font-family:var(--font-display);font-size:1.4rem;font-weight:300;letter-spacing:.04em;color:var(--deep)}
.nav-logo span{color:var(--blush);font-style:italic}
.nav-links{display:flex;gap:2rem;list-style:none}
.nav-links a{text-decoration:none;color:var(--olive);font-size:.82rem;font-weight:400;letter-spacing:.08em;text-transform:uppercase;position:relative;transition:color .3s}
.nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:1px;background:var(--blush);transition:width .3s}
.nav-links a:hover{color:var(--deep)}
.nav-links a:hover::after{width:100%}
.nav-cta{background:var(--deep);color:var(--cream);padding:.6rem 1.6rem;border:none;font-family:var(--font-body);font-size:.78rem;
  font-weight:400;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:all .3s}
.nav-cta:hover{background:var(--rose);transform:translateY(-1px)}

.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:8rem 2rem 4rem;position:relative}
.hero::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:1px;height:120px;background:linear-gradient(to bottom,transparent,var(--blush))}
.hero-content{max-width:700px}
.hero-tag{font-size:.72rem;font-weight:500;letter-spacing:.25em;text-transform:uppercase;color:var(--blush);margin-bottom:2rem;animation:fadeUp .8s ease both}
.hero h1{font-family:var(--font-display);font-size:clamp(3rem,7vw,5.5rem);font-weight:300;line-height:1.05;margin-bottom:1.5rem;animation:fadeUp .8s ease .15s both}
.hero h1 em{font-style:italic;color:var(--rose)}
.hero p{font-size:1.05rem;color:var(--olive);line-height:1.7;max-width:480px;margin:0 auto 2.5rem;animation:fadeUp .8s ease .3s both}
.hero-btn{display:inline-block;padding:.9rem 2.8rem;border:1px solid var(--deep);color:var(--deep);text-decoration:none;
  font-size:.78rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;transition:all .35s;animation:fadeUp .8s ease .45s both}
.hero-btn:hover{background:var(--deep);color:var(--cream)}
.divider{display:flex;align-items:center;justify-content:center;gap:1.5rem;padding:1rem 0}
.divider::before,.divider::after{content:'';width:60px;height:1px;background:var(--sand)}
.divider svg{width:12px;height:12px;fill:var(--blush)}

.treatments{padding:6rem 3rem;max-width:1100px;margin:0 auto}
.section-tag{font-size:.7rem;font-weight:500;letter-spacing:.25em;text-transform:uppercase;color:var(--blush);margin-bottom:1rem}
.section-title{font-family:var(--font-display);font-size:clamp(2rem,4vw,3rem);font-weight:300;margin-bottom:1rem}
.section-sub{color:var(--olive);font-size:.95rem;line-height:1.7;max-width:520px;margin-bottom:3rem}
.treatments-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}
.treatment-card{background:var(--white);border:1px solid var(--sand);padding:2.5rem 2rem;position:relative;overflow:hidden;transition:all .4s}
.treatment-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,var(--blush),var(--gold));transform:scaleX(0);transform-origin:left;transition:transform .4s}
.treatment-card:hover::before{transform:scaleX(1)}
.treatment-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(58,46,42,.07)}
.treatment-name{font-family:var(--font-display);font-size:1.4rem;font-weight:400;margin-bottom:.6rem}
.treatment-desc{color:var(--olive);font-size:.88rem;line-height:1.6}

.booking{padding:6rem 3rem;background:var(--deep);color:var(--cream);position:relative;overflow:hidden}
.booking::before{content:'';position:absolute;top:-200px;right:-200px;width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle,rgba(212,168,154,.08),transparent 70%)}
.booking-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
.booking-left .section-tag{color:var(--gold)}
.booking-left .section-title{color:var(--cream)}
.booking-left p{color:rgba(247,243,238,.6);font-size:.92rem;line-height:1.7;margin-bottom:2rem}
/* Los estilos reales de .booking-info estan mas abajo, en el bloque de
   arreglos moviles: alli se define como lista sin viñetas. Esta regla quedaba
   pisada entera y solo confundia al leer el archivo. */
.booking-info-item{display:flex;align-items:center;gap:1rem;color:rgba(247,243,238,.7);font-size:.85rem}
.booking-info-item svg{width:18px;height:18px;stroke:var(--gold);fill:none;stroke-width:1.5;flex-shrink:0}

.booking-form{background:rgba(247,243,238,.04);border:1px solid rgba(247,243,238,.08);padding:2.5rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
.form-group{display:flex;flex-direction:column;gap:.4rem}
/* El atributo hidden del HTML lo pisaba la regla de arriba: sin esto,
   el bloque de horarios se ve vacio antes de elegir un dia. */
[hidden]{display:none!important}
.form-group.full{grid-column:1/-1}
.form-label{font-size:.7rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}

/* Telefono: prefijo fijo a la izquierda + numero. El prefijo no crece, el
   numero ocupa el resto. */
.tel-fila{display:flex;gap:.5rem}
.tel-prefijo{flex:0 0 auto;width:auto;padding-right:.6rem;cursor:pointer}
.tel-numero{flex:1 1 auto;min-width:0}
.form-input{background:rgba(247,243,238,.06);border:1px solid rgba(247,243,238,.1);
  color:var(--cream);padding:.75rem 1rem;font-family:var(--font-body);font-size:.88rem;font-weight:300;transition:border-color .3s;outline:none;width:100%}
.form-input::placeholder{color:rgba(247,243,238,.3)}
.form-input:focus{border-color:var(--gold)}
.form-submit{width:100%;margin-top:1.2rem;padding:1rem;background:var(--gold);color:var(--deep);border:none;
  font-family:var(--font-body);font-size:.8rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:all .35s}
.form-submit:hover{background:var(--blush);color:var(--white)}
.form-submit:disabled{opacity:.5;cursor:not-allowed}

.cal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.8rem}
.cal-month-label{font-family:var(--font-display);font-size:1.2rem;font-weight:400;color:var(--cream)}
.cal-nav{background:none;border:1px solid rgba(247,243,238,.15);color:var(--cream);width:40px;height:40px;font-size:1.1rem;position:relative;z-index:2;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s}
.cal-nav:hover{border-color:var(--gold);color:var(--gold)}
.cal-nav:disabled{opacity:.2;cursor:not-allowed}
.cal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}
.cal-weekdays span{text-align:center;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(247,243,238,.35);padding:.3rem 0}
/* 6 filas SIEMPRE: sin esto la grilla cambia de alto entre meses de 5 y 6
   semanas (ago-2026 usa 6, sep-2026 usa 5) y el formulario salta. */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(6,1fr);gap:2px;position:relative}
.cal-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:.85rem;border:1px solid transparent;cursor:pointer;transition:all .25s;position:relative}
.cal-cell:hover:not(.disabled):not(.empty){border-color:var(--gold)}
.cal-cell:focus-visible,.time-slot:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.cal-nav:focus-visible,.form-submit:focus-visible,.form-input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.cal-cell.active{background:var(--gold);color:var(--deep);font-weight:500}
.cal-cell.disabled{color:rgba(247,243,238,.15);cursor:default}
.cal-cell.empty{cursor:default}
.cal-cell.today{color:var(--gold);font-weight:500}
/* Si hoy ya no es reservable, no debe verse destacado como si lo fuera. */
.cal-cell.today.disabled,.cal-cell.today.full-day{color:rgba(247,243,238,.22);font-weight:400}
.cal-cell.has-booking::after{content:'';position:absolute;bottom:4px;width:4px;height:4px;border-radius:50%;background:var(--rose)}
.cal-cell.full-day{color:rgba(247,243,238,.25);cursor:default;text-decoration:line-through}
.cal-loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;
  text-align:center;color:rgba(247,243,238,.55);font-size:.8rem;padding:1rem;background:rgba(30,24,22,.82);backdrop-filter:blur(2px);z-index:3}
.cal-retry{background:none;border:1px solid var(--gold);color:var(--gold);padding:.45rem 1.1rem;font-family:var(--font-body);
  font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}

.time-slots{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.2rem}
.time-slot{padding:.6rem 1.2rem;border:1px solid rgba(247,243,238,.1);font-size:.8rem;cursor:pointer;transition:all .3s;display:flex;flex-direction:column;align-items:center;gap:.15rem}
.time-slot:hover:not(.booked){border-color:var(--gold)}
.time-slot.active{background:var(--gold);border-color:var(--gold);color:var(--deep)}
.time-slot.booked{color:rgba(247,243,238,.2);border-color:rgba(247,243,238,.05);cursor:default;text-decoration:line-through}
.time-slot .slot-range{font-size:.62rem;opacity:.5}
.time-slot.active .slot-range{opacity:.7}

.booking-success{display:none;text-align:center;padding:3rem 2rem}
.booking-success svg{width:56px;height:56px;stroke:var(--gold);fill:none;stroke-width:1.5;margin-bottom:1.5rem}
.booking-success h3{font-family:var(--font-display);font-size:1.8rem;font-weight:300;color:var(--cream);margin-bottom:.8rem}
.booking-success p{color:rgba(247,243,238,.6);font-size:.9rem;line-height:1.6}

footer{padding:3rem;text-align:center;color:var(--olive);font-size:.78rem;letter-spacing:.05em}

@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.reveal{opacity:0;transform:translateY(30px);transition:all .7s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

@media(max-width:768px){
  nav{padding:1rem 1.5rem}
  .nav-links{display:none}
  .hero{padding:7rem 1.5rem 4rem}
  .treatments,.booking{padding:4rem 1.5rem}
  .booking-inner{grid-template-columns:1fr;gap:2.5rem}
  .form-row{grid-template-columns:1fr}
  .booking-form{padding:1.5rem}
}

/* ==========================================================================
   AGREGADOS v2 — identidad, fotos de tratamientos, ficha ampliada,
   sección Sobre mí y datos de transferencia.
   ========================================================================== */

/* --- Identidad: Bioquímica / Cosmiatría profesional --- */
.hero-identidad{margin-bottom:1.6rem;animation:fadeUp .8s ease both}
.hero-identidad .titulo{display:block;font-family:var(--font-display);font-size:1.5rem;font-weight:400;
  font-style:italic;color:var(--blush);letter-spacing:.02em}
.hero-identidad .sub{display:block;font-size:.72rem;font-weight:500;letter-spacing:.25em;
  text-transform:uppercase;color:var(--olive);margin-top:.35rem}
.nav-logo small{display:block;font-family:var(--font-body);font-size:.58rem;font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;color:var(--olive);margin-top:.15rem}

/* ============================================================================
   SOBRE MI

   Teléfono : retrato arriba, texto abajo, todo centrado.
   Escritorio: dos columnas, retrato a la izquierda y texto alineado a la
               izquierda, que es lo que mejor se lee en linea larga.

   OJO CON EL ORDEN: la media query va AL FINAL del bloque. Si se pone antes
   de las reglas base, esas reglas la pisan (misma especificidad, gana la
   ultima) y en escritorio queda todo centrado igual. Fue exactamente el bug
   que desacomodo las credenciales.
   ============================================================================ */

.sobre{padding:7rem 2rem;background:var(--sand)}
.sobre-inner{max-width:1000px;margin:0 auto;text-align:center}
.sobre-inner p{color:var(--olive);line-height:1.85;margin-bottom:1.1rem;font-size:1.02rem}

/* El encabezado (puntito, rotulo y nombre) va centrado y a todo el ancho,
   igual que en Tratamientos. Antes vivia dentro de la columna de texto y por
   eso quedaba corrido a la derecha. */
.sobre-head{margin-bottom:3rem}
.sobre-cuerpo{max-width:820px;margin:0 auto}

.sobre-foto{margin:0 auto 2.4rem;max-width:300px;position:relative}
.sobre-foto img{width:100%;height:auto;display:block;aspect-ratio:4/5;object-fit:cover;
  background:var(--sand);box-shadow:0 18px 50px rgba(58,46,42,.14)}
/* Un filete dorado apenas corrido detras de la foto, como marco fino: le da
   terminacion sin recargar. */
.sobre-foto::after{content:'';position:absolute;inset:0;transform:translate(14px,14px);
  border:1px solid rgba(184,149,106,.4);z-index:-1;pointer-events:none}

.sobre-credenciales{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:2.2rem}

/* Contenedor propio para el boton. Sin el, el <a> quedaba suelto y su
   alineacion dependia del text-align heredado, que cambia entre teléfono y
   escritorio: por eso se descolocaba. */
.sobre-acciones{display:flex;justify-content:center;margin-top:1.2rem}

/* Mismo lenguaje visual que las credenciales, pero en oscuro y con el icono
   para que se lea como accion. Al pasar el mouse se rellena. */
.instagram{display:inline-flex;align-items:center;gap:.6rem;
  padding:.7rem 1.4rem;border:1px solid rgba(58,46,42,.25);color:var(--deep);
  text-decoration:none;font-size:.74rem;font-weight:500;letter-spacing:.08em;
  transition:background .3s,border-color .3s,color .3s;min-height:44px}
.instagram:hover{background:var(--deep);border-color:var(--deep);color:var(--cream)}
.instagram svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;flex:none}
.instagram svg .relleno{fill:currentColor;stroke:none}

@media(min-width:860px){
  /* Encabezado centrado arriba; abajo, dos columnas: foto a la izquierda y
     texto (bio + credenciales + Instagram) alineado a la izquierda. */
  .sobre-cuerpo{max-width:none;display:grid;grid-template-columns:320px 1fr;
    gap:3.5rem;align-items:center;text-align:left}
  .sobre-foto{margin:0;max-width:none}
  .sobre-credenciales{justify-content:flex-start}
  .sobre-acciones{justify-content:flex-start}
}
.credencial{border:1px solid rgba(58,46,42,.18);padding:.6rem 1.2rem;font-size:.74rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--deep);background:rgba(255,253,249,.35);
  transition:border-color .3s,background .3s}
.credencial:hover{border-color:rgba(58,46,42,.35);background:rgba(255,253,249,.7)}

/* --- Tarjetas de tratamiento: SOLO FOTO con el nombre discreto encima --- */
.treatments-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.1rem}
.treatment-card{position:relative;aspect-ratio:3/4;overflow:hidden;padding:0;border:none;background:var(--sand);
  cursor:pointer;transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s}
.treatment-card::before{display:none}          /* anula la barra superior del diseño viejo */
.treatment-card:hover{transform:translateY(-5px);box-shadow:0 16px 40px rgba(58,46,42,.16)}
.treatment-card:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* El <picture> no debe generar caja propia: si la genera, el position:absolute
   del <img> se resuelve contra ella y no contra la tarjeta. */
.treatment-card picture{display:contents}
.treatment-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.22,1,.36,1)}
.treatment-card:hover img{transform:scale(1.06)}

/* Velo inferior: sin esto el nombre se pierde sobre fotos claras */
.treatment-card::after{content:'';position:absolute;left:0;right:0;bottom:0;height:58%;pointer-events:none;
  background:linear-gradient(to top,rgba(30,24,22,.72) 0%,rgba(30,24,22,.32) 42%,transparent 100%)}

.treatment-nombre{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.5rem 1rem 1.15rem;
  text-align:center;font-family:var(--font-display);font-size:1.02rem;font-weight:400;
  letter-spacing:.03em;line-height:1.25;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.35)}
.treatment-nombre span{display:block;margin-top:.45rem;font-family:var(--font-body);font-size:.56rem;
  font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.62);
  opacity:0;transform:translateY(4px);transition:opacity .4s,transform .4s}
.treatment-card:hover .treatment-nombre span,
.treatment-card:focus-visible .treatment-nombre span{opacity:1;transform:translateY(0)}

/* Si la foto todavía no existe, queda un degradado con el nombre igual */
.treatment-card.sin-foto{background:linear-gradient(150deg,var(--blush),var(--rose))}

@media(max-width:520px){
  .treatments-grid{grid-template-columns:repeat(2,1fr);gap:.7rem}
  .treatment-nombre{font-size:.86rem;padding:1.1rem .6rem .85rem}
}

/* --- Ficha ampliada --- */
.ficha{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
  padding:2rem 1rem;background:rgba(30,24,22,.75);backdrop-filter:blur(4px);overflow-y:auto}
.ficha[hidden]{display:none!important}
.ficha-caja{background:var(--white);max-width:860px;width:100%;max-height:90vh;overflow-y:auto;position:relative;
  animation:fadeUp .35s ease both}
.ficha-foto{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--sand);
  transition:filter .45s ease}
/* Mientras baja la version grande se muestra la chica, apenas desenfocada para
   disimular que esta escalada. Al terminar de decodificar la grande se saca la
   clase y el foco entra solo. */
.ficha-foto.ampliando{filter:blur(6px)}
@media(prefers-reduced-motion:reduce){.ficha-foto{transition:none}}
.ficha-foto.sin-foto{background:linear-gradient(135deg,var(--blush),var(--rose))}
.ficha-cuerpo{padding:2.2rem 2.4rem 2.6rem}
.ficha-cuerpo h3{font-family:var(--font-display);font-size:2rem;font-weight:400;color:var(--deep);margin-bottom:1.1rem}
.ficha-cuerpo p{color:var(--olive);line-height:1.85;font-size:.98rem}
.ficha-cerrar{position:absolute;top:1rem;right:1rem;width:40px;height:40px;border:none;cursor:pointer;
  background:rgba(255,253,249,.9);color:var(--deep);font-size:1.4rem;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:background .3s}
.ficha-cerrar:hover{background:var(--gold);color:var(--white)}
.ficha-cta{margin-top:1.8rem;display:inline-block;background:var(--deep);color:var(--cream);
  padding:.85rem 2rem;border:none;font-family:var(--font-body);font-size:.76rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background .3s}
.ficha-cta:hover{background:var(--rose)}

/* --- Aviso de seña en el formulario --- */
.aviso-sena{border:1px solid rgba(247,243,238,.18);padding:.9rem 1.1rem;margin-bottom:1.2rem;
  font-size:.8rem;line-height:1.6;color:rgba(247,243,238,.72)}
.aviso-sena strong{color:var(--gold)}

/* --- Datos de transferencia (solo tras reservar) --- */
.pago{margin-top:1.8rem;border:1px solid rgba(247,243,238,.16);padding:1.3rem;text-align:left}
.pago h4{font-size:.7rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin-bottom:1rem}
.pago-fila{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.55rem 0;border-bottom:1px solid rgba(247,243,238,.07)}
.pago-fila:last-of-type{border-bottom:none}
.pago-rotulo{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(247,243,238,.45);flex-shrink:0}
.pago-valor{font-size:.85rem;color:var(--cream);word-break:break-all;text-align:right;flex:1}
.pago-copiar{background:none;border:1px solid rgba(247,243,238,.2);color:rgba(247,243,238,.7);
  padding:.28rem .7rem;font-family:var(--font-body);font-size:.62rem;letter-spacing:.08em;
  text-transform:uppercase;cursor:pointer;flex-shrink:0;transition:all .3s}
.pago-copiar:hover{border-color:var(--gold);color:var(--gold)}
.pago-copiar.listo{border-color:var(--gold);color:var(--gold)}

/* --- Botón de WhatsApp --- */
/* Contenedores centrados por su cuenta. En escritorio, depender del
   text-align heredado dejaba el boton corrido; con flex queda centrado
   siempre, en cualquier ancho. */
#accionWhatsapp{display:flex;justify-content:center}
.booking-success .compacto{display:block;margin-left:auto;margin-right:auto}

.btn-wa{display:inline-flex;align-items:center;gap:.6rem;margin-top:1.6rem;background:#25D366;color:#fff;
  padding:.95rem 1.9rem;text-decoration:none;font-size:.8rem;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;transition:opacity .3s}
.btn-wa:hover{opacity:.88}
.btn-wa svg{width:19px;height:19px;fill:currentColor}

@media(max-width:640px){
  .ficha{padding:0}
  .ficha-caja{max-height:100vh}
  .ficha-cuerpo{padding:1.6rem 1.4rem 2rem}
  .ficha-cuerpo h3{font-size:1.6rem}
  .pago-fila{flex-wrap:wrap}
  .pago-valor{text-align:left;width:100%}
}


/* ==========================================================================
   AJUSTES PARA TELÉFONO  ·  v3
   Van al final a propósito: por orden de cascada, pisan lo anterior.
   ========================================================================== */

/* --- 1. Evitar que Safari infle el texto y que la página se corra --- */
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{overflow-x:hidden;max-width:100%}

/* --- 2. Alto real de la pantalla en iOS ---
   `100vh` en Safari móvil incluye la franja que ocupa la barra de direcciones,
   así que la portada queda más alta que lo visible y el indicador de scroll
   cae por debajo del borde. `svh` mide el alto REAL disponible.
   La primera línea queda como respaldo para navegadores viejos. */
.hero{min-height:100vh;min-height:100svh}

/* --- 3. Lista de datos del consultorio ---
   El HTML usa <li> con <span class="ico">, y no existía regla para eso: se
   veían las viñetas nativas del navegador y los íconos sin alinear. */
.booking-info{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.95rem}
.booking-info li{display:flex;align-items:flex-start;gap:.85rem;color:rgba(247,243,238,.72);
  font-size:.88rem;line-height:1.5}
.booking-info .ico{color:var(--gold);font-size:.9rem;line-height:1.5;flex-shrink:0;width:1.1rem;text-align:center}
.booking-info a{color:rgba(247,243,238,.72);text-decoration:none;border-bottom:1px solid rgba(184,149,106,.5);
  padding-bottom:1px;transition:color .3s}
.booking-info a:hover{color:var(--gold)}

/* --- 4. Los campos NO pueden medir menos de 16px ---
   Es la causa del zoom automático de iOS: al tocar un campo con letra más
   chica, Safari agranda la página entera y NO vuelve al tamaño original.
   Después de eso todo se ve corrido — el síntoma del "scroll descentrado". */
.form-input{font-size:16px}

/* --- 5. Áreas táctiles ---
   Apple recomienda 44x44 px como mínimo para cualquier cosa que se toque. */
.cal-nav{width:44px;height:44px}
.time-slot{min-height:44px;justify-content:center}
.ficha-cerrar{width:44px;height:44px}
.pago-copiar{min-height:36px}

@media(max-width:768px){
  .sobre{padding:4.5rem 1.5rem}
  .sobre-inner p{font-size:.96rem;line-height:1.8}
  .booking-form{padding:1.25rem}
  .booking-success{padding:2rem 1.25rem}
  .credencial{font-size:.66rem;padding:.5rem .9rem;letter-spacing:.05em}
  .hero-identidad .titulo{font-size:1.3rem}
  .nav-logo{font-size:1.15rem}
  .nav-logo small{font-size:.52rem;letter-spacing:.1em}
  .nav-cta{padding:.55rem 1.1rem;font-size:.68rem}
  .section-sub{margin-bottom:2rem}
}

@media(max-width:520px){
  /* --- 6. El tratamiento huérfano ---
     15 tratamientos en 2 columnas dejan uno solo en la última fila, y se ve
     como un error de maquetado. Si la cantidad es impar, el último ocupa el
     ancho completo con formato apaisado: queda como cierre de la sección. */
  .treatments-grid .treatment-card:last-child:nth-child(odd){
    grid-column:span 2;
    aspect-ratio:16/9;
  }
  .treatments-grid .treatment-card:last-child:nth-child(odd) .treatment-nombre{
    font-size:1.05rem;
  }

  .hero h1{font-size:2.5rem}
  .hero{padding:6.5rem 1.25rem 5rem}
  .treatments,.booking{padding:3.5rem 1.1rem}
  .cal-cell{font-size:.78rem}
  .cal-weekdays span{font-size:.55rem}
  .aviso-sena{font-size:.76rem;padding:.8rem .9rem}
  .booking-success h3{font-size:1.5rem}
  .btn-wa{width:100%;justify-content:center;padding:1rem 1.2rem;font-size:.74rem}
  .pago{padding:1rem}
  .form-submit{padding:1.1rem}
}

/* --- 8. La ficha ocupa la pantalla real, no la teórica --- */
@media(max-width:640px){
  .ficha-caja{max-height:100vh;max-height:100dvh}
  .ficha-foto{aspect-ratio:4/3}
}


/* ==========================================================================
   ZONA SEGURA EN IPHONE (notch / isla dinámica)
   --------------------------------------------------------------------------
   Con `viewport-fit=cover` la página ocupa toda la pantalla física, incluida
   la franja del notch. Sin las reglas de abajo, el encabezado arranca por
   debajo de esa franja y se ve el contenido pasar por detrás al scrollear.

   `env(safe-area-inset-*)` son valores que expone el propio iOS con el alto
   real de cada zona ocupada por el hardware. En pantallas sin notch valen 0,
   así que estas reglas no afectan a nadie más.
   ========================================================================== */

nav{
  padding-top:calc(1.5rem + env(safe-area-inset-top, 0px));
  padding-left:calc(3rem + env(safe-area-inset-left, 0px));
  padding-right:calc(3rem + env(safe-area-inset-right, 0px));
}
nav.scrolled{
  padding-top:calc(.8rem + env(safe-area-inset-top, 0px));
}

@media(max-width:768px){
  nav{
    padding-top:calc(1rem + env(safe-area-inset-top, 0px));
    padding-left:calc(1.5rem + env(safe-area-inset-left, 0px));
    padding-right:calc(1.5rem + env(safe-area-inset-right, 0px));
  }
  nav.scrolled{padding-top:calc(.7rem + env(safe-area-inset-top, 0px))}
  /* El desenfoque del fondo es lo mas caro de repintar mientras se scrollea.
     En telefono se baja: con el fondo casi opaco el efecto se nota igual y el
     scroll queda mas liviano. */
  nav{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background:rgba(247,243,238,.96)}
}

/* El fondo del encabezado cubre el notch por si solo: el nav esta en top:0 y
   su fondo pinta tambien bajo el padding-top, que ya incluye la zona segura.
   El viejo ::before quedaba en bottom:100% (arriba del nav, fuera de pantalla)
   y no tapaba nada. */

/* La portada empieza debajo del encabezado, contando la zona segura. */
.hero{padding-top:calc(8rem + env(safe-area-inset-top, 0px))}
@media(max-width:768px){
  .hero{padding-top:calc(7rem + env(safe-area-inset-top, 0px))}
}
@media(max-width:520px){
  .hero{padding-top:calc(6.5rem + env(safe-area-inset-top, 0px))}
}

/* Respiro abajo, por la barra de gestos del iPhone. */
footer{padding-bottom:calc(2rem + env(safe-area-inset-bottom, 0px))}
.ficha-caja{padding-bottom:env(safe-area-inset-bottom, 0px)}

/* El destino del scroll también tiene que contemplar la zona segura. */
section[id],div[id]{scroll-margin-top:calc(90px + env(safe-area-inset-top, 0px))}