/* ════════════════════════════════════════════════════════════
   PAULA CHÁVEZ · Asesora de Seguros — paulachavez.mx
   Sistema de diseño v2 · construido de cero · OrNet.Studios
   Base marfil (color del logo) · tinta navy · acentos oro
   ════════════════════════════════════════════════════════════ */

:root{
  /* Color */
  --marfil:     #F7F0E2;
  --marfil-2:   #F1E7D2;
  --marfil-3:   #EADCBF;
  --blanco:     #FFFCF4;
  --tinta:      #19224A;
  --tinta-2:    #111A39;
  --oro:        #B9912C;
  --oro-claro:  #DCBA5E;
  --oro-prof:   #8A6A14;
  --texto:      #32333C;
  --suave:      #6B6353;
  --linea:      rgba(25,34,74,.14);
  --linea-oro:  rgba(185,145,44,.5);

  /* Tipografía */
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans:  "Albert Sans", system-ui, sans-serif;

  /* Ritmo */
  --ancho: 1200px;
  --margen: clamp(20px, 5vw, 64px);
  --sec: clamp(56px, 8vh, 100px);

  /* Movimiento */
  --curva: cubic-bezier(.19, 1, .22, 1);

  /* Profundidad */
  --s1: 0 1px 2px rgba(25,34,74,.05), 0 4px 14px rgba(25,34,74,.06);
  --s2: 0 2px 6px rgba(25,34,74,.06), 0 18px 44px -16px rgba(25,34,74,.28);
  --s3: 0 4px 10px rgba(25,34,74,.07), 0 36px 80px -24px rgba(25,34,74,.38);
}

/* ── Base ───────────────────────────────────────────────── */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans); color:var(--texto); line-height:1.6;
  background:var(--marfil);
  background-image:radial-gradient(120% 70% at 80% -10%, #FBF6EA 0%, rgba(251,246,234,0) 55%);
  background-repeat:no-repeat;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
::selection{ background:var(--oro); color:#fff; }
:focus-visible{ outline:2px solid var(--oro); outline-offset:3px; border-radius:4px; }
section{ scroll-margin-top:90px; }

.wrap{ width:100%; max-width:var(--ancho); margin-inline:auto; padding-inline:var(--margen); }

h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; color:var(--tinta); line-height:1.06; text-wrap:balance; }
.t-hero{ font-size:clamp(2.7rem, 5.6vw, 4.6rem); letter-spacing:-.01em; }
.t-sec{ font-size:clamp(2rem, 3.6vw, 3rem); }
.t-hero em, .t-sec em{
  font-style:italic;
  background:linear-gradient(170deg, #D9B257, #9A7418);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.lead{ font-size:clamp(1rem, 1.3vw, 1.13rem); color:var(--suave); max-width:54ch; }

/* ── Botones ────────────────────────────────────────────── */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  padding:15px 28px; border-radius:100px; overflow:hidden;
  font-weight:600; font-size:.94rem; letter-spacing:.01em;
  transition:transform .45s var(--curva), box-shadow .45s var(--curva);
  will-change:transform;
}
.btn svg{ width:17px; height:17px; flex:none; transition:transform .45s var(--curva); }
.btn:hover{ transform:translateY(-2px); }
.btn:hover svg{ transform:translateX(4px); }
.btn::after{ /* brillo que recorre */
  content:""; position:absolute; top:0; bottom:0; left:-70%; width:50%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-20deg); transition:left .7s var(--curva);
}
.btn:hover::after{ left:120%; }
.btn-oro{
  background:linear-gradient(135deg, #CDa23A, #A37D1B); color:#fff;
  box-shadow:0 10px 26px -8px rgba(163,125,27,.55);
}
.btn-oro:hover{ box-shadow:0 16px 34px -8px rgba(163,125,27,.65); }
.btn-linea{ color:var(--tinta); box-shadow:inset 0 0 0 1.5px var(--linea-oro); background:rgba(255,252,244,.5); }
.btn-linea:hover{ box-shadow:inset 0 0 0 1.5px var(--oro), var(--s1); }
.btn-luz{ color:#F6EFDC; box-shadow:inset 0 0 0 1.5px rgba(246,239,220,.4); }
.btn-luz:hover{ box-shadow:inset 0 0 0 1.5px var(--oro-claro); color:#fff; }

/* ── Header ─────────────────────────────────────────────── */
.top{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px var(--margen);
  transition:all .5s var(--curva);
  border-bottom:1px solid transparent;
}
.top.compacto{
  background:rgba(247,240,226,.88);
  backdrop-filter:blur(16px) saturate(1.2); -webkit-backdrop-filter:blur(16px) saturate(1.2);
  border-bottom-color:var(--linea); padding-block:10px;
  box-shadow:0 8px 30px -20px rgba(25,34,74,.35);
}
.marca{ display:flex; align-items:center; gap:11px; }
.marca .rombo{
  width:9px; height:9px; flex:none; transform:rotate(45deg);
  background:linear-gradient(135deg, var(--oro-claro), var(--oro-prof));
  box-shadow:0 0 0 3px rgba(185,145,44,.16);
}
.marca-nombre{ font-family:var(--serif); font-weight:600; font-size:1.3rem; color:var(--tinta); line-height:1; }
.marca-rol{ display:block; font-size:.56rem; font-weight:700; letter-spacing:.34em; text-transform:uppercase; color:var(--oro-prof); margin-top:3px; }

.menu{ display:flex; align-items:center; gap:4px; }
.menu-link{ position:relative; padding:9px 14px; font-size:.9rem; font-weight:500; color:var(--texto); }
.menu-link::after{
  content:""; position:absolute; left:14px; right:14px; bottom:4px; height:1.5px;
  background:var(--oro); transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--curva);
}
.menu-link:hover::after, .menu-link.activo::after{ transform:scaleX(1); transform-origin:left; }
.menu-link.activo{ color:var(--tinta); font-weight:600; }
.menu-cta{
  margin-left:10px; padding:11px 21px; border-radius:100px;
  background:var(--tinta); color:#F6EFDC; font-weight:600; font-size:.86rem;
  transition:all .4s var(--curva);
}
.menu-cta:hover{ background:linear-gradient(135deg, #CDa23A, #A37D1B); color:#fff; transform:translateY(-1px); }
/* "Agenda tu cita" modal — choose calendar or WhatsApp */
.cita-modal{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:20px; }
.cita-modal[hidden]{ display:none; }
.cita-bg{ position:absolute; inset:0; background:rgba(18,24,52,.55); backdrop-filter:blur(3px); animation:cita-fade .3s var(--curva); }
.cita-card{ position:relative; width:min(450px,100%); background:linear-gradient(180deg,#fff,#FFFBF3); border-radius:22px; box-shadow:var(--s3); padding:clamp(26px,4vw,38px); overflow:hidden; animation:cita-pop .4s var(--curva); }
.cita-card::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg,var(--oro-claro),var(--oro)); }
.cita-x{ position:absolute; top:12px; right:14px; width:34px; height:34px; border-radius:50%; font-size:1.5rem; line-height:1; color:var(--suave); display:grid; place-items:center; transition:background .3s var(--curva), color .3s; }
.cita-x:hover{ background:var(--marfil-2); color:var(--tinta); }
.cita-card h3{ font-size:clamp(1.4rem,2.6vw,1.8rem); margin-bottom:6px; }
.cita-card > p{ color:var(--suave); font-size:.95rem; margin-bottom:22px; }
.cita-opt{ display:flex; align-items:center; gap:14px; padding:15px 16px; border:1.5px solid var(--linea); border-radius:15px; margin-bottom:12px; background:#fff; transition:border-color .25s var(--curva), background .25s, transform .25s; }
.cita-opt:last-child{ margin-bottom:0; }
.cita-opt:hover{ border-color:var(--oro); background:#FFF8E8; transform:translateY(-2px); }
.cita-opt .ic{ width:46px; height:46px; flex:none; border-radius:13px; display:grid; place-items:center; background:linear-gradient(150deg,var(--tinta),#243367); color:var(--oro-claro); }
.cita-opt.primary .ic{ background:linear-gradient(150deg,var(--oro-claro),var(--oro-prof)); color:#fff; }
.cita-opt.wa .ic{ background:linear-gradient(150deg,#25D366,#1FA855); color:#fff; }
.cita-opt .ic svg{ width:23px; height:23px; }
.cita-opt .tx{ display:flex; flex-direction:column; gap:2px; }
.cita-opt .tx b{ color:var(--tinta); font-size:1.02rem; font-weight:600; }
.cita-opt .tx small{ color:var(--suave); font-size:.83rem; }
.cita-opt .arr{ margin-left:auto; width:18px; height:18px; flex:none; color:var(--oro-prof); transition:transform .25s var(--curva); }
.cita-opt:hover .arr{ transform:translateX(3px); }
@keyframes cita-fade{ from{ opacity:0; } }
@keyframes cita-pop{ from{ opacity:0; transform:translateY(14px) scale(.97); } }

.hamb{ display:none; flex-direction:column; gap:5px; padding:8px; z-index:101; }
.hamb span{ width:24px; height:1.6px; background:var(--tinta); transition:.4s var(--curva); }
.hamb.abierto span:nth-child(1){ transform:translateY(6.6px) rotate(45deg); }
.hamb.abierto span:nth-child(2){ opacity:0; }
.hamb.abierto span:nth-child(3){ transform:translateY(-6.6px) rotate(-45deg); }

/* ── Hero ───────────────────────────────────────────────── */
.hero{
  position:relative; overflow:hidden;
  padding:clamp(124px, 16vh, 170px) 0 clamp(48px, 6vh, 72px);
  background:
    radial-gradient(75% 90% at 82% 0%, rgba(185,145,44,.13), transparent 55%),
    radial-gradient(55% 65% at 0% 100%, rgba(222,200,150,.4), transparent 60%),
    linear-gradient(165deg, #FAF4E8 0%, #F7F0E2 60%, #F2E8D2 100%);
}
.hero::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(185,145,44,.45), transparent); }
#polvo{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.hero .wrap{ position:relative; z-index:1; }
.hero-grid{ display:grid; grid-template-columns:1.04fr .96fr; gap:clamp(28px, 4vw, 60px); align-items:center; }
.hero-firma{
  display:inline-flex; align-items:center; margin-bottom:24px;
}
.hero-firma::before{ content:""; width:9px; height:9px; transform:rotate(45deg);
  background:linear-gradient(135deg, var(--oro-claro), var(--oro-prof)); }
.hero-firma::after{ content:""; width:74px; height:1px; margin-left:13px;
  background:linear-gradient(90deg, var(--oro), transparent); }
.hero h1{ margin-bottom:20px; }
.hero .lead{ margin-bottom:30px; }
.hero .lead strong{ color:var(--tinta); font-weight:600; }
.hero-botones{ display:flex; flex-wrap:wrap; gap:13px; }
.hero-nota{
  margin-top:26px; display:flex; align-items:center; gap:10px;
  font-family:var(--serif); font-style:italic; font-size:1.04rem; color:var(--oro-prof);
}
.hero-nota::before{ content:""; width:7px; height:7px; flex:none; transform:rotate(45deg); background:var(--oro); }

/* Halo del logo */
.halo{ position:relative; display:grid; place-items:center; }
.halo::before{ content:""; position:absolute; width:97%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(220,186,94,.26), transparent 62%); }
.halo::after{ content:""; position:absolute; width:88%; aspect-ratio:1; border-radius:50%;
  border:1px solid rgba(185,145,44,.32); }
.halo .anillo{ position:absolute; width:97%; aspect-ratio:1; border-radius:50%;
  border:1px dashed rgba(185,145,44,.24); animation:girar 90s linear infinite; }
@keyframes girar{ to{ transform:rotate(360deg); } }
.halo .punta{ position:absolute; width:8px; height:8px; transform:rotate(45deg);
  background:linear-gradient(135deg, var(--oro-claro), var(--oro-prof)); }
.halo .punta.a{ top:1%; left:50%; margin-left:-4px; }
.halo .punta.b{ bottom:1%; left:50%; margin-left:-4px; }
.halo img{ position:relative; width:min(430px, 86%); filter:drop-shadow(0 30px 48px rgba(25,34,74,.24)); }

/* Banda de confianza */
.confianza{
  margin-top:clamp(30px, 4vh, 44px);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:14px clamp(18px, 3.6vw, 44px);
  padding:17px clamp(18px, 3.5vw, 38px);
  background:rgba(255,252,244,.66); border:1px solid var(--linea); border-radius:16px;
  backdrop-filter:blur(4px);
}
.conf-item{ display:flex; align-items:center; gap:10px; font-size:.85rem; font-weight:600; color:var(--tinta); }
.conf-item svg{ width:19px; height:19px; flex:none; color:var(--oro); }
.conf-item small{ display:block; font-weight:500; font-size:.7rem; color:var(--suave); }
.conf-sep{ width:1px; height:26px; background:var(--linea); }

/* ── Andamiaje de sección ───────────────────────────────── */
.sec{ padding:var(--sec) 0; position:relative; }
.sec-textura{
  background-image:
    radial-gradient(70% 50% at 88% 0%, rgba(185,145,44,.06), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Crect x='23' y='23' width='2.6' height='2.6' transform='rotate(45 24.3 24.3)' fill='%23B9912C' opacity='.055'/%3E%3C/svg%3E");
}
.enc{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:clamp(20px, 3vw, 42px); align-items:start;
  margin-bottom:clamp(30px, 4vw, 48px);
}
.enc-num{ display:flex; flex-direction:column; align-items:center; gap:8px; padding-top:5px; }
.enc-num .n{
  font-family:var(--serif); font-style:italic; font-size:clamp(2rem, 3.6vw, 3rem); line-height:.8;
  background:linear-gradient(180deg, #CDa23A, #8F6C16);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.enc-num .raya{ width:1px; height:17px; background:linear-gradient(180deg, var(--oro), transparent); }
.enc-num .eje{
  writing-mode:vertical-rl; transform:rotate(180deg); margin-top:3px;
  font-size:.6rem; font-weight:700; letter-spacing:.3em; text-transform:uppercase; color:var(--oro-prof);
  white-space:nowrap;
}
.enc-main{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(20px, 3.5vw, 56px); align-items:end; }
.enc-main .lead{ margin:0 0 6px; }
@media (max-width:860px){ .enc-main{ grid-template-columns:1fr; } }

/* ── Pasos (línea de proceso) ───────────────────────────── */
.pasos{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px, 2.5vw, 30px); }
.pasos::before{ /* hilo dorado que conecta */
  content:""; position:absolute; top:32px; left:12%; right:12%; height:1px;
  background:linear-gradient(90deg, transparent, var(--linea-oro) 18%, var(--linea-oro) 82%, transparent);
}
.paso{ position:relative; text-align:center; padding:0 10px; }
.paso .medalla{
  width:64px; height:64px; margin:0 auto 18px; border-radius:50%;
  display:grid; place-items:center; position:relative;
  background:linear-gradient(160deg, #FFFDF6, #F1E7D0);
  border:1px solid var(--linea-oro); box-shadow:var(--s1);
  font-family:var(--serif); font-style:italic; font-size:1.7rem; color:var(--oro-prof);
  transition:transform .5s var(--curva), box-shadow .5s var(--curva);
}
.paso:hover .medalla{ transform:translateY(-5px) scale(1.04); box-shadow:var(--s2); }
.paso h3{ font-size:1.45rem; margin-bottom:8px; }
.paso p{ font-size:.93rem; color:var(--suave); max-width:30ch; margin-inline:auto; }
@media (max-width:760px){
  .pasos{ grid-template-columns:1fr; gap:26px; }
  .pasos::before{ display:none; }
}

/* ── Selector «¿Qué te preocupa?» ───────────────────────── */
.dos-col{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(26px, 4vw, 56px); align-items:center; }
@media (max-width:880px){ .dos-col{ grid-template-columns:1fr; } }
.tarjeta-sel{
  background:var(--blanco); border:1px solid var(--linea); border-radius:20px;
  padding:clamp(22px, 2.8vw, 32px); box-shadow:var(--s2); position:relative; overflow:hidden;
}
.tarjeta-sel::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, var(--oro-claro), var(--oro)); }
.tarjeta-sel h3{ font-size:1.5rem; }
.tarjeta-sel .sub{ font-size:.86rem; color:var(--suave); margin:4px 0 18px; }
.opciones{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:520px){ .opciones{ grid-template-columns:1fr; } }
.opcion{
  display:flex; align-items:center; gap:11px; text-align:left;
  padding:13px 14px; border-radius:12px;
  border:1px solid var(--linea); background:#fff;
  font-weight:600; font-size:.89rem; color:var(--tinta);
  transition:all .35s var(--curva);
}
.opcion:hover{ transform:translateY(-2px); box-shadow:var(--s1); border-color:var(--linea-oro); }
.opcion.activa{ border-color:var(--oro); background:linear-gradient(150deg, #FFF8E8, #FAEDD0); box-shadow:var(--s1); }
.opcion .ic{
  width:32px; height:32px; flex:none; border-radius:9px; display:grid; place-items:center;
  background:linear-gradient(150deg, var(--tinta), #243367);
}
.opcion .ic svg{ width:16px; height:16px; color:var(--oro-claro); }
.resultado{ display:none; margin-top:18px; padding-top:18px; border-top:1px dashed var(--linea-oro); }
.resultado.ver{ display:block; animation:aparece .5s var(--curva); }
@keyframes aparece{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.resultado .eti{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.64rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--oro-prof);
}
.resultado .eti::before{ content:""; width:6px; height:6px; transform:rotate(45deg); background:var(--oro); }
.resultado h4{ font-size:1.45rem; margin:6px 0 4px; }
.resultado p{ font-size:.9rem; color:var(--suave); margin-bottom:14px; }
.resultado .acciones{ display:flex; flex-wrap:wrap; gap:10px; }
.btn.chico{ padding:11px 20px; font-size:.87rem; }

/* ── Pilares ────────────────────────────────────────────── */
.pilares{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(13px, 1.8vw, 20px); }
@media (max-width:880px){ .pilares{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:460px){ .pilares{ grid-template-columns:1fr; } }
.pilar{
  position:relative; padding:24px 20px 22px; border-radius:16px;
  background:var(--blanco); border:1px solid var(--linea);
  transition:transform .45s var(--curva), box-shadow .45s var(--curva), border-color .45s;
  overflow:hidden;
}
.pilar::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, var(--oro-claro), var(--oro));
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--curva); }
.pilar:hover{ transform:translateY(-5px); box-shadow:var(--s2); border-color:transparent; }
.pilar:hover::before{ transform:scaleX(1); }
.pilar .ic{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center; margin-bottom:13px;
  background:linear-gradient(150deg, var(--tinta), #243367);
}
.pilar .ic svg{ width:21px; height:21px; color:var(--oro-claro); }
.pilar h3{ font-size:1.25rem; margin-bottom:4px; }
.pilar p{ font-size:.85rem; color:var(--suave); }

/* ── CTA navy ───────────────────────────────────────────── */
.cierre{
  position:relative; overflow:hidden; color:#F2EAD7;
  background:
    radial-gradient(60% 90% at 88% 0%, rgba(185,145,44,.22), transparent 60%),
    linear-gradient(155deg, #1D2A56, var(--tinta-2));
}
.cierre .wrap{ position:relative; z-index:1; }
.cierre-grid{ display:grid; grid-template-columns:1.25fr .75fr; gap:38px; align-items:center; }
@media (max-width:820px){ .cierre-grid{ grid-template-columns:1fr; } }
.cierre h2{ color:#F8F1DF; }
.cierre h2 em{
  background:linear-gradient(170deg, #EFCB6B, #C99A2C);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.cierre p{ color:rgba(242,234,215,.74); margin-top:14px; max-width:46ch; }
.cierre-acciones{ display:flex; flex-direction:column; gap:13px; align-items:flex-start; }
@media (max-width:820px){ .cierre-acciones{ flex-direction:row; flex-wrap:wrap; } }

/* ── Footer ─────────────────────────────────────────────── */
.pie{
  position:relative; color:#E9DFC8; padding:clamp(54px, 7vw, 80px) 0 26px;
  background:linear-gradient(170deg, #131C3D, #0E1631);
}
.pie::before{ content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg, transparent, var(--oro), transparent); }
.pie-grid{
  display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:40px;
  padding-bottom:36px; border-bottom:1px solid rgba(233,223,200,.14);
}
@media (max-width:880px){ .pie-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .pie-grid{ grid-template-columns:1fr; } }
.pie-nombre{ font-family:var(--serif); font-size:1.6rem; color:#F5EDD9; }
.pie-rol{ font-size:.58rem; font-weight:700; letter-spacing:.32em; text-transform:uppercase; color:var(--oro-claro); margin:4px 0 16px; }
.pie-desc{ font-size:.9rem; color:rgba(233,223,200,.6); max-width:38ch; }
.pie-frase{
  font-family:var(--serif); font-style:italic; font-size:1rem; color:var(--oro-claro);
  margin-top:16px; padding-left:14px; border-left:2px solid var(--oro);
}
.pie h4{ font-family:var(--sans); font-size:.68rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--oro-claro); margin-bottom:16px; }
.pie-linea{ display:flex; gap:11px; margin-bottom:14px; font-size:.89rem; color:rgba(233,223,200,.82); align-items:flex-start; transition:color .3s; }
a.pie-linea:hover{ color:var(--oro-claro); }
.pie-linea svg{ width:17px; height:17px; flex:none; margin-top:2px; color:var(--oro-claro); }
.pie-linea .et{ display:block; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(233,223,200,.42); }
.pie-abajo{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center;
  padding-top:22px; font-size:.78rem; color:rgba(233,223,200,.5);
}
.pie-ornet{ text-align:center; margin-top:14px; font-size:.73rem; color:rgba(233,223,200,.36); }
.pie-ornet a{ color:var(--oro-claro); }

/* ── Información: presentación ──────────────────────────── */
.perfil{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(28px, 5vw, 62px); align-items:center; }
@media (max-width:860px){ .perfil{ grid-template-columns:1fr; } .perfil-foto{ max-width:330px; margin-inline:auto; } }
.perfil-foto{ position:relative; width:min(340px, 88%); margin-inline:auto; }
.perfil-foto::before{ content:""; position:absolute; inset:-12px; border-radius:24px;
  border:1px solid var(--linea-oro); transform:rotate(-1.6deg); }
.perfil-foto img{
  width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:20px; box-shadow:var(--s3);
  position:relative;
}
.perfil-texto .saludo{
  font-family:var(--serif); font-style:italic; font-size:1.2rem; color:var(--oro-prof); margin-bottom:10px;
}
.perfil-texto p{ font-size:1.02rem; line-height:1.7; margin-bottom:14px; }
.perfil-texto strong{ color:var(--tinta); font-weight:600; }
.perfil-frase{
  font-family:var(--serif); font-style:italic; font-size:1.2rem; color:var(--tinta);
  line-height:1.4; margin-top:18px; padding-left:16px; border-left:2px solid var(--oro);
}

/* ── Razones ────────────────────────────────────────────── */
.razones{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px, 2vw, 22px); }
@media (max-width:820px){ .razones{ grid-template-columns:1fr; } }
.razon{
  padding:26px 22px; border-radius:16px; background:var(--blanco); border:1px solid var(--linea);
  border-top:3px solid var(--oro);
  transition:transform .45s var(--curva), box-shadow .45s var(--curva);
}
.razon:hover{ transform:translateY(-5px); box-shadow:var(--s2); }
.razon .ic{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; margin-bottom:14px;
  background:linear-gradient(150deg, var(--tinta), #243367); }
.razon .ic svg{ width:21px; height:21px; color:var(--oro-claro); }
.razon h3{ font-size:1.3rem; margin-bottom:6px; }
.razon p{ font-size:.9rem; color:var(--suave); }

/* ── Pirámide ───────────────────────────────────────────── */
.pira-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px, 4vw, 54px); align-items:center; }
@media (max-width:840px){ .pira-grid{ grid-template-columns:1fr; } }
.pira{ display:flex; flex-direction:column; align-items:center; gap:9px; }
.nivel{
  width:var(--w); padding:14px 10px; text-align:center; position:relative;
  clip-path:polygon(8% 0, 92% 0, 100% 100%, 0 100%);
  background:linear-gradient(150deg, #25346A, var(--tinta));
  color:#EFE6CF; font-family:var(--serif); font-size:clamp(1rem, 1.6vw, 1.2rem);
  transition:transform .4s var(--curva), filter .4s;
  box-shadow:var(--s1);
}
.nivel span{ display:block; font-family:var(--sans); font-size:.58rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; opacity:.66; margin-top:2px; }
.nivel.n1{ --w:46%; } .nivel.n2{ --w:63%; } .nivel.n3{ --w:81%; } .nivel.n4{ --w:100%; }
.nivel:hover, .nivel.activo{
  background:linear-gradient(150deg, #D8AC3F, #A07717); color:#fff;
  transform:scale(1.045); z-index:2; box-shadow:var(--s2);
}
.pira-panel{ position:relative; min-height:210px; }
.ficha{ position:absolute; inset:0; opacity:0; transform:translateY(10px); pointer-events:none;
  transition:opacity .45s var(--curva), transform .45s var(--curva); }
.ficha.activa{ opacity:1; transform:none; pointer-events:auto; }
.ficha .eti{ display:inline-flex; align-items:center; gap:9px; font-size:.64rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--oro-prof); }
.ficha .eti::before{ content:""; width:6px; height:6px; transform:rotate(45deg); background:var(--oro); }
.ficha h3{ font-size:clamp(1.5rem, 2.4vw, 2rem); margin:8px 0 8px; }
.ficha > p{ color:var(--texto); margin-bottom:14px; max-width:46ch; }
.ficha li{ display:flex; gap:11px; align-items:flex-start; padding:6px 0; color:var(--suave); font-size:.93rem; list-style:none; }
.ficha li::before{ content:""; width:6px; height:6px; margin-top:8px; flex:none; transform:rotate(45deg); background:var(--oro); }
@media (max-width:840px){
  .pira-panel{ min-height:0; }
  .ficha{ position:relative; display:none; opacity:1; transform:none; }
  .ficha.activa{ display:block; }
}

/* ── Productos: recomendador ────────────────────────────── */
.reco{
  position:relative; overflow:hidden; border-radius:20px; color:#EFE6CF;
  padding:clamp(24px, 3.4vw, 40px);
  background:
    radial-gradient(55% 90% at 90% 0%, rgba(185,145,44,.24), transparent 60%),
    linear-gradient(155deg, #1D2A56, var(--tinta-2));
  box-shadow:var(--s2);
}
.reco h2{ color:#F8F1DF; font-size:clamp(1.5rem, 2.5vw, 2rem); margin-bottom:4px; }
.reco p{ color:rgba(239,230,207,.7); font-size:.94rem; margin-bottom:18px; max-width:54ch; }
.necesidades{ display:flex; flex-wrap:wrap; gap:10px; }
.necesidad{
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 17px; border-radius:100px;
  border:1px solid rgba(239,230,207,.28); background:rgba(255,255,255,.05);
  color:#F2EAD7; font-weight:600; font-size:.87rem;
  transition:all .35s var(--curva);
}
.necesidad svg{ width:16px; height:16px; color:var(--oro-claro); }
.necesidad:hover{ border-color:var(--oro-claro); transform:translateY(-2px); background:rgba(185,145,44,.16); }
.necesidad.activa{ background:linear-gradient(135deg, #D8AC3F, #A07717); border-color:transparent; color:#fff; }
.necesidad.activa svg{ color:#fff; }

/* ── Productos: barra y tienda ──────────────────────────── */
.barra{ display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center;
  margin:clamp(26px, 3.5vw, 40px) 0 20px; }
.tabs{ display:flex; gap:5px; padding:5px; border-radius:100px;
  background:var(--marfil-2); border:1px solid var(--linea); }
.tab{ padding:9px 19px; border-radius:100px; font-weight:600; font-size:.86rem; color:var(--suave);
  transition:all .35s var(--curva); }
.tab.activa{ background:var(--tinta); color:var(--marfil); box-shadow:var(--s1); }
.cuenta{ font-size:.82rem; color:var(--suave); }
.cuenta b{ color:var(--tinta); }

.tienda{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(15px, 2vw, 22px); align-items:start; }
@media (max-width:940px){ .tienda{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:580px){ .tienda{ grid-template-columns:1fr; } }
.prod{
  position:relative; display:flex; flex-direction:column;
  background:var(--blanco); border:1px solid var(--linea); border-radius:18px;
  padding:24px 22px;
  transition:transform .45s var(--curva), box-shadow .45s var(--curva), border-color .45s;
}
.prod:hover{ transform:translateY(-5px); box-shadow:var(--s2); border-color:transparent; }
.prod.fuera{ display:none; }
.prod-top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:14px; }
.prod .ic{ width:46px; height:46px; border-radius:13px; display:grid; place-items:center;
  background:linear-gradient(150deg, var(--tinta), #243367); }
.prod .ic svg{ width:22px; height:22px; color:var(--oro-claro); }
.prod .sello{
  font-size:.56rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#fff;
  padding:5px 11px; border-radius:100px;
  background:linear-gradient(135deg, #CDa23A, #A37D1B); box-shadow:var(--s1);
}
.prod .cat{ font-size:.62rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--oro-prof); }
.prod h3{ font-size:1.45rem; margin:3px 0 7px; }
.prod .una{ font-size:.91rem; color:var(--suave); flex:1; }
.prod .tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:13px; }
.prod .tag{
  font-size:.67rem; font-weight:600; color:var(--oro-prof);
  background:rgba(185,145,44,.1); border:1px solid rgba(185,145,44,.26);
  padding:4px 10px; border-radius:100px;
}
.prod-mas{ height:0; overflow:hidden; transition:height .45s var(--curva); }
.prod-mas-in{ padding-top:15px; margin-top:15px; border-top:1px dashed var(--linea-oro); }
.prod-mas .fila{ margin-bottom:10px; }
.prod-mas .k{ display:flex; align-items:center; gap:8px; font-size:.62rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--oro-prof); margin-bottom:3px; }
.prod-mas .k::before{ content:""; width:5px; height:5px; transform:rotate(45deg); background:var(--oro); }
.prod-mas .v{ font-size:.89rem; line-height:1.5; }
.prod-acciones{ display:flex; gap:9px; margin-top:16px; }
.btn-prod{
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:11px 13px; border-radius:10px; font-weight:600; font-size:.85rem;
  border:1px solid var(--linea); background:#fff; color:var(--tinta);
  transition:all .3s var(--curva);
}
.btn-prod:hover{ border-color:var(--tinta); }
.btn-prod.dorado{ background:linear-gradient(135deg, #CDa23A, #A37D1B); color:#fff; border-color:transparent; }
.btn-prod.dorado:hover{ filter:brightness(1.07); }
.btn-prod svg{ width:15px; height:15px; }
.btn-prod .flecha{ transition:transform .4s var(--curva); }
.prod.abierto .btn-prod .flecha{ transform:rotate(180deg); }
.tienda-vacia{ display:none; grid-column:1/-1; text-align:center; padding:38px; color:var(--suave); }
.tienda-vacia.ver{ display:block; }

/* ── Apariciones ────────────────────────────────────────── */
.rev{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--curva), transform .8s var(--curva); }
.rev.ya{ opacity:1; transform:none; }
.rev[data-r="1"]{ transition-delay:.08s; }
.rev[data-r="2"]{ transition-delay:.16s; }
.rev[data-r="3"]{ transition-delay:.24s; }

/* ── Scrollbar y movimiento reducido ────────────────────── */
::-webkit-scrollbar{ width:11px; }
::-webkit-scrollbar-track{ background:var(--marfil-2); }
::-webkit-scrollbar-thumb{ background:linear-gradient(180deg, #C9A23A, #8F6C16); border-radius:8px; border:2px solid var(--marfil-2); }
@media (prefers-reduced-motion: reduce){
  .rev{ opacity:1; transform:none; transition:none; }
  .halo .anillo{ animation:none; }
  *{ scroll-behavior:auto !important; }
}

/* ── Menú móvil ─────────────────────────────────────────── */
@media (max-width:780px){
  .menu{
    position:fixed; inset:0 0 0 auto; width:min(330px, 84%);
    flex-direction:column; align-items:stretch; justify-content:center; gap:4px;
    background:var(--marfil); padding:46px 30px;
    border-left:1px solid var(--linea); box-shadow:-30px 0 80px rgba(25,34,74,.25);
    transform:translateX(100%); transition:transform .5s var(--curva);
  }
  .menu.abierto{ transform:none; }
  .menu-link{ font-size:1.12rem; padding:14px; border-bottom:1px solid var(--linea); }
  .menu-link::after{ display:none; }
  .menu-cta{ margin:14px 0 0; text-align:center; }
  .hamb{ display:flex; }
  .hero-grid{ grid-template-columns:1fr; }
  .halo{ order:-1; width:min(400px, 82%); margin-inline:auto; }
}

/* ════════════════════════════════════════════════════════════
   v2.1 — Pasada editorial (anti-genérico)
   Numerales fantasma · subrayado caligráfico · manifiesto de
   pilares · lista editorial · pasos escalonados · destacados anchos
   ════════════════════════════════════════════════════════════ */

/* Numeral fantasma gigante tras cada sección */
.sec{ overflow:hidden; }
.fantasma{
  position:absolute; top:-10px; right:-20px; z-index:0; pointer-events:none; user-select:none;
  font-family:var(--serif); font-style:italic; font-weight:600; line-height:.7;
  font-size:clamp(11rem, 24vw, 22rem); color:rgba(25,34,74,.045);
}
.cierre .fantasma, .reco .fantasma{ color:rgba(246,239,220,.05); }
.sec > .wrap{ position:relative; z-index:1; }

/* Subrayado caligráfico bajo la palabra clave del hero */
.subraya{ position:relative; display:inline-block; }
.subraya svg{
  position:absolute; left:-2%; right:-2%; bottom:-.12em; width:104%; height:.34em;
  color:var(--oro); overflow:visible;
}
.subraya svg path{
  fill:none; stroke:currentColor; stroke-width:3.5; stroke-linecap:round;
  stroke-dasharray:520; stroke-dashoffset:520;
}
.rev.ya .subraya svg path{ animation:trazo 1.1s .55s var(--curva) forwards; }
@keyframes trazo{ to{ stroke-dashoffset:0; } }
@media (prefers-reduced-motion: reduce){ .subraya svg path{ stroke-dashoffset:0; animation:none; } }

/* Banda de confianza que se monta sobre la siguiente sección */
.confianza.flota{
  position:relative; z-index:5; margin-bottom:calc(-1 * clamp(34px, 4.5vw, 52px));
  background:rgba(255,252,244,.94); box-shadow:var(--s2);
}
.hero.con-flote{ overflow:visible; padding-bottom:0; }
.hero.con-flote::after{ display:none; }
.sec.tras-flote{ padding-top:calc(var(--sec) + clamp(34px, 4.5vw, 52px)); }

/* Pilares como manifiesto (sin tarjetas) */
.manifiesto{ text-align:center; padding:clamp(8px,1vw,14px) 0; }
.mani-fila{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline;
  gap:clamp(14px, 3.5vw, 38px); row-gap:26px;
}
.mani-item{ position:relative; text-align:center; }
.mani-item .palabra{
  font-family:var(--serif); font-weight:600; font-style:italic;
  font-size:clamp(1.9rem, 4.6vw, 3.6rem); line-height:1; color:var(--tinta);
  transition:color .4s var(--curva);
}
.mani-item:hover .palabra{
  background:linear-gradient(170deg, #D9B257, #9A7418);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.mani-item .mini{
  display:block; margin-top:8px; font-size:.7rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--suave);
}
.mani-sep{ width:8px; height:8px; transform:rotate(45deg); align-self:center;
  background:linear-gradient(135deg, var(--oro-claro), var(--oro-prof)); }
@media (max-width:640px){ .mani-sep{ display:none; } .mani-fila{ gap:20px; } }

/* Razones como lista editorial (sin tarjetas) */
.lista-ed{ border-top:1px solid var(--linea); }
.led{
  display:grid; grid-template-columns:90px 1fr auto; gap:clamp(16px, 3vw, 44px);
  align-items:baseline; padding:clamp(22px, 3vw, 32px) 0;
  border-bottom:1px solid var(--linea); position:relative;
  transition:padding-left .5s var(--curva);
}
.led::before{
  content:""; position:absolute; left:-2px; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg, var(--oro-claro), var(--oro));
  transform:scaleY(0); transform-origin:top; transition:transform .5s var(--curva);
}
.led:hover{ padding-left:22px; }
.led:hover::before{ transform:scaleY(1); }
.led .ln{ font-family:var(--serif); font-style:italic; font-size:1.9rem; color:var(--oro);
  line-height:1; }
.led h3{ font-size:clamp(1.35rem, 2.4vw, 1.8rem); margin-bottom:5px; }
.led p{ color:var(--suave); font-size:.95rem; max-width:56ch; }
.led .glifo{ width:40px; height:40px; color:var(--oro); opacity:.75; align-self:center; }
.led .glifo svg{ width:100%; height:100%; }
@media (max-width:640px){ .led{ grid-template-columns:54px 1fr; } .led .glifo{ display:none; } }

/* Pasos escalonados en diagonal */
@media (min-width:761px){
  .pasos .paso:nth-child(2){ transform:translateY(26px); }
  .pasos .paso:nth-child(3){ transform:translateY(52px); }
  .pasos{ padding-bottom:52px; }
  .pasos::before{ transform:rotate(2.6deg); top:38px; }
  .pasos .paso:nth-child(2):hover .medalla,
  .pasos .paso:nth-child(3):hover .medalla{ transform:translateY(-5px) scale(1.04); }
}

/* Productos destacados: tarjeta ancha horizontal */
@media (min-width:581px){
  .prod.ancho{ grid-column:span 2; }
  .prod.ancho{
    background:
      radial-gradient(80% 120% at 100% 0%, rgba(220,186,94,.14), transparent 55%),
      var(--blanco);
    border-color:var(--linea-oro);
  }
}
.prod.ancho .sello{ box-shadow:0 6px 16px -4px rgba(163,125,27,.5); }

/* Saludo de Información con inicial elegante */
.perfil-texto p.entrada::first-letter{
  font-family:var(--serif); font-weight:600; float:left;
  font-size:3.6rem; line-height:.8; padding:6px 10px 0 0; color:var(--oro-prof);
}

/* Comilla gigante tras la foto */
.perfil-foto .comilla{
  position:absolute; top:-34px; right:-18px; z-index:2; pointer-events:none;
  font-family:var(--serif); font-size:6rem; line-height:1; color:var(--oro);
  opacity:.35; font-style:italic;
}

/* ════════════════════════════════════════════════════════════
   v2.2 — ajustes Inicio (pedido del cliente)
   logo sin círculo · timeline recta · pilares en una sola fila
   ════════════════════════════════════════════════════════════ */

/* Logo del hero: sin círculo, solo un halo suave de luz */
.halo::after{ display:none; }
.halo .anillo, .halo .punta{ display:none; }
.halo::before{
  width:116%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(220,186,94,.20), transparent 65%);
}
.halo img{ width:min(450px, 92%); }

/* Timeline: recta y alineada (anula la diagonal anterior) */
@media (min-width:761px){
  .pasos{ padding-bottom:0; align-items:start; }
  .pasos .paso{ transform:none !important; }
  .pasos::before{
    transform:none; top:32px; left:16.6%; right:16.6%;
    background:linear-gradient(90deg, var(--linea-oro), var(--linea-oro));
    opacity:.7;
  }
}
.paso .medalla{ background:linear-gradient(160deg, #FFFDF6, #F1E7D0); z-index:1; }

/* Pilares: UNA fila horizontal, palabras más pequeñas, divisores finos */
.manifiesto{ text-align:center; }
.mani-fila{ display:grid; grid-template-columns:repeat(4, 1fr); align-items:center; gap:0; }
.mani-item{ text-align:center; padding:6px clamp(10px, 1.6vw, 24px); position:relative; }
.mani-item + .mani-item::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:56px; background:var(--linea);
}
.mani-item .palabra{ font-size:clamp(1.3rem, 2.25vw, 2.2rem); white-space:nowrap; }
.mani-item .mini{ font-size:.6rem; letter-spacing:.13em; margin-top:7px; }
.mani-sep{ display:none; }
@media (max-width:760px){
  .mani-fila{ grid-template-columns:repeat(2, 1fr); row-gap:30px; }
  .mani-item:nth-child(odd)::before{ display:none; }
  .mani-item .palabra{ font-size:clamp(1.5rem, 5vw, 2rem); }
}
@media (max-width:430px){
  .mani-fila{ grid-template-columns:1fr; row-gap:22px; }
  .mani-item + .mani-item::before{ display:none; }
}

/* ════════════════════════════════════════════════════════════
   v2.3 — Hero con FOTO de fondo + efecto NIEBLA (idea del cliente)
   marfil opaco a la izquierda (texto legible) → revela la sala a la derecha
   ════════════════════════════════════════════════════════════ */
.hero.con-foto{
  background:var(--marfil);
  min-height:90vh;
  padding:clamp(150px, 20vh, 210px) 0 clamp(64px, 8vh, 100px);
  display:flex; flex-direction:column; justify-content:center;
}
.hero.con-foto::after{ display:none; }
.hero-foto{ position:absolute; inset:0; z-index:0; }
.hero-foto img{ width:100%; height:100%; object-fit:cover; object-position:62% center; }
.hero-niebla{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(247,240,226,.80) 0%, rgba(247,240,226,0) 20%, rgba(247,240,226,0) 56%, rgba(247,240,226,.95) 100%),
    linear-gradient(105deg, rgba(247,240,226,.99) 0%, rgba(247,240,226,.97) 50%, rgba(247,240,226,.60) 72%, rgba(247,240,226,.16) 100%);
}
.hero.con-foto #polvo{ z-index:2; opacity:.65; }
.hero.con-foto .wrap{ position:relative; z-index:3; width:100%; }
.hero-texto{ max-width:620px; }
.hero.con-foto .confianza.flota{ margin-top:clamp(40px, 7vh, 72px); }

@media (max-width:760px){
  .hero.con-foto{ min-height:auto; }
  .hero-foto img{ object-position:70% center; }
  .hero-niebla{
    background:
      linear-gradient(to bottom, rgba(247,240,226,.88) 0%, rgba(247,240,226,.45) 42%, rgba(247,240,226,.93) 100%),
      linear-gradient(118deg, rgba(247,240,226,.98) 0%, rgba(247,240,226,.92) 54%, rgba(247,240,226,.58) 100%);
  }
  .hero-texto{ max-width:none; }
}

/* ════════════════════════════════════════════════════════════
   v2.4 — Logo sobre la foto · hero más alto · timeline derecha
   (pedido del cliente: 17 jun)
   ════════════════════════════════════════════════════════════ */

/* La foto baja un poco más */
.hero.con-foto{ min-height:100vh; padding-bottom:clamp(90px, 11vh, 140px); }

/* Logo de Paula sobre la foto, tratamiento ORIGINAL (halo de luz, sin círculo).
   Va en la 2ª columna del hero → queda centrado entre el fin del texto y la orilla
   del contenido (no pegado a la orilla de la pantalla en monitores anchos). */
.hero-fila{
  display:grid; grid-template-columns:minmax(0,620px) minmax(0,1fr);
  align-items:center; gap:clamp(24px, 3vw, 56px);
}
.hero-logo{ display:flex; align-items:center; justify-content:center; pointer-events:none; }
.hero-logo .halo{ width:min(360px, 90%); }
@media (max-width:880px){
  .hero-fila{ grid-template-columns:1fr; }
  .hero-logo{ display:none; }
}

/* Timeline: números rectos (sin itálica) y bien centrados */
.paso .medalla{
  font-style:normal; font-weight:600;
  font-variant-numeric:lining-nums; line-height:1; padding-bottom:2px;
}

/* ════════════════════════════════════════════════════════════
   v2.5 — Escala más grande (cliente: "todo se ve muy pequeño")
   hero más amplio, tipografía mayor y logo más grande
   ════════════════════════════════════════════════════════════ */

/* Contenedor del hero un poco más ancho para aprovechar monitores grandes */
.hero .wrap{ max-width:1340px; }

/* Tipografía general más grande (afecta todas las páginas) */
.t-hero{ font-size:clamp(2.9rem, 5.6vw, 5rem); }
.lead{ font-size:clamp(1.05rem, 1.5vw, 1.3rem); }
.t-sec{ font-size:clamp(2.2rem, 4vw, 3.4rem); }

/* Hero más prominente */
.hero-nota{ font-size:clamp(1.05rem, 1.4vw, 1.26rem); }
.hero .btn{ padding:17px 34px; font-size:1.04rem; }
.hero .btn svg{ width:19px; height:19px; }

/* Banda de confianza más legible */
.confianza{ padding:20px clamp(20px, 3.5vw, 42px); }
.conf-item{ font-size:.96rem; }
.conf-item small{ font-size:.78rem; }
.conf-item svg{ width:22px; height:22px; }

/* Columna de texto más ancha para que el título llene A LO ANCHO (no se apile) */
.hero-fila{ grid-template-columns:minmax(0,700px) minmax(0,1fr); }
.hero-logo{ overflow:visible; }
.hero-logo .halo{ width:clamp(390px, 30vw, 460px); }
/* El título debe llenar la línea (2 líneas), NO repartirse en 3 con balance */
.hero h1{ text-wrap:wrap; }

/* ════════════════════════════════════════════════════════════
   v2.6 — menos espacio vacío arriba + un pelín más grande (cliente)
   ════════════════════════════════════════════════════════════ */
/* Sube el contenido (menos padding superior) y baja un poco la altura total
   → se reduce el hueco de arriba sin perder foto hacia abajo */
.hero.con-foto{ min-height:92vh; padding-top:clamp(92px, 11.5vh, 128px); }
/* Logo un pelín más grande (el título se queda en 5rem para no romperse a 3 líneas) */
.hero-logo .halo{ width:clamp(405px, 31vw, 485px); }

/* ════════════════════════════════════════════════════════════
   v2.7 — Mejoras Inicio: parallax hero · WhatsApp flotante · selector
   ════════════════════════════════════════════════════════════ */

/* (a) Parallax sutil: la foto del hero se desplaza más lento que el texto.
   Se le da altura extra para que el movimiento no descubra los bordes. */
.hero-foto{ overflow:hidden; }
.hero-foto img{ position:absolute; left:0; top:-14%; height:128%; will-change:transform; }
@media (prefers-reduced-motion: reduce){
  .hero-foto img{ position:absolute; top:0; height:100%; transform:none !important; }
}

/* (b) Botón flotante de WhatsApp (todas las páginas) */
.wa-flota{
  position:fixed; right:clamp(16px,2.5vw,28px); bottom:clamp(16px,2.5vw,28px); z-index:90;
  display:flex; align-items:center; height:58px; padding:0 14px;
  border-radius:100px; background:#25D366; color:#fff;
  box-shadow:0 12px 30px -8px rgba(37,211,102,.55), 0 4px 12px rgba(0,0,0,.16);
  transition:transform .4s var(--curva), box-shadow .4s var(--curva);
  animation:wa-entra .6s var(--curva) .9s both;
}
.wa-flota svg{ width:30px; height:30px; flex:none; }
.wa-flota .wa-txt{
  max-width:0; overflow:hidden; white-space:nowrap; opacity:0; margin-left:0;
  font-weight:600; font-size:.95rem; letter-spacing:.01em;
  transition:max-width .5s var(--curva), opacity .35s var(--curva), margin .5s var(--curva);
}
.wa-flota:hover, .wa-flota:focus-visible{ transform:translateY(-3px); box-shadow:0 18px 40px -8px rgba(37,211,102,.7), 0 6px 16px rgba(0,0,0,.2); }
.wa-flota:hover .wa-txt, .wa-flota:focus-visible .wa-txt{ max-width:240px; opacity:1; margin-left:11px; padding-right:6px; }
.wa-flota::after{ content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1;
  animation:wa-pulso 2.8s ease-out infinite; }
@keyframes wa-pulso{ 0%{ box-shadow:0 0 0 0 rgba(37,211,102,.45);} 70%{ box-shadow:0 0 0 18px rgba(37,211,102,0);} 100%{ box-shadow:0 0 0 0 rgba(37,211,102,0);} }
@keyframes wa-entra{ from{ opacity:0; transform:translateY(22px) scale(.8);} to{ opacity:1; transform:none;} }
@media (max-width:600px){
  .wa-flota{ height:54px; padding:0 12px; }
  .wa-flota:hover .wa-txt, .wa-flota:focus-visible .wa-txt{ max-width:0; opacity:0; margin-left:0; }
}
@media (prefers-reduced-motion: reduce){ .wa-flota{ animation:none; } .wa-flota::after{ animation:none; } }

/* (c) Selector «¿Qué te preocupa?» con más jerarquía y mejores transiciones */
.dos-col.selector{ grid-template-columns:.95fr 1.15fr; }
.tarjeta-sel{ border-radius:24px; box-shadow:var(--s3); }
.tarjeta-sel::before{ height:4px; }
.tarjeta-sel h3{ font-size:1.75rem; }
.tarjeta-sel .sub{ font-size:.94rem; margin:5px 0 22px; }
.opciones{ gap:12px; }
.opcion{
  padding:16px; border-radius:14px; gap:13px; font-size:.97rem; border-width:1.5px;
  transition:transform .35s var(--curva), box-shadow .35s var(--curva), border-color .35s, background .35s;
}
.opcion .ic{ width:42px; height:42px; border-radius:11px; transition:transform .4s var(--curva), background .4s var(--curva); }
.opcion .ic svg{ width:20px; height:20px; transition:color .4s var(--curva); }
.opcion:hover{ transform:translateY(-3px); box-shadow:var(--s2); border-color:var(--linea-oro); }
.opcion:hover .ic{ transform:scale(1.08) rotate(-3deg); }
.opcion.activa{ border-color:var(--oro); background:linear-gradient(150deg,#FFF8E8,#F8E9C8); box-shadow:0 10px 24px -10px rgba(185,145,44,.55); }
.opcion.activa .ic{ background:linear-gradient(150deg,var(--oro-claro),var(--oro-prof)); }
.opcion.activa .ic svg{ color:#fff; }
.resultado{ margin-top:22px; padding-top:22px; }
.resultado h4{ font-size:1.6rem; }
.resultado p{ font-size:.96rem; }

/* ════════════════════════════════════════════════════════════
   v2.8 — Livelier «three steps» timeline (client: "looks dull")
   Layout: navy medallion on top (anchored to the connector line) +
   a separate card below that lifts on hover. Decoupling the card from
   the medallion+line prevents the line from cutting through the card.
   ════════════════════════════════════════════════════════════ */
.pasos{ padding-top:6px; align-items:start; }

/* Step = medallion (in flow, on top) + card (below) */
.pasos .paso{
  position:relative; text-align:center; padding:0;
  background:none; border:none; box-shadow:none; z-index:1;
}

/* Navy medallion with gold icon + number chip, centered in normal flow */
.pasos .paso .medalla{
  position:relative; top:auto; left:auto; margin:0 auto;
  width:74px; height:74px; border:none; border-radius:50%; z-index:2;
  background:linear-gradient(155deg, #2A3B6E, var(--tinta-2));
  box-shadow:0 12px 26px -10px rgba(25,34,74,.55), 0 4px 16px -6px rgba(185,145,44,.3), inset 0 1px 0 rgba(255,255,255,.12);
}
.pasos .paso .medalla .ico{ width:31px; height:31px; color:var(--oro-claro); }
.pasos .paso .medalla::after{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:1.5px solid var(--linea-oro); transition:border-color .5s var(--curva), transform .5s var(--curva);
}
.pasos .paso:hover .medalla::after{ border-color:var(--oro); transform:scale(1.05); }
/* The medallion stays anchored to the line on hover (overrides the old base lift) */
.pasos .paso:hover .medalla{ transform:none; }

/* Card below the medallion — only this lifts on hover */
.step-card{
  margin-top:22px;
  background:linear-gradient(180deg, #FFFFFF, #FFFBF3);
  border:1px solid var(--linea); border-radius:18px;
  padding:22px 22px 26px; box-shadow:var(--s1);
  transition:transform .45s var(--curva), box-shadow .45s var(--curva), border-color .45s var(--curva);
}
/* Step number, sitting cleanly above the title (no longer overlapping the circle) */
.step-card .step-no{
  display:block; font-family:var(--serif); font-style:italic; font-weight:600;
  font-size:1.15rem; line-height:1; letter-spacing:.02em; margin-bottom:6px;
  background:linear-gradient(180deg, var(--oro-claro), var(--oro-prof));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
@media (min-width:761px){
  .pasos .paso:hover .step-card{ transform:translateY(-6px); box-shadow:var(--s2); border-color:var(--linea-oro); }
}

/* Connector: faint rail + gold fill that draws in, at the medallion center,
   sitting ABOVE the cards so it never overlaps them */
@media (min-width:761px){
  .pasos::before{
    content:""; top:43px; left:16.6%; right:16.6%; height:2px; transform:none; opacity:1;
    background:rgba(185,145,44,.22); z-index:0;
  }
  .pasos::after{
    content:""; position:absolute; top:43px; left:16.6%; right:16.6%; height:2px; z-index:0;
    background:linear-gradient(90deg, var(--oro), var(--oro-claro) 50%, var(--oro));
    box-shadow:0 1px 8px rgba(185,145,44,.45);
    transform:scaleX(0); transform-origin:left; transition:transform 1.2s var(--curva);
  }
  .pasos.dibuja::after{ transform:scaleX(1); }
}

/* Sequential pop of the medallions on reveal */
.paso.ya .medalla{ animation:pop-med .6s var(--curva); }
.paso.rev[data-r="1"].ya .medalla{ animation-delay:.12s; }
.paso.rev[data-r="2"].ya .medalla{ animation-delay:.24s; }
@keyframes pop-med{ 0%{ transform:scale(.4); opacity:0; } 60%{ transform:scale(1.12); } 100%{ transform:scale(1); opacity:1; } }

@media (prefers-reduced-motion: reduce){
  .pasos::after{ transition:none; transform:scaleX(1); }
  .paso.ya .medalla{ animation:none; }
}

/* ════════════════════════════════════════════════════════════
   v2.9 — Section heading: big title, with the subtitle STACKED below it
   as a smaller subheading (the old side-by-side column cramped long
   titles). Also tighter spacing between heading and section content.
   ════════════════════════════════════════════════════════════ */
.t-sec{ font-size:clamp(2.4rem, 4.5vw, 3.9rem); }
.enc{ margin-bottom:clamp(12px, 1.5vw, 20px); }
.enc-main{ display:block; }
/* Pull the timeline closer to its heading. The tall vertical section label
   (e.g. "PROCESO") overhangs below the heading text and would otherwise push
   the timeline down; the label sits on the far left, clear of the medallions,
   so a negative top margin on desktop closes the gap without any overlap. */
.pasos{ padding-top:2px; }
@media (min-width:861px){ .pasos{ margin-top:-34px; } }
.enc-main .lead{
  font-size:clamp(1.05rem, 1.35vw, 1.25rem); line-height:1.45;
  color:var(--texto); max-width:62ch; margin:10px 0 0;
}

/* ════════════════════════════════════════════════════════════
   v3.0 — Testimonials section (real client quotes provided by Paula)
   ════════════════════════════════════════════════════════════ */
/* Flex-wrap centered so any orphan row (e.g. 3 + 2 with 5 cards) stays centered,
   with all cards the SAME width (fixed 1/3 basis, no grow) */
.testis{ --g:clamp(12px, 1.3vw, 18px); display:flex; flex-wrap:wrap; justify-content:center; gap:var(--g); }
.testi{ flex:0 0 calc((100% - 4*var(--g)) / 5); }   /* 5 en una fila */
.testi[hidden]{ display:none; }
.testi-mas{ display:block; margin:clamp(20px,3vh,32px) auto 0; font-weight:600; font-size:.92rem; color:var(--oro-prof); text-decoration:underline; text-underline-offset:4px; }
.testi-mas:hover{ color:var(--tinta); }
@media (max-width:1000px){ .testi{ flex-basis:calc((100% - 2*var(--g)) / 3); } }
@media (max-width:680px){ .testi{ flex-basis:calc((100% - var(--g)) / 2); } }
@media (max-width:460px){ .testi{ flex-basis:100%; } }
.testi{
  position:relative; margin:0; padding:20px 18px 18px;
  background:linear-gradient(180deg, #FFFFFF, #FFFBF3);
  border:1px solid var(--linea); border-radius:16px; box-shadow:var(--s1);
  display:flex; flex-direction:column; gap:10px;
  transition:transform .45s var(--curva), box-shadow .45s var(--curva), border-color .45s var(--curva);
}
.testi:hover{ transform:translateY(-5px); box-shadow:var(--s2); border-color:var(--linea-oro); }
.testi-stars{ font-size:.86rem; letter-spacing:3px; color:var(--oro); line-height:1; }
.testi blockquote{ margin:0; flex:1; font-size:.9rem; line-height:1.55; color:var(--texto); }
.testi figcaption{
  display:flex; align-items:center; gap:11px;
  padding-top:13px; border-top:1px solid var(--linea);
}
.testi-av{
  width:38px; height:38px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(150deg, #2A3B6E, var(--tinta-2)); color:var(--oro-claro);
  font-family:var(--serif); font-weight:600; font-size:1.2rem; line-height:1;
  box-shadow:inset 0 1px 0 rgba(220,186,94,.25);
}
.testi-id{ display:flex; flex-direction:column; gap:2px; }
.testi-n{ font-family:var(--serif); font-size:1.08rem; font-weight:600; color:var(--tinta); line-height:1; }
.testi-r{ font-size:.58rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--oro-prof); }

/* ════════════════════════════════════════════════════════════
   v3.1 — "Why trust" accordion (Información): only titles show; the
   extended reason is revealed on click. Icons + clearer hierarchy.
   ════════════════════════════════════════════════════════════ */
.reasons{ display:flex; flex-direction:column; gap:14px; max-width:880px; }
.reason{
  background:linear-gradient(180deg, #FFFFFF, #FFFBF3);
  border:1px solid var(--linea); border-radius:16px; overflow:hidden;
  transition:border-color .4s var(--curva), box-shadow .4s var(--curva);
}
.reason.open{ border-color:var(--linea-oro); box-shadow:var(--s1); }
.reason-head{
  width:100%; display:flex; align-items:center; gap:16px;
  padding:18px 22px; text-align:left; cursor:pointer; background:none;
}
.reason-ico{
  width:46px; height:46px; flex:none; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(150deg, var(--tinta), #243367);
  transition:background .4s var(--curva), transform .4s var(--curva);
}
.reason-ico svg{ width:23px; height:23px; color:var(--oro-claro); transition:color .4s var(--curva); }
.reason.open .reason-ico{ background:linear-gradient(150deg, var(--oro-claro), var(--oro-prof)); }
.reason.open .reason-ico svg{ color:#fff; }
.reason:hover .reason-ico{ transform:scale(1.06) rotate(-3deg); }
.reason-title{
  flex:1; font-family:var(--serif); font-weight:600; color:var(--tinta);
  font-size:clamp(1.25rem, 2vw, 1.55rem); line-height:1.1;
}
.reason-plus{ position:relative; width:22px; height:22px; flex:none; }
.reason-plus::before, .reason-plus::after{
  content:""; position:absolute; left:50%; top:50%; border-radius:2px;
  background:var(--oro-prof); transition:transform .4s var(--curva);
}
.reason-plus::before{ width:15px; height:2px; transform:translate(-50%,-50%); }
.reason-plus::after{ width:2px; height:15px; transform:translate(-50%,-50%); }
.reason.open .reason-plus::after{ transform:translate(-50%,-50%) scaleY(0); }
.reason-body{ height:0; overflow:hidden; transition:height .45s var(--curva); }
.reason-body-in{ padding:0 24px 22px 84px; }
.reason-body-in p{ margin:0; color:var(--suave); font-size:1.02rem; line-height:1.65; max-width:64ch; }
@media (max-width:560px){
  .reason-head{ gap:13px; padding:16px; }
  .reason-body-in{ padding:0 18px 20px 18px; }
}

/* ════════════════════════════════════════════════════════════
   v3.2 — Prettier accordion + super-polished pyramid (Información)
   ════════════════════════════════════════════════════════════ */

/* Accordion: warmer card, gold left-accent, circular +/- toggle */
.reason{
  background:linear-gradient(180deg, #FFFFFF, #FAF3E3);
  box-shadow:0 1px 2px rgba(25,34,74,.04), 0 14px 28px -22px rgba(25,34,74,.45);
}
.reason:hover{ transform:translateY(-2px); border-color:var(--linea-oro); box-shadow:0 12px 26px -16px rgba(25,34,74,.4); }
.reason.open{ border-color:var(--oro); box-shadow:0 16px 36px -16px rgba(185,145,44,.42); }
.reason-head{ position:relative; padding:19px 20px 19px 22px; }
.reason-head::before{
  content:""; position:absolute; left:0; top:50%; width:3.5px; height:0;
  transform:translateY(-50%); border-radius:0 4px 4px 0;
  background:linear-gradient(var(--oro-claro), var(--oro-prof));
  transition:height .4s var(--curva);
}
.reason:hover .reason-head::before{ height:40%; }
.reason.open .reason-head::before{ height:64%; }
.reason-plus{
  width:34px; height:34px; border-radius:50%; background:var(--marfil-2);
  display:grid; place-items:center; transition:background .4s var(--curva), transform .45s var(--curva);
}
.reason:hover .reason-plus{ transform:rotate(90deg); }
.reason.open .reason-plus{ transform:none; background:linear-gradient(150deg, var(--oro-claro), var(--oro-prof)); }
.reason-plus::before, .reason-plus::after{ background:var(--oro-prof); }
.reason.open .reason-plus::before, .reason.open .reason-plus::after{ background:#fff; }

/* Pyramid: real depth (drop-shadow follows the trapezoid, box-shadow was
   being clipped by clip-path → looked flat), top gold highlight, vivid gold
   active state with glow */
.nivel{
  padding:15px 10px;
  background:linear-gradient(160deg, #31427C 0%, #1B244A 62%, #121A38 100%);
  color:#F3E9CF; box-shadow:inset 0 1px 0 rgba(220,186,94,.28);
  filter:drop-shadow(0 7px 12px rgba(25,34,74,.42));
  transition:transform .45s var(--curva), filter .45s var(--curva), background .4s var(--curva);
}
.nivel span{ opacity:.9; color:var(--oro-claro); }
.nivel:hover, .nivel.activo{
  background:linear-gradient(160deg, #EDC25A, #9C7212); color:#241803;
  transform:scale(1.06); z-index:2;
  filter:drop-shadow(0 13px 20px rgba(185,145,44,.55));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45);
}
.nivel:hover span, .nivel.activo span{ opacity:.95; color:#3A2A06; }

/* ════════════════════════════════════════════════════════════
   v3.3 — Big pull-quote band + gold rombo ornament dividers
   ════════════════════════════════════════════════════════════ */
/* tight: small own padding + negative margins that overlap the neighbours' section padding */
.cita-band{ text-align:center; padding-block:clamp(12px, 2.2vh, 28px); margin-block:clamp(-66px, -6.4vh, -40px); }
.cita-marca{
  font-family:var(--serif); font-weight:600; color:var(--oro-claro);
  font-size:clamp(4rem, 9vw, 7rem); line-height:.5; height:.46em;
}
.cita-grande{
  max-width:24ch; margin:18px auto 0;
  font-family:var(--serif); font-style:italic; font-weight:600;
  font-size:clamp(1.9rem, 4.2vw, 3.4rem); line-height:1.16; color:var(--tinta);
}
.cita-grande em{
  font-style:italic;
  background:linear-gradient(170deg, #D9B257, #9A7418);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.cita-firma{
  display:block; margin-top:24px; font-style:normal;
  font-size:.8rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--oro-prof);
}

/* Gold rombo ornament: line — diamond — line */
.orna{ display:flex; align-items:center; justify-content:center; gap:14px; margin:0 auto clamp(20px, 3.4vh, 40px); }
.orna::before, .orna::after{ content:""; width:clamp(44px, 9vw, 96px); height:1px; }
.orna::before{ background:linear-gradient(90deg, transparent, var(--linea-oro)); }
.orna::after{ background:linear-gradient(90deg, var(--linea-oro), transparent); }
.orna i{ width:8px; height:8px; flex:none; transform:rotate(45deg);
  background:linear-gradient(135deg, var(--oro-claro), var(--oro-prof)); }

/* ════════════════════════════════════════════════════════════
   v3.4 — Mini-test "¿Qué tan protegido estás?" + FAQ accordion (no icon)
   ════════════════════════════════════════════════════════════ */

/* FAQ reuses .reason accordion but with no leading icon → align body text left */
.reasons.faq .reason-body-in{ padding-left:24px; }
@media (max-width:560px){ .reasons.faq .reason-body-in{ padding-left:18px; } }

/* Mini-test card */
.quiz{
  max-width:780px;
  background:linear-gradient(180deg, #FFFFFF, #FFFBF3);
  border:1px solid var(--linea); border-radius:20px; box-shadow:var(--s2);
  padding:clamp(20px, 3vw, 34px); position:relative; overflow:hidden;
}
.quiz::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, var(--oro-claro), var(--oro)); }
.quiz-qs{ list-style:none; display:flex; flex-direction:column; gap:4px; }
.quiz-q{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:14px 0; border-bottom:1px solid var(--linea);
}
.quiz-q:last-child{ border-bottom:none; }
.quiz-txt{ font-size:1.02rem; font-weight:500; color:var(--tinta); }
.quiz-opts{ display:flex; gap:8px; flex:none; }
.quiz-op{
  min-width:56px; padding:8px 16px; border-radius:100px;
  border:1.5px solid var(--linea); background:#fff;
  font-weight:600; font-size:.9rem; color:var(--tinta);
  transition:transform .3s var(--curva), border-color .3s, background .3s, color .3s;
}
.quiz-op:hover{ border-color:var(--linea-oro); transform:translateY(-1px); }
.quiz-op.sel{ background:linear-gradient(150deg, var(--tinta), #243367); color:#fff; border-color:transparent; }
.quiz-result{ display:none; margin-top:20px; padding-top:20px; border-top:1px dashed var(--linea-oro); }
.quiz-result.ver{ display:block; animation:aparece .5s var(--curva); }
.quiz-result .eti{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.64rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--oro-prof);
}
.quiz-result .eti::before{ content:""; width:6px; height:6px; transform:rotate(45deg); background:var(--oro); }
.quiz-result h3{ font-size:clamp(1.4rem, 2.4vw, 1.8rem); margin:7px 0 6px; }
.quiz-result p{ color:var(--suave); margin-bottom:16px; max-width:60ch; }
@media (max-width:520px){
  .quiz-q{ flex-direction:column; align-items:flex-start; gap:10px; }
  .quiz-opts{ width:100%; }
  .quiz-op{ flex:1; }
}

/* ════════════════════════════════════════════════════════════
   v3.5 — Información «Nosotros»: staggered bio reveal + refined
   gold photo frame + subtle hover (premium micro-details)
   ════════════════════════════════════════════════════════════ */

/* (1) Bio paragraphs reveal one after another (block itself stays put) */
.perfil-texto.rev{ opacity:1; transform:none; transition:none; }
.perfil-texto p{
  opacity:0; transform:translateY(18px);
  transition:opacity .75s var(--curva), transform .75s var(--curva);
}
.perfil-texto.ya p{ opacity:1; transform:none; }
.perfil-texto.ya p:nth-child(1){ transition-delay:.06s; }
.perfil-texto.ya p:nth-child(2){ transition-delay:.22s; }
.perfil-texto.ya p:nth-child(3){ transition-delay:.38s; }
.perfil-texto.ya p:nth-child(4){ transition-delay:.52s; }

/* (2) Refined gold frame: delicate offset frame + a second hugging hairline,
   plus a soft inner edge on the photo */
.perfil-foto{ transition:transform .6s var(--curva); }
.perfil-foto::before{
  inset:-13px; border-radius:24px; border:1px solid var(--linea-oro);
  transform:rotate(-1.8deg);
  transition:transform .6s var(--curva), border-color .6s var(--curva);
}
.perfil-foto::after{
  content:""; position:absolute; inset:-4px; border-radius:23px;
  border:1px solid rgba(185,145,44,.22); pointer-events:none;
  transition:transform .6s var(--curva);
}
.perfil-foto img{
  box-shadow:var(--s3), inset 0 0 0 1px rgba(255,252,244,.5);
  transition:box-shadow .6s var(--curva);
}

/* (3) Subtle hover: gentle lift + the frames breathe + edge turns gold */
.perfil-foto:hover{ transform:translateY(-5px); }
.perfil-foto:hover::before{ transform:rotate(-3deg); border-color:var(--oro); }
.perfil-foto:hover::after{ transform:rotate(1.4deg); }
.perfil-foto:hover img{
  box-shadow:0 32px 62px -22px rgba(25,34,74,.42), inset 0 0 0 1px rgba(220,186,94,.55);
}

@media (prefers-reduced-motion: reduce){
  .perfil-texto p{ opacity:1; transform:none; transition:none; }
}

/* ════════════════════════════════════════════════════════════
   v3.6 — Productos: two category blocks (Vida / GMM) + smart
   recommender highlight "Recomendado para ti"
   ════════════════════════════════════════════════════════════ */
.cat-bloque + .cat-bloque{ margin-top:clamp(34px, 5vh, 60px); }
.cat-head{ margin:clamp(22px, 3.2vh, 36px) 0 clamp(16px, 2.4vw, 26px); }
.cat-titulo{ display:flex; align-items:center; gap:16px; font-size:clamp(1.6rem, 3vw, 2.3rem); white-space:nowrap; }
.cat-titulo::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg, var(--linea-oro), transparent); }
.cat-sub{ color:var(--suave); font-size:1.02rem; margin-top:5px; max-width:62ch; }
.prod h3{ margin-top:0; }

/* Smart recommender: matching products get a gold highlight + badge */
.prod.reco-match{
  border-color:var(--oro);
  box-shadow:0 16px 38px -16px rgba(185,145,44,.55);
}
.prod.reco-match::after{
  content:"✦ Recomendado para ti"; position:absolute; top:-11px; left:18px; z-index:3;
  background:linear-gradient(135deg, var(--oro-claro), var(--oro-prof)); color:#fff;
  font-size:.6rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  padding:5px 12px; border-radius:100px; white-space:nowrap;
  box-shadow:0 6px 14px -4px rgba(163,125,27,.55);
  animation:reco-pop .4s var(--curva);
}
@keyframes reco-pop{ from{ opacity:0; transform:translateY(6px) scale(.9); } to{ opacity:1; transform:none; } }

/* ════════════════════════════════════════════════════════════
   v3.7 — Productos: recomendados primero por sección + COMPARADOR
   ════════════════════════════════════════════════════════════ */


/* Compare toggle (injected by JS at the bottom of each card) */
.cmp-toggle{
  margin-top:11px; display:flex; align-items:center; justify-content:center; gap:7px;
  padding:9px; border-radius:11px; border:1px dashed var(--linea-oro); background:transparent;
  font-size:.72rem; font-weight:700; letter-spacing:.04em; color:var(--oro-prof); cursor:pointer;
  transition:background .3s var(--curva), color .3s var(--curva), border-color .3s var(--curva);
}
.cmp-toggle svg{ width:14px; height:14px; flex:none; }
.cmp-toggle:hover{ background:rgba(185,145,44,.08); }
.prod.cmp-on{ border-color:var(--oro); box-shadow:var(--s2); }
.prod.cmp-on .cmp-toggle{ background:linear-gradient(135deg, var(--tinta), #243367); color:#F3E9CF; border-style:solid; border-color:transparent; }

/* Floating compare bar */
.cmp-bar{
  position:fixed; left:50%; bottom:22px; transform:translate(-50%, 160%); z-index:95;
  display:flex; align-items:center; gap:16px; padding:12px 14px 12px 22px; border-radius:100px;
  background:linear-gradient(150deg, #2A3B6E, var(--tinta-2)); color:#F3E9CF;
  box-shadow:0 20px 48px -16px rgba(25,34,74,.65); transition:transform .5s var(--curva); max-width:94vw;
}
.cmp-bar.ver{ transform:translate(-50%, 0); }
.cmp-bar .cmp-count{ font-size:.86rem; white-space:nowrap; }
.cmp-bar .cmp-count b{ color:var(--oro-claro); font-size:1.05rem; }
.cmp-bar .cmp-go{ padding:10px 20px; border-radius:100px; background:linear-gradient(135deg, #CDa23A, #A37D1B); color:#fff; font-weight:600; font-size:.85rem; white-space:nowrap; transition:opacity .3s, transform .3s var(--curva); }
.cmp-bar .cmp-go:hover{ transform:translateY(-1px); }
.cmp-bar .cmp-go:disabled{ opacity:.45; cursor:not-allowed; transform:none; }
.cmp-bar .cmp-clear{ color:rgba(243,233,207,.7); font-size:.8rem; cursor:pointer; white-space:nowrap; }
.cmp-bar .cmp-clear:hover{ color:#fff; }

/* Compare overlay + table */
.cmp-overlay{ position:fixed; inset:0; z-index:120; display:none; align-items:center; justify-content:center; padding:18px;
  background:rgba(17,26,57,.55); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); }
.cmp-overlay.ver{ display:flex; animation:cmp-fade .3s var(--curva); }
@keyframes cmp-fade{ from{ opacity:0; } to{ opacity:1; } }
.cmp-modal{
  width:min(920px, 96vw); max-height:88vh; overflow:auto; position:relative;
  background:var(--marfil); border-radius:22px; padding:clamp(22px, 3vw, 36px);
  box-shadow:var(--s3); animation:cmp-rise .4s var(--curva);
}
@keyframes cmp-rise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
.cmp-modal h3{ font-size:clamp(1.5rem, 3vw, 2.1rem); margin-bottom:4px; }
.cmp-modal .cmp-int{ color:var(--suave); font-size:.95rem; margin-bottom:18px; }
.cmp-close{ position:absolute; top:16px; right:18px; width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center; background:var(--marfil-2); color:var(--tinta); font-size:1.4rem; line-height:1; cursor:pointer;
  transition:background .3s var(--curva); }
.cmp-close:hover{ background:var(--marfil-3); }
.cmp-table{ width:100%; border-collapse:collapse; }
.cmp-table th, .cmp-table td{ text-align:left; padding:13px 14px; vertical-align:top; border-bottom:1px solid var(--linea); }
.cmp-table thead th{ font-family:var(--serif); font-size:clamp(1.05rem,2vw,1.35rem); color:var(--tinta); border-bottom:2px solid var(--linea-oro); }
.cmp-table thead th:first-child{ border-bottom:none; }
.cmp-table tbody th{ font-size:.6rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--oro-prof); white-space:nowrap; width:1%; }
.cmp-table tbody td{ font-size:.92rem; line-height:1.5; color:var(--texto); }
.cmp-modal .cmp-cta{ margin-top:22px; }
@media (max-width:560px){
  .cmp-table th, .cmp-table td{ padding:10px 9px; font-size:.84rem; }
  .cmp-bar{ gap:10px; padding-left:16px; }
}

/* ════════════════════════════════════════════════════════════
   v3.8 — Productos: reveal escalonado de las tarjetas
   (color por categoría revertido: todas navy + oro, a pedido del cliente)
   ════════════════════════════════════════════════════════════ */

/* Reveal escalonado de las tarjetas (el bloque dispara, las tarjetas entran en cascada) */
.cat-bloque.rev{ opacity:1; transform:none; transition:none; }
.cat-bloque .tienda .prod{
  opacity:0; transform:translateY(22px);
  transition:opacity .6s var(--curva), transform .6s var(--curva);
}
.cat-bloque.ya .tienda .prod{ opacity:1; transform:none; }
.cat-bloque.ya .tienda .prod:nth-child(1){ transition-delay:.04s; }
.cat-bloque.ya .tienda .prod:nth-child(2){ transition-delay:.12s; }
.cat-bloque.ya .tienda .prod:nth-child(3){ transition-delay:.20s; }
.cat-bloque.ya .tienda .prod:nth-child(4){ transition-delay:.28s; }
.cat-bloque.ya .tienda .prod:nth-child(5){ transition-delay:.36s; }
@media (prefers-reduced-motion: reduce){
  .cat-bloque .tienda .prod{ opacity:1; transform:none; transition:none; }
}

/* ════════════════════════════════════════════════════════════
   v4.0 — Agendador de citas: calendario mensual + horarios (Calendly-style)
   ════════════════════════════════════════════════════════════ */
.agendador{
  max-width:940px; margin-top:clamp(22px,3vh,38px);
  background:linear-gradient(180deg, #FFFFFF, #FFFBF3);
  border:1px solid var(--linea); border-radius:24px; box-shadow:var(--s2);
  padding:clamp(24px,3.2vw,40px); position:relative; overflow:hidden;
}
.agendador::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, var(--oro-claro), var(--oro)); }

/* Step indicator */
.ag-pasos{ list-style:none; display:flex; gap:8px; margin-bottom:clamp(20px,3vw,28px); }
.ag-paso{ flex:1; display:flex; align-items:center; gap:9px; font-size:.82rem; font-weight:600; color:var(--suave); }
.ag-paso span{
  width:26px; height:26px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:var(--marfil-2); color:var(--suave); font-size:.8rem; font-weight:700;
  transition:background .4s var(--curva), color .4s var(--curva);
}
.ag-paso.activo{ color:var(--tinta); }
.ag-paso.activo span{ background:linear-gradient(150deg, var(--tinta), #243367); color:var(--oro-claro); }
.ag-paso.hecho span{ background:linear-gradient(150deg, var(--oro-claro), var(--oro-prof)); color:#fff; }
@media (max-width:560px){ .ag-paso{ font-size:0; gap:0; } .ag-paso span{ font-size:.8rem; } }

.ag-h{ font-size:clamp(1.35rem,2.4vw,1.7rem); margin-bottom:16px; }
.ag-volver{ display:inline-flex; align-items:center; gap:6px; font-size:.82rem; font-weight:600; color:var(--oro-prof); margin-bottom:12px; }
.ag-volver svg{ width:15px; height:15px; }
.ag-volver:hover{ color:var(--tinta); }
.ag-sel{ color:var(--suave); font-size:.95rem; margin-bottom:16px; }
.ag-sel b{ color:var(--tinta); font-weight:600; }

/* Calendar + times layout */
.ag-cal-wrap{ display:grid; grid-template-columns:1fr 286px; gap:clamp(20px,3vw,40px); align-items:start; }
@media (max-width:740px){ .ag-cal-wrap{ grid-template-columns:1fr; gap:24px; } }

/* Calendar */
.ag-cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.ag-mes{ font-family:var(--serif); font-size:clamp(1.3rem,2.2vw,1.65rem); font-weight:600; color:var(--tinta); text-transform:capitalize; }
.ag-nav{ width:40px; height:40px; flex:none; border-radius:50%; border:1.5px solid var(--linea); display:grid; place-items:center; color:var(--tinta); background:#fff; transition:border-color .3s var(--curva), background .3s, color .3s, transform .3s; }
.ag-nav svg{ width:19px; height:19px; }
.ag-nav:hover:not(:disabled){ border-color:var(--oro); background:#FFF8E8; transform:translateY(-1px); }
.ag-nav:disabled{ opacity:.28; cursor:default; }

.ag-dow{ display:grid; grid-template-columns:repeat(7,1fr); gap:7px; margin-bottom:9px; }
.ag-dow span{ text-align:center; font-size:.64rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--suave); }

.ag-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:7px; }
.ag-cell{ aspect-ratio:1/1; display:grid; place-items:center; border-radius:13px; font-size:1.02rem; font-weight:600; color:var(--tinta); border:1.5px solid transparent; background:transparent; }
.ag-cell.vacia{ visibility:hidden; }
.ag-cell.no{ color:#CFC8BA; font-weight:500; }
.ag-cell.disp{ cursor:pointer; background:#fff; border-color:var(--linea); box-shadow:var(--s1); transition:border-color .25s var(--curva), background .25s, color .25s, transform .25s, box-shadow .25s; }
.ag-cell.disp:hover{ border-color:var(--oro); background:#FFF8E8; transform:translateY(-2px); }
.ag-cell.disp.hoy:not(.sel){ box-shadow:inset 0 0 0 1.5px var(--oro); border-color:transparent; }
.ag-cell.disp.sel{ background:linear-gradient(150deg, var(--tinta), #243367); color:#fff; border-color:transparent; box-shadow:var(--s2); transform:translateY(-1px); }
.ag-leyenda{ display:flex; align-items:center; gap:8px; margin-top:16px; font-size:.76rem; color:var(--suave); }
.ag-leyenda i{ width:13px; height:13px; border-radius:5px; background:#fff; border:1.5px solid var(--linea); box-shadow:var(--s1); }

/* Times panel */
.ag-times{ border-left:1px solid var(--linea); padding-left:clamp(18px,2vw,30px); min-height:200px; }
@media (max-width:740px){ .ag-times{ border-left:none; padding-left:0; border-top:1px solid var(--linea); padding-top:22px; } }
.ag-times-empty{ display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; color:var(--suave); padding:36px 8px; }
.ag-times-empty svg{ width:42px; height:42px; color:var(--linea-oro); }
.ag-times-empty p{ font-size:.9rem; max-width:200px; }
.ag-times-day{ font-weight:600; color:var(--tinta); margin-bottom:16px; text-transform:capitalize; line-height:1.3; }
.ag-times-day b{ font-family:var(--serif); font-size:1.18rem; font-weight:600; }
#agTimesSlots{ display:flex; flex-direction:column; gap:9px; max-height:340px; overflow-y:auto; padding-right:2px; }
.ag-bloque-lbl{ font-size:.62rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--oro-prof); margin:6px 0 2px; }
.ag-bloque-lbl:first-child{ margin-top:0; }
.ag-hora{
  width:100%; padding:13px 14px; border:1.5px solid var(--linea); border-radius:12px; background:#fff;
  font-weight:600; font-size:.98rem; color:var(--tinta); cursor:pointer; text-align:center; letter-spacing:.02em;
  transition:border-color .25s var(--curva), background .25s, color .25s, transform .25s;
}
.ag-hora:hover{ border-color:var(--oro); background:#FFF8E8; transform:translateY(-1px); }
.ag-hora.sel{ background:linear-gradient(150deg, var(--tinta), #243367); color:#fff; border-color:transparent; }

/* Form */
.ag-form{ display:grid; gap:14px; }
.ag-campo{ display:flex; flex-direction:column; gap:6px; font-size:.82rem; font-weight:600; color:var(--tinta); }
.ag-opt{ color:var(--suave); font-weight:500; }
.ag-campo input, .ag-campo select{
  font:inherit; font-weight:500; font-size:.95rem; color:var(--texto);
  padding:11px 13px; border:1.5px solid var(--linea); border-radius:11px; background:#fff;
  transition:border-color .3s var(--curva);
}
.ag-campo input:focus, .ag-campo select:focus{ outline:none; border-color:var(--oro); }
.ag-modal{ border:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:10px; }
.ag-modal legend{ flex-basis:100%; padding:0; font-size:.82rem; font-weight:600; color:var(--tinta); }
.ag-radio{ flex:1 1 130px; display:flex; align-items:center; gap:9px; padding:11px 13px; border:1.5px solid var(--linea); border-radius:11px; cursor:pointer; font-weight:500; font-size:.92rem; transition:border-color .3s var(--curva), background .3s var(--curva); }
.ag-radio:has(input:checked){ border-color:var(--oro); background:linear-gradient(150deg,#FFF8E8,#F8E9C8); }
.ag-radio input{ accent-color:var(--oro-prof); }
.ag-enviar{ margin-top:4px; justify-content:center; }
.ag-nota{ font-size:.78rem; color:var(--suave); text-align:center; }

/* Confirmation */
.ag-ok{ text-align:center; padding:8px 0; }
.ag-ok-ic{ width:64px; height:64px; margin:0 auto 16px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(150deg, var(--oro-claro), var(--oro-prof)); color:#fff; animation:reco-pop .5s var(--curva); }
.ag-ok-ic svg{ width:30px; height:30px; }
.ag-ok h3{ font-size:clamp(1.5rem,3vw,2rem); margin-bottom:14px; }
.ag-cita{
  max-width:380px; margin:0 auto 18px; padding:18px 22px; text-align:left;
  background:linear-gradient(150deg, var(--tinta), var(--tinta-2)); color:#F3E9CF;
  border-radius:16px; box-shadow:var(--s2);
}
.ag-cita .cl{ font-size:.62rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--oro-claro); }
.ag-cita .cv{ font-family:var(--serif); font-size:1.25rem; margin:1px 0 12px; }
.ag-cita .cv:last-child{ margin-bottom:0; }
.ag-ok-txt{ color:var(--suave); font-size:.92rem; margin-bottom:16px; }
.ag-otra{ display:block; margin:14px auto 0; font-size:.85rem; font-weight:600; color:var(--oro-prof); }
.ag-otra:hover{ color:var(--tinta); }
.ag-cancelar{ display:inline-block; margin-top:14px; padding-top:14px; border-top:1px solid var(--linea); font-size:.82rem; color:var(--suave); text-decoration:underline; text-underline-offset:3px; }
.ag-cancelar:hover{ color:var(--tinta); }
.ag-ya{ max-width:940px; margin:clamp(16px,2.2vh,24px) auto 0; text-align:center; font-size:.9rem; color:var(--suave); }
.ag-ya a{ color:var(--oro-prof); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.ag-ya a:hover{ color:var(--tinta); }

/* Tabs: Agendar / Mis citas */
.ag-tabs{ display:flex; gap:8px; margin-bottom:clamp(18px,2.5vw,26px); }
.ag-tab{ display:inline-flex; align-items:center; gap:8px; padding:9px 18px; border-radius:999px; border:1.5px solid var(--linea); background:#fff; font-weight:600; font-size:.9rem; color:var(--suave); cursor:pointer; transition:border-color .3s var(--curva), color .3s, background .3s; }
.ag-tab:hover{ border-color:var(--oro); color:var(--tinta); }
.ag-tab.activo{ background:linear-gradient(150deg, var(--tinta), #243367); color:#fff; border-color:transparent; }
.ag-badge{ min-width:19px; height:19px; padding:0 5px; border-radius:999px; background:var(--oro-prof); color:#fff; font-size:.68rem; font-weight:700; line-height:1; display:inline-grid; place-items:center; }
.ag-tab.activo .ag-badge{ background:rgba(255,255,255,.22); color:#fff; }

/* Mis citas */
.mine-note{ font-size:.85rem; color:var(--suave); margin-bottom:16px; }
.mine-empty{ text-align:center; color:var(--suave); padding:40px 16px; font-size:.95rem; }
.mine-card{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; padding:16px 18px; border:1.5px solid var(--linea); border-radius:16px; background:#fff; box-shadow:var(--s1); margin-bottom:12px; }
.mine-card.pasada{ opacity:.55; }
.mine-when{ display:flex; flex-direction:column; }
.mine-fecha{ font-family:var(--serif); font-size:1.2rem; font-weight:600; color:var(--tinta); line-height:1.1; }
.mine-hora{ font-size:.84rem; color:var(--oro-prof); font-weight:600; }
.mine-meta{ font-size:.85rem; color:var(--suave); }
.mine-acts{ margin-left:auto; display:flex; gap:8px; align-items:center; }
.mine-btn{ padding:8px 15px; border-radius:10px; border:1.5px solid var(--linea); background:#fff; font-weight:600; font-size:.82rem; color:var(--tinta); cursor:pointer; transition:border-color .3s var(--curva), background .3s; }
.mine-btn:hover{ border-color:var(--oro); }
.mine-btn.cancel{ color:#A23B3B; border-color:#E7CFCF; }
.mine-btn.cancel:hover{ background:#FBEDED; border-color:#A23B3B; }
.mine-tag{ font-size:.78rem; color:var(--suave); font-weight:600; }
@media (max-width:520px){ .mine-acts{ margin-left:0; width:100%; } .mine-btn{ flex:1; text-align:center; } }
.ag-vacio{ color:var(--suave); font-size:.95rem; padding:10px 0; }

/* ════════════════════════════════════════════════════════════
   v4.1 — Página Contacto rediseñada
   ════════════════════════════════════════════════════════════ */
/* Contact cards */
.cto-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,22px); margin-top:clamp(26px,4vh,44px); }
@media (max-width:860px){ .cto-cards{ grid-template-columns:1fr; } }
.cto-card{ display:flex; flex-direction:column; align-items:flex-start; padding:clamp(22px,2.6vw,30px); border:1.5px solid var(--linea); border-radius:20px; background:linear-gradient(180deg,#fff,#FFFBF3); box-shadow:var(--s1); transition:transform .3s var(--curva), border-color .3s, box-shadow .3s; }
.cto-card:hover{ transform:translateY(-4px); border-color:var(--linea-oro); box-shadow:var(--s2); }
.cto-card.primary{ border-color:rgba(31,168,85,.4); }
.cto-ic{ width:52px; height:52px; border-radius:15px; display:grid; place-items:center; margin-bottom:16px; background:linear-gradient(150deg,var(--tinta),#243367); color:var(--oro-claro); }
.cto-ic svg{ width:25px; height:25px; }
.cto-ic.wa{ background:linear-gradient(150deg,#25D366,#1FA855); color:#fff; }
.cto-card h3{ font-size:1.3rem; margin-bottom:5px; }
.cto-val{ font-weight:600; color:var(--tinta); word-break:break-word; }
.cto-desc{ color:var(--suave); font-size:.9rem; margin-top:8px; }
.cto-go{ display:inline-flex; align-items:center; gap:5px; margin-top:auto; padding-top:16px; font-size:.86rem; font-weight:700; color:var(--oro-prof); }
.cto-go svg{ width:15px; height:15px; transition:transform .25s var(--curva); }
.cto-card:hover .cto-go svg{ transform:translateX(3px); }

/* Direct form */
.cto-form-wrap{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(28px,4vw,60px); align-items:start; }
@media (max-width:820px){ .cto-form-wrap{ grid-template-columns:1fr; gap:30px; } }
.cto-form-intro .t-sec{ margin-top:10px; }
.cto-form-intro .lead{ margin-top:14px; }
.cto-bul{ list-style:none; margin-top:22px; display:flex; flex-direction:column; gap:11px; }
.cto-bul li{ position:relative; padding-left:28px; color:var(--texto); font-size:.95rem; }
.cto-bul li::before{ content:""; position:absolute; left:0; top:3px; width:17px; height:17px; border-radius:50%; background:linear-gradient(150deg,var(--oro-claro),var(--oro-prof)); }
.cto-bul li::after{ content:""; position:absolute; left:5px; top:8px; width:6px; height:3px; border-left:1.6px solid #fff; border-bottom:1.6px solid #fff; transform:rotate(-45deg); }
.cto-form{ background:linear-gradient(180deg,#fff,#FFFBF3); border:1.5px solid var(--linea); border-radius:20px; padding:clamp(22px,2.8vw,32px); box-shadow:var(--s2); }
.cto-form textarea{ font:inherit; font-weight:500; font-size:.95rem; color:var(--texto); padding:11px 13px; border:1.5px solid var(--linea); border-radius:11px; background:#fff; resize:vertical; transition:border-color .3s var(--curva); }
.cto-form textarea:focus{ outline:none; border-color:var(--oro); }

/* Schedule + coverage panels */
.cto-info{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2vw,26px); }
@media (max-width:760px){ .cto-info{ grid-template-columns:1fr; } }
.cto-panel{ background:linear-gradient(180deg,#fff,#FFFBF3); border:1.5px solid var(--linea); border-radius:20px; padding:clamp(24px,3vw,34px); box-shadow:var(--s1); }
.cto-tag{ display:inline-flex; align-items:center; gap:7px; font-size:.68rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--oro-prof); }
.cto-tag svg{ width:16px; height:16px; }
.cto-panel h3{ font-size:1.5rem; margin:8px 0 18px; }
.cto-dias{ list-style:none; display:flex; flex-direction:column; }
.cto-dias li{ display:flex; justify-content:space-between; gap:14px; padding:13px 0; border-bottom:1px solid var(--linea); font-size:.94rem; }
.cto-dias li:last-child{ border-bottom:none; }
.cto-dias li span:first-child{ font-weight:600; color:var(--tinta); }
.cto-dias li span:last-child{ color:var(--texto); text-align:right; }
.cto-cerrado{ color:var(--suave) !important; font-style:italic; }
.cto-resp{ display:flex; align-items:center; gap:9px; margin-top:18px; padding:13px 16px; border-radius:13px; background:linear-gradient(150deg,#FFF8E8,#F8E9C8); color:var(--tinta-2); font-weight:600; font-size:.92rem; }
.cto-resp svg{ width:18px; height:18px; flex:none; color:var(--oro-prof); }
.cto-globo-wrap{ position:relative; display:flex; justify-content:center; margin:12px 0 26px; }
.cto-globo{ position:relative; width:clamp(160px,46%,200px); aspect-ratio:1; border-radius:50%; overflow:hidden;
  box-shadow:0 18px 32px rgba(20,26,52,.34), inset 0 0 0 2px rgba(214,178,86,.55), 0 0 0 7px rgba(196,154,46,.07);
  animation:globo-float 6s ease-in-out infinite; }
.cto-globo-strip{ position:absolute; top:0; bottom:0; left:0; width:400%;
  background:url(../assets/earth.jpg?v=2) repeat-x; background-size:50% 100%;
  filter:brightness(1.05) saturate(1.05) contrast(1.02);
  animation:globo-rot 30s linear infinite; }
.cto-globo-sphere{ position:absolute; inset:0; border-radius:50%;
  background:
    radial-gradient(circle at 31% 26%, rgba(255,255,255,.26) 0%, rgba(255,255,255,0) 34%),
    radial-gradient(circle at 50% 50%, rgba(9,14,38,0) 64%, rgba(9,14,38,.4) 100%);
  box-shadow:inset -9px -10px 22px rgba(9,14,38,.34), inset 7px 7px 16px rgba(255,255,255,.05); }
@keyframes globo-rot{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes globo-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }
@media (prefers-reduced-motion:reduce){ .cto-globo{ animation:none; } .cto-globo-strip{ animation:none; } }
.cto-cob{ font-size:.95rem; color:var(--texto); margin-top:4px; }
.cto-cob b{ color:var(--tinta); }

/* Closing band + social */
.cto-redes{ display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:clamp(26px,4vh,40px); padding-top:24px; border-top:1px solid rgba(246,239,220,.18); }
.cto-redes-lbl{ font-size:.85rem; color:#C9C0AC; font-weight:600; margin-right:2px; }
.cto-red{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:#D8CFB8; box-shadow:inset 0 0 0 1.4px rgba(246,239,220,.25); transition:transform .3s var(--curva), background .3s, color .3s, box-shadow .3s; }
.cto-red:hover{ background:linear-gradient(150deg,var(--oro-claro),var(--oro-prof)); color:#fff; box-shadow:none; transform:translateY(-2px); }
.cto-red.wa:hover{ background:#25D366; }
.cto-red svg{ width:18px; height:18px; }

/* Closing credit line inside the navy band */
.cierre-pie{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 22px; margin-top:26px; padding-top:20px; border-top:1px solid rgba(246,239,220,.16); font-size:.8rem; color:#B4AB94; }
.cierre-pie a{ color:var(--oro-claro); font-weight:600; }
.cierre-pie a:hover{ color:#fff; }

/* ════════════════════════════════════════════════════════════
   v5.0 — UI polish pack: page transitions, shine, rich reveals,
   Ken Burns, testimonial marquee, sello shine, calendar cascade,
   animated check, premium mobile menu, bottom booking bar.
   ════════════════════════════════════════════════════════════ */

/* Page transitions (View Transitions API — progressive enhancement) */
@view-transition{ navigation:auto; }
::view-transition-old(root){ animation:vt-out .3s ease both; }
::view-transition-new(root){ animation:vt-in .38s ease both; }
@keyframes vt-out{ to{ opacity:0; transform:translateY(-8px); } }
@keyframes vt-in{ from{ opacity:0; transform:translateY(10px); } }

/* CTA shine sweep on hover */
.btn-oro, .menu-cta{ position:relative; overflow:hidden; }
.btn-oro::before, .menu-cta::before{
  content:""; position:absolute; top:-20%; bottom:-20%; left:-30%; width:34%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.5), transparent);
  transform:translateX(-160%) skewX(-18deg); pointer-events:none;
}
.btn-oro:hover::before, .menu-cta:hover::before{ animation:shine 0.75s ease; }
@keyframes shine{ to{ transform:translateX(520%) skewX(-18deg); } }

/* Richer reveals: titles unblur, cards scale in */
.t-sec.rev, .t-hero.rev{ filter:blur(10px); transition-property:opacity, transform, filter; }
.t-sec.rev.ya, .t-hero.rev.ya{ filter:blur(0); }
.testi.rev, .prod.rev, .cto-card.rev, .cto-panel.rev{ transform:translateY(14px) scale(.955); }
.testi.rev.ya, .prod.rev.ya, .cto-card.rev.ya, .cto-panel.rev.ya{ transform:none; }

/* Hero photo: slow Ken Burns zoom (independent of the JS parallax transform) */
.hero-foto img{ animation:kenburns 24s ease-in-out infinite alternate; }
@keyframes kenburns{ from{ scale:1; } to{ scale:1.09; } }

/* Testimonial marquee (auto-scroll, pause on hover) */
.testis.marquee{ display:block; overflow:hidden; padding:6px 0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.testi-track{ display:flex; gap:var(--g, 16px); width:max-content; animation:testi-scroll 40s linear infinite; }
.testis.marquee:hover .testi-track{ animation-play-state:paused; }
.testis.marquee .testi{ flex:0 0 272px; }
@keyframes testi-scroll{ to{ transform:translateX(calc(-50% - var(--g, 16px)/2)); } }
/* Grid mode (after "Ver más reseñas") */
.testis.grid .testi-track{ animation:none; width:auto; flex-wrap:wrap; justify-content:center; }
.testis.grid{ -webkit-mask-image:none; mask-image:none; }
.testis.grid .testi.clone{ display:none; }

/* Sello: periodic light sweep */
.sello{ position:relative; overflow:hidden; }
.sello::after{ content:""; position:absolute; top:0; bottom:0; left:-40%; width:36%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.55), transparent);
  transform:translateX(-140%) skewX(-16deg); animation:sello-shine 4.4s ease-in-out infinite; }
@keyframes sello-shine{ 0%, 62%{ transform:translateX(-140%) skewX(-16deg); } 78%, 100%{ transform:translateX(460%) skewX(-16deg); } }

/* Calendar cells cascade in on (re)render */
.ag-cell{ animation:cell-in .34s var(--curva) both; animation-delay:calc(var(--i, 0) * 13ms); }
@keyframes cell-in{ from{ opacity:0; transform:scale(.8); } }

/* Animated check on booking confirmation */
.ag-ok-ic svg path{ stroke-dasharray:1; stroke-dashoffset:1; animation:draw-check .55s .2s var(--curva) forwards; }
@keyframes draw-check{ to{ stroke-dashoffset:0; } }

/* Gold sparkles (pyramid burst / quiz celebration) */
.spark{ position:absolute; pointer-events:none; z-index:5; line-height:1;
  color:#E7B53C; text-shadow:0 0 8px rgba(231,181,60,.85), 0 0 2px #fff;
  animation:spark-fly .85s cubic-bezier(.2,.6,.3,1) forwards; }
@keyframes spark-fly{
  0%{ opacity:0; transform:translate(0,0) scale(.2) rotate(0deg); }
  18%{ opacity:1; transform:translate(calc(var(--dx)*.25), calc(var(--dy)*.25)) scale(1.15) rotate(40deg); }
  100%{ opacity:0; transform:translate(var(--dx,0), var(--dy,-46px)) scale(.5) rotate(var(--rot,120deg)); } }
.pira .nivel{ position:relative; }

/* Quiz progress bar */
.quiz-prog{ display:flex; align-items:center; gap:12px; margin:4px 0 16px; }
.quiz-prog .qp-bar{ flex:1; height:6px; border-radius:99px; background:var(--marfil-2); overflow:hidden; }
.quiz-prog .qp-fill{ height:100%; width:0; border-radius:99px;
  background:linear-gradient(90deg, var(--oro-claro), var(--oro-prof)); transition:width .45s var(--curva); }
.quiz-prog .qp-txt{ font-size:.78rem; font-weight:700; color:var(--oro-prof); white-space:nowrap; }
#quizResult{ position:relative; overflow:hidden; }

/* Globe: grab cursor when interactive */
.cto-globo{ cursor:grab; }
.cto-globo.dragging{ cursor:grabbing; }

/* Bottom booking bar (mobile only) */
.barra-cita{ display:none; }
@media (max-width:780px){
  .barra-cita{ display:block; position:fixed; left:0; right:0; bottom:0; z-index:90;
    padding:8px 14px calc(8px + env(safe-area-inset-bottom));
    background:rgba(245,240,230,.88); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    border-top:1px solid var(--linea); }
  .barra-cita .btn{ width:100%; justify-content:center; padding:10px 16px; font-size:.92rem; }
  body{ padding-bottom:64px; }
  /* Premium mobile drawer: blur + cascading links + gold CTA */
  .menu{ background:rgba(245,240,230,.9); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
  .menu .menu-link, .menu .menu-cta{ opacity:0; transform:translateX(22px);
    transition:opacity .4s var(--curva), transform .45s var(--curva); }
  .menu.abierto .menu-link, .menu.abierto .menu-cta{ opacity:1; transform:none; }
  .menu.abierto .menu-link:nth-child(1){ transition-delay:.08s; }
  .menu.abierto .menu-link:nth-child(2){ transition-delay:.14s; }
  .menu.abierto .menu-link:nth-child(3){ transition-delay:.20s; }
  .menu.abierto .menu-link:nth-child(4){ transition-delay:.26s; }
  .menu.abierto .menu-link:nth-child(5){ transition-delay:.32s; }
  .menu.abierto .menu-cta{ transition-delay:.40s; }
  .menu-cta{ background:linear-gradient(135deg, var(--oro-claro), var(--oro-prof)); color:#fff; }
}

/* Reduced motion: turn the decorative motion off */
@media (prefers-reduced-motion: reduce){
  .hero-foto img{ animation:none; }
  .testi-track{ animation:none; }
  .sello::after{ animation:none; }
  .ag-cell{ animation:none; }
  ::view-transition-old(root), ::view-transition-new(root){ animation:none; }
}

/* v5.0.1 — Mobile audit fixes: bigger touch targets in the calendar */
@media (max-width:480px){
  .agendador{ padding:18px 12px; border-radius:18px; }
  .ag-grid, .ag-dow{ gap:4px; }
  .ag-cell{ border-radius:10px; font-size:.95rem; }
  .ag-times{ padding-left:0; }
}

/* v5.1 — Canvas 3D globe (contacto) + "leave your review" CTA */
.cto-globo{ touch-action:none; user-select:none; -webkit-user-select:none; }
.cto-globo-canvas{ position:absolute; inset:0; width:100%; height:100%; border-radius:50%; }
.cto-globo.dragging{ animation-play-state:paused; }
.testi-deja{ display:block; margin:10px auto 0; text-align:center; font-size:.88rem; color:var(--suave); }
.testi-deja a{ color:var(--oro-prof); font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.testi-deja a:hover{ color:var(--tinta); }

/* v5.2 — Legal pages + footer legal links + 404 */
.legal{ max-width:840px; }
.legal .fecha{ font-size:.85rem; color:var(--suave); margin-bottom:28px; }
.legal h3{ font-size:1.3rem; margin:30px 0 10px; }
.legal p, .legal li{ font-size:.98rem; line-height:1.75; color:var(--texto); margin-bottom:12px; }
.legal ul{ padding-left:22px; margin-bottom:14px; }
.legal li{ margin-bottom:7px; }
.legal a{ color:var(--oro-prof); font-weight:600; }
.legal a:hover{ color:var(--tinta); }
.pie-legal{ text-align:center; margin-top:14px; font-size:.8rem; }
.pie-legal, .pie-legal a{ color:#B4AB94; }
.pie-legal a:hover{ color:var(--oro-claro); }
.pie-legal a{ text-decoration:underline; text-underline-offset:3px; }
.err-hero{ min-height:72vh; display:grid; place-items:center; text-align:center; }
.err-hero .cifra{ font-family:var(--serif); font-size:clamp(6rem,18vw,10rem); line-height:1; color:var(--tinta); }
.err-hero .cifra em{ color:var(--oro-prof); font-style:normal; }
.err-hero p{ color:var(--suave); margin:10px 0 26px; }

/* v5.3 — Agenda protagonista + lista de espera */
.agenda-full .agendador{ max-width:1100px; margin:clamp(6px,1.5vh,14px) auto 0; padding:clamp(26px,3.4vw,46px); }
.agenda-full .ag-cal-wrap{ grid-template-columns:1fr 320px; }
.agenda-full .ag-mes{ font-size:clamp(1.5rem,2.6vw,2rem); }
.agenda-full .ag-cell{ font-size:1.1rem; border-radius:15px; }
.agenda-full .ag-hora{ padding:14px 16px; font-size:1.02rem; }
.agenda-full .ag-pasos{ margin-bottom:clamp(24px,3vw,34px); }
@media (max-width:740px){ .agenda-full .ag-cal-wrap{ grid-template-columns:1fr; } }

/* Fully-booked day cells */
.ag-cell.llena{ cursor:pointer; background:repeating-linear-gradient(135deg,#FBF1DC,#FBF1DC 6px,#F6E7C8 6px,#F6E7C8 12px);
  border:1.5px solid #E3CD9C; color:#8a6a14; box-shadow:var(--s1);
  transition:border-color .25s var(--curva), transform .25s; }
.ag-cell.llena:hover{ border-color:var(--oro); transform:translateY(-2px); }
.ag-cell.llena.sel{ border-color:var(--oro-prof); box-shadow:inset 0 0 0 1.5px var(--oro-prof); }
.lleno-tag{ font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#8a6a14;
  background:#FBF1DC; border-radius:99px; padding:3px 10px; vertical-align:2px; }
.lleno-note{ font-size:.82rem; color:var(--suave); line-height:1.55; margin-bottom:10px; }
.ag-hora.ocupada{ background:repeating-linear-gradient(135deg,#fff,#fff 6px,#FBF4E6 6px,#FBF4E6 12px);
  color:#8a6a14; border-style:dashed; }
.ag-hora.ocupada:hover{ border-color:var(--oro-prof); background:#FBF1DC; }

/* Waitlist banner */
.wait-banner{ background:linear-gradient(150deg,#FFF8E8,#F8E9C8); border:1.5px solid var(--linea-oro);
  border-radius:14px; padding:13px 16px; margin-bottom:16px; font-size:.9rem; line-height:1.55; color:var(--tinta-2); }
.wait-banner button{ margin-left:8px; border:0; background:var(--tinta); color:#fff; border-radius:99px;
  padding:5px 13px; font-size:.78rem; font-weight:700; cursor:pointer; }

/* v5.4 — Agenda masthead + Mis citas empty-state redesign */
.ag-masthead{ text-align:center; margin-bottom:clamp(20px,2.6vw,30px); }
.ag-mast-eje{ display:flex; align-items:center; justify-content:center; gap:14px;
  font-size:.7rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--oro-prof); }
.ag-mast-eje i{ width:52px; height:1px; background:linear-gradient(90deg, transparent, var(--oro)); position:relative; }
.ag-mast-eje i:last-child{ background:linear-gradient(270deg, transparent, var(--oro)); }
.ag-mast-title{ font-family:var(--serif); font-weight:600; font-size:clamp(2rem,4.2vw,3.1rem);
  color:var(--tinta); line-height:1.08; margin:10px 0 14px; }
.ag-mast-title em{ font-style:italic; color:var(--oro-prof); }
.ag-mast-chips{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
.ag-mast-chips span{ display:inline-flex; align-items:center; gap:7px; padding:7px 15px;
  border:1.5px solid var(--linea); border-radius:99px; background:#fff;
  font-size:.8rem; font-weight:600; color:var(--suave); }
.ag-mast-chips svg{ width:14px; height:14px; color:var(--oro-prof); flex:none; }
.agenda-full .agendador{ max-width:1180px; }
@media (max-width:560px){ .ag-mast-chips span{ padding:6px 12px; font-size:.74rem; } }

/* Mis citas: note vs empty-state clearly different */
.mine-note{ display:flex; align-items:center; gap:8px; font-size:.72rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--oro-prof); margin-bottom:18px; }
.mine-note::before{ content:""; width:8px; height:8px; background:linear-gradient(135deg,#DCBA5E,var(--oro-prof));
  transform:rotate(45deg); flex:none; }
.mine-empty{ text-align:center; padding:44px 20px; background:var(--marfil-2);
  border:1.5px dashed var(--linea-oro); border-radius:18px; }
.mine-empty svg{ width:44px; height:44px; color:var(--oro); margin-bottom:12px; }
.mine-empty h4{ font-family:var(--serif); font-size:1.5rem; font-weight:600; color:var(--tinta); margin-bottom:6px; }
.mine-empty p{ font-size:.9rem; color:var(--suave); max-width:340px; margin:0 auto; }

/* v5.4.1 — Masthead simplificado: "Agenda" grande + subtítulo */
.ag-mast-eje{ gap:20px; }
.ag-mast-eje i{ width:clamp(40px,9vw,110px); }
.ag-mast-title{ font-family:var(--serif); font-weight:600; font-size:clamp(2.6rem,5.4vw,4rem);
  color:var(--tinta); line-height:1; margin:0; letter-spacing:.01em; }
.ag-mast-sub{ font-family:var(--serif); font-style:italic; font-size:clamp(1.15rem,2vw,1.5rem);
  color:var(--suave); margin:10px 0 0; }
.ag-mast-sub em{ color:var(--oro-prof); }

/* v5.5 — Lista de espera visible en dias con lugares */
.espera-lbl{ margin-top:18px; color:#8a6a14; display:flex; align-items:center; gap:8px; }
.espera-lbl::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg, #E3CD9C, transparent); }

/* v5.6 — Nota de zona horaria */
.ag-tz{ font-size:.76rem; color:var(--suave); margin-top:6px; padding-left:2px; line-height:1.45; }