/*
  Sitio — Regina Verdi / Cómo mejorar tu empresa
  Componentes de página sobre css/tokens.css. Un solo acento (teal), navy para estructura.
*/

/* ===== Header / nav ===== */
.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--surface);
  border-bottom:1px solid var(--divider);
  transition:box-shadow var(--duration-base) var(--ease-standard),border-color var(--duration-base) var(--ease-standard);
}
.site-header.is-scrolled{
  box-shadow:var(--shadow-sm);
  border-bottom-color:var(--border);
}
.site-header .container{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-1-5);min-height:72px;padding-block:var(--space-1-5);
}
@media (min-width:768px){ .site-header .container{gap:var(--space-2);min-height:80px} }
.brand{display:flex;align-items:center;gap:var(--space-1);flex:0 0 auto;min-width:auto}
.brand img{
  height:36px;width:auto;max-width:none;
  flex:0 0 auto;object-fit:contain;object-position:left center;
  display:block;
}
@media (min-width:768px){
  .brand img{height:44px}
}
@media (min-width:1024px){
  .brand img{height:48px}
}
.brand-fallback{font-weight:800;color:var(--navy);font-size:1.05rem;letter-spacing:-.01em;white-space:nowrap}
.brand-word{display:none;flex-direction:column;align-items:center;line-height:1.15}
@media (min-width:480px){ .brand-word{display:flex} }
.brand-title{font-weight:500;color:var(--navy);font-size:.875rem;letter-spacing:normal;white-space:nowrap}
.brand-title strong{font-weight:800}
.brand-subtitle{font-weight:600;color:var(--primary-soft-text);font-size:.6875rem;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;text-align:center}
@media (min-width:768px){
  .brand-title{font-size:1rem}
  .brand-subtitle{font-size:.75rem}
}

.nav-desktop{display:none}
@media (min-width:1024px){
  .nav-desktop{display:flex;align-items:center;gap:var(--space-4);flex:1 1 auto;justify-content:center}
  .nav-desktop ul{display:flex;align-items:center;gap:var(--space-3)}
  .nav-desktop a:not(.btn){
    color:var(--text-2);font-weight:600;font-size:.9375rem;
    padding:var(--space-1) 0;border-bottom:2px solid transparent;
    transition:color var(--duration-instant) var(--ease-standard),border-color var(--duration-instant) var(--ease-standard);
  }
  .nav-desktop a:not(.btn):hover{color:var(--navy);text-decoration:none}
  .nav-desktop a[aria-current="page"]{color:var(--navy);border-bottom-color:var(--primary)}
}

.nav-actions{display:flex;align-items:center;gap:var(--space-1);flex:0 0 auto}
@media (min-width:768px){ .nav-actions{gap:var(--space-1-5)} }
.nav-actions .nav-cta{white-space:nowrap;padding-inline:var(--space-2)}
@media (min-width:768px){ .nav-actions .nav-cta{padding-inline:var(--space-3)} }

.nav-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:var(--radius-md);
  background:transparent;border:1px solid var(--border);
  cursor:pointer;flex:0 0 auto;
}
.nav-toggle:hover{background:var(--hover)}
@media (min-width:1024px){ .nav-toggle{display:none} }

.nav-mobile{
  position:fixed;inset:72px 0 0 0;z-index:99;
  background:var(--surface);
  transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--duration-base) var(--ease-standard),transform var(--duration-base) var(--ease-standard),visibility var(--duration-base);
  overflow-y:auto;
}
@media (min-width:768px){ .nav-mobile{inset:80px 0 0 0} }
.nav-mobile.is-open{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto}
.nav-mobile ul{display:flex;flex-direction:column;padding:var(--space-2)}
.nav-mobile a:not(.btn){
  display:flex;align-items:center;min-height:56px;
  padding:0 var(--space-2);font-weight:600;font-size:1.0625rem;color:var(--text);
  border-bottom:1px solid var(--divider);
}
.nav-mobile a[aria-current="page"]{color:var(--primary)}
.nav-mobile .nav-mobile-cta{padding:var(--space-3) var(--space-2)}
@media (min-width:1024px){ .nav-mobile{display:none !important} }

/* ===== Botones ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);
  min-height:44px;padding:0 var(--space-3);box-sizing:border-box;
  border-radius:var(--radius-md);border:1px solid transparent;
  font-weight:600;font-size:.9375rem;line-height:1;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background var(--duration-instant) var(--ease-standard),
             border-color var(--duration-instant) var(--ease-standard),
             color var(--duration-instant) var(--ease-standard),
             transform var(--duration-fast) var(--ease-standard);
}
.btn svg{display:block;flex:0 0 auto}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-hover);color:#fff}
.btn-primary:active{background:var(--primary-active)}
.btn-secondary{background:var(--surface);color:var(--navy);border-color:var(--border-strong)}
.btn-secondary:hover{background:var(--hover)}
.btn-ghost-inverse{background:transparent;color:var(--text-inverse);border-color:rgba(255,255,255,.55)}
.btn-ghost-inverse:hover,.btn-ghost-inverse:focus-visible{
  background:rgba(255,255,255,.14);color:var(--text-inverse);border-color:#fff;text-decoration:none
}
.btn-ghost-inverse:active,.btn-ghost-inverse:visited{
  color:var(--text-inverse);background:rgba(255,255,255,.18);border-color:#fff
}
.btn-block{width:100%}
.btn-lg{min-height:52px;padding:0 var(--space-4);font-size:1rem}

/* ===== Botón flotante WhatsApp ===== */
.whatsapp-float{
  position:fixed;right:var(--space-2);bottom:var(--space-2);z-index:90;
  display:inline-flex;align-items:center;gap:var(--space-1);
  min-height:56px;padding:0 var(--space-2-5);border-radius:var(--radius-full);
  background:var(--primary);color:#fff;box-shadow:var(--shadow-lg);
  font-weight:600;font-size:.9375rem;
  transition:background var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-standard);
  animation:wa-in var(--duration-slow) var(--ease-enter) 200ms both;
}
.whatsapp-float:hover{background:var(--primary-hover);color:#fff;text-decoration:none}
.whatsapp-float:active{transform:scale(.97)}
@keyframes wa-in{
  from{opacity:0;transform:scale(.96) translateY(8px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}
.whatsapp-float svg{flex:0 0 auto}
.whatsapp-float .wa-label{display:none}
@media (min-width:768px){ .whatsapp-float .wa-label{display:inline} }

/* ===== Secciones / ritmo vertical ===== */
.section{padding-block:var(--space-8)}
.section-compact{padding-block:var(--space-5)}
.section-alt{background:var(--surface-2)}
.section-navy{background:var(--navy);color:var(--text-inverse)}
.section-navy-soft{background:var(--navy-soft)}
.section-ice{background:linear-gradient(180deg,var(--section-ice) 0%,#FFFFFF 100%)}
.section-ice.section-areas{background:var(--section-ice)}
.section-areas{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.section-areas-bg{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.section-areas-bg img{
  position:absolute;
  inset:-40px;
  width:calc(100% + 80px);
  height:calc(100% + 80px);
  max-width:none;
  object-fit:cover;
  object-position:center 45%;
  filter:blur(8px);
  opacity:1;
}
.section-areas::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:color-mix(in srgb, var(--section-ice) 38%, transparent);
}
.section-areas > .container{position:relative;z-index:2}
.section-mint{background:linear-gradient(180deg,var(--primary-soft) 0%,var(--navy-soft) 55%,var(--bg) 100%)}
.section-head{max-width:640px;margin-bottom:var(--space-5)}
.section-head.center{margin-inline:auto;text-align:center}
.eyebrow{color:var(--primary-soft-text);display:block;margin-bottom:var(--space-1)}
.section-navy .eyebrow{color:#9FDDD2}

/* ===== Hero ===== */
.hero{
  padding-block:var(--space-8) var(--space-6);
  background:linear-gradient(180deg,var(--primary-soft) 0%,var(--navy-soft) 55%,var(--bg) 100%);
}
.hero-grid{display:grid;gap:var(--space-4);align-items:center}
@media (min-width:1024px){ .hero-grid{grid-template-columns:1.1fr 1fr;gap:var(--space-6)} }
.hero-panel{
  background:var(--navy);color:var(--text-inverse);border-radius:var(--radius-xl);
  padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3);
}
.hero-panel-tag{
  display:inline-flex;align-self:flex-start;padding:var(--space-05) var(--space-1-5);
  border-radius:var(--radius-full);background:rgba(255,255,255,.12);
  color:#fff;font-size:.75rem;font-weight:700;letter-spacing:.02em;
}
.hero-panel ul{display:flex;flex-direction:column;gap:var(--space-1-5)}
.hero-panel li{
  display:flex;align-items:flex-start;gap:var(--space-1-5);
  opacity:0;transform:translateX(-8px);
  transition:opacity var(--duration-slow) var(--ease-enter),transform var(--duration-slow) var(--ease-enter);
}
.hero-panel.reveal-in li{
  opacity:1;transform:none;
}
.hero-panel.reveal-in li:nth-child(1){transition-delay:280ms}
.hero-panel.reveal-in li:nth-child(2){transition-delay:420ms}
.hero-panel.reveal-in li:nth-child(3){transition-delay:560ms}
.hero-panel li svg,
.hero-check{
  flex:0 0 auto;width:20px;height:20px;color:var(--primary-on-navy);margin-top:2px;
}
.hero-check-ring{stroke-dasharray:58;stroke-dashoffset:58}
.hero-check-mark{stroke-dasharray:18;stroke-dashoffset:18;stroke-linecap:round;stroke-linejoin:round}
.hero-panel.reveal-in .hero-check-ring{
  animation:hero-ring var(--duration-slow) var(--ease-enter) both;
}
.hero-panel.reveal-in .hero-check-mark{
  animation:hero-mark var(--duration-slow) var(--ease-enter) both;
}
.hero-panel.reveal-in li:nth-child(1) .hero-check-ring,
.hero-panel.reveal-in li:nth-child(1) .hero-check-mark{animation-delay:280ms}
.hero-panel.reveal-in li:nth-child(2) .hero-check-ring,
.hero-panel.reveal-in li:nth-child(2) .hero-check-mark{animation-delay:420ms}
.hero-panel.reveal-in li:nth-child(3) .hero-check-ring,
.hero-panel.reveal-in li:nth-child(3) .hero-check-mark{animation-delay:560ms}
@keyframes hero-ring{to{stroke-dashoffset:0}}
@keyframes hero-mark{to{stroke-dashoffset:0}}

/* Escena hero: loop de Hero Animado.dc.html (13s). Solo decorativo. */
.hero-scene{margin-inline:-4px;color:var(--primary-on-navy)}
.hero-scene-frame{
  border-radius:var(--radius-lg);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  overflow:hidden;
}
.hero-scene-svg{width:100%;height:auto;display:block}
.hero-scene text{font-family:inherit;font-size:11px;font-weight:600;letter-spacing:.02em}
.hero-scene [data-anim]{transform-box:fill-box;transform-origin:center}
.hs-tangle{stroke-dasharray:560;opacity:0;animation:hsTangle var(--duration-scene) linear infinite}
.hs-scan{opacity:0;animation:hsScan var(--duration-scene) var(--ease-standard) infinite}
.hs-owner{animation:hsOwner var(--duration-scene) var(--ease-standard) infinite}
.hs-wire{stroke-dasharray:96;opacity:0;animation:hsWire var(--duration-scene) var(--ease-standard) infinite}
.hs-card-a{animation:hsCardA var(--duration-scene) var(--ease-standard) infinite}
.hs-card-b{animation:hsCardB var(--duration-scene) var(--ease-standard) infinite}
.hs-card-c{animation:hsCardC var(--duration-scene) var(--ease-standard) infinite}
.hs-note-a{animation:hsNoteA var(--duration-scene) var(--ease-standard) infinite}
.hs-note-b{animation:hsNoteB var(--duration-scene) var(--ease-standard) infinite}
.hs-note-c{animation:hsNoteC var(--duration-scene) var(--ease-standard) infinite}
.hs-note-d{animation:hsNoteD var(--duration-scene) var(--ease-standard) infinite}
.hs-note-e{animation:hsNoteE var(--duration-scene) var(--ease-standard) infinite}
.hs-note-f{animation:hsNoteF var(--duration-scene) var(--ease-standard) infinite}
.hs-check-a{animation:hsCheckA var(--duration-scene) var(--ease-standard) infinite}
.hs-check-b{animation:hsCheckB var(--duration-scene) var(--ease-standard) infinite}
.hs-check-c{animation:hsCheckC var(--duration-scene) var(--ease-standard) infinite}
.hero-scene-caps{
  position:relative;height:40px;
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}
.hs-cap{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:.8125rem;font-weight:600;color:#AEC1DB;opacity:0;
}
.hs-cap-1{animation:hsCap1 var(--duration-scene) linear infinite}
.hs-cap-2{animation:hsCap2 var(--duration-scene) linear infinite}
.hs-cap-3{animation:hsCap3 var(--duration-scene) linear infinite}
.hs-cap-4{color:#C9EDE6;animation:hsCap4 var(--duration-scene) linear infinite}

@keyframes hsTangle{
  0%{opacity:0;stroke-dashoffset:560}
  5%{opacity:.5}
  16%{opacity:.5;stroke-dashoffset:0}
  26%{opacity:.45}
  36%{opacity:0}
  100%{opacity:0}
}
@keyframes hsScan{
  0%,19%{opacity:0;transform:translateY(-34px)}
  23%{opacity:.95}
  36%{opacity:0;transform:translateY(206px)}
  100%{opacity:0;transform:translateY(206px)}
}
@keyframes hsNoteA{
  0%{opacity:0;transform:translate(-66px,-54px) rotate(-16deg)}
  6%{opacity:1}
  30%{transform:translate(-66px,-54px) rotate(-16deg)}
  46%{transform:none}
  100%{transform:none;opacity:1}
}
@keyframes hsNoteB{
  0%{opacity:0;transform:translate(58px,-76px) rotate(13deg)}
  7%{opacity:1}
  31%{transform:translate(58px,-76px) rotate(13deg)}
  48%{transform:none}
  100%{transform:none;opacity:1}
}
@keyframes hsNoteC{
  0%{opacity:0;transform:translate(-92px,22px) rotate(9deg)}
  8%{opacity:1}
  32%{transform:translate(-92px,22px) rotate(9deg)}
  50%{transform:none}
  100%{transform:none;opacity:1}
}
@keyframes hsNoteD{
  0%{opacity:0;transform:translate(84px,28px) rotate(-11deg)}
  6%{opacity:1}
  33%{transform:translate(84px,28px) rotate(-11deg)}
  52%{transform:none}
  100%{transform:none;opacity:1}
}
@keyframes hsNoteE{
  0%{opacity:0;transform:translate(-18px,-92px) rotate(20deg)}
  9%{opacity:1}
  34%{transform:translate(-18px,-92px) rotate(20deg)}
  54%{transform:none}
  100%{transform:none;opacity:1}
}
@keyframes hsNoteF{
  0%{opacity:0;transform:translate(26px,46px) rotate(-19deg)}
  7%{opacity:1}
  35%{transform:translate(26px,46px) rotate(-19deg)}
  56%{transform:none}
  100%{transform:none;opacity:1}
}
@keyframes hsCardA{
  0%,34%{opacity:0;transform:scale(.93)}
  43%{opacity:1;transform:none}
  100%{opacity:1;transform:none}
}
@keyframes hsCardB{
  0%,37%{opacity:0;transform:scale(.93)}
  46%{opacity:1;transform:none}
  100%{opacity:1;transform:none}
}
@keyframes hsCardC{
  0%,40%{opacity:0;transform:scale(.93)}
  49%{opacity:1;transform:none}
  100%{opacity:1;transform:none}
}
@keyframes hsWire{
  0%,40%{opacity:0;stroke-dashoffset:96}
  50%{opacity:.85;stroke-dashoffset:0}
  66%{opacity:.85}
  76%{opacity:.16}
  100%{opacity:.16}
}
@keyframes hsOwner{
  0%,66%{opacity:.95;transform:none}
  78%,100%{opacity:.4;transform:translateY(-12px)}
}
@keyframes hsCheckA{
  0%,68%{opacity:0;transform:scale(.5)}
  76%,100%{opacity:1;transform:none}
}
@keyframes hsCheckB{
  0%,72%{opacity:0;transform:scale(.5)}
  80%,100%{opacity:1;transform:none}
}
@keyframes hsCheckC{
  0%,76%{opacity:0;transform:scale(.5)}
  84%,100%{opacity:1;transform:none}
}
@keyframes hsCap1{0%{opacity:0}3%,18%{opacity:1}22%,100%{opacity:0}}
@keyframes hsCap2{0%,21%{opacity:0}25%,34%{opacity:1}38%,100%{opacity:0}}
@keyframes hsCap3{0%,37%{opacity:0}41%,58%{opacity:1}62%,100%{opacity:0}}
@keyframes hsCap4{0%,61%{opacity:0}67%,93%{opacity:1}98%,100%{opacity:0}}

.about-photo{margin:0;border-radius:var(--radius-2xl);overflow:hidden;box-shadow:var(--shadow-md);max-width:480px}
.about-photo img{display:block;width:100%;height:auto}
.hero-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1-5);margin-top:var(--space-3)}
@media (max-width:639px){
  .hero .hero-ctas{flex-direction:column;align-items:stretch;flex-wrap:nowrap}
  .hero .hero-ctas .btn{width:100%;height:52px;min-height:52px}
}

/* ===== Grids de cards ===== */
.grid{display:grid;gap:var(--space-2)}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
.grid-4{grid-template-columns:1fr}
@media (min-width:640px){
  .grid-2{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1024px){
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(4,1fr)}
}

.card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--space-3);box-shadow:var(--shadow-xs);
  display:flex;flex-direction:column;gap:var(--space-1-5);
  transition:box-shadow var(--duration-base) var(--ease-standard),transform var(--duration-base) var(--ease-standard);
}
.card:hover{box-shadow:var(--shadow-sm);transform:translateY(-3px)}

.area-card{
  position:relative;
  overflow:hidden;
  transition:box-shadow var(--duration-base) var(--ease-standard),
             transform var(--duration-base) var(--ease-standard),
             border-color var(--duration-base) var(--ease-standard);
}
.area-card::before{
  content:"";
  position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--primary);
  transform:scaleY(0);transform-origin:top;
  transition:transform var(--duration-base) var(--ease-standard);
}
.area-card-head{
  display:flex;align-items:center;gap:var(--space-1-5);
}
.area-card-head .t-h5{margin:0;line-height:1.25}
.area-card-head .icon-badge{
  width:40px;height:40px;
  transition:transform var(--duration-base) var(--ease-standard);
}
.area-card-head .icon-badge svg{width:18px;height:18px}
.area-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-md);
  border-color:var(--primary);
}
.area-card:hover::before{transform:scaleY(1)}
.area-card:hover .icon-badge{transform:scale(1.08)}
@media (prefers-reduced-motion:reduce){
  .area-card,.area-card::before,.area-card-head .icon-badge{transition:none}
  .area-card:hover{transform:none}
}

/* ===== Icono en círculo ===== */
.icon-badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:var(--radius-full);flex:0 0 auto;
}
.icon-badge svg{width:22px;height:22px;stroke-width:1.75}
.icon-badge-navy{background:var(--navy);color:#fff}
.icon-badge-primary{background:var(--primary);color:#fff}
.icon-badge-soft{background:var(--primary-soft);color:var(--primary-soft-text)}

/* ===== Señales de síntomas (nunca palomitas) ===== */
.signal-list{display:flex;flex-direction:column;gap:var(--space-1-5)}
.signal-item{
  display:flex;align-items:flex-start;gap:var(--space-1-5);
  padding:var(--space-1-5);border-radius:var(--radius-md);
  background:var(--surface);border:1px solid var(--divider);
  cursor:pointer;text-align:left;width:100%;font:inherit;color:inherit;
  transition:border-color var(--duration-base) var(--ease-standard),
             box-shadow var(--duration-base) var(--ease-standard),
             transform var(--duration-base) var(--ease-standard),
             background var(--duration-base) var(--ease-standard);
}
.signal-item:hover,.signal-item:focus-visible{
  border-color:var(--primary);
  box-shadow:var(--shadow-sm);
  transform:translateX(4px);
}
.signal-item.is-on{
  border-color:var(--primary);
  background:var(--primary-soft);
  box-shadow:var(--shadow-xs);
}
.signal-item.is-on svg{color:var(--primary-soft-text)}
.signal-item svg{flex:0 0 auto;width:22px;height:22px;color:var(--navy);margin-top:2px}
.signal-item .signal-dot{opacity:0;transform-origin:center;transform:scale(.4);transition:opacity var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-standard)}
.signal-item.is-on .signal-dot{opacity:1;transform:scale(1)}
.signal-close{
  transition:color var(--duration-base) var(--ease-standard),transform var(--duration-base) var(--ease-standard);
}
.signal-close.is-lit{color:var(--primary-soft-text) !important;transform:scale(1.02)}

/* ===== Dato / estadística en callout ===== */
.stat-callout{
  display:flex;align-items:center;gap:var(--space-3);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--space-3);max-width:720px;margin:var(--space-4) auto 0;
  transition:box-shadow var(--duration-base) var(--ease-standard),transform var(--duration-base) var(--ease-standard),border-color var(--duration-base) var(--ease-standard);
}
.stat-callout:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
  border-color:var(--primary);
}
.stat-callout-number{font-weight:800;color:var(--navy);line-height:1;font-size:clamp(2.25rem,4vw + 1rem,3rem);flex:0 0 auto}
.stat-callout-body p{margin:0}
.stat-callout-source{display:block;margin-top:var(--space-05)}

/* ===== Oferta — dos productos ===== */
.offer-grid{display:grid;gap:var(--space-3)}
@media (min-width:768px){ .offer-grid{grid-template-columns:1fr 1fr} }
.offer-card{
  background:var(--surface);color:var(--text);border-radius:var(--radius-lg);
  padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2);
  box-shadow:var(--shadow-md);
  border:1px solid transparent;
  transition:transform var(--duration-base) var(--ease-standard),box-shadow var(--duration-base) var(--ease-standard),border-color var(--duration-base) var(--ease-standard);
}
.offer-card-label{color:var(--primary-soft-text);font-weight:700}

/* ===== Testimonios — carrusel, skeleton honesto, cero nombres inventados ===== */
.testimonial-carousel{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-2)}
.testimonial-viewport{flex:1 1 auto;min-width:0;overflow:hidden}
.testimonial-track{
  display:flex;align-items:stretch;gap:var(--space-2);margin:0;padding:2px 2px var(--space-1);
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.testimonial-track::-webkit-scrollbar{display:none}
.testimonial-track:focus-visible{outline:2px solid var(--focus);outline-offset:4px;border-radius:var(--radius-md)}
.testimonial-slide{flex:0 0 100%;min-width:0;scroll-snap-align:start;list-style:none;display:flex}
@media (min-width:1024px){
  .testimonial-slide{flex:0 0 calc((100% - 2 * var(--space-2)) / 3)}
}
.testimonial-card{
  flex:1;min-width:0;height:100%;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);padding:var(--space-3);
  display:flex;flex-direction:column;gap:var(--space-2);
}
.testimonial-stars{display:flex;justify-content:center;gap:2px;color:var(--star)}
.testimonial-stars svg{width:16px;height:16px}
.testimonial-card.skeleton .testimonial-stars{
  position:relative;z-index:2;
  background:var(--surface);box-shadow:0 0 0 4px var(--surface);
  border-radius:var(--radius-sm);
}
.testimonial-card .skeleton-label{flex:1 1 auto;display:flex;align-items:center;justify-content:center;text-align:center;padding:var(--space-1) 0 0}
.testimonial-person{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:0 0 auto;text-align:center}
.testimonial-avatar{width:96px;height:96px;border-radius:var(--radius-full);flex:0 0 auto;object-fit:cover;display:block}
.testimonial-card.skeleton .testimonial-avatar{
  position:relative;z-index:2;
  box-shadow:0 0 0 3px var(--surface);
}
.testimonial-arrow{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:var(--radius-full);
  background:var(--navy-soft);color:var(--navy);border:1px solid var(--border);cursor:pointer;
  transition:background var(--duration-base) var(--ease-standard),color var(--duration-base) var(--ease-standard),transform var(--duration-fast) var(--ease-standard);
}
.testimonial-arrow svg{width:20px;height:20px}
.testimonial-arrow:hover:not([disabled]){background:var(--primary-soft);color:var(--primary-soft-text)}
.testimonial-arrow:active:not([disabled]){transform:scale(.94)}
.testimonial-arrow[disabled]{opacity:.35;cursor:not-allowed}
@media (prefers-reduced-motion:reduce){
  .testimonial-arrow:active:not([disabled]){transform:none}
}

/* ===== Proceso — pasos numerados con línea conectora ===== */
.process{display:grid;gap:var(--space-4);position:relative}
@media (min-width:768px){
  .process{grid-template-columns:repeat(4,1fr)}
  .process::before{
    content:'';position:absolute;top:24px;left:12.5%;right:12.5%;height:2px;
    background:var(--divider);z-index:0;
  }
}
.process-step{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-1-5);position:relative;z-index:1}
.process-num{
  width:48px;height:48px;border-radius:var(--radius-full);background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.0625rem;
  border:4px solid var(--surface);
  transition:transform var(--duration-base) var(--ease-standard),box-shadow var(--duration-base) var(--ease-standard);
}
.process-step:hover .process-num{
  transform:scale(1.1);
  box-shadow:var(--shadow-md);
}

/* ===== Nota condicional / de aviso ===== */
.conditional-note{
  display:flex;align-items:flex-start;gap:var(--space-1-5);
  background:var(--info-soft);border:1px solid var(--info);color:var(--text);
  border-radius:var(--radius-md);padding:var(--space-2);font-size:.875rem;line-height:1.6;
}
.conditional-note svg{flex:0 0 auto;width:20px;height:20px;color:var(--info);margin-top:1px}
.conditional-note.warning{background:var(--warning-soft);border-color:var(--warning)}
.conditional-note.warning svg{color:var(--warning)}

/* ===== Acordeón FAQ (native details/summary) ===== */
.accordion{display:flex;flex-direction:column;gap:var(--space-1-5)}
.accordion-item{
  border:1px solid var(--border);border-radius:var(--radius-md);background:var(--card);overflow:hidden;
  transition:border-color var(--duration-base) var(--ease-standard),box-shadow var(--duration-base) var(--ease-standard);
}
.accordion-item:hover,.accordion-item[open]{
  border-color:var(--primary);
  box-shadow:var(--shadow-sm);
}
.accordion-item summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);
  min-height:56px;padding:var(--space-1-5) var(--space-2);font-weight:600;
}
.accordion-item summary::-webkit-details-marker{display:none}
.accordion-item summary:hover{background:var(--hover)}
.accordion-icon{flex:0 0 auto;width:20px;height:20px;color:var(--primary);transition:transform var(--duration-base) var(--ease-standard)}
.accordion-item[open] .accordion-icon{transform:rotate(45deg)}
.accordion-body{padding:0 var(--space-2) var(--space-2);color:var(--text-2);font-size:.9375rem}
.accordion-draft{
  display:inline-flex;align-items:center;margin-top:var(--space-1);
  padding:2px var(--space-1);border-radius:var(--radius-xs);
  background:var(--warning-soft);color:var(--warning);font-size:.6875rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;
}

/* ===== Formulario calificador ===== */
.form-grid{
  display:grid;
  gap:var(--space-2);
  grid-template-columns:1fr;
  align-items:start;
}
@media (min-width:640px){
  .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.field{display:flex;flex-direction:column;gap:var(--space-05);min-width:0}
.field-full{grid-column:1 / -1}
.field label{
  font-size:.875rem;font-weight:600;
  min-height:2.6em;
  display:flex;align-items:flex-end;
}
.field .required{color:var(--error)}
.field input,.field select,.field textarea{
  width:100%;min-height:48px;height:48px;padding:0 var(--space-1-5);
  border:1px solid var(--border-strong);border-radius:var(--radius-md);
  background:var(--surface);color:var(--text);box-sizing:border-box;
  transition:border-color var(--duration-instant) var(--ease-standard),box-shadow var(--duration-instant) var(--ease-standard);
}
.field select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2355606F' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  padding-right:40px;
}
.field textarea{min-height:112px;height:auto;padding:var(--space-1-5)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);
}
.field-help{font-size:.8125rem;color:var(--text-2)}
.field-error{
  display:none;align-items:center;gap:var(--space-05);
  font-size:.8125rem;color:var(--error);font-weight:500;
}
.field-error svg{flex:0 0 auto;width:14px;height:14px}
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{border-color:var(--error)}
.field.is-invalid .field-error{display:flex}
.checkbox-field{display:flex;align-items:flex-start;gap:var(--space-1-5)}
.checkbox-field input{width:20px;height:20px;min-height:0;flex:0 0 auto;margin-top:2px}
.form-status{
  display:none;align-items:flex-start;gap:var(--space-1-5);
  border-radius:var(--radius-md);padding:var(--space-2);font-size:.9375rem;line-height:1.5;
}
.form-status.is-visible{display:flex}
.form-status.success{background:var(--success-soft);color:var(--success)}
.form-status.error{background:var(--danger-soft, #fde8e8);color:var(--danger, #b42318)}
.form-status svg{flex:0 0 auto;width:22px;height:22px;margin-top:1px}
/* honeypot anti-spam */
.hp-field{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}

/* ===== Footer ===== */
.site-footer{background:var(--navy);color:var(--text-inverse);padding-block:var(--space-6) var(--space-4)}
.footer-cta{
  display:flex;flex-direction:column;gap:var(--space-2);align-items:flex-start;
  padding-bottom:var(--space-5);margin-bottom:var(--space-5);
  border-bottom:1px solid rgba(255,255,255,.14);
}
@media (min-width:768px){
  .footer-cta{flex-direction:row;align-items:center;justify-content:space-between}
}
.footer-cta-actions{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1-5);
  flex:0 0 auto;
}
.footer-cta-actions .btn{height:52px;min-height:52px}
@media (max-width:640px){
  .footer-cta-actions{flex-direction:column;align-items:stretch;width:100%}
  .footer-cta-actions .btn{width:100%}
}
.footer-grid{display:grid;gap:var(--space-3)}
@media (min-width:640px){ .footer-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1024px){ .footer-grid{grid-template-columns:repeat(3,1fr)} }
.footer-wordmark{font-weight:800;font-size:1.125rem;letter-spacing:-.01em}
.footer-tagline{color:#AEC1DB;font-size:.8125rem;margin-top:var(--space-05)}
.footer-social{display:flex;gap:var(--space-1);margin-top:var(--space-2);list-style:none;padding:0}
.footer-social a{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:999px;
  color:#EDF1F7;border:1px solid rgba(255,255,255,.18);
  transition:background var(--duration-base) var(--ease-standard),color var(--duration-base) var(--ease-standard),border-color var(--duration-base) var(--ease-standard),transform var(--duration-base) var(--ease-standard);
}
.footer-social a:hover,.footer-social a:focus-visible{
  color:#fff;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4);
  transform:translateY(-2px);text-decoration:none;
}
.footer-social svg{width:18px;height:18px;display:block}
.footer-heading{font-size:.8125rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#AEC1DB;margin-bottom:var(--space-1-5)}
.footer-list{display:flex;flex-direction:column;gap:var(--space-1)}
.footer-list a{color:#EDF1F7}
.footer-list a:hover{color:#fff}
.footer-bottom{
  display:flex;flex-direction:column;gap:var(--space-1);flex-wrap:wrap;
  padding-top:var(--space-3);border-top:1px solid rgba(255,255,255,.14);
  font-size:.8125rem;color:#AEC1DB;
}
.footer-credit a{color:#EDF1F7}
.footer-credit a:hover{color:#fff}
@media (min-width:768px){ .footer-bottom{flex-direction:row;justify-content:space-between;align-items:center} }

/* ===== Página interior — header simple ===== */
.page-hero{
  padding-block:var(--space-6) var(--space-5);
  background:linear-gradient(180deg,var(--primary-soft) 0%,var(--navy-soft) 55%,var(--bg) 100%);
}

/* ===== Servicios ===== */
.service-card{gap:var(--space-2)}
.service-card ul{display:flex;flex-direction:column;gap:var(--space-1)}
.service-card li{display:flex;gap:var(--space-1);font-size:.9375rem;color:var(--text-2)}
.service-card li svg{flex:0 0 auto;width:16px;height:16px;color:var(--primary);margin-top:3px}

/* ===== Aviso de precio ===== */
.price-note{
  background:var(--primary-soft);border:1px solid var(--primary);border-radius:var(--radius-lg);
  padding:var(--space-3);display:flex;gap:var(--space-2);align-items:flex-start;
}
.price-note svg{flex:0 0 auto;width:24px;height:24px;color:var(--primary-soft-text)}

/* ===== Contacto — bloques de canal ===== */
.contact-channels{display:flex;flex-direction:column;gap:var(--space-2)}
.contact-channel{
  display:flex;gap:var(--space-2);align-items:flex-start;
  border-radius:var(--radius-md);
  transition:transform var(--duration-base) var(--ease-standard);
}
.contact-channel:hover{transform:translateY(-3px)}
.contact-channel .icon-badge{width:40px;height:40px}
.contact-channel .icon-badge svg{width:18px;height:18px}
.contact-social{display:flex;gap:var(--space-1);margin-top:var(--space-1);list-style:none;padding:0}
.contact-social a{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:999px;
  color:var(--navy);border:1px solid var(--border);background:var(--surface);
  transition:background var(--duration-base) var(--ease-standard),border-color var(--duration-base) var(--ease-standard),transform var(--duration-base) var(--ease-standard),color var(--duration-base) var(--ease-standard);
}
.contact-social a:hover,.contact-social a:focus-visible{
  color:var(--primary);border-color:var(--primary);background:var(--primary-soft);
  transform:translateY(-2px);text-decoration:none;
}
.contact-social svg{width:18px;height:18px;display:block}
.contact-sla{margin-top:var(--space-05)}

/* ===== Foto/teaser Regina ===== */
.avatar-media{width:100%;max-width:280px;aspect-ratio:1/1;border-radius:var(--radius-2xl)}

/* ===== Aviso de privacidad — página legal ===== */
.legal-banner{
  display:flex;align-items:flex-start;gap:var(--space-1-5);
  background:var(--warning-soft);border:1px solid var(--warning);color:var(--text);
  border-radius:var(--radius-md);padding:var(--space-2);font-size:.9375rem;line-height:1.6;
  margin-bottom:var(--space-4);
}
.legal-banner svg{flex:0 0 auto;width:22px;height:22px;color:var(--warning);margin-top:1px}
.legal-body{display:flex;flex-direction:column;gap:var(--space-3);max-width:72ch}
.legal-body h2{font-weight:700;font-size:1.125rem;color:var(--navy);margin-top:var(--space-2)}

/* ===== Entrada de secciones al scroll ===== */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity var(--duration-slow) var(--ease-standard),transform var(--duration-slow) var(--ease-standard);
}
.reveal.reveal-in{opacity:1;transform:none}
.reveal:nth-child(2){transition-delay:60ms}
.reveal:nth-child(3){transition-delay:120ms}
.reveal:nth-child(4){transition-delay:180ms}
.reveal:nth-child(5){transition-delay:240ms}
.reveal:nth-child(6){transition-delay:300ms}

.lift-card{
  text-align:center;
  transition:box-shadow var(--duration-base) var(--ease-standard),
             transform var(--duration-base) var(--ease-standard),
             border-color var(--duration-base) var(--ease-standard);
}
.lift-card .icon-badge{margin-inline:auto}
.lift-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-md);
  border-color:var(--primary);
}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .btn:hover,.signal-item:hover,.signal-item:focus-visible,.stat-callout:hover,.lift-card:hover,.process-step:hover .process-num,.area-card:hover,.footer-social a:hover,.footer-social a:focus-visible,.contact-social a:hover,.contact-social a:focus-visible,.contact-channel:hover{transform:none}
  .signal-close.is-lit{transform:none}
  .whatsapp-float{animation:none;opacity:1;transform:none}
  .hero-panel li{opacity:1;transform:none;transition:none}
  .hero-check-ring,.hero-check-mark{stroke-dashoffset:0;animation:none !important}
  .hero-scene [data-anim],.hs-cap{animation:none !important}
}