:root{
  --black:#080504;
  --deep:#170a0d;
  --deep-2:#1f0d11;
  --panel-c:#20140b;
  --wine:#631729;
  --wine-bright:#7c1c33;
  --gold:#a3782a;
  --gold-soft:#d9b872;
  --ivory:#ede3d3;
  --ivory-dim:#b6a892;
  --line: rgba(163,120,42,0.22);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Sistema tipográfico único (los roles se aplican en el bloque "TIPOGRAFÍA" al final del archivo).
     Cormorant Garamond = voz editorial: títulos (recta) y subtítulos (cursiva), además de la marca.
     Jost = voz funcional: cuerpo, texto secundario, botones, navegación y etiquetas. */
  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'Jost', system-ui, sans-serif;
  --t-display: clamp(3.4rem, 7.6vw, 6.4rem); /* H1 de portada */
  --t-h1: clamp(2.5rem, 4.6vw, 3.6rem);      /* H1 de páginas interiores */
  --t-h2: clamp(2.2rem, 3.8vw, 3.1rem);      /* H2: títulos de sección */
  --t-h3: clamp(1.4rem, 2vw, 1.75rem);       /* H3: títulos de servicio, paso o bloque */
  --t-h3-sm: clamp(1.15rem, 1.5vw, 1.3rem);  /* H3 compacto: dentro de fotos y modalidades */
  --t-sub: clamp(1.3rem, 1.9vw, 1.6rem);     /* subtítulos y entradillas (serif cursiva) */
  --t-body: 1.02rem;                         /* párrafos y testimonios */
  --t-small: 0.9rem;                         /* texto secundario y footer */
  --t-ui: 0.92rem;                           /* botones y navegación */
  --t-ui-sm: 0.86rem;                        /* navegación en móvil */
  --t-label: 0.74rem;                        /* etiquetas en mayúsculas */
  --w-title: 500;
  --w-text: 400;
  --w-ui: 500;
  --track-title: -0.01em;                    /* títulos: un poco más compactos y con carácter */
  --track-ui: 0.02em;
  --track-nav: 0.04em;
  --track-caps: 0.16em;                      /* todo texto en mayúsculas */
  --lh-title: 1.08;
  --lh-sub: 1.15;
  --lh-lede: 1.4;
  --lh-small: 1.6;
  --lh-body: 1.65;
  --sp-section: clamp(88px, 10vw, 128px);
  --sp-head: 56px;
  --sp-title-desc: 18px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* WhatsApp: verde profundo, legible con texto marfil (≥4.5:1) */
  --wa-top:#147f45;
  --wa-bottom:#0e6636;
  --wa-fill:linear-gradient(180deg, var(--wa-top), var(--wa-bottom)); /* único fondo de todos los botones de WhatsApp */
  --wa-edge:rgba(255,255,255,0.12);                                     /* borde de todos los botones */
  --wa-halo:rgba(20,127,69,0.22);                                       /* halo y relleno de hover (mismo verde, translúcido) */
  --wa-line:rgba(20,127,69,0.6);                                        /* aros y bordes de hover (mismo verde) */
  --wa-ink:#f4fbf6;
  --wa-glow: rgba(2,1,1,0.85);
}

*{box-sizing:border-box;}
/* Portada: marfil secundario un poco más claro para lectura cómoda (páginas legales sin cambios) */
body:has(> .hero){ --ivory-dim:#c2b59f; }
html{
  scroll-behavior:smooth;
  accent-color:var(--gold);
  scrollbar-color:#3a2226 var(--black);
}
body{
  margin:0;
  background:var(--black);
  color:var(--ivory);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{ background:var(--wine); color:var(--ivory); }
:focus-visible{ outline:2px solid var(--gold-soft); outline-offset:3px; }
h1,h2,h3{
  color:var(--ivory);
  margin:0;
  text-wrap:balance;
}
p{ text-wrap:pretty; }
a{color:inherit;}
img{max-width:100%; display:block;}
video{max-width:100%; display:block;}
ul{margin:0;}
[id]{ scroll-margin-top:84px; }

.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 32px;
}
@media (max-width:600px){
  .wrap{ padding:0 20px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{animation:none !important; transition:none !important;}
}

/* ---------- NAV ---------- */
header.site-nav{
  position:sticky;
  top:0; left:0; right:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:16px 32px;
  background:rgba(8,5,4,0.92);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.brand-mark{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  flex-shrink:0;
}
.brand-mark img{
  height:36px;
  width:auto;
  display:block;
  border-radius:2px;
}
.brand-mark span{
  color:var(--gold-soft);
}
.nav-links{
  display:flex;
  align-items:center;
  gap:34px;
  list-style:none;
  padding:0;
  margin:0 auto;
}
.nav-links > li{ position:relative; }
.nav-links a{ text-decoration:none; color:var(--ivory-dim); transition:color 0.2s ease; }
.nav-links a:hover{ color:var(--gold-soft); }
.nav-drop{ display:flex; align-items:center; gap:5px; cursor:default; }
.nav-drop svg{ width:11px; height:11px; opacity:0.75; transition:transform 0.2s var(--ease-out); }
.nav-links li:hover .nav-drop svg{ transform:rotate(180deg); }
.dropdown-panel{
  position:absolute;
  top:100%; left:50%;
  transform:translate(-50%,6px);
  transform-origin:top center;
  min-width:200px;
  background:var(--deep-2);
  border:1px solid var(--line);
  padding:10px;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.18s var(--ease-out), transform 0.18s var(--ease-out);
  z-index:40;
}
.nav-links li:hover .dropdown-panel,
.nav-links li:focus-within .dropdown-panel{ opacity:1; pointer-events:auto; transform:translate(-50%,0); }
.dropdown-panel a{
  display:block;
  padding:9px 12px;
  color:var(--ivory-dim);
  border-radius:2px;
}
.dropdown-panel a:hover{ background:var(--wine); color:var(--ivory); }

/* Navegación de la portada: seis enlaces en una línea; en móvil, fila deslizable bajo la marca */
body:has(> .hero) .nav-main{ margin:0 auto; }
body:has(> .hero) .nav-main .nav-links{ margin:0; gap:30px; }
body:has(> .hero) .nav-links a{ white-space:nowrap; }
body:has(> .hero) .nav-drop{ color:var(--ivory-dim); white-space:nowrap; transition:color 0.2s ease; }
body:has(> .hero) .nav-has-drop:hover .nav-drop, body:has(> .hero) .nav-has-drop:focus-within .nav-drop{ color:var(--gold-soft); }
@media (max-width:1100px){
  body:has(> .hero) .nav-main .nav-links{ gap:22px; }
}
/* ---------- MENÚ MÓVIL (solo portada, ≤900px) ---------- */
.nav-toggle, .m-menu{ display:none; }
@media (max-width:900px){
  body:has(> .hero){ --hdr:70px; }
  body:has(> .hero) .nav-main{ display:none; }
  body:has(> .hero) .nav-cta{ margin-left:auto; }
  body:has(> .hero) [id]{ scroll-margin-top:84px; }

  /* Botón: círculo fino con dos trazos que se cruzan al abrir */
  .nav-toggle{
    display:block;
    position:relative;
    flex-shrink:0;
    width:44px; height:44px;
    padding:0;
    border:1px solid rgba(217,184,114,0.35);
    border-radius:50%;
    background:transparent;
    color:var(--gold-soft);
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:border-color 240ms ease, background-color 240ms ease, transform 160ms var(--ease-out);
  }
  .nav-toggle span{
    position:absolute;
    left:50%; top:50%;
    width:16px; height:1px;
    margin:-0.5px 0 0 -8px;
    background:currentColor;
    transition:transform 320ms var(--ease-out);
  }
  .nav-toggle span:first-child{ transform:translateY(-3px); }
  .nav-toggle span:last-child{ transform:translateY(3px); }
  .nav-toggle[aria-expanded="true"]{ border-color:var(--gold-soft); background:rgba(99,23,41,0.35); }
  .nav-toggle[aria-expanded="true"] span:first-child{ transform:rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:last-child{ transform:rotate(-45deg); }
  .nav-toggle:active{ transform:scale(0.94); }

  /* Panel a pantalla completa, bajo la barra */
  .m-menu{
    display:block;
    position:fixed;
    inset:0;
    z-index:49;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:calc(var(--hdr) + 12px) 28px calc(28px + env(safe-area-inset-bottom, 0px));
    background:
      radial-gradient(ellipse 90% 50% at 50% 0%, rgba(99,23,41,0.38), transparent 70%),
      var(--black);
    opacity:0;
    visibility:hidden;
    transform:translateY(-6px);
    transition:opacity 180ms ease, transform 200ms var(--ease-out), visibility 0s linear 200ms;
  }
  .m-menu.is-open{
    opacity:1;
    visibility:visible;
    transform:none;
    transition:opacity 260ms ease, transform 360ms var(--ease-out), visibility 0s;
  }
  .m-menu-inner{ display:flex; flex-direction:column; min-height:100%; max-width:520px; margin:0 auto; }
  .m-menu ul{ list-style:none; margin:0; padding:0; }
  .m-menu-main{ border-top:1px solid var(--line); }
  .m-menu-main a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    min-height:66px;
    padding:8px 2px;
    border-bottom:1px solid var(--line);
    color:var(--ivory);
    text-decoration:none;
    -webkit-tap-highlight-color:transparent;
    transition:color 200ms ease;
  }
  .m-menu-main .ico{ font-size:20px; color:var(--gold); transition:transform 300ms var(--ease-out), color 200ms ease; }
  .m-menu-main a:active{ color:var(--gold-soft); }
  .m-menu-main a:active .ico{ transform:translateX(4px); color:var(--gold-soft); }
  .m-menu-legal{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:2px 20px;
    margin-top:auto;
    padding-top:40px;
  }
  .m-menu-legal a{
    display:flex;
    align-items:center;
    min-height:44px;
    color:var(--ivory-dim);
    text-decoration:none;
    -webkit-tap-highlight-color:transparent;
    transition:color 200ms ease;
  }
  .m-menu-legal a:active{ color:var(--gold-soft); }
  /* Entrada escalonada al abrir; al cerrar todo sale a la vez y más rápido */
  .m-menu li{ opacity:0; transform:translateY(10px); transition:opacity 160ms ease, transform 200ms var(--ease-out); }
  .m-menu.is-open li{
    opacity:1;
    transform:none;
    transition:opacity 420ms ease calc(var(--i, 0) * 40ms + 80ms), transform 520ms var(--ease-out) calc(var(--i, 0) * 40ms + 80ms);
  }
  html.menu-open{ overflow:hidden; }
  html.menu-open .wa-fab{ opacity:0; pointer-events:none; }
}

/* Botón de WhatsApp de la barra (también en páginas legales) */
.nav-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--wa-ink);
  background:var(--wa-fill);
  border:1px solid var(--wa-edge);
  padding:11px 20px;
  border-radius:999px;
  text-decoration:none;
  white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.16), 0 8px 20px -12px var(--wa-glow);
  transition:transform 160ms var(--ease-out), box-shadow 240ms ease;
}
.nav-cta svg{ width:16px; height:16px; flex-shrink:0; }
.nav-cta:active{ transform:scale(0.97); }
@media (hover:hover) and (pointer:fine){
  .nav-cta:hover{ box-shadow:inset 0 1px 0 rgba(255,255,255,0.2), 0 10px 26px -10px var(--wa-glow); }
}
@media (max-width:900px){
  .nav-links{ display:none; }
}
@media (max-width:600px){
  header.site-nav{ padding:12px 20px; gap:12px; }
  .brand-mark{ flex-shrink:1; min-width:0; }
  .brand-mark img{ height:32px; }
  .nav-cta{ padding:10px 16px; }
  /* Portada: WhatsApp como círculo con ícono, del mismo tamaño que el botón de menú */
  body:has(> .hero){ --hdr:58px; }
  body:has(> .hero) .nav-cta{ width:44px; height:44px; padding:0; justify-content:center; }
  body:has(> .hero) .nav-cta svg{ width:19px; height:19px; }
  body:has(> .hero) .nav-cta-label{
    position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
  }
  body:has(> .hero) .m-menu{ padding-left:20px; padding-right:20px; }
}
/* Pantallas muy angostas: el nombre se apila en dos líneas para no empujar el botón */
@media (max-width:380px){
  .brand-mark span{ line-height:1.1; width:min-content; }
}

/* ---------- BOTONES ---------- */
.btn-wa{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:15px 28px 15px 22px;
  border-radius:999px;
  color:var(--wa-ink);
  text-decoration:none;
  white-space:nowrap;
  background:var(--wa-fill);
  border:1px solid var(--wa-edge);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.18), 0 14px 30px -16px var(--wa-glow);
  transition:transform 160ms var(--ease-out), box-shadow 280ms ease;
}
.btn-wa svg{ width:19px; height:19px; flex-shrink:0; fill:currentColor; transition:transform 360ms var(--ease-out); }
/* Brillo que cruza el botón al pasar el cursor */
.btn-wa::before{
  content:'';
  position:absolute; inset:0;
  z-index:-1;
  background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.2) 50%, transparent 70%);
  transform:translateX(-110%);
  transition:transform 700ms var(--ease-out);
}
.btn-wa:active{ transform:scale(0.97); transition-duration:100ms; }
@media (hover:hover) and (pointer:fine){
  .btn-wa:hover{
    transform:translateY(-1px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.22), 0 18px 36px -14px var(--wa-glow);
  }
  .btn-wa:hover::before{ transform:translateX(110%); }
  .btn-wa:hover svg{ transform:rotate(-10deg) scale(1.08); }
  .btn-wa:active{ transform:scale(0.97); }
}
.btn-wa-quiet{ padding:12px 22px 12px 18px; }
.btn-wa-quiet svg{ width:17px; height:17px; }

.btn-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--ivory);
  text-decoration:none;
  padding:14px 28px;
  border-radius:30px;
  border:1px solid rgba(237,227,211,0.4);
  transition:background-color 0.25s ease, border-color 0.25s ease, transform 160ms var(--ease-out);
}
.btn-pill:hover{ background:rgba(237,227,211,0.1); border-color:var(--ivory); }
.btn-pill:active{ transform:scale(0.97); }
.btn-ghost{
  color:var(--ivory-dim);
  text-decoration:none;
  border-bottom:1px solid var(--line);
  padding-bottom:2px;
  transition:color 0.2s ease, border-color 0.2s ease;
}
.btn-ghost:hover{ color:var(--ivory); border-color:var(--gold-soft); }

/* ---------- 1 · HERO: el altar como plano de cine ---------- */
section{ padding:var(--sp-section) 0; position:relative; }
.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  min-height:clamp(600px, calc(100svh - 69px), 980px);
  padding:0;
  background:var(--black);
}
.hero-media{
  position:absolute;
  inset:0;
  margin:0;
  z-index:-1;
  overflow:hidden; /* el blur escalado no se sale del plano */
  transform-origin:62% 40%;
  animation:hero-settle 2.6s var(--ease-out) both;
}
.hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:58% 40%;
  /* Fondo atmosférico: difuminado y tenue para que el título domine */
  filter:blur(5px) sepia(14%) saturate(0.88) contrast(1) brightness(0.54);
  transform:scale(1.08); /* oculta el borde claro que deja el blur */
}
/* Velo: funde el pie del plano con la página y abre espacio para el título */
.hero-media::after{
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 55% at 18% 78%, rgba(8,5,4,0.72), rgba(8,5,4,0) 72%),
    radial-gradient(ellipse 70% 60% at 62% 38%, rgba(99,23,41,0.3), rgba(99,23,41,0) 72%),
    radial-gradient(ellipse 45% 35% at 24% 72%, rgba(237,227,211,0.05), rgba(237,227,211,0) 70%),
    linear-gradient(to top, var(--black) 0%, rgba(8,5,4,0.85) 20%, rgba(8,5,4,0.3) 50%, rgba(8,5,4,0) 66%),
    linear-gradient(90deg, rgba(8,5,4,0.7) 0%, rgba(8,5,4,0.3) 40%, rgba(8,5,4,0) 62%),
    linear-gradient(to bottom, rgba(8,5,4,0.55) 0%, rgba(8,5,4,0) 18%);
}
@keyframes hero-settle{
  from{ opacity:0; transform:scale(1.08); }
  to{ opacity:1; transform:scale(1); }
}
.hero-inner{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 32px clamp(64px, 11vh, 120px);
}
.hero h1{ display:flex; flex-direction:column; gap:26px; margin:0; }
.hero-title{
  color:#fff8ec;
  text-wrap:balance;
  /* Brillo marfil: halo cercano + resplandor amplio muy suave, y sombra que lo separa del fondo */
  text-shadow:
    0 0 18px rgba(255,244,226,0.32),
    0 0 56px rgba(237,227,211,0.16),
    0 2px 24px rgba(8,5,4,0.7);
}
.hero-subtitle{
  display:flex;
  align-items:center;
  gap:18px;
  color:#f4eadb;
  text-shadow:0 1px 14px rgba(8,5,4,0.8);
}
.hero-subtitle::before{
  content:'';
  width:64px; height:1px;
  background:var(--gold-soft);
  flex-shrink:0;
}
.hero-actions{
  margin-top:48px;
  display:flex;
  gap:28px;
  flex-wrap:wrap;
  align-items:center;
}
.hero-title, .hero-subtitle, .hero-actions{
  opacity:0;
  animation:hero-rise 1s var(--ease-out) forwards;
}
.hero-title{ animation-delay:0.4s; }
.hero-subtitle{ animation-delay:0.6s; }
.hero-actions{ animation-delay:0.8s; }
@keyframes hero-rise{
  from{ opacity:0; transform:translateY(16px); filter:blur(6px); }
  to{ opacity:1; transform:translateY(0); filter:blur(0); }
}
@media (prefers-reduced-motion: reduce){
  .hero-title, .hero-subtitle, .hero-actions, .hero-media{ animation:none; opacity:1; }
}
/* Móvil: portada a pantalla completa. La imagen cubre todo el plano, el nombre queda
   centrado ópticamente sobre ella (con un velo que le da lectura) y los botones se anclan abajo. */
@media (max-width:760px){
  .hero{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    min-height:clamp(560px, calc(100svh - 58px), 920px);
  }
  .hero-media img{ object-position:58% 38%; }
  .hero-media::after{
    background:
      radial-gradient(ellipse 90% 42% at 50% 44%, rgba(8,5,4,0.66), rgba(8,5,4,0) 74%),
      radial-gradient(ellipse 80% 60% at 50% 38%, rgba(99,23,41,0.28), rgba(99,23,41,0) 72%),
      linear-gradient(to top, var(--black) 0%, rgba(8,5,4,0.6) 20%, rgba(8,5,4,0) 44%),
      linear-gradient(to bottom, rgba(8,5,4,0.6) 0%, rgba(8,5,4,0) 18%);
  }
  .hero-inner{
    position:relative;
    z-index:1;
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    margin:0;
    padding:48px 20px calc(40px + env(safe-area-inset-bottom, 0px));
  }
  /* margin:auto centra el nombre en el espacio libre sobre los botones */
  .hero h1{ align-items:center; gap:22px; margin:auto 0; padding-bottom:4svh; }
  .hero-subtitle{ justify-content:center; gap:12px; }
  .hero-subtitle::before, .hero-subtitle::after{ content:''; width:28px; height:1px; background:var(--gold-soft); flex-shrink:0; }
  .hero-actions{ width:100%; max-width:380px; flex-direction:column; align-items:stretch; gap:18px; margin:32px auto 0; }

  /* Indicador "Desliza hacia abajo": etiqueta mínima y un hilo vertical por el que baja una gota de luz.
     Vive dentro del flujo de la portada (no flota) y solo cambia su opacidad: sin saltos de layout. */
  .hero-cue{
    flex-direction:column;
    align-items:center;
    gap:12px;
    margin-top:30px;
    color:var(--ivory-dim);
    transition:opacity 420ms ease, transform 520ms var(--ease-out);
    animation:hero-cue-in 900ms var(--ease-out) 1.2s backwards;
  }
  .hero-cue-line{
    position:relative;
    width:1px;
    height:34px;
    overflow:hidden;
    background:rgba(217,184,114,0.22);
  }
  .hero-cue-line::after{
    content:'';
    position:absolute;
    left:0; top:0;
    width:1px; height:12px;
    background:linear-gradient(to bottom, rgba(217,184,114,0), var(--gold-soft));
    transform:translateY(-12px);
    animation:hero-cue-drop 2.6s var(--ease-in-out) 2s infinite;
  }
  /* Al empezar a desplazarse se desvanece; vuelve al regresar al inicio */
  html.is-scrolled .hero-cue{ opacity:0; transform:translateY(6px); }
}
.hero-cue, .hero-sentinel{ display:none; }
.hero-sentinel{ position:absolute; top:0; left:0; width:1px; height:8px; pointer-events:none; }
@media (max-width:760px){
  .hero-cue{ display:flex; }
  .hero-sentinel{ display:block; }
}
@keyframes hero-cue-in{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:none; }
}
@keyframes hero-cue-drop{
  0%{ transform:translateY(-12px); opacity:0; }
  20%{ opacity:1; }
  70%{ transform:translateY(34px); opacity:1; }
  100%{ transform:translateY(34px); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .hero-cue-line::after{ animation:none; transform:translateY(11px); }
}

/* ---------- SECTION SHELLS ---------- */
.section-head{
  max-width:820px;
  margin:0 auto var(--sp-head);
  text-align:center;
}
.section-head.left{ text-align:left; margin-left:0; max-width:900px; }
.kicker{
  color:var(--gold-soft);
  margin-bottom:10px;
  display:block;
}
.section-head p{
  margin-top:var(--sp-title-desc);
  margin-bottom:0;
  color:var(--ivory-dim);
  max-width:64ch;
  margin-left:auto; margin-right:auto;
}
.section-head.left p{ margin-left:0; }
@media (max-width:600px){
  .section-head{ margin-bottom:40px; }
}

/* ---------- ICONOS ---------- */
.icon-sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.ico{
  width:1em; height:1em;
  fill:none;
  stroke:currentColor;
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0;
}
.ico-fill{ width:1em; height:1em; fill:currentColor; flex-shrink:0; }

/* Revelado al entrar en pantalla: visible por defecto, solo se oculta con JS y sin reducción de movimiento */
@media (prefers-reduced-motion: no-preference){
  .js [data-reveal]:not(.gal-grid):not(.process-list):not(.guias-main){
    opacity:0;
    transform:translateY(18px);
    transition:opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
  }
  .js [data-reveal].is-in:not(.gal-grid):not(.process-list):not(.guias-main){ opacity:1; transform:none; }
}

/* ---------- 2 · ¿QUÉ ES MICTLÁN? ---------- */
.about{
  background:
    radial-gradient(ellipse 50% 70% at 0% 0%, rgba(99,23,41,0.22), transparent 70%),
    var(--deep);
}
.about-grid{
  display:grid;
  grid-template-columns:5fr 7fr;
  gap:clamp(40px, 7vw, 110px);
  align-items:start;
}
.about h2{
  max-width:13ch;
  padding-bottom:4px;
}
.about h2 em{ color:var(--gold-soft); }
.about-lede{
  margin:0;
  color:var(--ivory);
  max-width:30ch;
}
.about-body > p:not(.about-lede){
  margin:var(--sp-title-desc) 0 0;
  color:var(--ivory-dim);
  max-width:52ch;
}
/* Modalidades: dos piezas gemelas, misma escala y jerarquía */
.about-modes{
  display:grid;
  grid-template-columns:1fr 1fr;
  margin-top:48px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.mode{
  display:flex;
  align-items:flex-start;
  gap:18px;
  padding:28px 24px 28px 0;
  color:inherit;
  text-decoration:none;
}
.mode + .mode{ padding:28px 0 28px 28px; border-left:1px solid var(--line); }
.mode-mark{
  display:grid;
  place-items:center;
  flex-shrink:0;
  width:52px; height:52px;
  border-radius:50%;
  border:1px solid rgba(217,184,114,0.4);
  color:var(--gold-soft);
  font-size:22px;
  transition:background-color 300ms ease, border-color 300ms ease, transform 400ms var(--ease-out);
}
.mode-text{ display:grid; gap:5px; margin:0; }
.mode-title{
  white-space:nowrap;
  color:var(--ivory);
}
.mode-line{ color:var(--ivory-dim); }
.mode-city{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--gold-soft);
}
.mode-city .ico{ font-size:14px; transition:transform 350ms var(--ease-out); }
.mode-link:active .mode-mark{ transform:scale(0.95); }
.mode-link:focus-visible{ outline-offset:4px; }
@media (hover:hover) and (pointer:fine){
  .mode-link:hover .mode-mark{ background:var(--wa-halo); border-color:var(--wa-line); }
  .mode-link:hover .mode-city .ico{ transform:translateX(4px); }
  .mode-link:hover .mode-title{ color:#fff6e8; }
}
@media (prefers-reduced-motion: no-preference){
  .js .mode-mark svg{ opacity:0; transform:translateY(-8px); transition:opacity 600ms ease 500ms, transform 900ms var(--ease-out) 500ms; }
  .js .about-grid.is-in .mode-mark svg{ opacity:1; transform:none; }
  .js .about-grid.is-in .mode + .mode .mode-mark svg{ transition-delay:650ms; }
}
@media (max-width:860px){
  .about-grid{ grid-template-columns:1fr; gap:28px; }
  .about-modes{ grid-template-columns:1fr; margin-top:36px; }
  .mode, .mode + .mode{ padding:24px 0; border-left:0; }
  .mode + .mode{ border-top:1px solid var(--line); }
}

/* ---------- 3 · LAS NUEVE SANTAS MUERTES COMO GUÍAS + EL ALTAR ---------- */
/* Pieza editorial: fotografías a la izquierda (la vela se apoya sobre la esquina de la principal
   y apunta hacia el texto); título, entradilla y cita forman una sola columna a la derecha. */
.guias{ background:var(--black); overflow:hidden; }
.guias-grid{
  display:grid;
  grid-template-columns:minmax(0, 13fr) minmax(0, 11fr);
  gap:clamp(48px, 6vw, 96px);
  align-items:center;
}
.guias-visual{ position:relative; padding:0 14% 72px 0; }
.guias-main, .guias-vela{ margin:0; overflow:hidden; border-radius:2px; }
.guias-main{ aspect-ratio:4 / 5; }
.guias-vela{
  position:absolute;
  right:0; bottom:0;
  width:40%;
  aspect-ratio:3 / 4;
  z-index:1;
  box-shadow:0 30px 60px -30px rgba(0,0,0,0.9);
}
.guias-main img, .guias-vela img{
  width:100%; height:100%;
  object-fit:cover;
  filter:sepia(8%) saturate(1.1) contrast(1.06) brightness(0.84);
}
.guias-text{ max-width:36rem; }
.guias-title{ max-width:16ch; padding-bottom:4px; }
/* Texto único: entradilla en cursiva con aire, precedida por un filete dorado,
   y la última idea ("y su propia guía") encendida en oro */
.guias-lede{
  margin:28px 0 0;
  color:var(--ivory);
  max-width:44ch;
}
.guias-lede em{ color:var(--gold-soft); }
.guias-foot{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px 20px;
  margin:40px 0 0;
  padding-top:22px;
  border-top:1px solid var(--line);
  max-width:52ch;
  color:var(--ivory-dim);
}
@media (prefers-reduced-motion: no-preference){
  .js .guias-main{ clip-path:inset(100% 0 0 0); transition:clip-path 1400ms var(--ease-in-out); }
  .js .guias-main img{ transform:scale(1.08); transition:transform 2000ms var(--ease-out); }
  .js .guias-main.is-in{ clip-path:inset(0 0 0 0); }
  .js .guias-main.is-in img{ transform:scale(1); }
}
@media (max-width:860px){
  .guias-grid{
    grid-template-columns:1fr;
    grid-template-areas:"title" "visual" "lede" "foot";
    gap:0;
  }
  .guias-text{ display:contents; }
  .guias-title{ grid-area:title; margin-bottom:40px; max-width:12ch; }
  .guias-visual{ grid-area:visual; padding:0 18% 56px 0; }
  .guias-vela{ width:44%; }
  .guias-lede{ grid-area:lede; margin-top:40px; }
  .guias-foot{ grid-area:foot; margin-top:32px; }
}

/* ---------- 4 · PRINCIPALES SERVICIOS: bloques horizontales ---------- */
.servicios{ background:var(--deep); padding-bottom:0; }
.serv-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:var(--sp-head);
}
.serv-head p{ margin:var(--sp-title-desc) 0 0; color:var(--ivory-dim); max-width:62ch; }
.serv-row{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:2px;
  height:clamp(480px, 46vw, 640px);
  background:var(--black);
}
.serv-block{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  color:var(--ivory);
  text-decoration:none;
  outline-offset:-4px;
}
.serv-block img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:-2;
  filter:sepia(10%) saturate(1.08) contrast(1.06) brightness(0.72);
  transition:transform 1100ms var(--ease-out), filter 600ms ease;
}
.serv-block::after{
  content:'';
  position:absolute; inset:0;
  z-index:-1;
  background:linear-gradient(to top, rgba(8,5,4,0.92) 0%, rgba(8,5,4,0.4) 36%, rgba(8,5,4,0) 62%);
}
.serv-text{
  display:grid;
  gap:12px;
  width:100%;
  padding:clamp(24px, 3vw, 40px);
}
.serv-title{
  max-width:18ch;
  transition:transform 500ms var(--ease-out);
}
.serv-desc{
  color:#d8cbb6;
  max-width:34ch;
}
.serv-go{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:6px;
  color:var(--gold-soft);
}
.serv-go .ico{ font-size:1.05rem; transition:transform 400ms var(--ease-out); }
.serv-block:active .serv-text{ transform:scale(0.99); }
@media (hover:hover) and (pointer:fine){
  /* El texto secundario espera al cursor; el bloque elegido se aclara y los demás se apagan */
  .serv-desc, .serv-go{ opacity:0; transform:translateY(10px); transition:opacity 350ms ease, transform 500ms var(--ease-out); }
  .serv-block:hover .serv-desc, .serv-block:hover .serv-go,
  .serv-block:focus-visible .serv-desc, .serv-block:focus-visible .serv-go{ opacity:1; transform:none; }
  .serv-block:hover .serv-go{ transition-delay:60ms; }
  .serv-block:hover img, .serv-block:focus-visible img{ transform:scale(1.04); filter:sepia(6%) saturate(1.15) contrast(1.06) brightness(0.9); }
  .serv-block:hover .serv-go .ico{ transform:translateX(5px); }
  .serv-row:hover .serv-block:not(:hover) img{ filter:sepia(10%) saturate(0.9) contrast(1.05) brightness(0.45); }
}
/* Móvil y táctil: la descripción espera al toque; solo la tarjeta tocada la muestra (sin hover) */
@media (max-width:760px), (hover:none), (pointer:coarse), (pointer:none){
  .serv-row:hover .serv-block:not(:hover) img{ filter:sepia(10%) saturate(1.08) contrast(1.06) brightness(0.72); }
  .serv-block:hover img{ transform:none; }
  .serv-block:not(.is-open):hover img{ filter:sepia(10%) saturate(1.08) contrast(1.06) brightness(0.72); }
  .serv-block{ cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .serv-desc, .serv-go{ display:none; }
  .serv-block.is-open .serv-desc{ display:block; animation:serv-reveal 420ms var(--ease-out) both; }
  .serv-block.is-open .serv-go{ display:inline-flex; animation:serv-reveal 420ms var(--ease-out) 60ms both; }
  .serv-block img{ transition:filter 400ms ease; }
  .serv-block.is-open img{ filter:sepia(6%) saturate(1.15) contrast(1.06) brightness(0.88); }
}
@keyframes serv-reveal{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:none; }
}
@media (max-width:860px){
  .serv-head{ flex-direction:column; gap:14px; margin-bottom:40px; }
  .serv-row{ grid-template-columns:1fr; height:auto; }
  .serv-block{ min-height:clamp(300px, 78vw, 420px); }
}

/* ---------- 5 · GALERÍA DE SERVICIOS ---------- */
.galeria{ background:var(--deep); }
.gal-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:32px;
  margin-bottom:var(--sp-head);
}
.gal-head p{ margin:var(--sp-title-desc) 0 0; color:var(--ivory-dim); max-width:62ch; }
/* Selector tipográfico: texto, sin cajas; una línea fina marca la opción activa */
.gal-filter{ position:relative; display:flex; gap:30px; padding-bottom:10px; }
.gal-filter button{
  position:relative;
  padding:6px 0;
  background:none;
  border:0;
  color:var(--ivory-dim);
  cursor:pointer;
  transition:color 200ms ease, transform 160ms var(--ease-out);
}
.gal-filter button sup{ margin-left:3px; color:var(--gold); }
.gal-filter button[aria-pressed="true"]{ color:var(--ivory); }
.gal-filter button:active{ transform:scale(0.97); }
@media (hover:hover) and (pointer:fine){ .gal-filter button:hover{ color:var(--ivory); } }
.gal-filter-bar, .menu-cats-bar{
  position:absolute;
  left:0; bottom:0;
  width:1px; height:1px;
  background:var(--gold-soft);
  transform-origin:left center;
  transform:translateX(var(--x, 0px)) scaleX(var(--w, 0));
  transition:transform 420ms var(--ease-in-out);
}
.gal-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:clamp(140px, 15vw, 205px);
  grid-template-areas:
    "coco     coco  agua  muerte"
    "coco     coco  agua  muerte"
    "colores  huevo agua  muerte"
    "colores  fuego fuego miguel"
    "humo     fuego fuego miguel"
    "humo     amarilla amarilla miguel";
  gap:10px;
}
.g-coco{ grid-area:coco; } .g-agua{ grid-area:agua; } .g-muerte{ grid-area:muerte; }
.g-colores{ grid-area:colores; } .g-huevo{ grid-area:huevo; } .g-fuego{ grid-area:fuego; }
.g-humo{ grid-area:humo; } .g-amarilla{ grid-area:amarilla; } .g-miguel{ grid-area:miguel; }
.g-item{
  --info-h:4.4rem; /* descripción de hasta tres líneas */
  container-type:size;
  position:relative;
  margin:0;
  overflow:hidden;
  border-radius:2px;
  background:var(--deep-2);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:opacity 500ms ease;
}
.g-item:focus-visible{ outline:2px solid var(--gold-soft); outline-offset:3px; }
.g-item img, .g-item video{
  width:100%; height:100%;
  object-fit:cover;
  filter:sepia(10%) saturate(1.1) contrast(1.06) brightness(0.8);
  transition:transform 900ms var(--ease-out), filter 500ms ease;
}
.g-item::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(8,5,4,0.9) 0%, rgba(8,5,4,0.3) 36%, rgba(8,5,4,0) 60%);
  opacity:0.85;
  transition:opacity 400ms ease;
  pointer-events:none;
}
.g-cap{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:1;
  display:grid;
  gap:3px;
  padding:18px 18px 16px;
  transform:translateY(var(--info-h));
  transition:transform 450ms var(--ease-out);
  pointer-events:none;
}
.g-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:#d8cbb6;
}
.g-play{ font-size:10px; fill:currentColor; stroke-width:1; }
.g-cap strong{
  position:relative;
  justify-self:start;
  padding-bottom:5px;
  color:var(--ivory);
}
/* Indicador: una línea fina que se traza bajo el nombre */
.g-cap strong::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background:var(--gold-soft);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform 500ms var(--ease-out);
}
.g-info{
  height:var(--info-h);
  overflow:hidden;
  padding-top:4px;
  color:#e0d4c0;
  opacity:0;
  filter:blur(3px);
  transition:opacity 300ms ease, filter 300ms ease;
}
.g-item.is-active .g-cap, .g-item:focus-visible .g-cap{ transform:translateY(0); }
.g-item.is-active .g-info, .g-item:focus-visible .g-info{ opacity:1; filter:blur(0); }
.g-item.is-active::after, .g-item:focus-visible::after{ opacity:1; }
.g-item.is-active .g-cap strong::after, .g-item:focus-visible .g-cap strong::after{ transform:scaleX(1); }
@media (hover:hover) and (pointer:fine){
  .g-item:hover .g-cap{ transform:translateY(0); }
  .g-item:hover .g-info{ opacity:1; filter:blur(0); transition-delay:80ms; }
  .g-item:hover::after{ opacity:1; }
  .g-item:hover .g-cap strong::after{ transform:scaleX(1); transition-delay:120ms; }
  .g-item:hover img, .g-item:hover video{ transform:scale(1.04); filter:sepia(6%) saturate(1.16) contrast(1.06) brightness(0.92); }
}
/* Filtro: lo que no pertenece al grupo se apaga sin romper la composición */
.g-item.is-muted{ opacity:0.2; }
/* Móvil: la descripción solo aparece al tocar la foto (el hover no la revela) */
@media (max-width:760px){
  .g-item:not(.is-active):hover .g-cap{ transform:translateY(var(--info-h)); }
  .g-item:not(.is-active):hover .g-info{ opacity:0; filter:blur(3px); }
  .g-item:not(.is-active):hover::after{ opacity:0.85; }
  .g-item:not(.is-active):hover .g-cap strong::after{ transform:scaleX(0); }
  .g-item:not(.is-active):hover img, .g-item:not(.is-active):hover video{ transform:none; filter:sepia(10%) saturate(1.1) contrast(1.06) brightness(0.8); }
  .g-item:not(.is-active):hover .g-tag{ display:inline-flex; }
  .g-item{ -webkit-tap-highlight-color:transparent; }
  .g-item.is-active img, .g-item.is-active video{ filter:sepia(6%) saturate(1.16) contrast(1.06) brightness(0.92); }
}
.g-item.is-muted img, .g-item.is-muted video{ filter:grayscale(0.8) brightness(0.6); }
@media (prefers-reduced-motion: no-preference){
  .js .gal-grid .g-item{
    clip-path:inset(0 0 100% 0);
    transition:clip-path 1100ms var(--ease-in-out) calc(var(--i, 0) * 70ms), opacity 500ms ease;
  }
  .js .gal-grid.is-in .g-item{ clip-path:inset(0 0 0 0); }
}
@media (max-width:760px){
  .gal-head{ flex-direction:column; align-items:flex-start; gap:24px; margin-bottom:40px; }
  .gal-filter{ gap:24px; }
  .gal-grid{
    grid-template-columns:1fr 1fr;
    grid-auto-rows:clamp(130px, 40vw, 220px);
    grid-template-areas:
      "coco     agua"
      "coco     agua"
      "fuego    fuego"
      "muerte   huevo"
      "muerte   colores"
      "humo     colores"
      "amarilla miguel"
      "amarilla miguel";
    gap:6px;
  }
  .g-cap{ padding:14px 12px 12px; }
}

/* ---------- 6 · LISTA DE SERVICIOS: sistema de signos ---------- */
.rituals{ background:var(--black); }

/* Glifos: trazo fino que se dibuja al activarse (pathLength=1 en cada trazo) */
.glyph{
  width:68px; height:68px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.1;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:1;
  stroke-dashoffset:0;
  overflow:visible;
}
@keyframes glyph-draw{
  from{ stroke-dashoffset:1; }
  to{ stroke-dashoffset:0; }
}

.menu-cats{
  position:relative;
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  margin-bottom:var(--sp-head);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.menu-cats [role="tab"]{
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  padding:36px 12px 30px;
  background:none;
  border:0;
  color:var(--ivory-dim);
  text-align:center;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:color 300ms ease;
}
.menu-cats [role="tab"] + [role="tab"]{ border-left:1px solid var(--line); }
.menu-cats [role="tab"]:focus-visible{ outline-offset:-6px; }
/* Halo vino muy tenue detrás del signo activo */
.menu-cats [role="tab"]::before{
  content:'';
  position:absolute;
  top:22px; left:50%;
  width:104px; height:104px;
  margin-left:-52px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(124,28,51,0.55), rgba(124,28,51,0) 70%);
  opacity:0;
  transform:scale(0.8);
  transition:opacity 500ms ease, transform 700ms var(--ease-out);
  z-index:-1;
}
.menu-cats .glyph{
  color:var(--gold);
  opacity:0.5;
  transition:opacity 400ms ease, color 300ms ease, transform 800ms var(--ease-out);
}
.cat-label{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.cat-num, .svc-num, .step-mark{ color:var(--gold); }
.menu-cats [role="tab"][aria-selected="true"]{ color:var(--ivory); }
.menu-cats [role="tab"][aria-selected="true"]::before{ opacity:1; transform:scale(1); }
.menu-cats [role="tab"][aria-selected="true"] .glyph{
  color:var(--gold-soft);
  opacity:1;
  animation:glyph-draw 1400ms var(--ease-in-out) both;
}
.menu-cats [role="tab"]:active .glyph{ transform:scale(0.94); transition-duration:160ms; }
@media (hover:hover) and (pointer:fine){
  .menu-cats [role="tab"]:hover{ color:var(--ivory); }
  .menu-cats [role="tab"]:hover .glyph{ opacity:0.9; transform:rotate(-8deg); }
}
.menu-cats-bar{ bottom:-1px; height:2px; }

/* Panel: signo mayor a la izquierda, lista numerada a la derecha */
.menu-panel{
  display:grid;
  grid-template-columns:4fr 8fr;
  gap:clamp(40px, 6vw, 96px);
  align-items:start;
}
.menu-panel[hidden]{ display:none; }
.panel-aside{
  position:sticky;
  top:120px;
  display:grid;
  place-items:center;
  aspect-ratio:1;
}
.glyph-xl{
  width:min(100%, 300px);
  height:auto;
  aspect-ratio:1;
  color:rgba(217,184,114,0.62);
  stroke-width:0.45;
  animation:glyph-draw 2200ms var(--ease-in-out) both;
}
.panel-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  margin:0 0 6px;
  padding-bottom:18px;
}
.panel-name{ color:var(--ivory); }
.panel-count{
  flex-shrink:0;
  color:var(--ivory-dim);
}

.svc-list{ list-style:none; margin:0; padding:0; }
.svc{ position:relative; border-bottom:1px solid var(--line); }
.svc:first-child{ border-top:1px solid var(--line); }
/* Línea que se enciende bajo el servicio abierto */
.svc::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:1px;
  background:linear-gradient(90deg, var(--gold-soft), rgba(217,184,114,0) 75%);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform 800ms var(--ease-out);
}
.svc.is-open::after{ transform:scaleX(1); }
.svc-head{
  display:grid;
  grid-template-columns:40px 30px 1fr 20px;
  align-items:center;
  gap:10px;
  width:100%;
  padding:24px 0;
  background:none;
  border:0;
  text-align:left;
  color:var(--ivory-dim);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:color 250ms ease;
}
.svc-head:focus-visible{ outline-offset:2px; }
.svc-num{ transition:color 250ms ease; }
.svc-icon{ font-size:21px; color:var(--gold); opacity:0.7; transition:transform 500ms var(--ease-out), opacity 250ms ease, color 250ms ease; }
.svc-name{ transition:transform 450ms var(--ease-out); }
.svc-toggle{ position:relative; width:14px; height:14px; justify-self:end; }
.svc-toggle::before, .svc-toggle::after{
  content:'';
  position:absolute;
  left:0; top:50%;
  width:14px; height:1px;
  background:currentColor;
  transition:transform 350ms var(--ease-out);
}
.svc-toggle::after{ transform:rotate(90deg); }
.svc.is-open .svc-head{ color:var(--ivory); }
.svc.is-open .svc-num{ color:var(--gold-soft); }
.svc.is-open .svc-icon{ opacity:1; color:var(--gold-soft); }
.svc.is-open .svc-toggle::after{ transform:rotate(0deg); }
@media (hover:hover) and (pointer:fine){
  .svc-head:hover{ color:var(--ivory); }
  .svc-head:hover .svc-name{ transform:translateX(6px); }
  .svc-head:hover .svc-icon{ opacity:1; transform:rotate(-8deg); }
}
.svc-body{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows 420ms var(--ease-out);
}
.svc.is-open .svc-body{ grid-template-rows:1fr; }
.svc-inner{
  min-height:0;
  overflow:hidden;
  visibility:hidden;
  padding-left:90px;
  transition:visibility 0s linear 420ms;
}
.svc.is-open .svc-inner{ visibility:visible; transition-delay:0s; }
.svc-inner > *{ opacity:0; transform:translateY(6px); transition:opacity 250ms ease, transform 400ms var(--ease-out); }
.svc.is-open .svc-inner > *{ opacity:1; transform:none; transition-delay:140ms; }
.svc-inner p{ margin:0; color:var(--ivory-dim); max-width:66ch; }
.svc-links{ display:flex; flex-wrap:wrap; gap:14px 28px; padding:22px 0 30px; }
.svc-cta{
  color:var(--gold-soft);
  text-decoration:none;
  padding-bottom:4px;
  background:linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat;
  transition:color 200ms ease, background-size 360ms var(--ease-out);
}
.svc-cta-quiet{ color:var(--ivory-dim); }
.svc-cta:active{ transform:scale(0.98); }
@media (hover:hover) and (pointer:fine){ .svc-cta:hover{ color:var(--ivory); background-size:40% 1px; } }
html:not(.js) .svc-body{ grid-template-rows:1fr; }
html:not(.js) .svc-inner{ visibility:visible; }
html:not(.js) .svc-inner > *{ opacity:1; transform:none; }

@media (max-width:860px){
  .menu-cats{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    margin:0 -32px 40px;
    padding:0 32px;
    border-bottom:1px solid var(--line);
  }
  .menu-cats::-webkit-scrollbar{ display:none; }
  .menu-cats [role="tab"]{ flex:0 0 136px; gap:12px; padding:24px 6px 20px; scroll-snap-align:start; }
  .menu-cats [role="tab"]::before{ top:14px; width:84px; height:84px; margin-left:-42px; }
  .menu-cats .glyph{ width:56px; height:56px; }
  .menu-panel{ grid-template-columns:1fr; }
  .panel-aside{ display:none; }
}
@media (max-width:600px){
  .menu-cats{ margin:0 -20px 36px; padding:0 20px; }
  .menu-cats [role="tab"]{ flex-basis:118px; }
  .svc-head{ grid-template-columns:28px 24px 1fr 16px; gap:8px; padding:20px 0; }
  .svc-icon{ font-size:18px; }
  .svc-inner{ padding-left:0; }
}

/* ---------- TESTIMONIOS ---------- */
.testimonios{ background:var(--deep); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.testi-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:18px;
}
.testi-card{
  position:relative;
  margin:0;
  display:flex;
  flex-direction:column;
  padding:36px 34px 30px;
  background:var(--deep-2);
  border:1px solid var(--line);
  transition:border-color 300ms ease, transform 300ms var(--ease-out);
}
.testi-feature{
  grid-row:1 / 4;
  justify-content:space-between;
  padding:56px 52px 44px;
  background:
    radial-gradient(ellipse 80% 70% at 0% 0%, rgba(99,23,41,0.6), transparent 70%),
    var(--deep-2);
}
.testi-mark{
  display:block;
  height:2.6rem;
  font-family:var(--serif);
  font-size:4.8rem;
  line-height:0.9;
  color:var(--gold);
}
.testi-card p{
  color:var(--ivory);
  margin:14px 0 0;
}
.testi-feature .testi-mark{ font-size:6.5rem; height:3.4rem; }
.testi-feature p{ max-width:34ch; }
.testi-card footer{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:auto;
  padding-top:26px;
}
.testi-card p + footer{ margin-top:26px; border-top:1px solid var(--line); }
.testi-initials{
  display:grid;
  place-items:center;
  width:38px; height:38px;
  border-radius:50%;
  border:1px solid rgba(217,184,114,0.5);
  color:var(--gold-soft);
}
.testi-card cite{ color:var(--gold-soft); }
@media (hover:hover) and (pointer:fine){
  .testi-card:hover{ border-color:rgba(217,184,114,0.42); transform:translateY(-2px); }
}
@media (max-width:760px){
  .testi-grid{
    display:flex;
    gap:12px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    margin:0 -20px;
    padding:0 20px 8px;
    scroll-padding:0 20px;
  }
  .testi-grid::-webkit-scrollbar{ display:none; }
  .testi-card{ flex:0 0 86%; scroll-snap-align:start; padding:30px 24px 24px; }
  .testi-feature{ padding:34px 26px 26px; }
}

/* ---------- 8 · VIDEO: un solo bloque audiovisual ---------- */
.presentation{ background:var(--black); border-top:1px solid var(--line); }
/* Composición editorial: título y entradilla centrados, díptico de videos y nota de cierre */
.av{
  --av-pad:clamp(20px, 4vw, 64px);
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  grid-template-areas:"title" "lede" "media" "note";
  justify-items:center;
  text-align:center;
  padding:clamp(48px, 6vw, 88px) var(--av-pad);
  overflow:hidden;
  border-radius:3px;
  background:
    radial-gradient(ellipse 60% 50% at 50% 62%, rgba(124,28,51,0.45), transparent 70%),
    linear-gradient(180deg, var(--deep-2), var(--deep));
}
.av-copy{ display:contents; }
.av-copy h2{ grid-area:title; max-width:24ch; }
.av-lede{
  grid-area:lede;
  margin:var(--sp-title-desc) 0 0;
  color:var(--ivory);
  max-width:48ch;
}
.video-play-ring{
  display:grid; place-items:center;
  border-radius:50%;
  transition:transform 400ms var(--ease-out), background-color 300ms ease, border-color 300ms ease;
}
.video-play-ring .ico{ fill:currentColor; stroke-width:1; margin-left:3px; transition:transform 400ms var(--ease-out); }
.av-note{
  grid-area:note;
  margin:clamp(32px, 4vw, 48px) 0 0;
  padding-top:20px;
  border-top:1px solid var(--line);
  color:var(--ivory-dim);
  max-width:60ch;
}
/* Díptico enmarcado: cada video se monta como una pieza con paspartú, en dos marcos idénticos.
   --vid-w es el ancho del video: el mayor posible sin que su alto (9:16, formato original)
   supere el 80 % de la pantalla. object-fit:contain impide cualquier recorte o deformación. */
.video-pair{
  grid-area:media;
  --mat:clamp(10px, 1.2vw, 16px);
  --vid-w:min(420px, 36vw, calc(80svh * 9 / 16));
  justify-self:stretch;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:clamp(20px, 3vw, 44px);
  margin-top:clamp(40px, 5vw, 64px);
}
.video-stage{
  position:relative;
  flex:0 0 auto;
  padding:var(--mat);
  border-radius:3px;
  background:linear-gradient(180deg, rgba(31,13,17,0.96), rgba(12,6,7,0.98));
  border:1px solid rgba(217,184,114,0.2);
  box-shadow:
    inset 0 1px 0 rgba(237,227,211,0.05),
    0 2px 6px -2px rgba(0,0,0,0.5),
    0 36px 70px -42px rgba(0,0,0,0.9);
  transition:border-color 400ms ease, transform 500ms var(--ease-out), box-shadow 500ms var(--ease-out);
}
/* Filete interior: une el marco y el video como una sola pieza */
.video-stage::after{
  content:'';
  position:absolute;
  inset:calc(var(--mat) - 1px);
  border:1px solid rgba(217,184,114,0.16);
  border-radius:1px;
  pointer-events:none;
}
.video-stage video{
  display:block;
  width:var(--vid-w);
  height:auto;
  aspect-ratio:9 / 16;
  object-fit:contain;
  background:var(--black);
  border-radius:1px;
}
.video-stage.is-playing{ border-color:rgba(217,184,114,0.38); }
@media (hover:hover) and (pointer:fine){
  .video-stage:hover{
    transform:translateY(-3px);
    border-color:rgba(217,184,114,0.42);
    box-shadow:
      inset 0 1px 0 rgba(237,227,211,0.06),
      0 2px 6px -2px rgba(0,0,0,0.5),
      0 44px 80px -40px rgba(0,0,0,0.95);
  }
}
.video-play{
  position:absolute; inset:var(--mat);
  z-index:1;
  border-radius:1px;
  display:grid;
  place-items:center;
  border:0;
  background:radial-gradient(circle at 50% 50%, rgba(8,5,4,0.05) 30%, rgba(8,5,4,0.45) 100%);
  color:var(--ivory);
  cursor:pointer;
  transition:opacity 400ms ease, visibility 0s linear 0s;
}
/* Único botón de reproducción: círculo fino con ▶ */
.video-play-ring{
  width:76px; height:76px;
  border:1px solid rgba(237,227,211,0.5);
  background:rgba(8,5,4,0.35);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  font-size:28px;
}
.video-play:active .video-play-ring{ transform:scale(0.95); }
.video-play:focus-visible{ outline-offset:-6px; }
@media (hover:hover) and (pointer:fine){
  .video-play:hover .video-play-ring{ transform:scale(1.05); border-color:var(--gold-soft); background:rgba(99,23,41,0.45); }
  .video-play:hover .video-play-ring .ico{ transform:translateX(2px); }
}
.video-stage.is-playing .video-play{ opacity:0; visibility:hidden; transition:opacity 300ms ease, visibility 0s linear 300ms; }
html:not(.js) .video-play{ display:none; }
/* Móvil: los dos marcos apilados, centrados y con la misma escala */
@media (max-width:760px){
  .av{ --av-pad:20px; padding-top:44px; padding-bottom:40px; }
  .video-pair{
    --mat:10px;
    /* ancho de pantalla menos márgenes de página (20 px), del bloque (20 px) y del marco */
    --vid-w:min(calc(100vw - 80px - 2 * var(--mat) - 2px), 400px);
    flex-direction:column;
    align-items:center;
    gap:28px;
    margin-top:36px;
  }
  .av-note{ margin-top:32px; }
}

/* ---------- LANDING 10 · DE LA CONSULTA AL RITUAL ---------- */
.process{
  background:
    radial-gradient(ellipse 55% 70% at 50% 0%, rgba(99,23,41,0.34), transparent 70%),
    var(--deep);
  border-top:1px solid var(--line);
}
/* Recorrido interactivo: cada etapa es un <details> (se abre con toque o clic, sin hover).
   Abrir una cierra la anterior (name="proceso"); el hilo dorado se llena hasta la etapa abierta
   y las etapas ya recorridas quedan encendidas. */
/* Leyenda bajo el título: texto plano, sin adornos */
.process .section-head{ margin-bottom:clamp(40px, 5vw, 64px); }
.process .section-head .process-hint{ color:var(--ivory-dim); }
.process-list{
  --node:72px;
  --p:0;
  position:relative;
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:clamp(24px, 3vw, 44px);
  align-items:start;
  text-align:center;
}
.process-list:has(> li:nth-child(2) > [open]){ --p:0.3333; }
.process-list:has(> li:nth-child(3) > [open]){ --p:0.6667; }
.process-list:has(> li:nth-child(4) > [open]){ --p:1; }
/* Hilo base (tenue) y tramo recorrido (dorado) */
.process-list::before, .process-list::after{
  content:'';
  position:absolute;
  top:calc(var(--node) / 2);
  left:12.5%; right:12.5%;
  height:1px;
  transform-origin:left center;
}
.process-list::before{ background:rgba(163,120,42,0.28); }
.process-list::after{
  background:linear-gradient(90deg, var(--gold), var(--gold-soft));
  transform:scaleX(var(--p));
  transition:transform 800ms var(--ease-in-out);
}
.process-list > li{ position:relative; }
.process-item summary{
  display:flex;
  flex-direction:column;
  align-items:center;
  list-style:none;
  cursor:pointer;
  padding:0 6px 4px;
  border-radius:2px;
  -webkit-tap-highlight-color:transparent;
}
.process-item summary::-webkit-details-marker{ display:none; }
.process-item summary::marker{ content:''; }
.process-item summary:focus-visible{ outline:2px solid var(--gold-soft); outline-offset:6px; }
.step-node{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  width:var(--node); height:var(--node);
  margin:0 auto 22px;
  border-radius:50%;
  background:var(--deep);
  border:1px solid rgba(217,184,114,0.28);
  box-shadow:0 0 0 10px var(--deep);
  color:var(--gold);
  font-size:26px;
  transition:border-color 400ms ease, color 400ms ease, background-color 400ms ease, box-shadow 500ms var(--ease-out), transform 160ms var(--ease-out);
}
.step-mark{ display:block; margin-bottom:6px; transition:color 400ms ease; }
.process-item h3{ color:var(--ivory-dim); transition:color 400ms ease; }
/* Etapas recorridas: anteriores a la abierta */
.process-list > li:has(~ li > [open]) .step-node{ border-color:rgba(217,184,114,0.6); color:var(--gold-soft); }
/* Etapa abierta: nodo encendido desde dentro y rodeado por un segundo anillo fino */
.process-item[open] .step-node{
  border-color:var(--gold-soft);
  color:var(--gold-soft);
  background:radial-gradient(circle at 50% 30%, #4a1a26, var(--deep) 78%);
  box-shadow:0 0 0 10px var(--deep), 0 0 0 11px rgba(217,184,114,0.22);
}
.process-item[open] .step-mark{ color:var(--gold-soft); }
.process-item[open] h3{ color:var(--ivory); }
.process-item p{
  color:var(--ivory-dim);
  max-width:26ch;
  margin:14px auto 0;
  animation:step-in 480ms var(--ease-out) both;
}
@keyframes step-in{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:none; }
}
.process-item summary:active .step-node{ transform:scale(0.95); }
@media (hover:hover) and (pointer:fine){
  .process-item summary:hover .step-node{ border-color:var(--gold-soft); color:var(--gold-soft); }
  .process-item summary:hover h3{ color:var(--ivory); }
}
/* Entrada: el hilo se traza y cada etapa aparece en orden */
@media (prefers-reduced-motion: no-preference){
  .js .process-list::before{ transform:scaleX(0); transition:transform 1600ms var(--ease-in-out) 200ms; }
  .js .process-list.is-in::before{ transform:scaleX(1); }
  .js .process-list > li{
    opacity:0;
    transform:translateY(12px);
    transition:opacity 700ms ease, transform 800ms var(--ease-out);
    transition-delay:calc(var(--i, 0) * 200ms + 300ms);
  }
  .js .process-list.is-in > li{ opacity:1; transform:none; }
}
/* Móvil: línea de tiempo vertical ligera; cada tramo se enciende al avanzar */
@media (max-width:760px){
  .process-list{
    --node:52px;
    grid-template-columns:1fr;
    gap:0;
    text-align:left;
    max-width:none;
    margin:0;
  }
  .process-list::before, .process-list::after{ display:none; }
  .process-list > li{ padding-bottom:26px; }
  .process-list > li:last-child{ padding-bottom:0; }
  .process-list > li:not(:last-child)::before{
    content:'';
    position:absolute;
    left:calc(var(--node) / 2);
    top:calc(var(--node) / 2);
    bottom:calc(var(--node) / -2);
    width:1px;
    background:rgba(163,120,42,0.28);
    transition:background-color 500ms ease;
  }
  .process-list > li:has(~ li > [open])::before{ background:var(--gold); }
  .process-item summary{
    display:grid;
    grid-template-columns:var(--node) 1fr;
    grid-template-rows:auto auto;
    column-gap:18px;
    align-items:center;
    min-height:var(--node);
    padding:0;
  }
  .step-node{ grid-row:1 / span 2; margin:0; font-size:21px; box-shadow:0 0 0 6px var(--deep); }
  .process-item[open] .step-node{ box-shadow:0 0 0 6px var(--deep), 0 0 0 7px rgba(217,184,114,0.22); }
  .step-mark{ grid-column:2; align-self:end; margin:0 0 2px; }
  .process-item summary h3{ grid-column:2; align-self:start; }
  .process-item p{ margin:10px 0 0 calc(var(--node) + 18px); max-width:none; }
}

/* ---------- 11 · CONSULTA: cierre con el logo ---------- */
.contact{
  background:
    radial-gradient(ellipse 45% 60% at 28% 50%, rgba(99,23,41,0.3), transparent 72%),
    var(--black);
  border-top:1px solid var(--line);
}
.contact-grid{
  display:grid;
  grid-template-columns:minmax(0, 5fr) minmax(0, 6fr);
  gap:clamp(40px, 7vw, 110px);
  align-items:center;
}
.contact-logo{ margin:0; justify-self:center; width:min(100%, 400px); }
/* El logo es blanco sobre negro: "lighten" deja ver solo el trazo sobre el fondo de la sección */
.contact-logo img{ width:100%; height:auto; mix-blend-mode:lighten; opacity:0.92; }
.contact h2{ max-width:14ch; }
.contact-copy > p:not(.contact-note){ color:var(--ivory-dim); max-width:44ch; margin:var(--sp-title-desc) 0 40px; }
.contact-note, .footer-note{ color:var(--ivory-dim); }
.contact-note{ margin:34px 0 0; opacity:0.8; max-width:48ch; }

/* Botón principal de agenda: verde WhatsApp con respuesta táctil */
.btn-agendar{
  gap:16px;
  padding:10px 30px 10px 10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.2), 0 0 0 0 transparent, 0 22px 40px -18px var(--wa-glow);
  transition:transform 160ms var(--ease-out), box-shadow 320ms var(--ease-out);
}
.agendar-icon{
  display:grid; place-items:center;
  width:46px; height:46px;
  border-radius:50%;
  background:rgba(255,255,255,0.14);
  transition:transform 400ms var(--ease-out), background-color 300ms ease;
}
.agendar-icon .ico-fill{ width:22px; height:22px; }
.btn-agendar .agendar-arrow{ width:18px; height:18px; fill:none; transition:transform 300ms var(--ease-out); }
.btn-agendar svg{ transform:none; }
.btn-agendar:active{ transform:scale(0.97); transition-duration:100ms; }
@media (hover:hover) and (pointer:fine){
  .btn-agendar:hover{
    transform:translateY(-2px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.24), 0 0 0 7px var(--wa-halo), 0 26px 44px -18px var(--wa-glow);
  }
  .btn-agendar:hover svg{ transform:none; }
  .btn-agendar:hover .agendar-icon{ transform:rotate(-12deg) scale(1.06); background:rgba(255,255,255,0.2); }
  .btn-agendar:hover .agendar-arrow{ transform:translateX(4px); }
  .btn-agendar:active{ transform:scale(0.97); }
}
@media (max-width:860px){
  .contact{ text-align:center; }
  .contact-grid{ grid-template-columns:1fr; gap:36px; }
  .contact-logo{ width:min(72%, 300px); }
  .contact h2, .contact-copy > p:not(.contact-note), .contact-note{ margin-left:auto; margin-right:auto; }
}
@media (max-width:600px){
  .btn-agendar{ width:100%; max-width:420px; padding-right:22px; }
  .btn-agendar .agendar-label{ flex:1; }
}

/* ---------- FOOTER ---------- */
.footer-cta{
  text-align:center;
  padding:90px 32px;
  background:var(--deep-2);
  border-top:1px solid var(--line);
}
body:has(> .hero) .footer-cta{ padding-top:clamp(64px, 8vw, 96px); padding-bottom:clamp(64px, 8vw, 96px); }
footer.site-footer{
  background:var(--black);
  padding:34px 0 30px;
  border-top:1px solid var(--line);
}
.footer-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
  color:var(--ivory-dim);
}
.footer-links{ display:flex; gap:18px; flex-wrap:wrap; }
.footer-links a{ color:var(--ivory-dim); text-decoration:none; border-bottom:1px solid transparent; transition:color 0.2s ease, border-color 0.2s ease; }
.footer-links a:hover{ border-color:var(--line); color:var(--gold-soft); }
.footer-note{
  margin-top:22px;
  padding-top:22px;
  border-top:1px solid var(--line);
  opacity:0.7;
  max-width:900px;
}
@media (max-width:600px){
  footer.site-footer{ padding-bottom:100px; }
}

/* ---------- WHATSAPP FAB ---------- */
.wa-fab{
  position:fixed; right:22px; bottom:22px; z-index:60;
  width:60px; height:60px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--wa-ink);
  background:var(--wa-fill);
  border:1px solid var(--wa-edge);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.2), 0 10px 26px -8px rgba(0,0,0,0.6);
  text-decoration:none;
  transition:transform 200ms var(--ease-out), box-shadow 280ms ease;
}
.wa-fab svg{ width:28px; height:28px; fill:currentColor; transition:transform 360ms var(--ease-out); }
.wa-fab::after{
  content:'';
  position:absolute; inset:-1px;
  border-radius:inherit;
  border:1px solid var(--wa-line);
  animation:fab-ring 3.6s var(--ease-out) infinite;
  pointer-events:none;
}
@keyframes fab-ring{
  0%{ transform:scale(1); opacity:0.7; }
  45%,100%{ transform:scale(1.45); opacity:0; }
}
.wa-fab:active{ transform:scale(0.94); }
@media (hover:hover) and (pointer:fine){
  .wa-fab:hover{ transform:translateY(-2px) scale(1.04); box-shadow:inset 0 1px 0 rgba(255,255,255,0.24), 0 16px 34px -10px var(--wa-glow); }
  .wa-fab:hover svg{ transform:rotate(-10deg); }
  .wa-fab:active{ transform:scale(0.94); }
}
@media (max-width:600px){
  .wa-fab{ right:16px; bottom:16px; width:56px; height:56px; }
}

/* ---------- PÁGINAS LEGALES ---------- */
.policy-hero{
  padding:150px 0 60px;
  background:var(--deep);
  border-bottom:1px solid var(--line);
}
.back-home{
  display:inline-block;
  color:var(--ivory-dim);
  text-decoration:none;
  margin-bottom:24px;
  border-bottom:1px solid transparent;
}
.back-home:hover{ color:var(--gold-soft); border-color:var(--line); }
.policy-hero h1{ margin-bottom:var(--sp-title-desc); }
.policy-updated{ color:var(--ivory-dim); margin:0 0 32px; }
.policy-nav{
  display:flex; flex-wrap:wrap; gap:10px;
}
.policy-nav a{
  color:var(--ivory-dim);
  text-decoration:none;
  border:1px solid var(--line);
  padding:8px 16px;
  border-radius:20px;
}
.policy-nav a:hover{ color:var(--ivory); border-color:var(--gold); }
.policy-nav a.active{ background:var(--wine); color:var(--ivory); border-color:var(--wine); }
.policy-body{ padding:70px 0 110px; background:var(--black); }
.policy-body h2{ margin:48px 0 14px; }
.policy-body h2:first-child{ margin-top:0; }
.policy-body p, .policy-body ul{ color:var(--ivory-dim); margin:0 0 14px; max-width:68ch; }
.policy-body ul{ padding-left:22px; }
.policy-body li{ margin-bottom:8px; }
.policy-body strong{ color:var(--ivory); }

/* =====================================================================
   TIPOGRAFÍA: única fuente de verdad del sitio.
   Ninguna regla de componente declara familia, tamaño, peso, interlineado,
   tracking, cursiva ni mayúsculas; todo se asigna aquí por rol.
   Jerarquía: H1 > H2 > H3 > subtítulo > cuerpo > secundario > interfaz / etiquetas
   ===================================================================== */

/* Cuerpo (base): Jost 400 */
body{
  font-family:var(--sans);
  font-size:1rem;
  font-weight:var(--w-text);
  line-height:var(--lh-body);
}
p, li{ font-size:var(--t-body); }
button{ font:inherit; }

/* Títulos: Cormorant Garamond 500, sin cursiva */
h1, h2, h3,
.hero-title, .serv-title, .svc-name, .panel-name, .mode-title, .g-cap strong, .brand-mark span{
  font-family:var(--serif);
  font-weight:var(--w-title);
  font-style:normal;
  letter-spacing:var(--track-title);
  font-kerning:normal;
  font-variant-ligatures:common-ligatures;
}
/* H1 */
h1{ font-size:var(--t-h1); line-height:var(--lh-title); }
.hero-title{ font-size:var(--t-display); line-height:0.95; letter-spacing:0.1em; }
/* H2 */
h2, .footer-cta h2{ font-size:var(--t-h2); line-height:var(--lh-title); }
/* H3 */
h3, .serv-title, .svc-name, .panel-name, .policy-body h2{ font-size:var(--t-h3); line-height:var(--lh-sub); }
.mode-title, .g-cap strong{ font-size:var(--t-h3-sm); line-height:var(--lh-sub); }
/* H3 compactos sin tracking negativo: a ese tamaño se leen mejor abiertos */
h3, .serv-title, .svc-name, .panel-name, .mode-title, .g-cap strong, .policy-body h2{ letter-spacing:0; }
/* Énfasis dentro de un título: cursiva de la misma familia */
.about h2 em{ font-style:italic; font-weight:400; }
/* Marca (logotipo tipográfico) */
.brand-mark span{ font-size:1.25rem; letter-spacing:var(--track-caps); }

/* Cuerpo: párrafos y testimonios */
.testi-card p{
  font-family:var(--sans);
  font-size:var(--t-body);
  font-weight:var(--w-text);
  font-style:normal;
  line-height:var(--lh-body);
}

/* Subtítulo: Cormorant cursiva, claramente distinto del título (recto) y del cuerpo (sans).
   Entradillas, cita del altar y testimonio destacado. */
.about-lede, .guias-lede, .av-lede, .testi-feature p{
  font-family:var(--serif);
  font-size:var(--t-sub);
  font-weight:var(--w-text);
  font-style:italic;
  line-height:var(--lh-lede);
  letter-spacing:0;
  font-kerning:normal;
}
/* Nueve Santas Muertes: texto largo en cursiva, un paso más chico y con más interlineado para que respire */
.guias-lede{ font-size:var(--t-h3-sm); line-height:1.62; }
.testi-feature p{ max-width:24ch; }
.guias-lede em{ font-style:normal; }        /* dentro de una cursiva, el énfasis es recto */

/* Texto secundario: descripciones, notas y footer */
.serv-desc, .mode-line, .process-item p, .process-hint, .av-note, .g-info, .guias-foot,
.contact-note, .footer-bar, .footer-note, .policy-updated{
  font-family:var(--sans);
  font-size:var(--t-small);
  font-weight:var(--w-text);
  font-style:normal;
  line-height:var(--lh-small);
  letter-spacing:0;
}
.g-info{ line-height:1.4; } /* el pie de foto tiene altura fija */

/* Interfaz: botones, navegación y enlaces de acción */
.nav-links, .nav-cta, .btn-wa, .btn-pill, .btn-ghost, .serv-go, .svc-cta,
.gal-filter button, .cat-name, .back-home, .policy-nav a, .btn-agendar{
  font-family:var(--sans);
  font-size:var(--t-ui);
  font-weight:var(--w-ui);
  font-style:normal;
  line-height:1.3;
  letter-spacing:var(--track-ui);
  text-transform:none;
}
/* Navegación: más ligera y abierta que los botones, para que no compita con las llamadas a la acción */
.nav-links{ font-weight:var(--w-text); letter-spacing:var(--track-nav); }
.btn-agendar{ letter-spacing:var(--track-caps); } /* su texto ya está en mayúsculas */
.gal-filter button sup{ font-size:0.65em; }

/* Menú móvil: secciones con voz de título (serif) y enlaces legales como texto secundario */
.m-menu-main a{
  font-family:var(--serif);
  font-size:clamp(1.7rem, 7.4vw, 2.1rem);
  font-weight:var(--w-title);
  line-height:1.1;
  letter-spacing:var(--track-title);
}
.m-menu-legal a{
  font-family:var(--sans);
  font-size:var(--t-small);
  font-weight:var(--w-text);
  line-height:1.35;
  letter-spacing:var(--track-ui);
}

/* Etiquetas: texto pequeño en mayúsculas */
.hero-subtitle, .hero-cue-label, .mode-city, .g-tag, .panel-count, .testi-card cite, .kicker,
.cat-num, .svc-num, .step-mark, .testi-initials{
  font-family:var(--sans);
  font-size:var(--t-label);
  font-weight:var(--w-ui);
  font-style:normal;
  line-height:1.4;
  letter-spacing:var(--track-caps);
  text-transform:uppercase;
}
/* Subtítulo del H1 de portada: misma etiqueta, a escala del título */
.hero-subtitle{ font-size:clamp(0.9rem, 1.35vw, 1.12rem); letter-spacing:0.44em; }

/* Ajustes responsivos (solo escala, nunca familia ni estilo) */
@media (max-width:760px){
  /* El tracking deja un espacio tras la última letra: se compensa para que el centrado sea óptico */
  .hero-title{ font-size:clamp(2.75rem, 13vw, 4.2rem); line-height:0.98; letter-spacing:0.06em; padding-left:0.06em; }
  .hero-subtitle{ letter-spacing:0.34em; }
  .hero-subtitle::after{ margin-left:-0.34em; }
}
@media (max-width:380px){
  .hero-subtitle{ font-size:0.86rem; letter-spacing:0.26em; }
  .hero-subtitle::before, .hero-subtitle::after{ width:18px; }
  .hero-subtitle::after{ margin-left:-0.26em; }
}
/* Galería: en celdas angostas la descripción se compacta un poco para leerse completa */
@media (max-width:1180px){
  .g-item{ --info-h:4.8rem; }
  .g-info{ font-size:0.8rem; line-height:1.35; }
}
@media (max-width:760px){
  .g-item{ --info-h:6rem; }
  .g-info{ font-size:0.82rem; }
}
/* Celdas bajas: al abrir la descripción, la etiqueta cede su lugar al texto */
@container (max-height:190px){
  .g-item:hover .g-tag, .g-item.is-active .g-tag, .g-item:focus-visible .g-tag{ display:none; }
}
@media (max-width:600px){
  .brand-mark span{ font-size:0.9rem; letter-spacing:0.08em; }
  body:has(> .hero) .nav-main .nav-links{ font-size:var(--t-ui-sm); }
  .btn-agendar{ letter-spacing:0.1em; }
}

/* =====================================================================
   MÓVIL: composición editorial de los textos.
   Los bloques de texto usan todo el ancho útil (la página deja 20 px por lado:
   ~89–91 % de la pantalla). La alineación varía con intención:
   - Centrados (momentos de presentación): Principales servicios, Galería,
     Consulta → Ritual y Videos.
   - Alineados a la izquierda (lectura): Nueve Santas Muertes, Lista de servicios
     y Testimonios.
   ===================================================================== */
@media (max-width:760px){
  /* Encabezados de sección: anchos completos; la alineación la decide cada sección */
  .section-head, .section-head.left{ max-width:none; }
  .section-head p, .section-head.left p{ max-width:none; }
  .section-head.left, .section-head.left p{ text-align:left; margin-left:0; margin-right:0; }
  .section-head:not(.left){ text-align:center; }

  .about h2, .about-lede{ text-align:center; margin-left:auto; margin-right:auto; }

  /* Nueve Santas Muertes: columna de lectura a la izquierda, a todo el ancho */
  .guias-title{ max-width:14ch; }
  .guias-lede, .guias-foot{ max-width:none; }
  .guias-lede{ margin-top:36px; line-height:1.6; }

  /* Principales servicios y Galería: introducción centrada, sin estrechar la línea */
  .serv-head, .gal-head{ align-items:center; text-align:center; }
  .serv-head > div, .gal-head > div{ width:100%; }
  .serv-head p, .gal-head p{ margin-left:auto; margin-right:auto; max-width:none; }
  .gal-filter{ align-self:center; }

  /* Videos: la entradilla ocupa el ancho del bloque */
  .av-copy h2{ max-width:none; }
  .av-lede{ max-width:none; }
  .av-note{ max-width:none; }

  /* Consulta → Ritual: la leyenda se adapta al ancho y conserva su nodo */
  .process .section-head{ margin-bottom:36px; }
}

/* =====================================================================
   MÓVIL: ritmo vertical, menú y footer
   ===================================================================== */
@media (max-width:760px){
  /* Ritmo vertical más compacto: secciones, título → texto y encabezado → contenido */
  :root{ --sp-section:68px; --sp-head:36px; --sp-title-desc:14px; }
  .section-head{ margin-bottom:var(--sp-head); }
  .serv-head{ gap:18px; margin-bottom:32px; }
  .gal-head{ gap:20px; margin-bottom:32px; }

  /* Frase de cierre */
  .footer-cta{ padding:56px 24px; }

  /* Footer: enlaces legales como una rejilla de celdas cómodas de tocar */
  footer.site-footer{ padding:8px 0 104px; text-align:center; }
  .footer-bar{ flex-direction:column; align-items:stretch; gap:22px; }
  .footer-links{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0;
    border-top:1px solid var(--line);
  }
  .footer-links a{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:52px;
    padding:8px 10px;
    border-bottom:1px solid var(--line);
    color:var(--ivory-dim);
    -webkit-tap-highlight-color:transparent;
  }
  .footer-links a:first-child{ grid-column:1 / -1; }
  .footer-links a:nth-child(2n){ border-right:1px solid var(--line); }
  .footer-links a:active{ color:var(--gold-soft); background:rgba(99,23,41,0.25); }
  .footer-bar > span{ opacity:0.85; line-height:1.6; }
  .footer-note{ max-width:40ch; margin-left:auto; margin-right:auto; text-align:center; }
}