/* ---------- Fuentes autoalojadas (sin peticiones a Google) ----------
   Solo los 7 cortes que el sitio usa. Subset latin. */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/cormorant-garamond-300.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/cormorant-garamond-400.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/cormorant-garamond-500.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300;font-display:swap;src:url(fonts/cormorant-garamond-300-italic.woff2) format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/jost-300.woff2) format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/jost-400.woff2) format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/jost-500.woff2) format('woff2')}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --cream:#F7F3ED;--ivory:#EDE7DC;--warm:#FDFAF6;
  --gold:#B8956A;--gold-l:#D4B896;
  --dark:#18140F;--text:#2C2420;--mid:#6B5B4E;--light:#9A8878;
  --border:#E2D9CE;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost',system-ui,sans-serif;
}
html{scroll-behavior:smooth}
body{background:var(--warm);color:var(--text);font-family:var(--sans);font-weight:300;line-height:1.7;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
img[loading="lazy"]{content-visibility:auto}
nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:0.6rem 5%;display:flex;align-items:center;justify-content:space-between;transition:all .4s}
nav.scrolled{background:rgba(253,250,246,.97);backdrop-filter:blur(10px);padding:0.5rem 5%;border-bottom:1px solid var(--border)}
.nav-logo{color:var(--dark);text-decoration:none;display:flex;align-items:center}.nav-logo svg{fill:currentColor}
.nav-logo img{height:60px;width:auto;display:block}
nav.scrolled .nav-logo img{height:48px}
.footer-logo img{height:34px;width:auto;display:block}
.nav-logo span{font-style:italic;font-weight:300}
.nav-links{display:flex;align-items:center;gap:1.5rem;list-style:none}
.nav-links a{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mid);text-decoration:none;transition:color .3s}
.nav-links a:hover,.nav-links a.active{color:var(--dark)}
.nav-links a.active{border-bottom:1px solid var(--gold);padding-bottom:2px}
.nav-btn{background:var(--dark);color:var(--warm);border:none;padding:.6rem 1.5rem;font-family:var(--sans);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;text-decoration:none;transition:background .3s;white-space:nowrap}
.nav-btn:hover{background:var(--gold)}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:4px}
.hamburger span{width:22px;height:1px;background:var(--dark);display:block;transition:all .3s}
.mobile-menu{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:var(--warm);z-index:99;flex-direction:column;align-items:center;justify-content:center;gap:2.2rem}
.mobile-menu.open{display:flex}
.mobile-menu a{font-family:var(--serif);font-size:2rem;font-weight:300;font-style:italic;color:var(--dark);text-decoration:none}
.mobile-menu a:hover{color:var(--gold)}
.mobile-close{position:absolute;top:1.5rem;right:5%;background:none;border:none;cursor:pointer;font-size:1.4rem;color:var(--dark)}
.page-hero{padding:11rem 5% 5rem;background:var(--cream)}
.page-eyebrow{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem;display:flex;align-items:center;gap:.8rem}
.page-eyebrow::before{content:'';width:24px;height:1px;background:var(--gold)}
h1.page-title{font-family:var(--serif);font-size:clamp(2.8rem,6vw,5rem);font-weight:400;line-height:1.05;color:var(--dark)}
h1.page-title em{font-style:italic;font-weight:300}
.eyebrow{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem;display:flex;align-items:center;gap:.8rem}
.eyebrow::before{content:'';width:24px;height:1px;background:var(--gold)}
h2.stitle{font-family:var(--serif);font-size:clamp(2rem,4vw,3rem);font-weight:400;line-height:1.1;color:var(--dark);margin-bottom:1.2rem}
h2.stitle em{font-style:italic;font-weight:300}
.stext{font-size:.9rem;font-weight:300;color:var(--mid);line-height:1.9;max-width:540px}
.fade-in{opacity:0;transform:translateY(24px);transition:opacity .85s ease,transform .85s ease}
.fade-in.visible{opacity:1;transform:none}
.btn-p{background:var(--dark);color:var(--warm);padding:.85rem 2rem;text-decoration:none;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;transition:background .3s,transform .2s;display:inline-block}
.btn-p:hover{background:var(--gold);transform:translateY(-2px)}
.btn-o{border:1px solid var(--mid);color:var(--mid);padding:.85rem 2rem;text-decoration:none;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;transition:all .3s;display:inline-block}
.btn-o:hover{border-color:var(--dark);color:var(--dark)}
.inner{max-width:1100px;margin:0 auto}
footer{background:#110D08;color:rgba(253,250,246,.45);padding:3.5rem 5%}
.footer-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1.5rem}
.footer-logo{font-family:var(--serif);font-size:1rem;font-weight:400;color:var(--warm);text-decoration:none}
.footer-logo span{font-style:italic;font-weight:300;color:var(--gold-l)}
.footer-links{display:flex;gap:1.8rem;list-style:none}
.footer-links a{font-size:.68rem;letter-spacing:.08em;color:rgba(253,250,246,.35);text-decoration:none;transition:color .3s}
.footer-links a:hover{color:var(--warm)}
.footer-social{display:flex;gap:.8rem}
.social-link{width:33px;height:33px;border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;color:rgba(253,250,246,.35);text-decoration:none;font-size:.65rem;transition:all .3s}
.social-link:hover{border-color:var(--gold);color:var(--gold)}
.footer-copy{width:100%;border-top:1px solid rgba(255,255,255,.07);padding-top:1.5rem;margin-top:.5rem;font-size:.67rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.8rem}
@media(max-width:768px){.nav-links,.nav-btn{display:none}.hamburger{display:flex}.footer-links{display:none}.nav-logo img{height:50px}}
@media(max-width:500px){.nav-logo img{height:42px}}

/* ---------- Logo bicolor (dos imagenes, sin filtros CSS) ----------
   .logo-dark  -> trazo oscuro, para nav claro
   .logo-light -> trazo claro,  para nav sobre hero oscuro
   Al hacer scroll el nav gana .scrolled (fondo claro) y vuelve el oscuro. */
.nav-logo .logo-light{display:none}
body[data-nav="dark"] nav:not(.scrolled) .logo-dark{display:none}
body[data-nav="dark"] nav:not(.scrolled) .logo-light{display:block}

/* ---------- Nav sobre hero oscuro (regla global unica) ---------- */
body[data-nav="dark"] nav:not(.scrolled) .nav-logo,
body[data-nav="dark"] nav:not(.scrolled) .nav-links a{color:rgba(255,255,255,.75)}
body[data-nav="dark"] nav:not(.scrolled) .nav-links a:hover,
body[data-nav="dark"] nav:not(.scrolled) .nav-links a.active{color:#fff}
body[data-nav="dark"] nav:not(.scrolled) .hamburger span{background:rgba(255,255,255,.8)}

/* ---------- Grid de casos: UN solo contenedor por seccion ---------- */
.casos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media(max-width:900px){.casos-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.casos-grid{grid-template-columns:1fr}}

/* ---------- Paginas de tratamiento: componentes compartidos ----------
   Los usan tratamientos.html (indice) y las 8 paginas de tratamiento. */
.trat-pills{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:2rem}
.trat-pill{padding:.25rem .85rem;border:1px solid var(--border);font-size:.62rem;letter-spacing:.07em;color:var(--mid)}
.btn-trat{display:inline-block;background:var(--dark);color:var(--warm);padding:.8rem 1.8rem;text-decoration:none;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;transition:background .3s,transform .2s;align-self:flex-start}
.btn-trat:hover{background:var(--gold);transform:translateY(-2px)}

.td-head{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:2.8rem 0 1.1rem;display:flex;align-items:center;gap:.7rem}
.td-head::before{content:'';width:18px;height:1px;background:var(--gold);flex-shrink:0}
.td-text p{font-size:.9rem;font-weight:300;color:var(--mid);line-height:1.95;margin-bottom:1rem;max-width:820px}
.td-text p strong{color:var(--dark);font-weight:500}
.td-gnote{font-size:.78rem;font-style:italic;color:var(--light);margin-top:1rem}
.td-gnote a{color:var(--gold);text-decoration:none;border-bottom:1px solid var(--gold-l)}
.td-btn-wrap{margin:2.2rem 0 .5rem}

/* Galeria de casos: 3 / 2 / 1 columnas */
.td-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
/* Relleno desenfocado: la misma foto de fondo borrosa (.bg) y encima la nitida
   completa (.fg) con object-fit:contain. No se recorta nada y no queda banda vacia. */
.td-gallery figure{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--ivory);border:1px solid var(--border);margin:0}
.td-gallery figure .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(24px) brightness(.85);transform:scale(1.15);z-index:0}
.td-gallery figure .fg{position:relative;width:100%;height:100%;object-fit:contain;z-index:1;display:block;transition:filter .5s}
.td-gallery figure:hover .bg{filter:blur(24px) brightness(.72)}
@media(max-width:900px){.td-gallery{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.td-gallery{grid-template-columns:1fr}}

/* Videos dentro de una pagina de tratamiento (punto 10) */
.td-videos{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.6rem 0 .5rem}
.td-videos video{width:100%;height:auto;display:block;background:var(--dark)}
/* verticales: se acotan o en escritorio ocupan una pantalla entera de alto */
.td-videos video.vertical{max-width:360px;margin:0 auto}
.td-videos-alt{font-size:.82rem;font-weight:300;color:var(--mid);line-height:1.8;max-width:820px;margin-top:.9rem}
@media(max-width:768px){.td-videos{grid-template-columns:1fr}}

/* Tabla comparativa Composite vs Ceramica */
.compare{margin:1.6rem 0 .5rem;border:1px solid var(--border);overflow:hidden;max-width:820px}
.compare-row{display:grid;grid-template-columns:1.05fr 1fr 1fr;border-bottom:1px solid var(--border)}
.compare-row:last-child{border-bottom:none}
.compare-row>div{padding:.8rem 1rem;font-size:.8rem;font-weight:300;color:var(--mid);line-height:1.5}
.compare-row .lbl{font-size:.66rem;letter-spacing:.04em;text-transform:uppercase;color:var(--dark);font-weight:500;background:var(--cream);display:flex;align-items:center}
.compare-head>div{background:var(--dark);color:var(--warm);font-family:var(--serif);font-size:1.05rem;font-weight:400;padding:.9rem 1rem}
.compare-head .lbl{background:#241a14;color:var(--gold-l);font-family:var(--sans);font-size:.62rem}
@media(max-width:640px){
  .compare-row{grid-template-columns:.95fr 1fr 1fr}
  .compare-row>div{padding:.6rem .55rem;font-size:.68rem}
  .compare-head>div{font-size:.85rem;padding:.7rem .55rem}
  .compare-row .lbl{font-size:.58rem}
}

/* ---------- Paginas individuales de tratamiento (.tp-) ---------- */
.tp-crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--light);margin-bottom:1.6rem}
.tp-crumbs a{color:var(--mid);text-decoration:none;transition:color .3s}
.tp-crumbs a:hover{color:var(--gold)}
.tp-crumbs span[aria-hidden]{color:var(--border)}
.tp-crumb-now{color:var(--dark)}
.tp-main{padding:4.5rem 5% 5rem;background:var(--warm)}
.tp-hero-img{border:1px solid var(--border);background:var(--ivory);overflow:hidden;margin-bottom:2.5rem;max-width:820px}
.tp-hero-img img{width:100%;height:auto;display:block;object-fit:contain}
.tp-lead p{font-size:1rem;font-weight:300;color:var(--mid);line-height:1.9;margin-bottom:1rem;max-width:820px}
.tp-pills{margin-bottom:0}
.tp-otros{background:var(--cream);padding:4rem 5% 5rem;border-top:1px solid var(--border)}
.tp-otros .td-head{margin-top:0}
.tp-otros-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem}
.tp-otro{display:flex;align-items:center;min-height:64px;padding:1rem 1.2rem;background:var(--warm);border:1px solid var(--border);color:var(--dark);text-decoration:none;font-family:var(--serif);font-size:1.05rem;font-weight:400;line-height:1.3;transition:border-color .3s,color .3s,transform .2s}
.tp-otro:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)}
@media(max-width:900px){.tp-otros-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.tp-otros-grid{grid-template-columns:1fr}.tp-main{padding:3rem 5% 3.5rem}}

/* ---------- Boton flotante de WhatsApp (punto 14) ----------
   z-index 98: por debajo del menu movil (99) y del nav (100). */
.wa-float{position:fixed;right:1.1rem;bottom:1.1rem;z-index:98;width:56px;height:56px;border-radius:50%;
  background:#25D366;display:flex;align-items:center;justify-content:center;text-decoration:none;
  box-shadow:0 6px 20px rgba(24,20,15,.22);transition:transform .25s,box-shadow .25s}
.wa-float:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(24,20,15,.30)}
.wa-float svg{width:30px;height:30px;fill:#fff;display:block}
@media(max-width:560px){.wa-float{width:52px;height:52px;right:.9rem;bottom:.9rem}.wa-float svg{width:28px;height:28px}}
/* que no tape el final del contenido ni el footer */
footer{padding-bottom:5.5rem}
@media print{.wa-float{display:none}}

/* ---------- Legibilidad en movil (Bloque H) ----------
   Nada de texto de LECTURA por debajo de 14px. Las microetiquetas en
   mayusculas (eyebrows, pills, .td-head, nav) se dejan: son rotulos de
   diseno, no cuerpo de texto. */
@media(max-width:768px){
  .compare-row div,.compare-row .lbl{font-size:14px;line-height:1.55;padding-top:.7rem;padding-bottom:.7rem}
  .compare-row.compare-head div,.compare-row.compare-head .lbl{font-size:14px}
  .footer-copy{font-size:14px;line-height:1.7}
  .td-gnote{font-size:14px}
  .tp-otro{font-size:15px}
  .sm-video-alt,.td-videos-alt{font-size:14px}
}