:root{
  --fondo:#F3F8F1; --fondo2:#E6F1E8; --blanco:#fff; --bosque:#0D3B30; --bosque2:#134A3C; --verde:#176650; --hoja:#2F8F6A;
  --teal:#3E9C8A; --agua:#7CC9B8; --brote:#8BD3A5; --menta:#D6EEDD; --texto2:#3D5A4C; --claro:#E7F4EC;
  --wa:#25D366; --violeta:#6A45C2; --violeta-c:#EFE8FC; --sol:#E9C46A; --estrella:#F2B01E;
  --acento:var(--hoja); --acento-txt:var(--verde); --acento-c:var(--menta);
  --borde:rgba(13,59,48,.12); --sombra:0 1px 2px rgba(13,59,48,.06), 0 24px 48px -28px rgba(13,59,48,.38);
  --e:cubic-bezier(.22,1,.36,1); --rebote:cubic-bezier(.34,1.56,.64,1);
  --disp:"Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --sans:"Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --leaf:48px 10px 48px 10px; --leaf-i:10px 48px 10px 48px; --gut:16px;
}
.p-colon{ --acento:var(--violeta); --acento-txt:var(--violeta); --acento-c:var(--violeta-c); }
@media (min-width:768px){ :root{ --gut:32px; } }
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{ -webkit-text-size-adjust:100%; scroll-padding-top:96px; }
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }
body{ background:var(--fondo); color:var(--bosque); font:400 1.0625rem/1.6 var(--sans); overflow-x:hidden; overflow-x:clip; -webkit-font-smoothing:antialiased; }
main{ overflow-x:clip; }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; }
button,input,textarea{ font:inherit; color:inherit; }
:focus-visible{ outline:3px solid var(--hoja); outline-offset:3px; border-radius:8px; }
.sr{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.saltar{ position:fixed; left:12px; top:-60px; z-index:200; background:var(--bosque); color:#fff; padding:.7em 1.1em; border-radius:999px; text-decoration:none; transition:top .2s; }
.saltar:focus{ top:12px; }
.wrap{ width:min(1180px, 100% - var(--gut) * 2); margin-inline:auto; }
section{ position:relative; scroll-margin-top:84px; }
h1,h2,h3,h4{ font-family:var(--disp); font-weight:700; font-stretch:84%; letter-spacing:-.025em; line-height:1.02; text-wrap:balance; }
h2{ font-size:clamp(2.1rem, 1.3rem + 3.6vw, 4rem); }
h3{ font-size:clamp(1.3rem, 1.1rem + .8vw, 1.75rem); line-height:1.08; }
p{ text-wrap:pretty; }
.etiqueta{ display:inline-flex; align-items:center; gap:.45em; padding:.42em .95em .42em .6em; border-radius:999px; background:var(--menta); color:var(--verde); font:700 .85rem/1.2 var(--sans); margin-bottom:1rem; }
.etiqueta svg{ width:16px; height:16px; flex:none; }
.intro{ max-width:780px; margin-bottom:clamp(32px, 5vw, 56px); }
.intro.centro{ text-align:center; margin-inline:auto; }
.intro > p:not(.etiqueta){ font-size:1.12rem; color:var(--texto2); margin-top:1rem; max-width:58ch; }
.intro.centro > p:not(.etiqueta){ margin-inline:auto; }
.bloque{ padding-block:clamp(72px, 10vw, 128px); }
.acento{ color:var(--acento-txt); }

/* ---------- Botones + onda (boton-onda-click) ---------- */
.btn{ position:relative; overflow:hidden; isolation:isolate; display:inline-flex; align-items:center; justify-content:center; gap:.55em; min-height:54px; padding:.85em 1.5em;
  border-radius:999px; border:2px solid transparent; font:700 1rem/1.15 var(--sans); text-decoration:none; text-align:center; cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:transform .35s var(--e), background-color .3s, color .3s, border-color .3s, box-shadow .35s; }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:scale(.98); }
.btn svg{ width:1.25em; height:1.25em; flex:none; }
.btn--wa{ background:var(--wa); color:var(--bosque); box-shadow:0 14px 30px -16px rgba(37,211,102,.95); }
.btn--wa:hover{ background:#41E07F; }
.btn--verde{ background:var(--verde); color:#fff; }
.btn--verde:hover{ background:var(--bosque2); }
.btn--violeta{ background:var(--violeta); color:#fff; box-shadow:0 14px 30px -16px rgba(106,69,194,.9); }
.btn--violeta:hover{ background:#5B3AB0; }
.btn--linea{ border-color:var(--bosque); color:var(--bosque); background:rgba(255,255,255,.55); }
.btn--linea:hover{ background:var(--bosque); color:#fff; }
.btn--clara{ border-color:rgba(231,244,236,.7); color:#fff; }
.btn--clara:hover{ background:rgba(255,255,255,.12); }
.btn--chico{ min-height:44px; padding:.55em 1.1em; font-size:.92rem; }
.onda-i{ position:absolute; border-radius:50%; pointer-events:none; background:currentColor; opacity:.28; z-index:-1; }
.nota{ display:flex; align-items:center; gap:.5em; font-size:.92rem; color:var(--texto2); }
.nota svg{ width:18px; height:18px; flex:none; color:var(--hoja); }

/* ---------- Header isla ---------- */
.cab{ position:sticky; top:0; z-index:60; padding:10px var(--gut) 0; pointer-events:none; }
.isla{ pointer-events:auto; max-width:1180px; margin:0 auto; display:flex; align-items:center; gap:10px; padding:7px 7px 7px 14px; border-radius:999px;
  background:rgba(255,255,255,.72); -webkit-backdrop-filter:blur(16px) saturate(1.4); backdrop-filter:blur(16px) saturate(1.4); border:1px solid rgba(255,255,255,.85);
  box-shadow:0 1px 0 rgba(13,59,48,.04), 0 12px 30px -20px rgba(13,59,48,.3); transition:box-shadow .4s, background-color .4s; }
.cab.scrolled .isla{ background:rgba(255,255,255,.9); box-shadow:0 1px 0 rgba(13,59,48,.05), 0 18px 40px -22px rgba(13,59,48,.45); }
.logo{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; border-radius:12px; flex:none; }
.logo img{ width:36px; height:36px; transition:transform .9s var(--rebote); }
.logo:hover img{ transform:rotate(90deg) scale(1.06); }
.logo__t{ display:flex; flex-direction:column; line-height:1; }
.logo__t b{ font:800 1.3rem/1 var(--disp); font-stretch:92%; letter-spacing:-.02em; }
.logo__t small{ font:700 .62rem/1.3 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--verde); }
.nav{ margin-left:auto; }
.nav ul{ display:flex; gap:2px; list-style:none; padding:0; }
.nav a{ display:block; padding:.55em .8em; border-radius:999px; text-decoration:none; font-weight:600; font-size:.93rem; white-space:nowrap; transition:background-color .25s, color .25s; }
.nav a:hover{ background:var(--menta); color:var(--verde); }
.portal{ position:relative; width:44px; height:44px; flex:none; border-radius:50%; display:grid; place-items:center; border:1.5px solid var(--borde); background:rgba(255,255,255,.75); text-decoration:none; transition:background-color .25s, border-color .25s; }
.portal:hover{ background:var(--menta); border-color:var(--hoja); }
.portal svg{ width:20px; height:20px; color:var(--verde); }
.tip{ position:absolute; top:calc(100% + 10px); left:50%; translate:-50% 4px; background:var(--bosque); color:#fff; font:600 .75rem/1.2 var(--sans); white-space:nowrap; padding:.45em .75em; border-radius:10px; opacity:0; pointer-events:none; transition:opacity .2s, translate .25s var(--e); }
.portal:hover .tip,.portal:focus-visible .tip{ opacity:1; translate:-50% 0; }
.cab-wa{ flex:none; }
.wa-ic{ display:none; width:44px; height:44px; flex:none; border-radius:50%; place-items:center; background:var(--wa); color:var(--bosque); text-decoration:none; }
.wa-ic svg{ width:22px; height:22px; }
.hamb{ display:none; width:44px; height:44px; border-radius:50%; border:0; background:var(--bosque); color:#fff; cursor:pointer; position:relative; flex:none; }
.hamb span{ position:absolute; left:13px; right:13px; height:2px; background:currentColor; border-radius:2px; transition:transform .45s var(--e), opacity .2s; }
.hamb span:nth-child(1){ top:16px; } .hamb span:nth-child(2){ top:21px; } .hamb span:nth-child(3){ top:26px; }
.abierto-menu .hamb span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.abierto-menu .hamb span:nth-child(2){ opacity:0; }
.abierto-menu .hamb span:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }
.menu-movil{ display:none; }
@media (max-width:1099px){
  .nav,.isla > .portal,.isla > .cab-wa{ display:none; }
  .wa-ic{ display:grid; margin-left:auto; }
  .hamb{ display:block; }
  .menu-movil{ display:flex; position:fixed; inset:0; z-index:-1; flex-direction:column; justify-content:flex-end; gap:18px; padding:100px var(--gut) 28px; pointer-events:auto;
    background:radial-gradient(120% 60% at 100% 0%, #1E6F5A 0%, transparent 60%), var(--bosque); color:#fff;
    clip-path:circle(0% at calc(100% - 40px) 34px); visibility:hidden; transition:clip-path .7s cubic-bezier(.76,0,.24,1), visibility 0s .7s; overflow:auto; }
  .abierto-menu .menu-movil{ clip-path:circle(150% at calc(100% - 40px) 34px); visibility:visible; transition:clip-path .7s cubic-bezier(.76,0,.24,1), visibility 0s; }
  .abierto-menu .isla{ background:#fff; }
  .menu-movil ul{ list-style:none; padding:0; display:grid; gap:2px; }
  .menu-movil ul a{ display:flex; align-items:baseline; gap:12px; font:700 clamp(2rem, 9vw, 3.2rem)/1.08 var(--disp); font-stretch:80%; text-decoration:none; letter-spacing:-.03em; padding:.08em 0; }
  .menu-movil ul a small{ font:600 .82rem var(--sans); color:var(--brote); letter-spacing:0; }
  .menu-movil .portal-m{ display:inline-flex; align-items:center; gap:.6em; align-self:flex-start; padding:.6em 1em; border-radius:999px; border:1.5px solid rgba(231,244,236,.35); text-decoration:none; font-weight:700; }
  .menu-movil .portal-m svg{ width:20px; height:20px; color:var(--brote); }
  .menu-movil .acc{ display:grid; gap:10px; }
}

/* ---------- Hero ---------- */
.hero{ margin-top:-68px; padding:112px 0 clamp(56px, 7vw, 96px); overflow:hidden; isolation:isolate; }
.aurora{ position:absolute; inset:0; z-index:-2; overflow:hidden; background:linear-gradient(180deg, #EAF5EC 0%, var(--fondo) 75%); -webkit-mask-image:linear-gradient(#000 70%, transparent); mask-image:linear-gradient(#000 70%, transparent); }
.aurora i{ position:absolute; left:var(--l); top:var(--t); width:var(--w); aspect-ratio:1.2; border-radius:50%; background:radial-gradient(closest-side, var(--c), transparent); opacity:var(--o,.7); filter:blur(40px); }
.aurora i:nth-child(1){ --c:#B9E6C9; --l:-15%; --t:-20%; --w:60vmax; }
.aurora i:nth-child(2){ --c:#BFE7DF; --l:50%; --t:-12%; --w:50vmax; --o:.8; }
.aurora i:nth-child(3){ --c:#E3D8FA; --l:62%; --t:42%; --w:36vmax; --o:.55; }
@media (prefers-reduced-motion:no-preference) and (hover:hover){
  .aurora i{ will-change:transform; animation:deriva var(--d,24s) ease-in-out infinite alternate; }
  .aurora i:nth-child(1){ --d:23s; } .aurora i:nth-child(2){ --d:29s; animation-delay:-9s; } .aurora i:nth-child(3){ --d:31s; animation-delay:-4s; }
}
@keyframes deriva{ 50%{ transform:translate3d(6vmax, 4vmax, 0) scale(1.12); } 100%{ transform:translate3d(-4vmax, 8vmax, 0) scale(.92); } }
.hero__grid{ display:grid; gap:clamp(36px, 5vw, 64px); align-items:center; }
.h1{ font-size:clamp(2.6rem, 1.4rem + 5.6vw, 6.2rem); font-stretch:78%; line-height:.94; letter-spacing:-.035em; }
.h1 .g{ color:var(--hoja); } .h1 .v{ color:var(--violeta); }
.lead{ font-size:clamp(1.08rem, 1rem + .45vw, 1.26rem); color:var(--texto2); max-width:50ch; margin-top:1.3rem; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:1.8rem; }
.confianza{ list-style:none; padding:0; margin-top:1.6rem; display:flex; flex-wrap:wrap; gap:8px; }
.confianza li{ display:inline-flex; align-items:center; gap:.45em; padding:.45em .85em; border-radius:999px; background:rgba(255,255,255,.75); border:1px solid var(--borde); font-weight:600; font-size:.88rem; }
.confianza svg{ width:16px; height:16px; color:var(--hoja); flex:none; }
.confianza .est{ color:#C98A00; letter-spacing:-.05em; }
.hero__foto{ position:relative; padding:28px 18px 26px 0; }
.marco{ position:relative; border-radius:110px 16px 110px 16px; overflow:hidden; aspect-ratio:4/3.3; background:var(--menta); box-shadow:0 40px 70px -40px rgba(13,59,48,.55); }
.marco img{ width:100%; height:100%; object-fit:cover; object-position:42% 50%; }
.trebol{ position:absolute; right:-6px; top:-8px; width:clamp(110px, 26%, 170px); overflow:visible; filter:drop-shadow(0 18px 20px rgba(13,59,48,.25)); transform-origin:70% 100%; }
.tallo{ fill:none; stroke:url(#g-tallo); stroke-width:9; stroke-linecap:round; stroke-dasharray:1; }
.hoja-g .h{ transform-origin:0 0; transform-box:view-box; }
.vena{ fill:none; stroke:rgba(255,255,255,.55); stroke-width:2.2; stroke-linecap:round; }
.chip-f{ position:absolute; display:inline-flex; align-items:center; gap:.5em; padding:.6em 1em; border-radius:999px; background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:var(--sombra); font-weight:700; font-size:clamp(.8rem, .74rem + .25vw, .92rem); white-space:nowrap; }
.chip-f .dot{ width:9px; height:9px; border-radius:50%; background:var(--wa); box-shadow:0 0 0 0 rgba(37,211,102,.6); animation:pulso 2s infinite; }
@keyframes pulso{ 70%{ box-shadow:0 0 0 9px rgba(37,211,102,0); } 100%{ box-shadow:0 0 0 0 rgba(37,211,102,0); } }
.chip-f--abajo{ left:12px; bottom:0; }
.chip-f--rating{ left:-4px; top:6px; display:none; }
.chip-f--rating .est{ color:#C98A00; letter-spacing:-.06em; }
.hojitas{ position:absolute; inset:-10% -5%; pointer-events:none; z-index:-1; }
.hojita{ position:absolute; left:var(--x); top:-8%; width:var(--t); height:var(--t); opacity:var(--o,.7); }
.hojita svg{ width:100%; height:100%; fill:var(--c, var(--brote)); animation:cae var(--d) linear var(--r) infinite; }
@keyframes cae{ 0%{ transform:translate3d(0, -10vh, 0) rotate(0deg); } 50%{ transform:translate3d(var(--deriva), 50vh, 0) rotate(200deg); } 100%{ transform:translate3d(0, 110vh, 0) rotate(400deg); } }
@media (max-width:599px){ .hero__cta .btn{ flex:1 1 100%; } }
@media (max-width:959px){ .hero__foto{ max-width:620px; } }
@media (min-width:960px){
  .chip-f--rating{ display:inline-flex; }
  .hero{ padding-top:150px; }
  .hero__grid{ grid-template-columns:1.02fr .98fr; }
  .hero__foto{ padding:34px 24px 30px 0; }
}
@media (prefers-reduced-motion:no-preference){
  .ent{ animation:sube 1s var(--e) both; animation-delay:var(--d,0s); }
  .h1 .w{ display:inline-block; animation:sube-w 1.1s var(--e) both; animation-delay:calc(.1s + var(--i) * .08s); }
  .marco{ animation:abre 1.3s cubic-bezier(.76,0,.24,1) .25s both; }
  .marco img{ animation:acerca 2.2s var(--e) .25s both; }
  .tallo{ animation:dibuja 1.2s cubic-bezier(.65,0,.35,1) 1s both; }
  .hoja-g .h{ animation:brota 1s var(--rebote) both; animation-delay:calc(1.5s + var(--i) * .14s); }
  .trebol{ animation:mece 9s ease-in-out 3s infinite; }
  .chip-f{ animation:pop .8s var(--rebote) both; }
  .chip-f--rating{ animation-delay:1.9s; } .chip-f--abajo{ animation-delay:2.1s; }
}
@keyframes sube{ from{ opacity:0; transform:translateY(20px); } }
@keyframes sube-w{ from{ opacity:0; transform:translateY(.45em) rotate(3deg); } }
@keyframes abre{ from{ clip-path:inset(100% 0 0 0); } to{ clip-path:inset(0 0 0 0); } }
@keyframes acerca{ from{ transform:scale(1.18); } }
@keyframes dibuja{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }
@keyframes brota{ from{ transform:scale(0) rotate(-40deg); opacity:0; } }
@keyframes mece{ 0%,100%{ rotate:0deg; } 30%{ rotate:4deg; } 70%{ rotate:-3deg; } }
@keyframes pop{ from{ opacity:0; scale:.6; } }

/* ---------- Cinta (marquee-infinito) ---------- */
.cinta{ background:var(--bosque); color:var(--claro); overflow:hidden; padding:16px 0; rotate:-1.2deg; margin:0 -2% 40px; position:relative; z-index:2; }
.cinta__pista{ display:flex; width:max-content; }
.cinta__grupo{ display:flex; align-items:center; gap:24px; padding-right:24px; font:700 clamp(1.05rem, .9rem + .9vw, 1.5rem)/1 var(--disp); font-stretch:84%; white-space:nowrap; }
.cinta__grupo svg{ width:20px; height:20px; color:var(--brote); }
@media (prefers-reduced-motion:no-preference){ .cinta__pista{ animation:cinta 40s linear infinite; } }
@keyframes cinta{ to{ transform:translateX(-50%); } }

/* ---------- Reveal "hoja que se abre" ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .rv{ opacity:0; clip-path:inset(0 0 22% 0 round 32px); translate:0 28px; transition:opacity .8s var(--e) var(--d,0s), clip-path 1.1s var(--e) var(--d,0s), translate 1.1s var(--e) var(--d,0s); }
  .js .rv.in{ opacity:1; clip-path:inset(-20% -20% -20% -20% round 0); translate:0 0; }
}

/* ---------- Cómo funciona: trébol fijo (index) ---------- */
@property --pr{ syntax:'<number>'; inherits:true; initial-value:0; }
.proc{ background:radial-gradient(60% 50% at 90% 0%, rgba(62,156,138,.35), transparent 70%), radial-gradient(50% 40% at 0% 70%, rgba(47,143,106,.22), transparent 70%), var(--bosque); color:var(--claro); }
.proc .etiqueta{ background:rgba(139,211,165,.16); color:var(--brote); }
.proc h2,.proc h3{ color:#fff; }
.proc .intro > p:not(.etiqueta){ color:#CFE6D8; }
.proc__grid{ display:grid; gap:14px; view-timeline:--proc block; }
.proc__fijo{ display:none; }
.proc__pasos{ list-style:none; padding:0; display:grid; gap:14px; }
.paso{ position:relative; padding:22px 22px 24px; border-radius:var(--leaf); background:rgba(255,255,255,.06); border:1px solid rgba(231,244,236,.14); }
.paso:nth-child(even){ border-radius:var(--leaf-i); }
.paso__n{ display:inline-flex; align-items:center; gap:10px; font:700 .9rem var(--sans); color:var(--brote); margin-bottom:.6rem; }
.paso__n svg{ width:40px; height:40px; }
.paso h3{ font-size:clamp(1.5rem, 1.2rem + 1.4vw, 2.6rem); }
.paso p{ color:#CFE6D8; margin-top:.6rem; font-size:1.05rem; max-width:42ch; }
.proc__cta{ margin-top:clamp(28px, 4vw, 44px); display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.proc__trebol{ width:100%; height:100%; overflow:visible; }
.proc__trebol .base{ fill:rgba(255,255,255,.07); stroke:rgba(231,244,236,.18); stroke-width:1; }
.proc__trebol .lleno{ fill:url(#g-proc); transform:scale(0); transition:transform .9s var(--rebote); }
.proc__trebol[data-paso="1"] .l1 .lleno,.proc__trebol[data-paso="2"] :is(.l1,.l2) .lleno,.proc__trebol[data-paso="3"] :is(.l1,.l2,.l3) .lleno,.proc__trebol[data-paso="4"] .lleno{ transform:scale(1); }
.proc__trebol .num{ font:800 34px var(--disp); fill:var(--bosque); text-anchor:middle; dominant-baseline:central; }
.anillo-bg{ fill:none; stroke:rgba(231,244,236,.12); stroke-width:3; }
.anillo{ fill:none; stroke:var(--brote); stroke-width:3.5; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--pr)); }
@media (min-width:900px){
  .proc__grid{ grid-template-columns:1fr 1fr; gap:clamp(32px, 6vw, 96px); }
  .proc__fijo{ display:grid; position:sticky; top:calc(50vh - min(40vw, 440px) / 2 + 30px); height:min(40vw, 440px); place-items:center; }
  .proc__pasos{ gap:0; }
  .paso{ min-height:58vh; display:flex; flex-direction:column; justify-content:center; background:none; border:0; padding:40px 0; opacity:.32; transition:opacity .6s var(--e); }
  .paso.activo{ opacity:1; }
  .paso__n svg{ display:none; }
  @media (prefers-reduced-motion:no-preference){
    @supports ((animation-timeline: view()) and (animation-range: entry)){
      .proc__grid{ animation:proc-av linear both; animation-timeline:--proc; animation-range:contain 0% contain 100%; }
      @keyframes proc-av{ to{ --pr:1; } }
    }
  }
}
@media (prefers-reduced-motion:reduce){ .proc__grid{ --pr:1; } .paso{ opacity:1!important; } }

/* ---------- Pasos compactos (páginas de sucursal) ---------- */
.pasos4{ list-style:none; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pasos4 li{ padding:20px 18px; border-radius:var(--leaf); background:#fff; border:1px solid var(--borde); box-shadow:var(--sombra); }
.pasos4 li:nth-child(even){ border-radius:var(--leaf-i); }
.pasos4 svg{ width:44px; height:44px; margin-bottom:12px; }
.pasos4 .lleno{ fill:var(--acento); transform-origin:0 0; transition:transform .8s var(--rebote) calc(var(--i) * .18s + .2s); }
@media (prefers-reduced-motion:no-preference){ .js .pasos4:not(.in) .lleno{ transform:scale(0); } }
.pasos4 h3{ font-size:clamp(1.15rem, 1rem + .6vw, 1.45rem); }
.pasos4 p{ color:var(--texto2); margin-top:.4rem; font-size:.97rem; }
@media (min-width:900px){ .pasos4{ grid-template-columns:repeat(4, 1fr); gap:16px; } }
.chips{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin-top:24px; }
.chips li{ font-size:.9rem; font-weight:700; padding:.45em .95em; border-radius:999px; background:var(--acento-c); color:var(--acento-txt); }

/* ---------- Cotizador (formulario-conversacional) ---------- */
.cotiza{ display:grid; gap:clamp(20px, 3vw, 36px); background:#fff; border-radius:var(--leaf); padding:clamp(22px, 4vw, 44px); box-shadow:var(--sombra); border:1px solid var(--borde); }
.cotiza__t{ display:flex; align-items:center; gap:.5em; font-size:clamp(1.4rem, 1.2rem + 1vw, 2rem); margin-bottom:.4rem; }
.cotiza__t svg{ width:30px; height:30px; color:var(--wa); flex:none; }
.cotiza__sub{ color:var(--texto2); }
.campos{ display:grid; gap:22px; margin-top:22px; }
.campos fieldset{ border:0; padding:0; min-width:0; }
.campos legend,.campos label.lab{ display:flex; align-items:center; gap:.55em; font-weight:700; margin-bottom:.7rem; }
.pn{ display:inline-grid; place-items:center; width:26px; height:26px; border-radius:9px 3px 9px 3px; background:var(--bosque); color:#fff; font:800 .8rem var(--sans); flex:none; }
.opt{ font-weight:500; color:var(--texto2); font-size:.88rem; }
.tiles{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.tile span{ hyphens:auto; overflow-wrap:anywhere; }
.tile{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:92px; padding:12px 6px; border-radius:20px 6px 20px 6px; background:var(--fondo); border:1.5px solid var(--borde); cursor:pointer; text-align:center; font-weight:700; font-size:.88rem; line-height:1.15; transition:background-color .25s, border-color .25s, transform .4s var(--e), color .25s; }
.tile:nth-child(even){ border-radius:6px 20px 6px 20px; }
.tile:hover{ transform:translateY(-3px); border-color:var(--hoja); }
.tile input,.pill-op input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
.tile svg{ width:30px; height:30px; color:var(--verde); transition:transform .5s var(--rebote), color .25s; }
.tile:has(input:checked){ background:var(--bosque); color:#fff; border-color:var(--bosque); }
.tile:has(input:checked) svg{ color:var(--brote); transform:scale(1.15) rotate(-8deg); }
.tile:has(input:focus-visible),.pill-op:has(input:focus-visible){ outline:3px solid var(--hoja); outline-offset:3px; }
.pills{ display:flex; flex-wrap:wrap; gap:8px; }
.pill-op{ position:relative; display:inline-flex; align-items:center; gap:.45em; min-height:46px; padding:.5em 1.1em; border-radius:999px; border:1.5px solid var(--borde); background:var(--fondo); font-weight:700; font-size:.94rem; cursor:pointer; transition:background-color .25s, border-color .25s, color .25s; }
.pill-op:has(input:checked){ background:var(--bosque); border-color:var(--bosque); color:#fff; }
.pill-op--g:has(input:checked){ background:var(--verde); border-color:var(--verde); }
.pill-op--c:has(input:checked){ background:var(--violeta); border-color:var(--violeta); }
.pill-op .pt{ width:10px; height:10px; border-radius:50%; background:var(--hoja); }
.pill-op--c .pt{ background:var(--violeta); }
.pill-op:has(input:checked) .pt{ background:#fff; }
.campo-txt{ width:100%; min-height:52px; border:1.5px solid rgba(13,59,48,.22); border-radius:16px; background:var(--fondo); padding:.75em 1em; font-size:1rem; transition:border-color .25s, box-shadow .25s, background-color .25s; }
.campo-txt:focus-visible{ outline:none; border-color:var(--hoja); background:#fff; box-shadow:0 0 0 4px rgba(47,143,106,.18); }
.vista{ display:flex; flex-direction:column; gap:14px; }
.chat{ border-radius:28px; overflow:hidden; background:#E9E2D6; box-shadow:inset 0 0 0 1px rgba(13,59,48,.06); }
.chat__cab{ display:flex; align-items:center; gap:10px; padding:12px 16px; background:#0E5E4C; color:#fff; font-weight:700; font-size:.95rem; }
.chat__cab img{ width:34px; height:34px; border-radius:50%; background:#fff; padding:4px; }
.chat__cab small{ display:block; font-weight:500; font-size:.76rem; color:#CFE6D8; }
.chat__cuerpo{ min-height:150px; padding:18px 14px 22px; display:flex; flex-direction:column; justify-content:flex-end;
  background-image:radial-gradient(rgba(13,59,48,.06) 1px, transparent 1.2px); background-size:14px 14px; }
.burbuja{ align-self:flex-end; max-width:92%; background:#D9FDD3; color:#11261F; padding:10px 12px 18px; border-radius:16px 4px 16px 16px; font-size:.95rem; line-height:1.45; white-space:pre-line; position:relative; box-shadow:0 1px 1px rgba(0,0,0,.08); }
.burbuja::after{ content:"✓✓"; position:absolute; right:10px; bottom:3px; font-size:.68rem; color:#3B97C4; letter-spacing:-.15em; }
.burbuja.cambia{ animation:burbuja .45s var(--rebote); }
@keyframes burbuja{ from{ transform:scale(.94); opacity:.4; } }
.escribiendo{ align-self:flex-end; display:none; gap:4px; padding:10px 14px; border-radius:14px; background:#D9FDD3; margin-bottom:8px; }
.escribiendo.on{ display:inline-flex; }
.escribiendo i{ width:7px; height:7px; border-radius:50%; background:#5E8B7E; animation:punto 1s infinite; }
.escribiendo i:nth-child(2){ animation-delay:.15s; } .escribiendo i:nth-child(3){ animation-delay:.3s; }
@keyframes punto{ 30%{ transform:translateY(-4px); opacity:.5; } }
.vista .btn{ width:100%; }
.err{ color:#A3261E; font-weight:700; font-size:.92rem; }
.err:empty{ display:none; }
@media (min-width:960px){
  .cotiza{ grid-template-columns:1.25fr .75fr; align-items:start; }
  .tiles{ grid-template-columns:repeat(6, minmax(0, 1fr)); }
  .tile{ font-size:.82rem; }
  .vista{ position:sticky; top:110px; }
}
@media (min-width:600px) and (max-width:959px){ .tiles{ grid-template-columns:repeat(6, minmax(0, 1fr)); } }

/* ---------- Sucursales ---------- */
.suc{ background:linear-gradient(180deg, var(--fondo) 0%, var(--fondo2) 100%); }
.suc-grid{ display:grid; gap:18px; }
@media (min-width:860px){ .suc-grid{ grid-template-columns:1fr 1fr; gap:24px; } }
.suc-card{ position:relative; isolation:isolate; overflow:hidden; border-radius:var(--leaf); padding:1.5px; background:var(--borde); --x:-999px; --y:-999px; --c1:var(--hoja); --c2:var(--brote); }
.suc-card--c{ border-radius:var(--leaf-i); --c1:var(--violeta); --c2:#C9B5F5; }
.suc-card::before{ content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(420px circle at var(--x) var(--y), var(--c2), var(--c1) 25%, transparent 60%); opacity:0; transition:opacity .4s; }
.suc-grid.activa .suc-card::before{ opacity:1; }
.suc-card__in{ height:100%; border-radius:inherit; background:#fff; padding:clamp(22px, 3vw, 34px); display:flex; flex-direction:column; gap:14px; }
.suc-card__cab{ display:flex; align-items:center; gap:14px; }
.suc-pin{ width:58px; height:58px; flex:none; display:grid; place-items:center; border-radius:20px 6px 20px 6px; background:var(--menta); color:var(--verde); }
.suc-card--c .suc-pin{ background:var(--violeta-c); color:var(--violeta); }
.suc-pin svg{ width:28px; height:28px; }
.suc-card h3{ font-size:clamp(1.6rem, 1.3rem + 1.2vw, 2.3rem); }
.pill{ display:inline-block; margin-top:6px; font-size:.78rem; font-weight:700; padding:.25em .7em; border-radius:999px; background:var(--fondo2); color:var(--texto2); }
.suc-desc{ color:var(--texto2); }
.rating{ display:flex; align-items:center; flex-wrap:wrap; gap:.5em; font-weight:700; font-size:.95rem; }
.rating .est{ color:#C98A00; letter-spacing:-.05em; font-size:1.05rem; }
.rating span.n{ color:var(--texto2); font-weight:600; }
.info{ list-style:none; padding:0; display:grid; gap:10px; }
.info li{ display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border-radius:16px; background:var(--fondo); font-weight:600; }
.info svg{ width:22px; height:22px; flex:none; color:var(--verde); margin-top:1px; }
.suc-card--c .info svg{ color:var(--violeta); }
.info a{ text-decoration:underline; text-underline-offset:3px; }
.acciones{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:auto; padding-top:6px; }
.acciones .btn{ padding-inline:1em; }
.suc-mas{ display:inline-flex; align-items:center; gap:.4em; font-weight:700; color:var(--verde); text-decoration:none; border-bottom:2px solid currentColor; align-self:flex-start; padding:.35em 0; }
.suc-card--c .suc-mas{ color:var(--violeta); }
.suc-mas svg{ width:18px; height:18px; transition:transform .35s var(--e); }
.suc-mas:hover svg{ transform:translateX(4px); }

/* ---------- Reseñas ---------- */
.res__cab{ display:grid; gap:24px; align-items:center; margin-bottom:clamp(28px, 4vw, 48px); }
.res__nota{ display:flex; align-items:center; gap:18px; padding:20px 24px; border-radius:var(--leaf); background:#fff; box-shadow:var(--sombra); justify-self:start; }
.res__num{ font:800 clamp(3.4rem, 2.4rem + 4vw, 5.4rem)/.9 var(--disp); font-stretch:76%; letter-spacing:-.04em; }
.estrellas{ position:relative; display:inline-block; font-size:1.6rem; letter-spacing:.05em; color:#E2E8E2; line-height:1; }
.estrellas::after{ content:"★★★★★"; position:absolute; left:0; top:0; color:var(--estrella); clip-path:inset(0 var(--q, 0%) 0 0); transition:clip-path 1.4s var(--e) .2s; }
.js .estrellas.vacia::after{ --q:100%; }
.res__nota p{ font-size:.9rem; color:var(--texto2); font-weight:600; margin-top:4px; }
.cuentas{ list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.cuentas li{ display:flex; align-items:baseline; gap:.4em; padding:.6em 1em; border-radius:999px; background:#fff; border:1px solid var(--borde); font-weight:600; color:var(--texto2); }
.cuentas b{ font:800 1.3rem var(--disp); color:var(--bosque); font-variant-numeric:tabular-nums; }
@media (min-width:960px){ .res__cab{ grid-template-columns:auto 1fr; gap:48px; } .res__cab .intro{ margin:0; } }
.marquesina{ overflow:hidden; padding:10px 0 26px; -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.res__pista{ display:flex; gap:16px; width:max-content; list-style:none; padding:0 16px; }
@media (prefers-reduced-motion:no-preference){
  .res__pista{ animation:cinta 46s linear infinite; }
  .marquesina:hover .res__pista,.marquesina:focus-within .res__pista,.marquesina.pausa .res__pista{ animation-play-state:paused; }
}
@media (prefers-reduced-motion:reduce){ .marquesina{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; } .res__pista [aria-hidden="true"]{ display:none; } }
.resena{ width:min(330px, 80vw); flex:none; display:flex; flex-direction:column; gap:14px; padding:22px; border-radius:28px 8px 28px 8px; background:#fff; border:1px solid var(--borde); box-shadow:0 18px 36px -26px rgba(13,59,48,.4); }
.resena:nth-child(even){ border-radius:8px 28px 8px 28px; }
.resena .est{ color:var(--estrella); letter-spacing:.05em; }
.resena blockquote{ font-size:1.02rem; line-height:1.5; flex:1; }
.resena__pie{ display:flex; justify-content:space-between; align-items:flex-end; gap:10px; }
.resena cite{ font-style:normal; font-weight:700; display:block; }
.resena small{ display:flex; align-items:center; gap:.35em; color:var(--texto2); font-size:.8rem; }
.resena small svg{ width:14px; height:14px; }
.tag-suc{ font-size:.78rem; font-weight:700; padding:.3em .75em; border-radius:999px; background:var(--menta); color:var(--verde); }
.tag-suc--c{ background:var(--violeta-c); color:var(--violeta); }
.res__links{ display:flex; flex-wrap:wrap; gap:10px 22px; justify-content:center; }
.res__links a{ font-weight:700; color:var(--verde); text-decoration:none; border-bottom:2px solid currentColor; padding:.3em 0; }
.res__links a.c{ color:var(--violeta); }

/* ---------- Nosotros ---------- */
.nos{ display:grid; gap:clamp(32px, 5vw, 72px); align-items:center; }
.nos__foto{ position:relative; border-radius:16px 120px 16px 120px; overflow:hidden; aspect-ratio:4/4.6; max-height:640px; box-shadow:0 40px 70px -40px rgba(13,59,48,.55); }
.nos__foto img{ width:100%; height:115%; object-fit:cover; object-position:50% 70%; }
@media (prefers-reduced-motion:no-preference){
  @supports ((animation-timeline: view()) and (animation-range: entry)){
    .nos__foto img{ animation:paralaje linear both; animation-timeline:view(); animation-range:cover; }
    @keyframes paralaje{ from{ transform:translateY(-10%); } to{ transform:translateY(0); } }
  }
}
.nos__badge{ position:absolute; left:14px; bottom:14px; right:14px; display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:22px; background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); font-weight:600; font-size:.95rem; line-height:1.3; }
.nos__badge b{ font:800 1.9rem/1 var(--disp); font-stretch:80%; color:var(--verde); white-space:nowrap; }
.puntos{ list-style:none; padding:0; display:grid; gap:12px; margin-top:1.6rem; }
.puntos li{ display:flex; gap:14px; padding:16px; border-radius:22px 6px 22px 6px; background:#fff; border:1px solid var(--borde); }
.puntos svg{ width:40px; height:40px; flex:none; padding:8px; border-radius:14px 4px 14px 4px; background:var(--menta); color:var(--verde); }
.puntos strong{ display:block; font:700 1.12rem/1.2 var(--disp); font-stretch:90%; }
.puntos span{ color:var(--texto2); font-size:.97rem; }
.nos p.cuerpo{ color:var(--texto2); font-size:1.08rem; margin-top:1rem; }
@media (min-width:900px){ .nos{ grid-template-columns:.85fr 1.15fr; } .puntos{ grid-template-columns:1fr 1fr; } }

/* ---------- Equipo ---------- */
.equipo-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:16px; }
.persona{ padding:22px; border-radius:var(--leaf); background:#fff; border:1px solid var(--borde); text-align:center; }
.persona img,.persona .ini{ width:96px; height:96px; border-radius:50%; margin:0 auto 12px; object-fit:cover; }
.persona .ini{ display:grid; place-items:center; background:var(--menta); color:var(--verde); font:800 2rem var(--disp); }
.persona .rol{ color:var(--verde); font-weight:700; font-size:.92rem; margin-top:4px; }
.persona p:not(.rol){ color:var(--texto2); font-size:.95rem; margin-top:8px; }

/* ---------- FAQ (acordeon-faq) ---------- */
.faq-grid{ display:grid; gap:clamp(24px, 5vw, 64px); align-items:start; }
@media (min-width:960px){ .faq-grid{ grid-template-columns:.8fr 1.2fr; } .faq-grid .intro{ position:sticky; top:120px; margin:0; } }
.faq{ display:grid; gap:12px; }
.faq details{ border-radius:28px 8px 28px 8px; background:#fff; border:1px solid var(--borde); transition:box-shadow .4s, border-color .3s; }
.faq details[open]{ box-shadow:var(--sombra); border-color:rgba(47,143,106,.35); }
.faq summary{ display:flex; gap:16px; align-items:center; justify-content:space-between; padding:20px 22px; cursor:pointer; list-style:none; font:700 clamp(1.08rem, 1rem + .4vw, 1.3rem)/1.22 var(--disp); font-stretch:90%; letter-spacing:-.015em; border-radius:28px 8px 28px 8px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary svg{ width:34px; height:34px; flex:none; padding:7px; border-radius:50%; background:var(--menta); color:var(--verde); transition:rotate .5s var(--rebote), background-color .3s, color .3s; }
.faq details[open] summary svg{ rotate:135deg; background:var(--verde); color:#fff; }
.faq .resp{ padding:0 22px 22px; color:var(--texto2); max-width:62ch; }
@media (prefers-reduced-motion:no-preference){
  @supports selector(::details-content) and (interpolate-size: allow-keywords){
    .faq details{ interpolate-size:allow-keywords; }
    .faq details::details-content{ block-size:0; overflow:clip; opacity:0; transition:block-size .5s var(--e), opacity .4s, content-visibility .5s allow-discrete; }
    .faq details[open]::details-content{ block-size:auto; opacity:1; }
  }
}

/* ---------- Bloque local (páginas de sucursal) ---------- */
.local{ display:grid; gap:clamp(24px, 4vw, 56px); }
.frase .pal{ color:rgba(13,59,48,.18); transition:color .35s; }
.frase .pal.on{ color:var(--bosque); }
.local__txt{ padding:clamp(22px, 3.5vw, 40px); border-radius:var(--leaf); background:#fff; border:1px solid var(--borde); box-shadow:var(--sombra); }
.local__txt p{ color:var(--texto2); font-size:1.08rem; }
.local__txt p + p{ margin-top:1rem; }
@media (min-width:960px){ .local{ grid-template-columns:1fr 1fr; align-items:center; } }
.suc-unica{ max-width:760px; }

/* ---------- Cierre ---------- */
.cierre{ text-align:center; color:#fff; background:radial-gradient(70% 60% at 50% 0%, rgba(62,156,138,.45), transparent 70%), var(--bosque); padding-block:clamp(96px, 12vw, 160px); overflow:hidden; isolation:isolate; }
.cierre .etiqueta{ background:rgba(139,211,165,.16); color:var(--brote); }
.cierre h2{ color:#fff; font-size:clamp(2.6rem, 1.4rem + 5.4vw, 5.6rem); font-stretch:78%; max-width:14ch; margin-inline:auto; }
.cierre p:not(.etiqueta){ max-width:46ch; margin:1.1rem auto 0; color:#CFE6D8; font-size:1.15rem; }
.cierre__btns{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:2rem; }
.cierre__trebol{ width:clamp(110px, 14vw, 170px); margin:0 auto 26px; overflow:visible; }
.cierre__fondo{ position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.05; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-100 -100 200 200'%3E%3Cg fill='%23E7F4EC'%3E%3Cpath id='l' d='M0 0C-5-8-32-25-29-48-26-64-7-68 0-53 7-68 26-64 29-48 32-25 5-8 0 0Z' transform='rotate(-45)'/%3E%3Cuse href='%23l' transform='rotate(90)'/%3E%3Cuse href='%23l' transform='rotate(180)'/%3E%3Cuse href='%23l' transform='rotate(270)'/%3E%3C/g%3E%3C/svg%3E") 0 0/180px 180px; }
@media (prefers-reduced-motion:no-preference){ .cierre__trebol{ animation:gira 30s linear infinite; } }
@keyframes gira{ to{ rotate:1turn; } }

/* ---------- Footer ---------- */
.pie{ background:#082A22; color:#CFE6D8; padding:56px 0 calc(32px + env(safe-area-inset-bottom)); }
.pie__grid{ display:grid; gap:28px; }
@media (min-width:768px){ .pie__grid{ grid-template-columns:1.3fr 1fr 1fr; } }
.pie .logo__t b{ color:#fff; }
.pie .logo__t small{ color:var(--brote); }
.pie p{ margin-top:.8rem; max-width:44ch; }
.pie h2{ font:700 .8rem var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--brote); margin-bottom:.8rem; }
.pie ul{ list-style:none; padding:0; display:grid; gap:8px; }
.pie a{ text-decoration:none; }
.pie a:hover{ text-decoration:underline; text-underline-offset:4px; }
.redes{ display:flex; gap:10px; margin-top:1rem; }
.redes a{ width:44px; height:44px; display:grid; place-items:center; border-radius:50%; border:1.5px solid rgba(231,244,236,.25); }
.redes svg{ width:20px; height:20px; }
.pie__portal{ display:inline-flex; align-items:center; gap:.5em; margin-top:1rem; padding:.55em 1em; border-radius:999px; border:1.5px solid rgba(231,244,236,.25); font-weight:700; }
.pie__portal svg{ width:18px; height:18px; color:var(--brote); }
.pie__base{ margin-top:40px; padding-top:20px; border-top:1px solid rgba(231,244,236,.14); display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:.86rem; color:#A9C9B7; }
.pie__base a{ text-decoration:underline; }
.pie :focus-visible,.proc :focus-visible,.cierre :focus-visible,.menu-movil :focus-visible{ outline-color:var(--brote); }

/* ---------- WhatsApp flotante + hoja para elegir sucursal ---------- */
.fab{ position:fixed; right:max(16px, env(safe-area-inset-right)); bottom:max(16px, env(safe-area-inset-bottom)); z-index:50; width:60px; height:60px; border-radius:50%; display:grid; place-items:center; background:var(--wa); color:var(--bosque); box-shadow:0 16px 30px -12px rgba(13,59,48,.6); text-decoration:none; overflow:hidden; isolation:isolate; transition:transform .4s var(--rebote); }
.fab svg{ width:30px; height:30px; }
.fab::before{ content:""; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 0 rgba(37,211,102,.55); animation:pulso 2.4s infinite; }
.fab:hover{ transform:scale(1.08); }
@media (prefers-reduced-motion:no-preference){ .fab{ animation:pop .7s var(--rebote) 2.6s both; } }
.hoja-dlg{ margin:auto auto 0; width:100%; max-width:none; max-height:90dvh; border:0; padding:0; background:#fff; color:var(--bosque); border-radius:32px 32px 0 0; overflow:auto; overscroll-behavior:contain;
  translate:0 100%; transition:translate .5s var(--e), display .5s allow-discrete, overlay .5s allow-discrete; }
.hoja-dlg[open]{ translate:0 0; }
@starting-style{ .hoja-dlg[open]{ translate:0 100%; } }
.hoja-dlg::backdrop{ background:rgba(13,59,48,0); transition:background-color .4s, display .4s allow-discrete, overlay .4s allow-discrete; }
.hoja-dlg[open]::backdrop{ background:rgba(13,59,48,.5); }
@starting-style{ .hoja-dlg[open]::backdrop{ background:rgba(13,59,48,0); } }
.hoja-dlg__in{ padding:14px var(--gut) calc(24px + env(safe-area-inset-bottom)); display:grid; gap:12px; touch-action:pan-y; }
.tirador{ display:grid; place-items:center; height:26px; margin:-6px 0 0; touch-action:none; cursor:grab; }
.tirador::before{ content:""; width:46px; height:5px; border-radius:9px; background:rgba(13,59,48,.22); }
.hoja-dlg__cab{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.hoja-dlg h2{ font-size:clamp(1.6rem, 1.3rem + 1.4vw, 2.2rem); }
.hoja-dlg p{ color:var(--texto2); }
.cerrar{ width:44px; height:44px; flex:none; border-radius:50%; border:1.5px solid var(--borde); background:#fff; cursor:pointer; display:grid; place-items:center; }
.cerrar svg{ width:18px; height:18px; }
.suc-op{ display:flex; align-items:center; gap:14px; padding:16px; border-radius:22px 6px 22px 6px; background:var(--fondo); border:1.5px solid var(--borde); text-decoration:none; font-weight:600; transition:border-color .25s, background-color .25s, transform .35s var(--e); }
.suc-op:hover{ border-color:var(--hoja); transform:translateY(-2px); }
.suc-op--c{ border-radius:6px 22px 6px 22px; }
.suc-op--c:hover{ border-color:var(--violeta); }
.suc-op__ic{ width:48px; height:48px; flex:none; display:grid; place-items:center; border-radius:50%; background:var(--wa); color:var(--bosque); }
.suc-op__ic svg{ width:24px; height:24px; }
.suc-op b{ display:block; font:700 1.25rem/1.1 var(--disp); font-stretch:88%; }
.suc-op small{ color:var(--texto2); font-size:.88rem; }
.suc-op > svg{ width:22px; height:22px; margin-left:auto; color:var(--texto2); }
@media (min-width:640px){
  .hoja-dlg{ margin:auto; width:min(520px, 100% - 32px); border-radius:32px; translate:0 30px; opacity:0; transition:translate .45s var(--e), opacity .3s, display .45s allow-discrete, overlay .45s allow-discrete; }
  .hoja-dlg[open]{ translate:0 0; opacity:1; }
  @starting-style{ .hoja-dlg[open]{ translate:0 30px; opacity:0; } }
  .hoja-dlg__in{ padding:24px 28px 30px; }
  .tirador{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
  .hojitas{ display:none; }
}
/* lluvia-inicio · «lluvia chiquita» de tréboles, monedas y billetes al tocar (se aplica con _aplicar_lluvia.py) */
.llu-c{ position:fixed; inset:0; z-index:9990; pointer-events:none; overflow:hidden; contain:strict; }
.llu{ position:absolute; display:block; margin:0; padding:0; line-height:0; pointer-events:none; will-change:transform,opacity; }
.llu svg{ display:block; width:100%; height:100%; }
@media (prefers-reduced-motion:reduce){ .llu-c{ display:none; } }
/* lluvia-fin */