/* ============================================================================
   VITRINA · Amiga Software HSEQ
   Fusión de las 5 plantillas aprobadas (6-ago-2026):
     index · páginas internas · menú lateral colorido · Ami · efecto flubber
   Los valores son los del diseño aprobado. No se "mejoran".
   Lo específico de cada página se aísla con body.v-home / body.v-producto,
   porque index y las internas definen .frame, .play y .cta-final distinto.
   ========================================================================== */

:root{
  --bone:#F7F5EF;--paper:#FFFFFF;--ink:#0F1F1A;--ink-soft:#3D5049;
  --esmeralda:#0C8A62;--esmeralda-deep:#065640;--esmeralda-glow:rgba(12,138,98,.16);
  --oro:#C69A3C;--bruma:#E5EBE6;--line:rgba(15,31,26,.12);

  /* Un color por producto. Los cinco primeros son los del diseño; el sexto
     (AmigaEquipos Esencial) no existía en la plantilla y se elige petróleo:
     es el único hueco del círculo cromático que no choca con los otros cinco. */
  --c-hseq:#0C8A62;--c-tienda:#C2452F;--c-empresa:#1F5FA8;
  --c-equipos:#C69A3C;--c-trafico:#6D4AB4;--c-esencial:#0E7C8A;

  --r-lg:26px;--r-md:16px;
  --font-display:"Bricolage Grotesque",sans-serif;
  --font-body:"Instrument Sans",sans-serif;
  --font-mono:"Spline Sans Mono",monospace;
  --ease-spring:cubic-bezier(.34,1.4,.44,1);
  --ease-smooth:cubic-bezier(.22,.8,.24,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--bone);color:var(--ink);line-height:1.6;overflow-x:hidden}
::selection{background:var(--esmeralda);color:#fff}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(900px 500px at 88% -5%, rgba(12,138,98,.07), transparent 60%),
    radial-gradient(700px 420px at -10% 42%, rgba(198,154,60,.06), transparent 60%);
}
body.v-producto::before{
  background:
    radial-gradient(900px 500px at 88% -5%, rgba(12,138,98,.08), transparent 60%),
    radial-gradient(700px 420px at -10% 45%, rgba(198,154,60,.06), transparent 60%);
}
img{max-width:100%;display:block}

/* ---------- barra de progreso ---------- */
#progress{position:fixed;top:0;left:78px;right:0;height:2px;z-index:120;pointer-events:none}
#progress i{display:block;height:100%;width:0;border-radius:0 3px 3px 0;background:linear-gradient(90deg,var(--esmeralda),var(--oro))}

/* ============================================================================
   RAIL LATERAL  (versión colorida: cada icono revela su color al tocarlo)
   ========================================================================== */
.rail{
  position:fixed;left:0;top:0;bottom:0;width:78px;z-index:100;
  display:flex;flex-direction:column;align-items:center;padding:26px 0;
  background:rgba(247,245,239,.85);backdrop-filter:blur(14px);
  border-right:1px solid var(--line);
}
.rail__logo{
  width:42px;height:42px;border-radius:13px;border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--esmeralda),var(--esmeralda-deep));
  display:grid;place-items:center;color:#fff;text-decoration:none;
  font-family:var(--font-display);font-weight:800;font-size:1.15rem;
  box-shadow:0 8px 20px -6px rgba(6,86,64,.45);
  transition:transform .55s var(--ease-spring);flex:none;
}
.rail__logo:hover{transform:rotate(-10deg) scale(1.1)}
.rail__logo.jump{animation:logojump .6s var(--ease-spring)}
@keyframes logojump{
  30%{transform:translateY(-8px) rotate(8deg) scale(1.12)}
  60%{transform:translateY(2px) rotate(-4deg) scale(.96)}
}

.rail__nav{position:relative;display:flex;flex-direction:column;gap:6px;margin:auto 0}

/* indicador líquido: la pastilla que persigue el cursor con resorte */
.blob{
  position:absolute;left:0;width:46px;height:46px;border-radius:14px;
  background:var(--esmeralda-glow);border:1px solid rgba(12,138,98,.25);
  top:0;opacity:0;pointer-events:none;
  transition:top .5s var(--ease-spring),opacity .3s,transform .5s var(--ease-spring),
             background .4s,border-color .4s;
}
.blob.stretch{transform:scaleY(1.25)}

.rail__link{
  position:relative;display:grid;place-items:center;
  width:46px;height:46px;border-radius:14px;
  color:var(--ink-soft);background:none;border:none;cursor:pointer;text-decoration:none;
  transition:color .35s,transform .4s var(--ease-spring);z-index:1;
}
.rail__link:hover{color:var(--esmeralda-deep)}
.rail__link:active{transform:scale(.92)}
.rail__link.is-active{color:var(--esmeralda-deep)}
.rail__link.is-active::before{
  content:"";position:absolute;left:-16px;width:3px;height:0;border-radius:3px;
  background:var(--esmeralda);animation:growbar .45s var(--ease-spring) forwards;
}
@keyframes growbar{to{height:22px}}
.rail__link svg{
  width:21px;height:21px;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;overflow:visible;
}
.rail__tip{
  position:absolute;left:62px;white-space:nowrap;background:var(--ink);color:var(--bone);
  font-size:.7rem;font-family:var(--font-mono);letter-spacing:.06em;
  padding:7px 13px;border-radius:9px;
  opacity:0;transform:translateX(-10px) scale(.9);pointer-events:none;
  transition:all .35s var(--ease-spring);z-index:5;
}
.rail__tip::before{
  content:"";position:absolute;left:-4px;top:50%;margin-top:-4px;
  width:8px;height:8px;background:var(--ink);border-radius:2px;transform:rotate(45deg);
}
.rail__link:hover .rail__tip{opacity:1;transform:translateX(0) scale(1)}

/* ---------- personalidad de cada icono ---------- */
.rail__link[data-sec="inicio"]:hover .roof{animation:roofpop .6s var(--ease-spring)}
.rail__link[data-sec="inicio"]:hover .walls{animation:housejump .6s var(--ease-spring)}
@keyframes roofpop{35%{transform:translateY(-3.5px)}65%{transform:translateY(1px)}}
@keyframes housejump{45%{transform:translateY(-2px)}75%{transform:translateY(.5px)}}

.rail__link[data-sec="suite"] rect{transition:transform .5s var(--ease-spring)}
.rail__link[data-sec="suite"]:hover rect:nth-of-type(1){transform:translate(-2px,-2px) rotate(-6deg)}
.rail__link[data-sec="suite"]:hover rect:nth-of-type(2){transform:translate(2px,-2px) rotate(6deg)}
.rail__link[data-sec="suite"]:hover rect:nth-of-type(3){transform:translate(-2px,2px) rotate(6deg)}
.rail__link[data-sec="suite"]:hover rect:nth-of-type(4){transform:translate(2px,2px) rotate(-6deg)}

.rail__link[data-sec="galeria"] .sun{transform-origin:9px 10px;transition:transform .5s var(--ease-spring)}
.rail__link[data-sec="galeria"]:hover .sun{transform:translate(1.5px,-2px) scale(1.5)}
.rail__link[data-sec="galeria"]:hover .mount{animation:wave .7s var(--ease-smooth)}
@keyframes wave{35%{transform:translateX(-1.6px)}70%{transform:translateX(1.2px)}}

.rail__link[data-sec="precios"] svg,
.rail__link[data-sec="planes"] svg{transition:transform .7s var(--ease-spring)}
.rail__link[data-sec="precios"]:hover svg,
.rail__link[data-sec="planes"]:hover svg{transform:rotateY(360deg)}

.rail__link[data-sec="faq"]:hover .qmark{transform-origin:12px 12px;animation:wobble .7s var(--ease-spring)}
@keyframes wobble{25%{transform:rotate(-13deg)}55%{transform:rotate(9deg)}80%{transform:rotate(-4deg)}}

.rail__link[data-sec="contacto"]:hover svg{animation:sendoff .7s var(--ease-smooth)}
@keyframes sendoff{40%{transform:translate(3px,-3px) rotate(6deg)}70%{transform:translate(-1px,.5px) rotate(-2deg)}}
.rail__link[data-sec="contacto"]:hover .flap{animation:flap .7s var(--ease-smooth)}
@keyframes flap{45%{transform:translateY(1.4px)}}

/* empujoncito ocioso: de vez en cuando un icono pide atención */
.rail__link.nudge svg{animation:nudge .8s var(--ease-spring)}
@keyframes nudge{
  20%{transform:translateY(-3px) rotate(-5deg)}
  45%{transform:translateY(1px) rotate(3deg)}
  70%{transform:translateY(-1px)}
}

/* ---------- modo color ---------- */
.rail--color .rail__link{--lc:var(--esmeralda-deep)}
.rail--color .rail__link[data-sec="inicio"]{--lc:#0C8A62}
.rail--color .rail__link[data-sec="suite"]{--lc:#1F5FA8}
.rail--color .rail__link[data-sec="galeria"]{--lc:#6D4AB4}
.rail--color .rail__link[data-sec="precios"],
.rail--color .rail__link[data-sec="planes"]{--lc:#C69A3C}
.rail--color .rail__link[data-sec="faq"]{--lc:#C2452F}
.rail--color .rail__link[data-sec="contacto"]{--lc:#065640}
.rail--color .rail__link[data-sec="resumen"]{--lc:#0C8A62}
.rail--color .rail__link[data-sec="videos"]{--lc:#C2452F}
.rail--color .rail__link[data-sec="opiniones"]{--lc:#C69A3C}
.rail--color .rail__link:hover,
.rail--color .rail__link.is-active{color:var(--lc)}
.rail--color .rail__link.is-active::before{background:var(--lc)}
.rail--color .blob{
  background:color-mix(in srgb,var(--bc,#0C8A62) 13%, transparent);
  border-color:color-mix(in srgb,var(--bc,#0C8A62) 30%, transparent);
}

.rail__foot{
  font-family:var(--font-mono);font-size:.6rem;color:var(--ink-soft);
  writing-mode:vertical-rl;letter-spacing:.22em;opacity:.55;flex:none;
  transition:opacity .3s,color .3s;cursor:default;text-align:center;
}
.rail__foot:hover{opacity:1;color:var(--esmeralda-deep)}

main{margin-left:78px;position:relative;z-index:1}
section{padding:110px clamp(24px,6vw,96px)}
body.v-producto section{padding:100px clamp(24px,6vw,96px)}

/* ============================================================================
   UTILIDADES
   ========================================================================== */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);
  font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--esmeralda-deep);margin-bottom:20px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--oro)}
h1,h2,h3{font-family:var(--font-display);line-height:1.06;letter-spacing:-.02em}
body.v-producto h1,body.v-producto h2,body.v-producto h3{line-height:1.04}
h2{font-size:clamp(2rem,4.4vw,3.4rem);font-weight:700;max-width:16ch}
body.v-producto h2{font-size:clamp(2rem,4vw,3.1rem);max-width:18ch}
.lead{color:var(--ink-soft);max-width:52ch;font-size:1.06rem;margin-top:18px}
body.v-producto .lead{font-size:1.05rem;margin-top:16px}

.btn{
  position:relative;display:inline-flex;align-items:center;gap:12px;
  font-family:var(--font-body);font-weight:600;font-size:.95rem;
  padding:16px 30px;border-radius:999px;cursor:pointer;text-decoration:none;
  border:none;overflow:hidden;transition:transform .4s var(--ease-spring),box-shadow .4s;
  will-change:transform;
}
.btn--solid{background:var(--ink);color:var(--bone);box-shadow:0 14px 30px -12px rgba(15,31,26,.5)}
.btn--solid:hover{box-shadow:0 20px 40px -12px rgba(6,86,64,.55)}
.btn--solid::after{
  content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.25),transparent);
  transform:skewX(-20deg);transition:left .6s var(--ease-smooth);
}
.btn--solid:hover::after{left:130%}
.btn--ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line);backdrop-filter:blur(4px)}
.btn--ghost:hover{border-color:var(--esmeralda);color:var(--esmeralda-deep);background:var(--esmeralda-glow)}
.btn .arrow{transition:transform .35s var(--ease-spring)}
.btn:hover .arrow{transform:translateX(5px)}
/* 3 · BOTONES CON MASA — se aplastan al presionar y rebotan al soltar */
.btn:active{transform:translateY(0) scale(.94) scaleY(.9)}

.rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease-smooth),transform .8s var(--ease-smooth)}
.rv.in{opacity:1;transform:none}

/* estrellas */
.stars{display:inline-flex;gap:3px}
.stars svg{width:17px;height:17px;fill:var(--oro)}
.stars svg.dim{fill:var(--bruma)}

@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  *{animation:none!important;transition:none!important}
}

/* ============================================================================
   SISTEMA VIVO · aura, ondas de agua, ripple, focos de luz
   ========================================================================== */
.aura{
  position:fixed;top:0;left:0;width:150px;height:150px;border-radius:50%;
  pointer-events:none;z-index:90;mix-blend-mode:multiply;
  background:radial-gradient(circle,rgba(12,138,98,.13),rgba(198,154,60,.05) 45%,transparent 70%);
  will-change:transform;
}
.pond{
  position:fixed;width:170px;height:170px;border-radius:50%;
  border:1.5px solid rgba(12,138,98,.45);pointer-events:none;z-index:80;
  transform:translate(-50%,-50%) scale(.04);opacity:0;
  animation:pond 1.1s var(--ease-smooth) forwards;
}
.pond--gold{border-color:rgba(198,154,60,.4)}
@keyframes pond{
  0%{opacity:.9;transform:translate(-50%,-50%) scale(.04)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1)}
}
.rip-box{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.rip{
  position:absolute;border-radius:50%;pointer-events:none;
  transform:translate(-50%,-50%) scale(0);opacity:1;
  background:radial-gradient(circle,var(--ripc,rgba(12,138,98,.32)) 0%,transparent 65%);
  animation:ripKey .65s var(--ease-smooth) forwards;
}
@keyframes ripKey{to{transform:translate(-50%,-50%) scale(1);opacity:0}}

/* ============================================================================
   PORTADA · HERO, media órbita
   ========================================================================== */
.hero{
  min-height:100vh;display:grid;grid-template-columns:1.12fr 1fr;
  align-items:center;gap:clamp(24px,4vw,64px);padding-top:60px;
}
.eco-title{
  font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.9rem,3.6vw,2.95rem);line-height:1.12;max-width:17ch;
}
.eco-title em{font-style:normal;color:var(--esmeralda);position:relative}
.eco-title em::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:.24em;z-index:-1;
  background:linear-gradient(90deg,rgba(198,154,60,.32),rgba(12,138,98,.2));border-radius:4px;
}
.eco-lead{color:var(--ink-soft);max-width:44ch;font-size:1rem;margin-top:16px}
.eco-hint{
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.16em;
  color:var(--ink-soft);display:flex;align-items:center;gap:10px;margin:30px 0 16px;
}
.eco-hint::after{content:"";width:38px;height:1px;background:var(--oro)}
.eco-card{
  position:relative;background:rgba(255,255,255,.92);backdrop-filter:blur(16px);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 26px 22px;
  box-shadow:0 30px 60px -22px rgba(15,31,26,.26);
  transition:opacity .35s,transform .5s var(--ease-spring);max-width:480px;
}
.eco-card.swap{opacity:0;transform:translateY(12px) scale(.98)}
.eco-card__tag{
  display:inline-block;font-family:var(--font-mono);font-size:.6rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--cc,#065640);
  background:color-mix(in srgb,var(--cc,#0C8A62) 11%, transparent);
  padding:5px 13px;border-radius:999px;margin-bottom:12px;
}
.eco-card h3{font-size:1.45rem;font-weight:700}
.eco-card__mantra{
  font-family:var(--font-display);font-weight:600;font-size:1.02rem;line-height:1.35;
  margin:10px 0 15px;padding-left:14px;border-left:2.5px solid var(--oro);
}
.eco-card__comps{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:0 0 17px}
.eco-card__comps li{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:.59rem;letter-spacing:.08em;
  color:var(--ink-soft);text-transform:uppercase;
  background:color-mix(in srgb,var(--cc,#0C8A62) 8%, transparent);
  border:1px solid color-mix(in srgb,var(--cc,#0C8A62) 22%, transparent);
  padding:6px 11px;border-radius:999px;
}
.eco-card__comps li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--cc,#0C8A62)}
.eco-card__row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;border-top:1px dashed var(--line);padding-top:14px}
.eco-card__price{font-family:var(--font-display);font-weight:800;font-size:1.3rem}
.eco-card__price i{font-style:normal;font-family:var(--font-mono);font-size:.6rem;color:var(--ink-soft);display:block;letter-spacing:.08em}
.eco-card__row a{font-size:.84rem;font-weight:600;color:var(--cc,#065640);text-decoration:none;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.eco-card__row a .arrow{transition:transform .3s var(--ease-spring)}
.eco-card__row a:hover .arrow{transform:translateX(4px)}
.eco-proof{
  margin-top:20px;max-width:480px;display:flex;gap:12px;align-items:flex-start;
  font-size:.82rem;color:var(--ink-soft);
}
.eco-proof i{
  flex:none;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  background:rgba(198,154,60,.14);margin-top:2px;
}
.eco-proof i svg{width:16px;height:16px;stroke:var(--oro);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hero__cta{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
.hero__cta .btn{padding:14px 26px;font-size:.9rem}

/* ---- media órbita ---- */
.half{position:relative;min-height:560px}
.half__svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.half__svg .arc{fill:none;stroke:rgba(15,31,26,.15);stroke-width:1;stroke-dasharray:3 7;stroke-linecap:round}
.half__svg .arc--gold{stroke:rgba(198,154,60,.3)}
.half__svg .spark{fill:var(--oro);opacity:.5}
.half__svg .spark:nth-of-type(odd){animation:spark 4.5s ease-in-out infinite}
.half__svg .spark:nth-of-type(even){animation:spark 4.5s ease-in-out 2s infinite}
@keyframes spark{50%{opacity:.12}}
.core{
  position:absolute;z-index:5;left:50%;transform:translate(-50%,-50%);
  width:132px;height:132px;border-radius:50%;
  display:grid;place-items:center;text-align:center;color:#fff;padding:14px;
  font-family:var(--font-display);font-weight:700;font-size:1.04rem;line-height:1.2;
  background:linear-gradient(140deg,var(--esmeralda),var(--esmeralda-deep));
  box-shadow:0 22px 46px -14px rgba(6,86,64,.55),0 0 0 9px rgba(12,138,98,.07),0 0 0 20px rgba(12,138,98,.035);
  animation:breathe 6s ease-in-out infinite;
}
@keyframes breathe{50%{box-shadow:0 22px 54px -12px rgba(6,86,64,.6),0 0 0 14px rgba(12,138,98,.09),0 0 0 30px rgba(12,138,98,.045)}}
.core small{display:block;font-family:var(--font-mono);font-weight:400;font-size:.5rem;letter-spacing:.22em;opacity:.75;margin-bottom:3px}
.hnode{
  position:absolute;z-index:4;width:70px;height:70px;border-radius:22px;
  background:var(--paper);border:1px solid var(--line);
  display:grid;place-items:center;cursor:pointer;
  box-shadow:0 12px 28px -12px rgba(15,31,26,.22);
  transition:box-shadow .45s,border-color .45s,background .45s;
  --dx:0px;--dy:0px;
  transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy)));
  will-change:left,top;
}
.hnode > svg{
  width:27px;height:27px;fill:none;stroke:var(--c1);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .8s var(--ease-spring);
}
.hnode:hover > svg{transform:rotate(360deg) scale(1.15)}
.hnode.is-on > svg{transform:scale(1.12)}
.hnode.is-on:hover > svg{transform:rotate(360deg) scale(1.15)}
.hnode.is-on{
  border-color:var(--c1);
  background:linear-gradient(150deg,color-mix(in srgb,var(--c1) 9%, white),white);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--c1) 14%, transparent),0 18px 40px -14px rgba(15,31,26,.3);
}
.hnode small{
  position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);
  font-family:var(--font-mono);font-size:.55rem;letter-spacing:.09em;
  color:var(--ink-soft);white-space:nowrap;text-transform:uppercase;transition:color .4s;
}
.hnode.is-on small{color:var(--c1)}

/* ============================================================================
   PORTADA · SUITE
   ========================================================================== */
.suite-head{margin-bottom:70px}
.app{
  display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(30px,5vw,70px);
  align-items:center;padding:64px 0;border-top:1px solid var(--line);
}
.app--flip{grid-template-columns:1.15fr 1fr}
.app--flip .app__media{order:2}
.app__kicker{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--app-c);margin-bottom:14px;display:block;
}
.app h3{font-size:clamp(1.6rem,2.6vw,2.3rem);font-weight:700;margin-bottom:14px}
.app p{color:var(--ink-soft);max-width:46ch}
.app__list{list-style:none;margin:22px 0 26px;display:grid;gap:10px}
.app__list li{display:flex;gap:12px;align-items:flex-start;font-size:.93rem;color:var(--ink-soft)}
.app__list li::before{
  content:"";flex:none;width:18px;height:18px;margin-top:3px;border-radius:6px;
  background:color-mix(in srgb,var(--app-c) 15%, transparent);
  box-shadow:inset 0 0 0 1.4px var(--app-c);
}
.app__price-chip{
  display:inline-flex;align-items:baseline;gap:10px;
  font-family:var(--font-display);font-weight:800;font-size:1.2rem;
  border:1.5px dashed color-mix(in srgb,var(--app-c) 45%, transparent);
  padding:10px 18px;border-radius:14px;
}
.app__price-chip i{font-style:normal;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;color:var(--ink-soft)}
.app__cta{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:18px}
.app__link{
  font-family:var(--font-body);font-weight:600;font-size:.88rem;text-decoration:none;
  color:var(--app-c);display:inline-flex;align-items:center;gap:7px;
}
.app__link .arrow{transition:transform .3s var(--ease-spring)}
.app__link:hover .arrow{transform:translateX(4px)}
.app__media{display:grid;gap:16px}

/* marcos de imagen y vídeo */
.frame{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:var(--paper);border:1px solid var(--line);
  box-shadow:0 24px 50px -22px rgba(15,31,26,.3);
  transition:transform .5s var(--ease-spring),box-shadow .5s;
}
.frame:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:0 34px 66px -22px rgba(15,31,26,.38)}
.frame--video{
  aspect-ratio:16/9;display:grid;place-items:center;
  background:
    radial-gradient(420px 220px at 30% 20%, color-mix(in srgb,var(--app-c,#0C8A62) 22%, transparent), transparent 70%),
    linear-gradient(150deg,#10201B,#1D3B32);
}
body.v-producto .frame--video{
  aspect-ratio:16/10;
  background:
    radial-gradient(460px 260px at 30% 20%, rgba(12,138,98,.28), transparent 70%),
    linear-gradient(150deg,#10201B,#1D3B32);
}
.play{
  width:70px;height:70px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.14);backdrop-filter:blur(6px);
  display:grid;place-items:center;color:#fff;position:relative;
  transition:transform .4s var(--ease-spring);animation:pulse 2.6s infinite;
}
/* 🔴🔴 12-ago-2026 · LAS ETIQUETAS DEL VÍDEO CHOCABAN CON LAS TARJETAS FLOTANTES.
   En la ficha de producto, .float-chip--a (el precio) cuelga de la esquina SUPERIOR
   DERECHA y .float-chip--b (las funciones) de la INFERIOR IZQUIERDA — que son
   justo donde .frame__badge y .frame__label se dibujan por defecto. Resultado:
   "PRÓXIMAMENTE" encima del precio y "Video · AmigaEmpresa" encima del contador.
   🔑 Se mueven a las dos esquinas que quedan libres. Solo aquí: en la portada y en
   los clips no hay tarjetas flotantes y ahí están bien donde están. */
body.v-producto .stage .frame__badge{top:14px;right:auto;left:14px}
body.v-producto .stage .frame__label{bottom:14px;left:auto;right:16px}
body.v-producto .stage .play{width:76px;height:76px}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,.28)}
  70%{box-shadow:0 0 0 22px rgba(255,255,255,0)}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
}
.play:hover{transform:scale(1.12)}
.play svg{width:24px;height:24px;fill:#fff;margin-left:3px}
body.v-producto .stage .play svg{width:26px;height:26px}
.frame__label{
  position:absolute;left:16px;bottom:14px;font-family:var(--font-mono);
  font-size:.62rem;letter-spacing:.16em;color:rgba(255,255,255,.85);text-transform:uppercase;
}
.frame__badge{
  position:absolute;top:14px;right:14px;font-family:var(--font-mono);font-size:.6rem;
  letter-spacing:.12em;background:rgba(255,255,255,.14);color:#fff;
  backdrop-filter:blur(6px);padding:5px 11px;border-radius:999px;
}
.shots{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mockui__bar{display:flex;gap:6px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line)}
.mockui__bar i{width:8px;height:8px;border-radius:50%;background:var(--bruma)}
.mockui__bar i:first-child{background:color-mix(in srgb,var(--app-c,#0C8A62) 60%, white)}
.mockui__body{padding:16px;display:grid;gap:10px}
.sk{border-radius:8px;background:var(--bruma);height:12px;position:relative;overflow:hidden}
.sk::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.7) 50%,transparent 70%);
  transform:translateX(-100%);animation:shimmer 2.8s infinite;
}
@keyframes shimmer{60%,100%{transform:translateX(100%)}}
.sk--title{width:55%;height:16px;background:color-mix(in srgb,var(--app-c,#0C8A62) 26%, var(--bruma))}
.sk--block{height:56px}
.sk--half{width:70%}
.mockui__kpis{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.mockui__kpis b{
  display:block;background:color-mix(in srgb,var(--app-c,#0C8A62) 10%, white);
  border:1px solid color-mix(in srgb,var(--app-c,#0C8A62) 26%, transparent);
  border-radius:10px;height:44px;
}
.frame__caption{
  padding:10px 14px;font-family:var(--font-mono);font-size:.6rem;
  letter-spacing:.12em;color:var(--ink-soft);border-top:1px dashed var(--line);text-transform:uppercase;
}

/* ---------------------------------------------------------------------------
   MEDIOS REALES · lo que se sube desde el panel ocupa el hueco del marcador.
   Cada marco del diseño ya tiene su proporción; la pieza se recorta para
   llenarlo sin deformarse, y los rótulos quedan por encima.
   --------------------------------------------------------------------------- */
.medio{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;border:0;z-index:0;background:#10201B;
}
.frame__label,.frame__badge,.gal__tag,.clip__info,.clip__bar,.wheel__item .tag{z-index:3}
.frame--video:has(.medio){background:#10201B}
.frame--video .play{z-index:3}
video.medio{cursor:pointer}

/* ============================================================================
   PORTADA · GALERÍA  (chips con gota horizontal — efecto flubber)
   ========================================================================== */
#galeria{background:linear-gradient(180deg,transparent,rgba(15,31,26,.03) 20%,rgba(15,31,26,.03) 80%,transparent)}
.chips{
  position:relative;display:inline-flex;gap:6px;padding:7px;border-radius:999px;
  background:var(--paper);border:1px solid var(--line);
  margin:26px 0 40px;flex-wrap:wrap;
}
.chips .blob{
  position:absolute;top:7px;bottom:7px;left:0;width:60px;height:auto;border-radius:999px;
  background:color-mix(in srgb,var(--bc,#0C8A62) 13%, transparent);
  border:1px solid color-mix(in srgb,var(--bc,#0C8A62) 30%, transparent);
  opacity:1;
  transition:left .5s var(--ease-spring),width .5s var(--ease-spring),
             transform .5s var(--ease-spring),background .4s,border-color .4s;
  pointer-events:none;
}
.chips .blob.stretch{transform:scaleX(1.18) scaleY(.86)}
.chip{
  position:relative;z-index:1;font-family:var(--font-mono);font-size:.68rem;
  letter-spacing:.08em;padding:10px 18px;border-radius:999px;border:none;
  background:transparent;cursor:pointer;color:var(--ink-soft);
  transition:color .35s,transform .3s var(--ease-spring);
}
.chip:active{transform:scale(.94)}
.chip:hover{color:var(--cc)}
.chip.is-on{color:var(--cc);font-weight:500}

.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.gal{
  position:relative;border-radius:var(--r-md);overflow:hidden;aspect-ratio:4/3;
  border:1px solid var(--line);cursor:pointer;
  background:linear-gradient(150deg,color-mix(in srgb,var(--g,#0C8A62) 16%, #fff),color-mix(in srgb,var(--g,#0C8A62) 5%, var(--bone)));
  transition:transform .45s var(--ease-spring),box-shadow .45s,opacity .4s;
}
.gal:hover{transform:translateY(-6px) scale(1.015);box-shadow:0 26px 50px -18px rgba(15,31,26,.3)}
.gal--wide{grid-column:span 2;aspect-ratio:auto}
.gal.is-hidden{display:none}
.gal__ph{
  position:absolute;inset:14%;border-radius:12px;background:rgba(255,255,255,.75);
  border:1px dashed color-mix(in srgb,var(--g,#0C8A62) 40%, transparent);
  display:grid;place-items:center;
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;color:var(--ink-soft);
  text-align:center;padding:10px;text-transform:uppercase;
}
.gal__ph svg{width:26px;height:26px;stroke:color-mix(in srgb,var(--g,#0C8A62) 80%, black);fill:none;stroke-width:1.6;margin-bottom:8px}
.gal__tag{
  position:absolute;left:14px;bottom:12px;
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.14em;
  background:rgba(15,31,26,.85);color:var(--bone);padding:5px 11px;border-radius:999px;
  transform:translateY(6px);opacity:0;transition:all .35s var(--ease-spring);
}
.gal:hover .gal__tag{opacity:1;transform:none}

/* ============================================================================
   PORTADA · PRECIOS
   ========================================================================== */
.pricing{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:16px;margin-top:56px}
.price-card{
  position:relative;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:28px 24px 24px;
  transition:transform .45s var(--ease-spring),box-shadow .45s,border-color .45s;
  display:flex;flex-direction:column;
}
.price-card:hover{
  transform:translateY(-8px);border-color:color-mix(in srgb,var(--pc) 50%, transparent);
  box-shadow:0 30px 56px -20px color-mix(in srgb,var(--pc) 40%, rgba(15,31,26,.3));
}
.price-card::before{
  content:"";position:absolute;top:0;left:24px;right:24px;height:3px;border-radius:0 0 6px 6px;
  background:linear-gradient(90deg,var(--pc),color-mix(in srgb,var(--pc) 40%, transparent));
  transform:scaleX(.3);transform-origin:left;transition:transform .5s var(--ease-smooth);
}
.price-card:hover::before{transform:scaleX(1)}
.price-card__app{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.18em;color:var(--pc);text-transform:uppercase}
.price-card h3{font-size:1.22rem;margin:8px 0 4px}
.price-card__for{font-size:.8rem;color:var(--ink-soft);min-height:56px}
.price-card__amount{font-family:var(--font-display);font-weight:800;font-size:1.75rem;margin:14px 0 2px;letter-spacing:-.02em}
.price-card__amount i{font-style:normal;font-size:.78rem;font-weight:500;color:var(--ink-soft);font-family:var(--font-body)}
.price-card__amount--medida{font-size:1.4rem}
.price-card__note{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.08em;color:var(--ink-soft);margin-bottom:16px;min-height:26px}
.price-card ul{list-style:none;display:grid;gap:7px;font-size:.8rem;color:var(--ink-soft);margin-bottom:22px}
.price-card ul li{display:flex;gap:8px}
.price-card ul li::before{content:"✓";color:var(--pc);font-weight:700}
.price-card .btn{margin-top:auto;justify-content:center;padding:12px 18px;font-size:.84rem}
.price-card--fav{outline:2px solid var(--pc);outline-offset:-1px}
.price-card__fav-tag{
  position:absolute;top:-12px;right:18px;overflow:hidden;
  font-family:var(--font-mono);font-size:.56rem;letter-spacing:.14em;
  background:var(--pc);color:#fff;padding:5px 12px;border-radius:999px;
}
.price-card__fav-tag::after{
  content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-20deg);animation:tagshine 3.4s ease-in-out infinite;
}
@keyframes tagshine{0%,55%{left:-60%}85%,100%{left:140%}}
/* 🔴 21-ago-2026: esto era `display:flex`. En un <p>, flex convierte cada
   trozo de texto y el <a> en ITEMS independientes ⇒ «Escríbenos» caía una
   letra por línea en el móvil y en PC quedaban huecos enormes. Es un
   párrafo: se lee en línea, no se reparte en columnas. */
.pricing-note{
  margin:26px auto 0;font-family:var(--font-mono);font-size:.66rem;
  letter-spacing:.08em;color:var(--ink-soft);
  max-width:68ch;line-height:1.85;text-align:center;
}
/* El rombo era un item de flex con gap:10px; en línea necesita su margen. */
.pricing-note::before{content:"◆";color:var(--oro);font-size:.55rem;margin-right:8px}
/* Que el enlace no se parta por la mitad: o entra entero o baja entero. */
.pricing-note a{white-space:nowrap}

/* selector de periodicidad */
.perio{
  position:relative;display:inline-flex;gap:6px;padding:7px;border-radius:999px;
  background:var(--paper);border:1px solid var(--line);margin-top:26px;
}
.perio .blob{
  position:absolute;top:7px;bottom:7px;left:0;width:60px;height:auto;border-radius:999px;
  background:color-mix(in srgb,var(--bc,#0C8A62) 13%, transparent);
  border:1px solid color-mix(in srgb,var(--bc,#0C8A62) 30%, transparent);opacity:1;
  transition:left .5s var(--ease-spring),width .5s var(--ease-spring),transform .5s var(--ease-spring);
  pointer-events:none;
}
.perio .blob.stretch{transform:scaleX(1.18) scaleY(.86)}
.perio button{
  position:relative;z-index:1;font-family:var(--font-mono);font-size:.68rem;
  letter-spacing:.08em;padding:10px 18px;border-radius:999px;border:none;
  background:transparent;cursor:pointer;color:var(--ink-soft);
  transition:color .35s,transform .3s var(--ease-spring);
}
.perio button:active{transform:scale(.94)}
.perio button.is-on{color:var(--esmeralda-deep);font-weight:500}
.perio__ahorro{
  font-family:var(--font-mono);font-size:.56rem;letter-spacing:.1em;
  color:var(--oro);margin-left:6px;
}

/* ============================================================================
   ACORDEÓN  (con resaltado líquido — efecto flubber)
   ========================================================================== */
#faq{max-width:900px}
.acc{position:relative;border-top:1px solid var(--line);margin-top:50px}
.acc .blobv{
  position:absolute;left:-14px;right:-14px;height:0;top:0;border-radius:18px;
  background:rgba(12,138,98,.07);border:1px solid rgba(12,138,98,.14);
  opacity:0;pointer-events:none;
  transition:top .5s var(--ease-spring),height .5s var(--ease-spring),
             opacity .3s,transform .5s var(--ease-spring);
}
.acc .blobv.stretch{transform:scaleY(1.12)}
.acc__item{border-bottom:1px solid var(--line);position:relative;z-index:1}
.acc__btn{
  position:relative;width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:none;border:none;cursor:pointer;text-align:left;
  padding:26px 6px;font-family:var(--font-display);font-weight:600;
  font-size:1.12rem;color:var(--ink);transition:color .3s,padding-left .35s var(--ease-smooth);
}
.acc__btn:hover{color:var(--esmeralda-deep);padding-left:14px}
.acc__num{font-family:var(--font-mono);font-size:.66rem;color:var(--oro);letter-spacing:.1em;margin-right:14px}
.acc__icon{
  flex:none;width:34px;height:34px;border-radius:50%;
  border:1.4px solid var(--line);display:grid;place-items:center;
  transition:all .45s var(--ease-spring);
}
.acc__icon::before{content:"+";font-size:1.15rem;line-height:1;transition:transform .45s var(--ease-spring)}
.acc__item.open .acc__icon{background:var(--esmeralda);border-color:var(--esmeralda);color:#fff;transform:scale(1.08)}
.acc__item.open .acc__icon::before{transform:rotate(135deg)}
.acc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease-smooth)}
.acc__item.open .acc__panel{grid-template-rows:1fr}
.acc__panel>div{overflow:hidden}
.acc__panel p{padding:0 6px 28px;color:var(--ink-soft);max-width:62ch}

/* ============================================================================
   CTA FINAL · AURORA
   ========================================================================== */
.cta-final{
  margin:40px clamp(24px,6vw,96px) 90px;padding:clamp(24px,6vw,80px);
  border-radius:34px;position:relative;overflow:hidden;
  background:linear-gradient(140deg,#0F1F1A,#0A362A 60%,#065640);
  color:var(--bone);text-align:center;
}
body.v-producto .cta-final{margin-top:20px}
.cta-final::before,.cta-final::after{content:"";position:absolute;border-radius:50%;filter:blur(60px)}
.cta-final::before{
  width:360px;height:360px;background:#0C8A62;top:-140px;left:-80px;opacity:.55;
  animation:aur1 16s ease-in-out infinite;
}
.cta-final::after{
  width:300px;height:300px;background:var(--oro);bottom:-160px;right:-60px;opacity:.3;
  animation:aur2 20s ease-in-out infinite;
}
@keyframes aur1{50%{transform:translate(140px,60px) scale(1.15)}}
@keyframes aur2{50%{transform:translate(-160px,-50px) scale(1.2)}}
.cta-final .aurora{
  position:absolute;width:280px;height:280px;border-radius:50%;filter:blur(70px);
  background:#6D4AB4;opacity:.22;left:40%;top:-120px;
  animation:aur3 24s ease-in-out infinite;
}
@keyframes aur3{50%{transform:translate(-120px,90px) scale(1.25)}}
.cta-final h2{max-width:none;margin:0 auto 14px;position:relative;color:#fff}
.cta-final p{position:relative;color:rgba(247,245,239,.75);max-width:52ch;margin:0 auto 34px}
.cta-final .btn--solid{background:var(--bone);color:var(--ink);position:relative}
.cta-final .guarantee{
  position:relative;margin-top:22px;font-family:var(--font-mono);font-size:.62rem;
  letter-spacing:.14em;color:rgba(247,245,239,.6);
}

/* ============================================================================
   PIE + REDES
   ========================================================================== */
footer.site{
  margin-left:78px;padding:40px clamp(24px,6vw,96px);
  display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;color:var(--ink-soft);
  border-top:1px solid var(--line);
}
footer.site a{color:inherit;text-decoration:none}
footer.site a:hover{color:var(--esmeralda-deep)}
.foot-legal{display:flex;gap:16px;flex-wrap:wrap}
.social{display:flex;gap:10px}
.social a{
  --sb:#0F1F1A;
  position:relative;width:42px;height:42px;border-radius:50%;
  border:1.4px solid var(--line);display:grid;place-items:center;
  color:var(--ink-soft);overflow:hidden;
  transition:transform .4s var(--ease-spring),border-color .35s,color .35s,box-shadow .4s;
}
.social a svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;position:relative;z-index:1}
.social a::before{
  content:"";position:absolute;inset:0;border-radius:50%;background:var(--sb);
  transform:scale(0);transition:transform .4s var(--ease-spring);
}
.social a:hover{transform:translateY(-4px);border-color:var(--sb);color:#fff;box-shadow:0 12px 26px -10px color-mix(in srgb,var(--sb) 60%, transparent)}
.social a:hover::before{transform:scale(1)}
.social a[data-net="whatsapp"]{--sb:#1FAF5A}
.social a[data-net="instagram"]{--sb:#C13584}
.social a[data-net="tiktok"]{--sb:#0F1F1A}
.social a[data-net="youtube"]{--sb:#D22B2B}
.social a[data-net="linkedin"]{--sb:#0A66C2}
.social a[data-net="facebook"]{--sb:#1877F2}
.social a[data-net="x"]{--sb:#0F1F1A}

/* focos de luz internos en tarjetas */
.price-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .45s;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--pc) 9%, transparent),transparent 65%);
}
.price-card:hover::after{opacity:1}
.gal::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .45s;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.55),transparent 60%);
}
.gal:hover::after{opacity:1}
.frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;opacity:0;transition:opacity .45s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.14),transparent 62%);
}
.frame:hover::after{opacity:1}
.plan::after,.pain::after,.tcard::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .45s;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(12,138,98,.08),transparent 65%);
}
.plan:hover::after,.pain:hover::after,.tcard:hover::after{opacity:1}

/* ============================================================================
   FICHA DE PRODUCTO · hero
   ========================================================================== */
.phero{
  min-height:92vh;display:grid;grid-template-columns:1.05fr 1fr;
  align-items:center;gap:clamp(30px,5vw,70px);padding-top:80px;
}
.crumb{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;
  color:var(--ink-soft);margin-bottom:26px;transition:color .3s;
}
.crumb:hover{color:var(--esmeralda-deep)}
.crumb .arrow{transition:transform .3s var(--ease-spring)}
.crumb:hover .arrow{transform:translateX(-4px)}
.phero h1{font-size:clamp(2.6rem,5vw,4.4rem);font-weight:800}
.phero h1 em{font-style:normal;color:var(--pc,var(--esmeralda))}
.phero__rating{
  display:flex;align-items:center;gap:12px;margin:20px 0 6px;
  font-size:.9rem;color:var(--ink-soft);
}
.phero__rating b{font-family:var(--font-display);font-size:1.05rem;color:var(--ink)}
.norm-chips{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0 30px}
.norm-chips span{
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;
  border:1px solid var(--line);background:var(--paper);
  padding:7px 14px;border-radius:999px;color:var(--ink-soft);
  transition:all .3s var(--ease-smooth);cursor:default;
}
.norm-chips span:hover{border-color:var(--pc,var(--esmeralda));color:var(--esmeralda-deep);transform:translateY(-2px)}
.phero__cta{display:flex;gap:14px;flex-wrap:wrap}
.phero__note{margin-top:16px;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.08em;color:var(--ink-soft)}

.stage{position:relative}
.float-chip{
  position:absolute;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);
  border:1px solid var(--line);border-radius:18px;padding:14px 18px;
  box-shadow:0 18px 40px -16px rgba(15,31,26,.3);
  display:flex;align-items:center;gap:12px;
  animation:float 5.5s ease-in-out infinite;
}
@keyframes float{50%{transform:translateY(-10px)}}
.float-chip--a{top:-24px;right:-14px}
.float-chip--b{bottom:-26px;left:-18px;animation-delay:1.4s}
.float-chip i{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none;
  background:var(--esmeralda-glow);
}
.float-chip i svg{width:18px;height:18px;stroke:var(--esmeralda-deep);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.float-chip b{font-family:var(--font-display);font-size:1.05rem;display:block;line-height:1.1}
.float-chip small{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.1em;color:var(--ink-soft)}

/* franja de cifras */
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:0 clamp(24px,6vw,96px) 20px}
.strip div{
  text-align:center;padding:26px 12px;border-radius:var(--r-md);
  border:1px dashed var(--line);transition:all .4s var(--ease-smooth);
}
.strip div:hover{border-color:var(--esmeralda);background:rgba(255,255,255,.6);transform:translateY(-4px)}
.strip b{font-family:var(--font-display);font-size:1.8rem;font-weight:800;display:block}
.strip span{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;color:var(--ink-soft);text-transform:uppercase}

/* lo que resuelve */
.pains{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:56px}
.pain{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px 28px;position:relative;overflow:hidden;
  transition:transform .45s var(--ease-spring),box-shadow .45s;
}
.pain:hover{transform:translateY(-8px);box-shadow:0 28px 54px -20px rgba(15,31,26,.3)}
.pain i{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:var(--esmeralda-glow);margin-bottom:18px;
}
.pain i svg{width:22px;height:22px;stroke:var(--esmeralda-deep);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pain s{
  display:block;font-size:.82rem;color:var(--ink-soft);opacity:.7;
  text-decoration-color:rgba(194,69,47,.6);text-decoration-thickness:1.5px;margin-bottom:8px;
}
.pain h3{font-size:1.15rem;margin-bottom:8px}
.pain p{font-size:.88rem;color:var(--ink-soft)}

/* ruleta de galería */
.wheel{position:relative;height:440px;margin-top:60px;perspective:1200px}
.wheel__item{
  position:absolute;left:50%;top:0;width:min(560px,72%);aspect-ratio:16/10;
  margin-left:calc(min(560px,72%)/-2);
  border-radius:var(--r-lg);border:1px solid var(--line);overflow:hidden;
  background:var(--paper);cursor:pointer;
  box-shadow:0 26px 54px -22px rgba(15,31,26,.32);
  transition:transform .7s var(--ease-smooth),opacity .7s,filter .7s;
  will-change:transform;
}
.wheel__item .ph{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  background:linear-gradient(150deg,color-mix(in srgb,var(--w,#0C8A62) 14%, #fff),color-mix(in srgb,var(--w,#0C8A62) 4%, var(--bone)));
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;color:var(--ink-soft);text-transform:uppercase;padding:20px;
}
.wheel__item .ph svg{width:30px;height:30px;stroke:color-mix(in srgb,var(--w,#0C8A62) 80%, black);fill:none;stroke-width:1.6;margin-bottom:10px}
.wheel__item .tag{
  position:absolute;left:16px;bottom:14px;font-family:var(--font-mono);font-size:.6rem;
  letter-spacing:.14em;background:rgba(15,31,26,.85);color:var(--bone);
  padding:5px 12px;border-radius:999px;
}
.wheel__item[data-pos="0"]{transform:translateX(0) translateZ(0) rotateY(0);z-index:5}
.wheel__item[data-pos="1"]{transform:translateX(46%) translateZ(-180px) rotateY(-28deg);z-index:4;filter:saturate(.7) brightness(.96)}
.wheel__item[data-pos="-1"]{transform:translateX(-46%) translateZ(-180px) rotateY(28deg);z-index:4;filter:saturate(.7) brightness(.96)}
.wheel__item[data-pos="2"]{transform:translateX(80%) translateZ(-360px) rotateY(-38deg);z-index:3;opacity:.55}
.wheel__item[data-pos="-2"]{transform:translateX(-80%) translateZ(-360px) rotateY(38deg);z-index:3;opacity:.55}
.wheel__ctrl{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:34px}
.wheel__btn{
  width:52px;height:52px;border-radius:50%;border:1.5px solid var(--line);
  background:var(--paper);cursor:pointer;display:grid;place-items:center;
  color:var(--ink);position:relative;overflow:hidden;
  transition:all .35s var(--ease-spring);
}
.wheel__btn:hover{border-color:var(--esmeralda);color:var(--esmeralda-deep);transform:scale(1.1);background:var(--esmeralda-glow)}
.wheel__btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wheel__dots{display:flex;gap:8px}
.wheel__dots i{width:8px;height:8px;border-radius:50%;background:var(--bruma);cursor:pointer;transition:all .4s var(--ease-spring)}
.wheel__dots i.on{width:26px;border-radius:6px;background:var(--esmeralda)}
.wheel__caption{
  text-align:center;margin-top:20px;font-family:var(--font-mono);
  font-size:.66rem;letter-spacing:.14em;color:var(--ink-soft);text-transform:uppercase;
  transition:opacity .4s;
}

/* mini-vídeos */
.clips{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:56px}
.clip{
  position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/11;
  border:1px solid var(--line);cursor:pointer;display:grid;place-items:center;
  background:
    radial-gradient(300px 180px at 30% 25%, rgba(12,138,98,.3), transparent 70%),
    linear-gradient(155deg,#10201B,#1E3C33);
  transition:transform .5s var(--ease-spring),box-shadow .5s;
}
.clip:hover{transform:translateY(-8px);box-shadow:0 30px 56px -20px rgba(15,31,26,.4)}
.clip .play{width:58px;height:58px;animation:none}
.clip:hover .play{animation:pulse 2.2s infinite}
.clip .frame__badge{top:12px;right:12px}
.clip__info{position:absolute;left:16px;right:16px;bottom:14px;color:#fff}
.clip__info b{font-family:var(--font-display);font-size:1rem;display:block;line-height:1.2}
.clip__info small{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.12em;color:rgba(255,255,255,.65)}
.clip__bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.15)}
.clip__bar i{display:block;height:100%;width:0;background:var(--oro);transition:width 1.4s var(--ease-smooth)}
.clip:hover .clip__bar i{width:62%}

/* cómo funciona */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:60px;position:relative}
.steps::before{
  content:"";position:absolute;top:29px;left:12%;right:12%;height:1.5px;
  background:repeating-linear-gradient(90deg,var(--oro) 0 8px,transparent 8px 16px);opacity:.5;
}
.step{text-align:center;padding:0 26px;position:relative}
.step i{
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;margin:0 auto 20px;
  background:var(--paper);border:1.5px solid var(--esmeralda);
  font-family:var(--font-display);font-weight:800;font-size:1.2rem;color:var(--esmeralda-deep);
  font-style:normal;position:relative;z-index:2;transition:all .4s var(--ease-spring);
}
.step:hover i{background:var(--esmeralda);color:#fff;transform:scale(1.12) rotate(-6deg);box-shadow:0 14px 30px -10px rgba(6,86,64,.5)}
.step h3{font-size:1.1rem;margin-bottom:8px}
.step p{font-size:.86rem;color:var(--ink-soft)}

/* planes de la ficha */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:56px}
.plan{
  position:relative;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:32px 28px 28px;display:flex;flex-direction:column;
  transition:transform .45s var(--ease-spring),box-shadow .45s,border-color .45s;
}
.plan:hover{transform:translateY(-8px);border-color:rgba(12,138,98,.5);box-shadow:0 30px 56px -20px rgba(12,138,98,.35)}
.plan::before{
  content:"";position:absolute;top:0;left:28px;right:28px;height:3px;border-radius:0 0 6px 6px;
  background:linear-gradient(90deg,var(--esmeralda),rgba(12,138,98,.2));
  transform:scaleX(.3);transform-origin:left;transition:transform .5s var(--ease-smooth);
}
.plan:hover::before{transform:scaleX(1)}
.plan__lvl{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.2em;color:var(--esmeralda-deep);text-transform:uppercase}
.plan h3{font-size:1.35rem;margin:8px 0 4px}
.plan__for{font-size:.84rem;color:var(--ink-soft);min-height:44px}
.plan__amount{font-family:var(--font-display);font-weight:800;font-size:2.2rem;margin:18px 0 2px;letter-spacing:-.02em}
.plan__amount i{font-style:normal;font-size:.8rem;font-weight:500;color:var(--ink-soft);font-family:var(--font-body)}
.plan__note{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.1em;color:var(--ink-soft);margin-bottom:20px}
.plan ul{list-style:none;display:grid;gap:9px;font-size:.86rem;color:var(--ink-soft);margin-bottom:26px}
.plan ul li{display:flex;gap:10px}
.plan ul li::before{content:"✓";color:var(--esmeralda);font-weight:700}
.plan .btn{margin-top:auto;justify-content:center;padding:13px 20px;font-size:.88rem}
.plan--fav{outline:2px solid var(--esmeralda);outline-offset:-1px;background:linear-gradient(180deg,rgba(12,138,98,.04),transparent 40%),var(--paper)}
.plan__fav-tag{
  position:absolute;top:-12px;right:22px;font-family:var(--font-mono);font-size:.58rem;
  letter-spacing:.16em;background:var(--esmeralda);color:#fff;padding:5px 12px;border-radius:999px;
}
.plans-note{margin-top:26px;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.08em;color:var(--ink-soft);display:flex;gap:10px;align-items:center}
.plans-note::before{content:"◆";color:var(--oro);font-size:.55rem}

/* opiniones */
.reviews{display:grid;grid-template-columns:.85fr 1.6fr;gap:clamp(26px,4vw,56px);margin-top:56px;align-items:start}
.score{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:34px 30px;text-align:center;position:sticky;top:90px;
}
.score b{font-family:var(--font-display);font-size:4rem;font-weight:800;line-height:1;display:block}
.score .stars{margin:12px 0 6px}
.score .stars svg{width:20px;height:20px}
.score small{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;color:var(--ink-soft)}
.score__bars{margin-top:24px;display:grid;gap:9px;text-align:left}
.score__bars div{display:grid;grid-template-columns:14px 1fr 32px;gap:10px;align-items:center;font-family:var(--font-mono);font-size:.62rem;color:var(--ink-soft)}
.score__bars i{height:6px;border-radius:4px;background:var(--bruma);overflow:hidden;position:relative;display:block}
.score__bars i::after{
  content:"";position:absolute;inset:0;border-radius:4px;transform:scaleX(0);
  transform-origin:left;background:linear-gradient(90deg,var(--esmeralda),var(--oro));
  transition:transform 1.2s .3s var(--ease-smooth);
}
.score.in i::after{transform:scaleX(var(--v))}
.tcards{display:grid;gap:18px}
.tcard{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:28px 30px;position:relative;
  transition:transform .45s var(--ease-spring),box-shadow .45s;
}
.tcard:hover{transform:translateY(-5px) rotate(-.3deg);box-shadow:0 26px 50px -20px rgba(15,31,26,.28)}
.tcard::before{
  content:"“";position:absolute;top:6px;right:24px;font-family:var(--font-display);
  font-size:5rem;font-weight:800;color:var(--esmeralda);opacity:.12;line-height:1;
}
.tcard .stars{margin-bottom:12px}
.tcard p{font-size:.95rem;color:var(--ink);max-width:58ch}
.tcard footer{display:flex;align-items:center;gap:14px;margin-top:18px;border:none;padding:0;margin-left:0}
.tcard .avatar{
  width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:800;color:#fff;font-size:.95rem;
  background:linear-gradient(135deg,var(--av1,#0C8A62),var(--av2,#065640));
}
.tcard b{font-size:.9rem;display:block;line-height:1.2}
.tcard small{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.1em;color:var(--ink-soft)}
.tcard .verified{
  margin-left:auto;font-family:var(--font-mono);font-size:.56rem;letter-spacing:.12em;
  color:var(--esmeralda-deep);background:var(--esmeralda-glow);
  padding:5px 10px;border-radius:999px;white-space:nowrap;
}

/* ============================================================================
   AMI · la gotita (sustituye al botón clásico de WhatsApp) — versión esmeralda
   ========================================================================== */
.gum{
  /* 🔑 25-ago-2026: `bottom:40px` la dejaba justo encima de la fila del pie y
     tapaba el enlace DATOS. Sube un poco; el pie, además, le reserva sitio
     (ver «carril para Ami» más abajo) — moverla a ella sola no basta, porque el
     pie es lo último de la página y siempre acaba debajo. */
  position:fixed;z-index:300;width:78px;height:74px;right:34px;bottom:64px;
  cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;
  --g1:rgba(255,255,255,.34);--g2:rgba(12,138,98,.14);--g3:rgba(6,86,64,.26);
  --gdeep:rgba(6,86,64,.18);--gring:rgba(12,138,98,.4);--gsh:rgba(6,86,64,.35);
  translate:var(--rx,0px) var(--ry,0px);
  transition:translate .35s var(--ease-spring);
}
.gum.poke .gum__wob{animation:gumpoke .65s var(--ease-smooth)}
@keyframes gumpoke{
  0%{transform:scale(1)}
  28%{transform:scale(.95,.9) rotate(-2deg)}
  52%{transform:scale(1.05,.97) rotate(1.5deg)}
  74%{transform:scale(.98,1.03)}
  100%{transform:scale(1)}
}
.gum.poked .gum__wob{animation:gumpoked .8s var(--ease-smooth)}
@keyframes gumpoked{
  0%{transform:scale(1)}
  18%{transform:scale(.8,.7) rotate(-3deg)}
  42%{transform:scale(1.12,1.07) rotate(2deg)}
  62%{transform:scale(.94,.98) rotate(-1deg)}
  80%{transform:scale(1.04,1.02)}
  100%{transform:scale(1)}
}
.gum.squint .gum__eye{animation:squintk .55s var(--ease-smooth)}
@keyframes squintk{
  0%{transform:scaleY(1)}25%{transform:scaleY(.12)}
  60%{transform:scaleY(1.25)}100%{transform:scaleY(1)}
}
.gum.giggle .gum__wob{animation:giggle 1s ease-in-out}
@keyframes giggle{
  0%,100%{transform:rotate(0)}
  10%{transform:rotate(-4deg) scale(.98,1.02)}
  22%{transform:rotate(4deg) scale(1.02,.98)}
  34%{transform:rotate(-3.5deg)}
  46%{transform:rotate(3deg) scale(.99,1.01)}
  58%{transform:rotate(-2.5deg)}
  70%{transform:rotate(2deg)}
  82%{transform:rotate(-1deg)}
  92%{transform:rotate(.5deg)}
}
.gum.happy .gum__eye{
  height:6px;width:11px;background:transparent;
  border:2.4px solid var(--ink);border-bottom:none;
  border-radius:50% 50% 0 0;animation:none;top:33px;
}
.gum.happy .gum__eye::after{display:none}
.gum__jiji{
  position:absolute;font-family:var(--font-mono);font-size:.6rem;
  letter-spacing:.05em;color:var(--esmeralda-deep);pointer-events:none;
  opacity:0;animation:jijirise 1.3s var(--ease-smooth) forwards;
}
@keyframes jijirise{
  0%{opacity:0;transform:translateY(4px) rotate(var(--jr,0deg)) scale(.7)}
  20%{opacity:1}
  100%{opacity:0;transform:translateY(-30px) rotate(var(--jr,0deg)) scale(1.05)}
}
.gum__splash{
  position:absolute;width:26px;height:26px;border-radius:50%;
  border:1.5px solid var(--gring);pointer-events:none;
  transform:translate(-50%,-50%) scale(.3);opacity:.8;
  animation:gsplash .7s var(--ease-smooth) forwards;
}
@keyframes gsplash{100%{transform:translate(-50%,-50%) scale(2.4);opacity:0}}
.gum__wob{position:absolute;inset:0;transform-origin:50% 85%}
.gum__body{
  position:absolute;inset:0;
  background:linear-gradient(150deg,var(--g1) 0%,var(--g2) 38%,var(--g3) 100%);
  backdrop-filter:blur(5px) saturate(1.25);
  -webkit-backdrop-filter:blur(5px) saturate(1.25);
  border:1px solid rgba(255,255,255,.55);
  border-radius:47% 53% 51% 49% / 57% 55% 45% 43%;
  box-shadow:
    0 14px 30px -12px var(--gsh),
    inset 0 -10px 16px var(--gdeep),
    inset 0 8px 12px rgba(255,255,255,.35);
  animation:jelly 9s ease-in-out infinite;
  transition:background .5s,box-shadow .5s;
}
@keyframes jelly{
  0%,100%{border-radius:47% 53% 51% 49% / 57% 55% 45% 43%}
  33%{border-radius:53% 47% 49% 51% / 47% 53% 55% 45%;transform:scaleY(1.02)}
  66%{border-radius:50% 50% 54% 46% / 54% 46% 46% 54%;transform:scaleX(1.02)}
}
.gum__shine{
  position:absolute;left:15px;top:9px;width:26px;height:13px;border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,0));
  filter:blur(1.5px);transform:rotate(-16deg);opacity:.9;
}
.gum__shine--dot{
  left:auto;right:17px;top:16px;width:7px;height:7px;filter:blur(.5px);transform:none;
  background:rgba(255,255,255,.8);
}
.gum__gold{
  position:absolute;left:18%;right:18%;bottom:3px;height:5px;border-radius:50%;
  background:radial-gradient(50% 100% at 50% 100%, rgba(198,154,60,.4), transparent 75%);
  filter:blur(1px);
}
.gum__eye{
  position:absolute;top:31px;width:9px;height:11px;border-radius:50%;
  background:var(--ink);animation:blink 5s infinite;
}
.gum__eye--l{left:24px}
.gum__eye--r{right:24px;animation-delay:.07s}
@keyframes blink{0%,93%,100%{transform:scaleY(1)}95.5%{transform:scaleY(.1)}}
.gum__eye::after{
  content:"";position:absolute;right:1.5px;top:1.5px;width:3px;height:3px;
  border-radius:50%;background:rgba(255,255,255,.95);
}
.gum__eyes{position:absolute;inset:0;transition:transform .18s var(--ease-smooth)}
.gum__shadow{
  position:absolute;left:50%;bottom:-8px;width:52px;height:8px;margin-left:-26px;
  border-radius:50%;background:rgba(6,86,64,.14);filter:blur(3px);
  animation:shsync 9s ease-in-out infinite;
}
@keyframes shsync{33%{transform:scaleX(1.05)}66%{transform:scaleX(.95)}}
.gum__ring{
  position:absolute;inset:-4px;border-radius:50%;pointer-events:none;
  border:1.5px solid var(--gring);animation:gring 1.7s var(--ease-smooth) forwards;
}
@keyframes gring{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.9)}}
.gum.wiggle .gum__body{animation:jelly 9s ease-in-out infinite, wig .8s var(--ease-spring)}
@keyframes wig{
  25%{transform:rotate(-5deg) scaleY(1.05)}
  55%{transform:rotate(4deg) scaleX(1.05)}
  80%{transform:rotate(-1.5deg)}
}
.gum__bubble{
  position:absolute;bottom:calc(100% + 12px);right:-4px;white-space:nowrap;
  background:rgba(255,255,255,.72);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.7);
  font-family:var(--font-display);font-weight:600;font-size:.85rem;color:var(--ink);
  padding:9px 15px;border-radius:15px 15px 4px 15px;
  box-shadow:0 12px 26px -12px rgba(15,31,26,.25);
  opacity:0;transform:translateY(8px) scale(.85);transform-origin:bottom right;
  transition:opacity .35s,transform .45s var(--ease-spring);pointer-events:none;
}
.gum__bubble.show{opacity:1;transform:none}

/* mini-chat de Ami */
.gchat{
  position:fixed;z-index:290;right:26px;bottom:130px;
  width:min(320px,calc(100vw - 52px));
  background:rgba(255,255,255,.8);backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.7);border-radius:22px 22px 6px 22px;
  box-shadow:0 30px 60px -20px rgba(15,31,26,.3);
  overflow:hidden;transform-origin:bottom right;
  transform:scale(.6) translateY(16px);opacity:0;pointer-events:none;
  transition:transform .5s var(--ease-spring),opacity .35s;
}
.gchat.open{transform:none;opacity:1;pointer-events:auto}
.gchat__head{
  display:flex;align-items:center;gap:12px;padding:15px 17px;
  background:linear-gradient(140deg,rgba(12,138,98,.92),rgba(6,86,64,.94));color:#fff;
}
.gchat__head b{font-family:var(--font-display);font-size:.95rem;display:block;line-height:1.15}
.gchat__head small{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.12em;opacity:.85}
.gchat__close{
  margin-left:auto;width:29px;height:29px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.16);color:#fff;font-size:1rem;line-height:1;
  transition:transform .4s var(--ease-spring);
}
.gchat__close:hover{transform:rotate(90deg)}
.gchat__body{padding:15px;display:grid;gap:8px}
.gchat__chip{
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.08em;text-align:left;
  padding:11px 15px;border-radius:13px;cursor:pointer;
  border:1px solid rgba(12,138,98,.3);background:rgba(255,255,255,.55);color:var(--esmeralda-deep);
  transition:all .3s var(--ease-spring);text-decoration:none;
  display:flex;justify-content:space-between;align-items:center;
}
.gchat__chip:hover{transform:translateX(4px);background:rgba(12,138,98,.1)}
.gchat__chip:active{transform:scale(.96)}

/* ============================================================================
   ESQUELETO COMPARTIDO
   Contenedor, tarjeta, formulario, aviso, prosa y tabla.

   🔑 Se define UNA vez y lo usan todas las páginas interiores. Es lo que
   impide que cada vista se invente sus propios estilos y el sitio acabe
   siendo un rompecabezas por dentro aunque por fuera parezca uniforme.
   ========================================================================== */
.contenedor{max-width:1100px;margin:0 auto;width:100%}
.contenedor--angosto{max-width:760px}
.contenedor--forma{max-width:520px}

.cabecera-seccion{margin-bottom:44px}
.cabecera-seccion h1{font-size:clamp(2rem,4.4vw,3.2rem);font-weight:700;max-width:18ch}

/* ---------- tarjeta ---------- */
.tarjeta{
  position:relative;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:30px 28px;
  transition:transform .45s var(--ease-spring),box-shadow .45s,border-color .45s;
}
.tarjeta--hover:hover{transform:translateY(-6px);box-shadow:0 28px 54px -20px rgba(15,31,26,.28)}
.tarjeta__ico{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--tc,var(--esmeralda)) 13%, transparent);margin-bottom:18px;
}
.tarjeta__ico svg{width:22px;height:22px;stroke:var(--tc,var(--esmeralda-deep));fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tarjeta h2,.tarjeta h3{font-size:1.2rem;margin-bottom:8px}
.tarjeta p{font-size:.9rem;color:var(--ink-soft)}

/* ---------- formularios ---------- */
.campos{display:grid;gap:16px;margin-top:20px}
.campo{display:grid;gap:7px}
.campo label{
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);
}
.campo input,.campo select,.campo textarea{
  width:100%;font-family:var(--font-body);font-size:.95rem;color:var(--ink);
  background:var(--paper);border:1.5px solid var(--line);border-radius:14px;
  padding:13px 15px;transition:border-color .3s,box-shadow .3s,background .3s;
}
.campo textarea{resize:vertical;min-height:110px;line-height:1.5}
.campo select{
  appearance:none;cursor:pointer;padding-right:40px;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),
                   linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%,calc(100% - 15px) 55%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.campo input::placeholder,.campo textarea::placeholder{color:color-mix(in srgb,var(--ink-soft) 55%, white)}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--esmeralda);
  box-shadow:0 0 0 4px var(--esmeralda-glow);
}
.campo--malo input,.campo--malo select,.campo--malo textarea{border-color:#C2452F}
.campo--malo input:focus,.campo--malo select:focus,.campo--malo textarea:focus{box-shadow:0 0 0 4px rgba(194,69,47,.15)}
.campo__error{font-size:.8rem;color:#9C2F1B}
.campo__ayuda{font-size:.78rem;color:var(--ink-soft)}

/* casilla de verificación */
.permiso{
  display:flex;gap:11px;align-items:flex-start;
  font-size:.8rem;color:var(--ink-soft);line-height:1.45;cursor:pointer;
}
.permiso input[type=checkbox]{
  flex:none;appearance:none;width:19px;height:19px;margin-top:2px;
  border:1.5px solid var(--line);border-radius:6px;background:var(--paper);
  cursor:pointer;transition:all .25s var(--ease-spring);
}
.permiso input[type=checkbox]:checked{background:var(--esmeralda);border-color:var(--esmeralda)}
.permiso input[type=checkbox]:checked::after{
  content:"";display:block;width:5px;height:9px;margin:2px auto 0;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg);
}
.permiso input[type=checkbox]:focus-visible{outline:none;box-shadow:0 0 0 4px var(--esmeralda-glow)}
/* 🔴 Con error, la casilla TIENE que verse roja. Va con esta especificidad
   porque `.campo--malo input` sola pierde contra `.permiso input[type=checkbox]`
   y el aviso quedaba solo arriba: la casilla se veia como si no pasara nada. */
.permiso.campo--malo{color:#8A2F1B}
.permiso.campo--malo input[type=checkbox]{
  border-color:#C2452F;box-shadow:0 0 0 3px rgba(194,69,47,.14);
}

/* el señuelo antirrobot: invisible para una persona, tentador para un robot */
.senuelo{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.campos .btn{justify-content:center;width:100%}
.pie-forma{
  margin-top:14px;text-align:center;font-family:var(--font-mono);
  font-size:.6rem;letter-spacing:.1em;color:var(--ink-soft);
}

/* ---------- avisos ---------- */
.aviso{
  display:flex;gap:12px;align-items:flex-start;
  border-radius:var(--r-md);padding:14px 17px;margin-bottom:20px;font-size:.9rem;
  border:1px solid;
}
.aviso svg{width:19px;height:19px;flex:none;margin-top:2px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.aviso--bien{background:var(--esmeralda-glow);border-color:rgba(12,138,98,.3);color:var(--esmeralda-deep)}
.aviso--mal{background:rgba(194,69,47,.09);border-color:rgba(194,69,47,.28);color:#8A2F1B}

/* ---------- páginas de puerta (acceso, recuperar, restablecer) ---------- */
.puerta{max-width:460px;margin:0 auto;text-align:center}
.puerta__marca{
  width:64px;height:64px;border-radius:20px;margin:0 auto 22px;
  background:linear-gradient(135deg,var(--esmeralda),var(--esmeralda-deep));
  display:grid;place-items:center;color:#fff;
  font-family:var(--font-display);font-weight:800;font-size:1.6rem;
  box-shadow:0 14px 30px -10px rgba(6,86,64,.45);
}
.puerta h1{font-size:clamp(1.7rem,3.4vw,2.3rem);font-weight:700}
.puerta__bajada{color:var(--ink-soft);font-size:.95rem;margin-top:12px}
.puerta__caja{margin-top:28px;text-align:left}
.puerta__pie{margin-top:16px;font-size:.85rem;color:var(--ink-soft)}
.puerta__pie a{color:var(--esmeralda-deep);font-weight:600;text-decoration:none}
.puerta__pie a:hover{text-decoration:underline}

/* ---------- prosa (legales y artículos) ---------- */
.prosa{max-width:68ch;color:var(--ink-soft);font-size:1rem;line-height:1.75}
.prosa h2{font-size:1.45rem;max-width:none;margin:38px 0 12px;color:var(--ink)}
.prosa h3{font-size:1.1rem;margin:26px 0 8px;color:var(--ink)}
.prosa p{margin-bottom:16px}
.prosa ul,.prosa ol{margin:0 0 18px 20px}
.prosa li{margin-bottom:7px}
.prosa a{color:var(--esmeralda-deep);font-weight:600}
.prosa strong{color:var(--ink)}
.prosa hr{border:0;border-top:1px solid var(--line);margin:32px 0}

/* ---------- zona de clientes ---------- */
.cuenta__cabeza{
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  flex-wrap:wrap;margin-bottom:26px;
}
.cuenta__menu{
  display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line);
  margin-bottom:36px;
}
.cuenta__menu a{
  position:relative;padding:12px 18px;text-decoration:none;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);transition:color .3s;
}
.cuenta__menu a:hover{color:var(--esmeralda-deep)}
.cuenta__menu a[aria-current="page"]{color:var(--esmeralda-deep)}
.cuenta__menu a[aria-current="page"]::after{
  content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;
  border-radius:2px 2px 0 0;background:var(--esmeralda);
}

/* ---------- tabla ---------- */
.tabla-caja{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper)}
.tabla{width:100%;border-collapse:collapse;font-size:.9rem;min-width:560px}
.tabla th{
  text-align:left;padding:15px 18px;border-bottom:1px solid var(--line);
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);white-space:nowrap;
}
.tabla td{padding:15px 18px;border-bottom:1px solid var(--line);color:var(--ink-soft)}
.tabla tr:last-child td{border-bottom:0}
.tabla tbody tr{transition:background .3s}
.tabla tbody tr:hover{background:rgba(12,138,98,.035)}
.tabla b{color:var(--ink);font-weight:600}
.etiqueta{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:.58rem;letter-spacing:.1em;
  text-transform:uppercase;padding:5px 11px;border-radius:999px;
  background:color-mix(in srgb,var(--ec,var(--esmeralda)) 12%, transparent);
  border:1px solid color-mix(in srgb,var(--ec,var(--esmeralda)) 30%, transparent);
  color:var(--ec,var(--esmeralda-deep));white-space:nowrap;
}

/* ---------- opciones de contratación ---------- */
.opciones{display:grid;gap:8px;margin-top:16px;border-top:1px dashed var(--line);padding-top:16px}
.opcion{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:11px 14px;border:1px solid var(--line);border-radius:14px;
  transition:border-color .3s,background .3s;
}
.opcion:hover{border-color:color-mix(in srgb,var(--esmeralda) 45%, transparent);background:rgba(12,138,98,.035)}
.opcion b{font-family:var(--font-display);font-weight:800;font-size:1.1rem;display:block}
.opcion b i{font-style:normal;font-size:.72rem;font-weight:500;color:var(--ink-soft);font-family:var(--font-body)}
.opcion small{
  display:block;font-family:var(--font-mono);font-size:.56rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-soft);margin-top:3px;
}
@media (max-width:520px){ .opcion{flex-direction:column;align-items:stretch} .opcion .btn{width:100%} }

/* ---------- estado vacío ---------- */
.vacio{
  text-align:center;padding:56px 26px;border:1px dashed var(--line);
  border-radius:var(--r-lg);color:var(--ink-soft);
}
.vacio svg{width:34px;height:34px;stroke:var(--oro);fill:none;stroke-width:1.5;margin-bottom:14px}
.vacio b{display:block;font-family:var(--font-display);font-size:1.1rem;color:var(--ink);margin-bottom:6px}
.vacio p{font-size:.9rem;max-width:44ch;margin:0 auto}

/* ---------- rejillas de uso general ---------- */
.rejilla-2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.rejilla-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:860px){ .rejilla-2,.rejilla-3{grid-template-columns:1fr} }

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1100px){
  .hero{grid-template-columns:1fr;padding-top:100px;min-height:auto}
  .half{min-height:440px}
  .eco-card,.eco-proof{max-width:none}
  .phero{grid-template-columns:1fr;min-height:auto;padding-top:110px}
  .strip{grid-template-columns:repeat(2,1fr)}
  .plans,.pains,.clips{grid-template-columns:1fr 1fr}
  .reviews{grid-template-columns:1fr}
  .score{position:static}
}
@media (max-width:860px){
  .app,.app--flip{grid-template-columns:1fr}
  .app--flip .app__media{order:0}
  .gallery{grid-template-columns:1fr 1fr}
  .gal--wide{grid-column:span 2}
}
@media (max-width:720px){
  .plans,.pains,.clips,.strip{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:40px}
  .steps::before{display:none}
  .wheel{height:320px}
  .float-chip--a{top:-16px;right:0}
  .float-chip--b{bottom:-16px;left:0}
}
@media (max-width:640px){
  .rail{width:60px}
  main,footer.site{margin-left:60px}
  #progress{left:60px}
  .rail__tip{display:none}
  .gallery{grid-template-columns:1fr}
  .gal--wide{grid-column:span 1}
  .shots{grid-template-columns:1fr}
  .half{min-height:380px}
  /* 52px, no 60: con seis nodos el arco los deja a ~52px de separación en un
     teléfono de 320px. Con 60px se pisaban. */
  .hnode{width:52px;height:52px;border-radius:17px}
  .hnode > svg{width:22px;height:22px}
  .hnode small{display:none}
  .core{width:104px;height:104px;font-size:.88rem}
  footer.site{flex-direction:column;text-align:center}
  /* 25-ago: también sube en el móvil (pedido: «tapa DATOS»). El pie de esta
     medida ya le reserva 160px, así que no vuelve a cruzarse con él. */
  .gum{right:18px;bottom:40px}
  .gchat{right:14px;bottom:126px}
}
/* 🔑 25-ago · MEDIDO a 360px, no estimado: el botón «Conocer la suite» acaba en
   x=280 · y=708 y Ami empieza en x=264 · y=682 ⇒ le pisaba la esquina con la
   flecha. Es el mismo remedio que ya se usó en `.cta-final` el 21-ago: más aire
   abajo y el botón sube por encima de ella. Va a 420 y no a 360 porque a 390 el
   margen era de solo 6px: «no se tocan» no es lo mismo que «no se tocan nunca». */
@media (max-width:420px){
  /* 🔴 El `margin-bottom` NO movió el botón (medido: seguía en y=658-710): el
     hero reparte su alto de otra forma y se lo come. Lo que sí funciona es
     apartar a AMI, que es quien sobra en esa esquina: encogida un 22 % y más
     pegada al borde empieza en x≈289, y el botón acaba en 280 ⇒ dejan de
     tocarse. Sigue midiendo 61px, muy por encima de los 44 de un objetivo
     táctil. El origen abajo-derecha hace que encoja hacia su esquina en vez
     de moverse. */
  .gum{transform:scale(.78);transform-origin:100% 100%;right:10px}
  .gchat{right:10px}
}

/* 🔴 A 320px NO HAY hueco a la derecha: el botón «Conocer la suite» ocupa de
   90 a 280 y solo quedan 40px, y Ami necesita 61. Ahí ya no se resuelve
   apartándola de lado — se resuelve BAJÁNDOLA: pegada al borde queda su parte
   alta en y≈716 y el botón acaba en 710. Medido, no supuesto. */
@media (max-width:340px){
  .gum{bottom:6px}
  .gchat{bottom:92px}
}

/* Pantallas muy estrechas (iPhone SE y similares): el arco solo da 50px de
   separación, así que el nodo baja a 44px para que no se toquen. */
@media (max-width:360px){
  .hnode{width:44px;height:44px;border-radius:14px}
  .hnode > svg{width:19px;height:19px}
  .core{width:92px;height:92px;font-size:.8rem}
  .half{min-height:340px}
}
/* Los chips NO pueden partirse en dos filas: la gota se coloca con offsetLeft
   y un salto de línea la manda a perseguir un chip que ya no está donde cree.
   Con siete filtros eso pasa en cualquier teléfono, así que se deslizan. */
@media (max-width:860px){
  .chips{display:flex;flex-wrap:nowrap;overflow-x:auto;max-width:100%;
         -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .chips::-webkit-scrollbar{display:none}
  .chip{white-space:nowrap;flex:none}
}
/* En el móvil el titular va ANTES que la órbita: si no, el visitante ve un
   gráfico grande sin saber todavía de qué se trata el sitio. */
@media (max-width:1100px){
  .hero > .half{order:2}
}

/* ============================================================================
   ÓRBITA · QUE QUEPA (15-ago-2026)
   ============================================================================
   Dos problemas distintos, y el segundo lo destapó el primero:

   1) EL RÓTULO ERA UNA TIRA QUE NUNCA PARTÍA. `.hnode small` es `position:absolute`
      con `white-space:nowrap`, así que cada nombre crecía a lo ancho sin límite y
      se metía debajo del nodo vecino. Con rótulos cortos («Ventas») no se notaba;
      al pasar a frases que dicen algo («Tu marca donde te buscan») se pisan seguro.
      ⇒ Ahora parten en dos líneas y tienen un ancho máximo.

   2) UNA ÓRBITA NO CABE EN UN TELÉFONO. El JS ya abría el arco en pantallas
      estrechas, pero con siete nodos de 70px en 375px de ancho no hay ángulo que
      lo salve. ⇒ Por debajo de 720px la media rueda se convierte en una REJILLA
      de dos columnas. El JS deja de colocar nodos (añade `.es-rejilla`) y aquí se
      apagan las posiciones absolutas.
   🔑 Si el JS no llegara a ejecutarse, esto NO se activa y queda la órbita de
      siempre: se degrada a lo de antes, nunca a un amasijo. */

.hnode small{
  white-space:normal;
  width:106px;
  text-align:center;
  line-height:1.28;
}

@media (max-width:720px){
  .half.es-rejilla{
    position:static;
    min-height:0;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    padding:6px 0 4px;
  }
  .half.es-rejilla .half__svg{display:none}

  /* El centro deja de ser un círculo y pasa a ser el titular del bloque. */
  .half.es-rejilla .core{
    position:static;
    grid-column:1 / -1;
    order:-1;
    width:auto;
    height:auto;
    border-radius:18px;
    transform:none;
    padding:18px 16px;
    font-size:1.06rem;
    box-shadow:0 14px 34px -16px rgba(6,86,64,.5);
    animation:none;
  }
  .half.es-rejilla .core small{font-size:.56rem;margin-bottom:3px}

  /* Cada producto, una tarjeta con su nombre DENTRO: nada absoluto que se pise. */
  .half.es-rejilla .hnode{
    position:static;
    width:auto;
    height:auto;
    transform:none;
    border-radius:16px;
    padding:14px 10px 12px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    will-change:auto;
  }
  .half.es-rejilla .hnode small{
    position:static;
    transform:none;
    width:auto;
    font-size:.6rem;
    letter-spacing:.06em;
  }

  /* La vista previa y su instrucción se retiran en el móvil.
     🔑 No es por ganar espacio: es que ahí tocar YA NO abre una vista previa, lleva
     al producto. Dejar la tarjeta sería enseñar el detalle de algo que el visitante
     no eligió —va rotando sola— y el rótulo «TOCA CADA PRODUCTO» prometería un
     comportamiento que no ocurre. Una pantalla no debe explicar algo que no hace. */
  .eco-hint,
  .eco-card{display:none}
}

/* ============================================================================
   MÓVIL · AUDITORÍA DEL 15-ago-2026
   ============================================================================
   Medido sobre lo que sirve el servidor, no a ojo. Dos hallazgos con arreglo:

   1) LETRA DE 8 Y 9 PIXELES. Hay 65 reglas por debajo de 13px; las peores son
      `.core small` (8px) y `.hnode small` (8.8px). En un monitor pasan por
      "detalle elegante"; en la mano, a 40cm y con brillo, no se leen. Se suben
      SOLO en móvil: el diseño de escritorio no se toca.

   2) LAS CAPTURAS DE «LA SUITE» SE REPITEN EN «GALERÍA». Cada producto pinta un
      vídeo y DOS capturas; abajo, la galería enseña las mismas. En un teléfono
      eso son 21 bloques de imagen apilados para enseñar lo mismo dos veces.
      ⇒ En móvil se deja el vídeo (que sí es propio de la sección) y se ocultan
      las capturas. No se pierde nada: están dos secciones más abajo.
   🔑 Es CSS, así que el HTML sigue completo para los buscadores.

   ⛔ LO QUE NO SE TOCÓ, y por qué: las zonas para tocar están BIEN (.hnode 70px,
      .rail__link 46px, .play 70px). Mi primera medición dijo lo contrario porque
      medía el <svg> de dentro en vez del botón. Y la tabla de 560px ya vive en un
      contenedor con overflow-x: no empuja la página. */

@media (max-width:720px){
  /* Nada por debajo de 11px en la mano. */
  .core small{font-size:.66rem;letter-spacing:.16em}
  .half.es-rejilla .core small{font-size:.66rem}
  .half.es-rejilla .hnode small{font-size:.7rem;letter-spacing:.04em}
  .perio__ahorro,
  .price-card__note,
  .price-card__fav-tag,
  .opcion small,
  .gchat__head small{font-size:.7rem}

  /* Las capturas se ven en Galería: aquí sobran. */
  #suite .shots{display:none}
}

/* ── «Ver qué incluye»: las características, plegadas en el móvil ──────────── */
@media (max-width:720px){
  /* Solo esconde si el JS puso la clase. Sin JS, se ve todo. */
  .app__list.plegable:not(.desplegada){display:none}

  .app__ver{
    display:inline-flex;align-items:center;gap:8px;
    margin:2px 0 14px;padding:9px 14px;
    background:transparent;border:1px solid var(--line);border-radius:999px;
    font-family:var(--font-mono);font-size:.72rem;letter-spacing:.04em;
    color:var(--ink-soft);cursor:pointer;
    transition:border-color .3s,color .3s;
  }
  .app__ver i{
    font-style:normal;font-size:.66rem;
    background:var(--app-c,var(--esmeralda));color:#fff;
    border-radius:999px;min-width:17px;height:17px;
    display:inline-flex;align-items:center;justify-content:center;
  }
  .app__ver:hover,.app__ver.is-on{border-color:var(--app-c,var(--esmeralda));color:var(--ink)}
  .app__list.desplegada{animation:none}
}

/* ── Que nada empuje la página a lo ancho (15-ago-2026) ─────────────────────
   Medido: el CSS no tenía NI UNA regla para partir palabras largas, y en las
   páginas hay correos de 31 letras («contacto@amigasoftwarehseq.com»). En una
   pantalla de 320px una cadena así no cabe y, al no poder partirse, ensancha
   su contenedor y aparece la barra horizontal — el síntoma clásico de «se ve
   raro en el móvil».
   🔑 `anywhere` en vez de `break-all`: solo parte cuando NO queda otra, así que
   las palabras normales siguen partiéndose por donde deben. */
body{overflow-x:hidden}
p, li, td, dd, .lead, .app__list, .conf__c span, .nos p{overflow-wrap:anywhere}

/* ═══════════════════════════════════════════════════════════════════════════
   EL NOMBRE DEL PRODUCTO EN LA REJILLA DEL MÓVIL (15-ago-2026)

   🔴 EL FALLO: al armar la tarjeta de la rejilla escribí «cada producto, una
   tarjeta con su nombre DENTRO»... y el nombre no se veía en NINGÚN teléfono.
   `.half.es-rejilla .hnode small` (0,3,1) gana en especificidad, pero NO declara
   `display`, así que el `.hnode small{display:none}` de @media(max-width:640px)
   seguía mandando. Entre 641 y 720px sí salía; en un móvil de verdad, no.
   🔑 La lección: más especificidad solo gana en las propiedades que DECLARAS.

   🔑 El nombre sale de `data-title`, que el botón YA traía: no hace falta tocar
   la vista. Y `order` lo coloca encima del rótulo aunque en el DOM vaya al final.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:720px){
  .half.es-rejilla .hnode small{display:block;order:3;opacity:.72}

  .half.es-rejilla .hnode::after{
    content:attr(data-title);
    order:2;
    font-size:.82rem;
    font-weight:700;
    line-height:1.2;
    letter-spacing:0;
    color:var(--c1);
    text-transform:none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ESCRITORIO: QUE LOS RÓTULOS DEJEN DE PISARSE, Y EL NOMBRE AL PASAR EL RATÓN
   (15-ago-2026)

   El ancho lo calcula el JS midiendo el arco y lo deja en `--rotulo`. Aquí solo
   se usa. El 106px del final es la RESERVA: si el JS no llegara a correr, la
   órbita se ve exactamente como antes en vez de romperse.
   ═══════════════════════════════════════════════════════════════════════════ */
.hnode small{width:var(--rotulo,106px)}

@media (min-width:721px){
  /* El NOMBRE del producto, en una pastilla sobre el icono. Solo al apuntar o
     al llegar con el teclado: si estuviera siempre, sería otra tira que pisar.
     🔑 En la rejilla del móvil ::after es el nombre FIJO de la tarjeta; por eso
     esto vive en min-width:721px y los dos usos no se estorban. */
  .hnode::after{
    content:attr(data-title);
    position:absolute;
    bottom:calc(100% + 9px);
    left:50%;
    transform:translateX(-50%) translateY(4px);
    white-space:nowrap;
    padding:6px 11px;
    border-radius:999px;
    background:var(--c1,#0C8A62);
    color:#fff;
    font-size:.74rem;
    font-weight:700;
    letter-spacing:.02em;
    line-height:1;
    box-shadow:0 10px 24px -12px rgba(15,31,26,.55);
    opacity:0;
    pointer-events:none;
    z-index:8;
    transition:opacity .18s ease, transform .18s ease;
  }
  .hnode:hover::after,
  .hnode:focus-visible::after{opacity:1;transform:translateX(-50%) translateY(0)}
}

@media (prefers-reduced-motion:reduce){
  .hnode::after{transition:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   LA REJILLA DEL MÓVIL, EN CAJA NORMAL (15-ago-2026)

   La mayúscula sostenida sirve para etiquetas de una o dos palabras («EL CENTRO
   ERES TÚ»): son rótulos que se reconocen, no que se leen. Con cuatro palabras y
   dos líneas hace daño, porque quita el perfil de la palabra —los palos de la d,
   la t, la q— y esa silueta es lo que deja leer de un vistazo. En caja alta se
   lee letra por letra.

   🔑 Y en la tarjeta hay una razón de jerarquía: el NOMBRE ya va en negrita y en
   color. Una segunda línea en versales y con letra separada compite con él, y la
   que acaba gritando más es la secundaria.

   ⛔ El escritorio NO se toca: ahí el rótulo mide 8.8px y hace de etiqueta al
   lado del icono, que es justo donde la versal está bien empleada.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:720px){
  .half.es-rejilla .hnode small{
    text-transform:none;
    letter-spacing:.01em;   /* la caja baja no necesita tracking: junta se lee mejor */
    opacity:.78;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   EL RÓTULO SE COLOCA CON --rx/--ry (15-ago-2026)

   Antes iba siempre recto debajo (`top:calc(100% + 8px)`). Ahora el JS resuelve
   la posición —radial hacia fuera del arco donde cabe, debajo donde no— y la
   deja en dos variables.

   🔑 LOS VALORES POR DEFECTO SON LA RED DE SEGURIDAD: 0 y 60px reproducen
   exactamente la colocación de siempre. Si el JS no llegara a correr, la órbita
   se ve como antes en vez de amontonar los siete rótulos en el centro del nodo.
   ⛔ La rejilla del móvil no se entera: allí el rótulo es `position:static` y
   `transform:none`, que ganan por especificidad (0,3,1).
   ═══════════════════════════════════════════════════════════════════════════ */
.hnode small{
  top:50%;
  left:50%;
  transform:translate(calc(-50% + var(--rx,0px)), calc(-50% + var(--ry,60px)));
}

/* ═══════════════════════════════════════════════════════════════════════════
   RAIL EN MÓVIL · etiquetas bajo el icono  (16-ago-2026)
   ---------------------------------------------------------------------------
   Problema: por debajo de 640px se ocultan los globos (.rail__tip), así que el
   menú quedaba en SIETE iconos sin una sola palabra. En un sitio que la gente
   ve por primera vez desde el teléfono, eso es adivinar.
   Solución: la etiqueta corta viaja en data-corto y se pinta con ::after. Es la
   misma técnica que ya usan los rótulos de la órbita (content:attr(data-title)).

   🔑🔑 LA ALTURA DE 46px NO SE TOCA. La pastilla que sigue al enlace (.blob) se
   coloca desde JS con `blob.style.top = el.offsetTop`, pero su ALTO es fijo en
   CSS. Si aquí cambiara la altura del enlace, la pastilla quedaría descuadrada
   en todos los móviles y el JS no se enteraría. Por eso el icono se encoge y la
   etiqueta cabe DENTRO de los mismos 46px, en vez de estirar el enlace.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:720px){
  .rail{width:66px}
  /* 🔴🔴 EL MARGEN VIAJA CON EL RAIL. Al ensanchar el rail de 60 a 66px para
     que cupieran las etiquetas, me dejé esta línea: `main` seguía empezando en
     los 60px que fija la regla de ≤640px, y como este bloque va DESPUÉS y gana,
     el rail se comía 6px del contenido EN TODAS las páginas, en todo teléfono.
     Regla: si se toca el ancho del rail, se toca el margen en el mismo bloque. */
  main,footer.site{margin-left:66px}
  .rail__tip{display:none}              /* el globo lo sustituye la etiqueta */

  .rail__nav{
    gap:4px;
    /* Red de seguridad: si algún día no cupieran, el rail se desplaza en vez de
       recortarse. 🔑 Los 120px son lo que ocupan de VERDAD el logo (42), el
       relleno (52) y el pie (16): antes reservaba 150 «por si acaso» y con el
       noveno botón eso habría provocado un desplazamiento que no hacía falta —
       9×46 + 8×4 = 446px, y en la pantalla más pequeña (568px) hay 448.
       Una holgura inventada estorba igual que una medida corta. */
    max-height:calc(100vh - 120px);
    overflow-y:auto;
    scrollbar-width:none;
  }
  .rail__nav::-webkit-scrollbar{display:none}

  .rail__link{
    width:56px;height:46px;            /* ← el alto DEBE seguir siendo 46 */
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:2px;
  }
  .rail__link svg{width:18px;height:18px}
  .rail__link::after{
    content:attr(data-corto);
    font-family:var(--font-mono);
    font-size:.46rem;line-height:1;letter-spacing:.02em;
    text-transform:uppercase;opacity:.75;
    max-width:54px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .rail__link.is-active::after{opacity:1}
  .rail__link.is-active::before{left:-11px}   /* la barrita, al rail más estrecho */

  .blob{width:56px}                    /* alto: se queda en los 46 de siempre */
}

/* Enlace de continuidad al final de «Quiénes somos»: responde a la pregunta de
   quién eres y devuelve al visitante al camino de compra, sin obligarle a
   seguir desplazándose a ciegas. */
.nos__sigue{margin:26px 0 0;text-align:center}
@media (max-width:720px){ .nos__sigue{margin-top:20px} }

/* «Quiénes somos» era la ÚNICA entrada del rail sin color propio: caía al verde
   genérico de .rail--color .rail__link y desentonaba en un diseño donde cada
   sección tiene el suyo (inicio verde, suite azul, galería violeta, precios
   dorado, dudas rojo, contacto verde hondo). Frambuesa por dos razones: es un
   hueco libre en la rueda y separa bien de sus dos vecinos inmediatos. */
.rail--color .rail__link[data-sec="nosotros"]{--lc:#B03A6B}

/* ═══════════════════════════════════════════════════════════════════════════
   PIE · grupo de NAVEGACIÓN, separado del legal   (16-ago-2026)
   🔴🔴 La regla que ya existe es `footer.site a{color:inherit}` → especificidad
   (0,1,2). Un `.foot-nav a{color:…}` es (0,1,1) y PIERDE: el color no se
   aplicaría y parecería que «la clase no hace nada». Por eso se escribe con el
   contenedor delante. Es el mismo tropiezo anotado en la memoria: cuando una
   regla «no hace nada», mirar QUIÉN MÁS toca esa propiedad.
   ═══════════════════════════════════════════════════════════════════════════ */
.foot-nav{display:flex;gap:16px;flex-wrap:wrap}
footer.site .foot-nav a{color:var(--ink);opacity:.9;font-weight:600}
footer.site .foot-nav a:hover{color:var(--esmeralda-deep);opacity:1}

@media (max-width:720px){
  .foot-nav,.foot-legal{justify-content:center;gap:14px 18px}
  .foot-nav{order:-1}          /* navegar pesa más que lo legal: va arriba */
  /* En estrecho el pie se apila y se centra: Ami cae ENCIMA de la última fila.
     Ami ocupa 64px + 74px de alto = 138px desde abajo; 160 deja aire. */
  footer.site{padding-bottom:160px}
}

/* --- carril para Ami en el pie (25-ago-2026) ---
   Ami vive en `right:34px` y mide 78px de ancho: ocupa los 112px de la derecha.
   Sin este hueco, el último enlace legal (DATOS) le queda debajo. */
@media (min-width:721px){
  footer.site{padding-right:132px}
}

/* Puerta a /productos al cerrar la suite. Centrada y con aire, para que se lea
   como un paso siguiente y no como una tarjeta más de la lista. */
.suite-mas{
  margin:48px auto 0;max-width:640px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.suite-mas p{
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-soft);margin:0;
}
@media (max-width:720px){
  .suite-mas{margin-top:34px;padding:0 18px}
  .suite-mas p{font-size:.68rem}
}

/* Icono de «Quiénes somos». Se añadió el 16-ago con las clases .cabeza/.hombros
   pero SIN una sola regla: era el ÚNICO de los siete sin animación de hover, y
   las clases no hacían nada. Un saludo con la cabeza, que es lo que pega en la
   sección donde te presentas. Origen en el cuello (12, 11.6) para que asienta y
   no gire flotando. */
.rail__link[data-sec="nosotros"] .cabeza{transform-origin:12px 11.6px}
.rail__link[data-sec="nosotros"]:hover .cabeza{animation:saluda .7s var(--ease-spring)}
@keyframes saluda{35%{transform:translateY(-2px) rotate(-7deg)}70%{transform:translateY(.5px) rotate(3deg)}}
.rail__link[data-sec="nosotros"]:hover .hombros{animation:hombros .7s var(--ease-spring)}
@keyframes hombros{45%{transform:translateY(-1.5px)}75%{transform:translateY(.4px)}}

/* ═══════════════════════════════════════════════════════════════════════════
   «QUIÉNES SOMOS» · versión definitiva   (16-ago-2026)
   ---------------------------------------------------------------------------
   Lo que pidió: que demuestre ALTO ESTATUS, que sea un ejemplo de aprovechar el
   espacio, y poder poner fotos de clientes y de la historia. La versión anterior
   dejaba medio ancho VACÍO debajo del titular.
   🔑🔑 La decisión de fondo: NO inventar un lenguaje nuevo. La sección de cada
   producto ya tiene el vocabulario bueno —`.frame` con su pie en versalitas, la
   sombra larga y baja, el levantarse un pelo al pasar por encima—. Reutilizarlo
   hace que esta sección se lea como LA MISMA MANO, que es de lo que está hecho
   el estatus: coherencia, no adornos.
   Composición: una columna editorial a la izquierda (rótulo → titular → texto →
   botón) y a la derecha un mosaico de tres fotos —una grande y dos pequeñas—
   que ocupa justo el alto que antes estaba vacío.
   ═══════════════════════════════════════════════════════════════════════════ */
#nosotros{
  background:var(--paper);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  column-gap:clamp(36px,5vw,76px);
  align-items:center;              /* el texto se centra contra el mosaico */
  /* 🔑 TOPE DE ANCHO, pero SIN centrar. En un monitor ancho las dos columnas se
     estiraban y el marco grande se volvía un rectángulo enorme (su comentario:
     «la sección se vuelve muy ancha»). El tope lo corta; y va sin `margin:auto`
     a propósito, para que el borde izquierdo siga ALINEADO con «La suite» de
     abajo. Centrarlo lo habría metido hacia dentro y desalineado con la página,
     que es el mismo error que ya me costó una vuelta. */
  max-width:1380px;
}

/* ---------- la columna de texto ---------- */
.nos__texto{max-width:52ch}
#nosotros h2{
  font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.7rem,2.9vw,2.45rem);line-height:1.14;
  max-width:16ch;                  /* el titular es un lema: corta corto */
}
/* 🔑 21-ago-2026: el hueco entre parrafos era MENOR que el interlineado
   (gap 15px contra 1.6 de line-height = 26px), asi que el ojo no separaba los
   bloques: se leia como un texto suelto con las lineas flotando. Ahora el hueco
   es una linea COMPLETA, que es la regla de siempre en tipografia, y el cuerpo
   va algo mas apretado porque la columna es estrecha (52ch).
   Y el titular tenia 22px por debajo para un bloque de tres lineas: se queda
   pegado al primer parrafo. */
.nos{display:flex;flex-direction:column;gap:26px;margin-top:64px}
.nos p{color:var(--ink-soft);font-size:1.02rem;line-height:1.55}
/* Entradilla: jerarquía sin añadir marcado. */
.nos p:first-child{font-size:1.13rem;color:var(--ink);line-height:1.45}
.nos__sigue{margin-top:30px;text-align:left}

/* ---------- el mosaico ---------- */
.nos__mosaico{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(10px,1.1vw,16px);
  /* 🔴🔴 EL `width:100%` NO ES DECORATIVO. Sin un ancho definido, un
     `margin-left:auto` hace que el elemento se encoja a su CONTENIDO en vez de
     ocupar la columna; y como los marcos solo tienen `aspect-ratio` y ningún
     ancho propio, el mosaico entero se colapsó a unos pocos píxeles. Con el
     ancho explícito, el `auto` ya solo empuja hacia la derecha. */
  width:100%;max-width:560px;margin-left:auto;
}
.nos__foto{margin:0}
/* 3/2 y no 4/3: a este ancho, 4/3 daba un marco desproporcionadamente alto. */
.nos__foto--grande{grid-column:1/-1;aspect-ratio:3/2}
.nos__foto--chica{aspect-ratio:1/1}
.nos__foto img{width:100%;height:100%;object-fit:cover;display:block}
/* El pie se lee sobre la foto: un velo por debajo, no una caja. */
.nos__foto:not(.nos__foto--vacia)::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:46%;
  background:linear-gradient(to top,rgba(10,22,18,.62),transparent);
  pointer-events:none;
}
.nos__foto .frame__label{z-index:2}

/* El hueco sin foto: PENDIENTE, no roto. Mismo criterio que las capturas de los
   productos, pero en cálido —aquí hay personas, no pantallas— y con el borde
   punteado, que es como el resto del sitio dice «esto todavía no está». */
.nos__foto--vacia{
  background:
    radial-gradient(120% 90% at 22% 12%, rgba(12,138,98,.07), transparent 62%),
    linear-gradient(155deg,var(--bone),#EFECE4);
  border:1px dashed rgba(15,31,26,.22);
  box-shadow:none;
}
.nos__foto--vacia:hover{transform:none;box-shadow:none}
.nos__foto--vacia .frame__label{
  color:var(--ink-soft);opacity:.72;
  left:0;right:0;bottom:auto;top:50%;transform:translateY(-50%);
  text-align:center;padding:0 12px;
}

/* ---------- el revelado, coreografiado ----------
   🔴 Antes cada hijo llevaba `.rv`: eran cuatro observadores distintos y, como
   el botón queda muy por debajo del titular, entraban en momentos diferentes y
   la sección se montaba A PEDAZOS al bajar. Ahora dispara la SECCIÓN y las
   piezas entran escalonadas: una frase, no cuatro palabras sueltas.
   🔑 La banda no se desvanece: si el fondo hiciera fundido se vería parpadear. */
#nosotros.rv{opacity:1;transform:none;transition:none}
/* 🔑 Solo se DESVANECE, no viaja. Los demás bloques del sitio suben 28px al
   aparecer, y en piezas pequeñas se lee como elegancia; pero aquí los hijos son
   dos columnas enormes, así que ese viaje se leía como «baja un escalón y
   vuelve a subir» —palabras suyas, dichas dos veces—. Una masa grande moviéndose
   no es lo mismo que un detalle moviéndose. */
#nosotros > *{
  opacity:0;
  transition:opacity .8s var(--ease-smooth);
}
#nosotros.in > *{opacity:1}
#nosotros.in .nos__texto{transition-delay:.02s}
#nosotros.in .nos__mosaico{transition-delay:.16s}

/* ---------- una columna cuando aprieta ---------- */
@media (max-width:900px){
  #nosotros{grid-template-columns:1fr;row-gap:34px;align-items:start}
  .nos__texto{max-width:62ch}
  #nosotros h2{max-width:22ch}
}
@media (max-width:720px){
  #nosotros h2{font-size:1.5rem;max-width:none}
  .nos p:first-child{font-size:1.06rem}
  .nos{gap:20px;margin-top:40px}
  .nos__mosaico{gap:9px}
}

@media (prefers-reduced-motion:reduce){
  #nosotros > *{opacity:1;transform:none;transition:none}
  #nosotros.in > *{transition-delay:0s}
}

/* ═══════════════════════════════════════════════════════════════════════════
   EL «ESCALÓN» DE LA PORTADA · la tarjeta del héroe reserva su sitio
   (16-ago-2026)
   ---------------------------------------------------------------------------
   🔴🔴 El síntoma que él describió dos veces: «parece que baja un escalón y
   después vuelve a subirlo», y la clave la dio él mismo: **dejó la pantalla
   quieta, sin tocar el ratón, y aun así se movía**. Eso descarta el scroll y
   descarta el revelado: era algo periódico.
   🔍 Cómo se cazó: midiendo TRES capturas suyas contra el rail, que es
   `position:fixed` y por tanto no se mueve con el scroll. La sección bajaba
   117 → 125 → 161 px respecto al rail, pero por dentro NO se deformaba (la
   distancia titular↔marco era 46, 47, 46). ⇒ **No era la sección: algo de
   ARRIBA crecía y la empujaba.**
   🎯 La causa: `vitrina.js` tiene un `setInterval(…, 6500)` que rota solo el
   producto de la órbita y reescribe la tarjeta —lema, chips y precio—. Y los
   textos miden distinto en cada producto: el lema va de 40 a 65 caracteres
   (1 ó 2 líneas) y los chips, que son un `flex-wrap`, ocupan 3 filas en seis
   productos y 2 en AmigaEquipos Esencial. Total: ~58px de vaivén cada 6,5 s,
   que empujaban TODA la página.
   ✅ La solución no es apagar la rotación —es una función del diseño— sino
   **reservarle el sitio del peor caso**, que es lo que se hace siempre con
   contenido que rota. Un poco de aire en los productos cortos, a cambio de que
   la página deje de respirar sola.
   🔑 Y NO se toca el JS: el problema no era el comportamiento, era que la
   maqueta no tenía sitio reservado para él.
   ═══════════════════════════════════════════════════════════════════════════ */
.eco-card__mantra{min-height:2.7em}   /* 2 líneas a line-height 1.35 */
.eco-card__comps{min-height:102px}    /* 3 filas de chips (29px) + 2 huecos (7px) */

@media (max-width:900px){
  /* Apilado, la tarjeta es más ancha: el lema cabe en una línea y los chips en
     menos filas. Reservar de más aquí solo dejaría un hueco feo. */
  .eco-card__mantra{min-height:0}
  .eco-card__comps{min-height:0}
}

/* ═══════════════════════════════════════════════════════════════════════════
   PÁGINA DE FERIA · registro exprés   (16-ago-2026)
   ---------------------------------------------------------------------------
   Se llena de pie, con una mano y con prisa. Todo lo de aquí sale de eso:
   campos altos (56px, el mínimo cómodo para un pulgar), chips grandes, y una
   sola columna para que nadie tenga que decidir por dónde seguir.
   🔑 Ni un color nuevo: los mismos tokens del resto del sitio. Si esta página
   se sintiera de otra web, la persona dudaría justo cuando va a dar su dato.
   ═══════════════════════════════════════════════════════════════════════════ */
body.v-feria main{min-height:60vh}
.feria{max-width:640px;padding-top:clamp(48px,7vh,90px)}

/* ---------- Ami ----------
   🔑 NO se redibuja: se REUTILIZA el del sitio. Mi primera versión era una
   copia a ojo —una bola con un brillo y una sonrisa— y él la describió justo:
   «parece el hermano feo de Ami». El de verdad tiene forma orgánica irregular
   que además late (`jelly`), sombras interiores, un resplandor dorado abajo,
   su sombra proyectada y los ojos con su reflejo y su parpadeo desfasado.
   Nada de eso se acierta copiando.
   ⛔ Y por eso tampoco se genera una imagen: un PNG no late, no escala y —lo
   peor— sería un SEGUNDO Ami que con el tiempo se desviaría del real. Esta es
   la misma pieza; si algún día cambia el original, esta cambia con él.
   Aquí solo se le quita el «flotar»: en la feria no es un botón, es el
   anfitrión de la página. */
.gum--quieto{
  position:relative;right:auto;bottom:auto;z-index:0;
  cursor:default;flex:none;
}
.feria__intro{display:flex;gap:20px;align-items:flex-start;margin-bottom:34px}
.feria h1{
  font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.5rem,3.4vw,2.1rem);line-height:1.18;margin-top:4px;
}
.feria .lead{margin-top:12px}

/* ---------- los campos ---------- */
.feria__form{display:flex;flex-direction:column;gap:16px}
.feria__campo{display:flex;flex-direction:column;gap:7px}
.feria__campo > span{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);
}
.feria__campo > span i{font-style:normal;opacity:.6;text-transform:none;letter-spacing:.04em}
.feria__campo input{
  height:56px;                       /* alto cómodo para el pulgar */
  padding:0 16px;font:inherit;font-size:1.02rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  transition:border-color .25s,box-shadow .25s;
}
.feria__campo input:focus{
  outline:none;border-color:var(--esmeralda);
  box-shadow:0 0 0 4px var(--esmeralda-glow);
}
.feria__campo input::placeholder{color:var(--ink-soft);opacity:.45}

/* La trampa para robots: fuera de la vista SIN `display:none`, que algunos
   robots detectan y esquivan. */
.feria__trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- bloques de opciones ---------- */
.feria__bloque{border:0;padding:0;margin:10px 0 0}
/* 🔴🔴 UN <legend> SE DIBUJA SOBRE EL BORDE, no dentro de la caja: por eso la
   etiqueta «Gratis» y el titular se veían despegados del bloque verde, flotando
   encima. `display:block` no lo arregla —legend es un elemento especial—; el que
   funciona es `float`, que lo saca de su comportamiento nativo y lo mete en el
   flujo como una caja normal. El `clear` de después evita que lo siguiente se le
   suba al lado. */
.feria__bloque legend{padding:0;margin:0 0 12px;float:left;width:100%}
.feria__bloque legend + *{clear:both}
.feria__bloque legend b{display:block;font-size:1.02rem;font-weight:700}
.feria__bloque legend small{
  display:block;margin-top:3px;font-family:var(--font-mono);font-size:.66rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);
}
/* La charla se destaca: es lo que la persona se lleva hoy, y por eso es la
   mejor razón para registrarse. */
.feria__bloque--charla{
  background:color-mix(in srgb,var(--esmeralda) 6%, transparent);
  border:1px solid color-mix(in srgb,var(--esmeralda) 20%, transparent);
  border-radius:var(--r-lg);padding:22px 20px;margin-top:22px;
}
.feria__bloque--charla legend{padding:0 4px}

.feria__chips{display:flex;flex-wrap:wrap;gap:9px}
.feria__bloque--charla .feria__chips{gap:8px}
.fchip{position:relative;cursor:pointer}
.fchip input{position:absolute;opacity:0;width:0;height:0}
.fchip > span{
  display:flex;flex-direction:column;gap:2px;
  padding:12px 16px;min-height:48px;justify-content:center;
  background:var(--paper);border:1px solid var(--line);border-radius:999px;
  font-size:.92rem;transition:border-color .25s,background .25s,transform .35s var(--ease-spring);
}
.fchip--fecha{width:100%}
/* 🔴 En FILA no cabe. Medido: a 360px de pantalla al texto le quedan ~236px y
   «Miércoles 23 de septiembre» más «7:00 p.m. · quedan 30» piden cerca de 330.
   Se partía en dos renglones y quedaba descuadrado —se ve en su captura, y en
   móvil sería peor—. Apiladas caben siempre, a cualquier ancho. */
.fchip--fecha > span{
  border-radius:var(--r-md);padding:13px 18px;
  flex-direction:column;align-items:flex-start;gap:3px;
}
.fchip--fecha b{font-size:.95rem;font-weight:700}
.fchip--fecha i{
  font-style:normal;font-family:var(--font-mono);font-size:.62rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);
}
.fchip input:focus-visible + span{outline:2px solid var(--esmeralda);outline-offset:2px}
/* 🔴🔴 25-ago-2026: el chip elegido se marcaba SOLO con la clase `is-on` que
   pone el JS. Si el JS no llega (CSP, caché, un error antes) el visitante toca
   y NO VE NADA: no sabe si eligió. Esta segunda regla la aplica el navegador
   con el estado REAL del radio, sin JS de por medio. Y se refuerza el aspecto
   —anillo interior y texto oscuro— porque el borde fino solo no se veía en el
   móvil. El anillo va con `box-shadow:inset` a propósito: engrosar el `border`
   movería el chip y la fila entera saltaría al tocar. */
.fchip.is-on > span,
.fchip input:checked + span{
  border-color:var(--esmeralda);
  background:color-mix(in srgb,var(--esmeralda) 14%, transparent);
  box-shadow:inset 0 0 0 1px var(--esmeralda);
  color:var(--esmeralda-deep);
}
.fchip.is-on i,
.fchip input:checked + span i{color:var(--esmeralda-deep)}
.fchip:active > span{transform:scale(.97)}
.fchip.is-lleno{opacity:.45;cursor:not-allowed}
.fchip.is-lleno > span{text-decoration:line-through}

/* ---------- autorización y envío ---------- */
.feria__consent{
  display:flex;gap:12px;align-items:flex-start;margin-top:18px;
  font-size:.86rem;color:var(--ink-soft);line-height:1.5;cursor:pointer;
}
.feria__consent input{width:22px;height:22px;flex:none;margin-top:2px;accent-color:var(--esmeralda)}
.feria__enviar{margin-top:22px;height:58px;justify-content:center;font-size:1.02rem}

.feria__nota{
  margin-top:14px;padding:12px 14px;border-radius:var(--r-md);
  font-size:.9rem;line-height:1.45;
}
.feria__nota--ok{
  background:color-mix(in srgb,var(--esmeralda) 10%, transparent);
  border:1px solid color-mix(in srgb,var(--esmeralda) 26%, transparent);
  color:var(--esmeralda-deep);
}
.feria__nota--mal{
  background:color-mix(in srgb,#C2452F 9%, transparent);
  border:1px solid color-mix(in srgb,#C2452F 26%, transparent);color:#8E3223;
}
.feria__error{
  margin-bottom:22px;padding:14px 16px;border-radius:var(--r-md);
  background:color-mix(in srgb,#C2452F 8%, transparent);
  border:1px solid color-mix(in srgb,#C2452F 24%, transparent);color:#8E3223;
}
.feria__error p{margin:0;font-size:.92rem}
.feria__error p + p{margin-top:5px}

/* ---------- la pantalla de «listo» ---------- */
.feria__ok{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.feria__ok .gum--quieto{margin-bottom:22px}
.feria__ok .lead{margin-top:14px}
.feria__ok-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.feria__otro{margin-top:26px;font-size:.86rem}
.feria__otro a{color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px}
.feria__otro a:hover{color:var(--esmeralda-deep)}

@media (max-width:720px){
  .feria__intro{gap:14px;flex-direction:column;align-items:flex-start}
  .feria__bloque--charla{padding:15px}
  .feria__ok-cta .btn{width:100%;justify-content:center}
}

/* La casilla de la reunión: destacada, porque es la señal de compra más fuerte
   que se recoge en un stand. Se parece a un chip grande, no a una casilla
   perdida — quien la marca está diciendo «llámame». */
.feria__reunion{
  display:flex;gap:14px;align-items:flex-start;cursor:pointer;
  margin-top:18px;padding:16px 18px;border-radius:var(--r-md);
  background:color-mix(in srgb,var(--oro) 9%, transparent);
  border:1px solid color-mix(in srgb,var(--oro) 30%, transparent);
  transition:border-color .25s,background .25s;
}
.feria__reunion:hover{border-color:color-mix(in srgb,var(--oro) 55%, transparent)}
.feria__reunion:has(input:checked){
  background:color-mix(in srgb,var(--oro) 17%, transparent);
  border-color:var(--oro);
}
.feria__reunion input{width:22px;height:22px;flex:none;margin-top:1px;accent-color:var(--oro)}
.feria__reunion b{display:block;font-size:.98rem;font-weight:700}
.feria__reunion i{
  display:block;margin-top:2px;font-style:normal;
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-soft);
}

/* La nota del modo anfitrión: se escribe de pie y entre cita y cita. */
.feria__campo textarea{
  padding:14px 16px;font:inherit;font-size:1rem;line-height:1.5;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  resize:vertical;min-height:92px;
  transition:border-color .25s,box-shadow .25s;
}
.feria__campo textarea:focus{
  outline:none;border-color:var(--esmeralda);box-shadow:0 0 0 4px var(--esmeralda-glow);
}
.feria__campo textarea::placeholder{color:var(--ink-soft);opacity:.45}

/* ═══════════════════════════════════════════════════════════════════════════
   FERIA · sin rail  (16-ago-2026)
   Medido: en una pantalla de 360px el rail se llevaba 66px, y al formulario le
   quedaba el 68%. Quien abre esta página va a registrarse, no a navegar: el
   menú ahí solo cobra espacio. Quitándolo el formulario gana un 27% de ancho.
   🔑 Es la única página del sitio sin rail, y es a propósito: su trabajo es
   capturar un dato, no enseñar la casa. La vuelta al sitio la da la marca de
   arriba y, al terminar, el botón «Ver qué hacemos».
   ═══════════════════════════════════════════════════════════════════════════ */
/* 🔑 El menú se quita SOLO en el teléfono. La medición que justificaba quitarlo
   (el rail se llevaba 66 de 360px, el 18%) es cierta en un móvil y falsa en un
   computador, donde el ancho sobra. Quitarlo en los dos sitios era aplicar una
   medida de un contexto al otro — que es el mismo error que ya cometí con el
   revelado de la sección de nosotros. */
@media (max-width:720px){
  body.v-feria .rail{display:none}
  .feria__marca{display:inline-flex}
  body.v-feria main,
  body.v-feria footer.site{margin-left:0}
}
body.v-feria .feria{max-width:600px}

.feria__marca{
  display:none;align-items:center;gap:10px;margin-bottom:30px;
  text-decoration:none;color:var(--ink-soft);
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  transition:color .25s;
}
.feria__marca:hover{color:var(--esmeralda-deep)}
.feria__marca-a{
  width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--esmeralda),var(--esmeralda-deep));
  color:#fff;font-family:var(--font-display);font-weight:800;font-size:.9rem;
  letter-spacing:0;box-shadow:0 6px 14px -5px rgba(6,86,64,.45);
}


/* ═══════════════════════════════════════════════════════════════════════════
   FERIA · el bloque de la charla, con aire   (16-ago-2026)
   Estaba «apretado» (palabra suya) y con razón: el titular ocupaba dos líneas,
   debajo una línea de versalitas larguísima, y las fechas en una columna
   estrecha que dejaba medio bloque vacío a la derecha. Ahora el título respira,
   la etiqueta «Gratis» se lleva el peso de la promesa, y cada fecha ocupa el
   ancho completo con la hora alineada al otro extremo.
   ═══════════════════════════════════════════════════════════════════════════ */
.feria__bloque--charla legend b{font-size:1.1rem;line-height:1.25;margin-top:8px}
.feria__gratis{
  display:inline-block;padding:4px 12px;border-radius:999px;
  background:var(--esmeralda);color:#fff;
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
}
.feria__bloque--charla legend small{
  letter-spacing:.04em;line-height:1.55;margin-top:7px;opacity:.8;font-size:.62rem;
}
.feria__bloque--charla legend b{max-width:30ch}
.feria__elige{
  margin:16px 0 10px;font-family:var(--font-mono);font-size:.63rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--esmeralda-deep);
}
.fchip--fecha b{font-size:1rem}
.fchip--fecha i{white-space:nowrap}

/* El boletín: presente pero sin gritar. La reunión es la señal de compra y no
   puede competir con ella. */
.feria__boletin{
  display:flex;gap:12px;align-items:flex-start;cursor:pointer;
  margin-top:12px;padding:14px 16px;border-radius:var(--r-md);
  border:1px solid var(--line);background:var(--paper);
  transition:border-color .25s;
}
.feria__boletin:hover{border-color:var(--esmeralda)}
.feria__boletin:has(input:checked){
  border-color:var(--esmeralda);
  background:color-mix(in srgb,var(--esmeralda) 7%, transparent);
}
.feria__boletin input{width:22px;height:22px;flex:none;margin-top:1px;accent-color:var(--esmeralda)}
.feria__boletin b{display:block;font-size:.94rem;font-weight:600}
.feria__boletin i{
  display:block;margin-top:2px;font-style:normal;font-size:.82rem;
  color:var(--ink-soft);
}

/* «Ninguna me sirve»: una opción más, pero visualmente en segundo plano — no
   compite con las fechas reales, solo recoge al que se iría sin marcar nada. */
.fchip--otra > span{
  background:transparent;border-style:dashed;
  border-color:color-mix(in srgb,var(--esmeralda) 32%, transparent);
}
.fchip--otra b{font-weight:600;color:var(--ink-soft)}
.fchip--otra.is-on > span,
.fchip--otra input:checked + span{
  background:color-mix(in srgb,var(--esmeralda) 10%, transparent);
  border-style:solid;
}
.fchip--otra.is-on b,
.fchip--otra input:checked + span b{color:var(--ink)}

/* ═══════════════════════════════════════════════════════════════════════════
   AMI EN EL RAIL · la entrada a /hola   (16-ago-2026)
   ---------------------------------------------------------------------------
   🔑 Ami va aquí en TRAZO, no como la bola de verdad. El rail es línea
   monocroma —casa, cuadrícula, sobre, llave— y meter una esfera con degradado
   y sombras habría gritado desde el primer vistazo. La forma es la suya (cuerpo
   redondeado que se estrecha abajo, dos ojos juntos), pero hablando el idioma
   de sus vecinos. Es el mismo criterio de siempre: se reutiliza la IDENTIDAD,
   no el dibujo.
   🔑 Y como los otros seis, tiene su gesto al pasar por encima: aquí parpadea,
   que es lo que hace Ami.
   ═══════════════════════════════════════════════════════════════════════════ */
.rail--color .rail__link[data-sec="hola"]{--lc:#C69A3C}
/* 🔴 El cuerpo SÍ lleva relleno, contra la regla del rail (`svg{fill:none}`), y
   es deliberado: un contorno vacío con dos ojos no se lee como Ami, se lee como
   un fantasma —él dijo «icono de zombi» y tenía razón—. Un velo del 13% le da
   cuerpo sin romper el monocromo. Al pasar por encima se llena un poco más,
   como si se acercara. */
.rail__link[data-sec="hola"] .amicuerpo{
  transition:fill-opacity .35s, transform .5s var(--ease-spring);
}
.rail__link[data-sec="hola"]:hover .amicuerpo,
.rail__link[data-sec="hola"].is-active .amicuerpo{fill-opacity:.2}
.rail__link[data-sec="hola"] .amiojo{transform-origin:center;transform-box:fill-box}
.rail__link[data-sec="hola"]:hover .amiojo{animation:amiparpadeo .7s var(--ease-spring)}
.rail__link[data-sec="hola"]:hover .amiojo--r{animation-delay:.07s}
@keyframes amiparpadeo{0%,100%{transform:scaleY(1)}35%{transform:scaleY(.12)}70%{transform:scaleY(1.2)}}
.rail__link[data-sec="hola"]:hover .amicuerpo{transform:translateY(-1px) scale(1.03)}

/* Teléfonos pequeños (320 px: iPhone SE y gama baja, que en Colombia se usan
   mucho). Medido: «Miércoles 23 de septiembre» se pasaba por 20 px y partía en
   dos renglones. Se recupera quitando relleno —donde no se nota— en vez de
   encoger la letra, que sí se nota. */
@media (max-width:360px){
  .feria__bloque--charla{padding:16px 14px}
  .fchip--fecha > span{padding:12px 13px}
  .fchip > span{padding:11px 13px}
  .feria__reunion,.feria__boletin{padding:13px 13px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   AMI EN PRECIOS   (16-ago-2026)
   ---------------------------------------------------------------------------
   Ocupa el vacío de la derecha de la cabecera. Es el MISMO componente `.gum`
   del sitio —ni un píxel redibujado—, solo más grande y quieto.
   🔑 Los gestos (cosquillas, sonrisa, risa) ya existen en CSS para el Ami
   flotante: `.gum.poke`, `.poked`, `.squint`, `.giggle`, `.happy`. Aquí se
   REUTILIZAN tal cual; lo único nuevo es quién se los pone (feria.js) y este
   bloque de tamaño y colocación.
   ═══════════════════════════════════════════════════════════════════════════ */
.precios-cab{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);
  gap:clamp(24px,4vw,64px);align-items:center;max-width:1380px;
}
.ami-precios{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:16px;
  padding:8px 0;
}
/* Más grande que el flotante: aquí es una presencia, no un botón de esquina.
   Las medidas internas de .gum son en px y escalan con `scale`, no con width,
   para no descuadrar ojos ni brillos. */
/* 🔴🔴 `scale()` NO cambia el sitio que el elemento ocupa en la maqueta, solo
   cómo se ve. `.gum` mide 78x74 y sigue midiendo eso aunque se pinte a 1,55:
   su cuerpo agrandado sobresale ~20px por arriba y por abajo de su propia caja
   — y por arriba está el bocadillo, así que lo pisaba. El margen reserva ese
   desbordamiento. 🔑 No se puede agrandar con width/height porque los ojos, el
   brillo y la sombra están colocados en PÍXELES dentro de esos 78x74. */
.gum--grande{transform:scale(1.55);transform-origin:center;margin:24px 0}
.gum--quieto{cursor:pointer}

/* 🔑 BOCADILLO, no texto suelto — idea suya, y mejor: el texto flotando parecía
   un titular; con globo se lee como que Ami ESTÁ HABLANDO. Se copia el lenguaje
   del bocadillo del Ami flotante (`.gum__bubble`): vidrio esmerilado, borde
   claro, sombra baja y la tipografía de display a .85rem. Lo único distinto es
   el pico: aquel sale de la esquina porque el globo va arriba a la derecha;
   este va centrado ENCIMA de Ami, así que el pico apunta hacia abajo al centro. */
.ami-precios__globo{
  position:relative;max-width:24ch;text-align:center;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.7);
  border-radius:18px;padding:11px 16px;
  box-shadow:0 12px 26px -12px rgba(15,31,26,.25);
  font-family:var(--font-display);font-weight:600;
  font-size:.85rem;line-height:1.42;color:var(--ink);
  opacity:0;transform:translateY(8px) scale(.9);transform-origin:bottom center;
  transition:opacity .35s,transform .45s var(--ease-spring);
}
.ami-precios__globo::after{
  content:"";position:absolute;left:50%;bottom:-7px;margin-left:-7px;
  width:14px;height:14px;transform:rotate(45deg);
  background:rgba(255,255,255,.72);
  border-right:1px solid rgba(255,255,255,.7);
  border-bottom:1px solid rgba(255,255,255,.7);
}
.ami-precios__globo.se-ve{opacity:1;transform:none}

/* 🔑 El sitio se reserva en el CONTENEDOR, no en el globo: así el bocadillo
   tiene el alto justo de su frase —que es como se ve bien— y aun así la página
   no salta cuando pasa de una frase de dos líneas a otra de tres. Reservarlo en
   el globo lo dejaría con un hueco vacío debajo en las frases cortas. */
/* 245px = el peor caso medido: globo de 4 líneas (101) + hueco (16) + los
   24+74+24 de Ami con su desbordamiento reservado. Así la sección NO cambia de
   alto al pasar de una frase larga a una corta. */
.ami-precios{min-height:245px;justify-content:center}

/* 🔑 «TÓCAME» en versalitas parecía el botón de una máquina. Esto es Ami
   CONTESTANDO cuando te acercas, así que se escribe como se habla: en su
   tipografía de texto, sin mayúsculas y sin el espaciado de rótulo. El chiste
   sale del campo «Línea pequeña de arriba» de la misma fila del panel, que no
   se usaba para nada — así él lo cambia cuando se le ocurra otro mejor. */
.ami-precios::after{
  content:attr(data-toque);position:absolute;bottom:-10px;
  font-family:var(--font-display);font-weight:600;font-size:.82rem;
  color:var(--esmeralda-deep);opacity:0;
  transform:translateY(-4px) rotate(-2deg);
  transition:opacity .35s var(--ease-spring),transform .35s var(--ease-spring);
  pointer-events:none;white-space:nowrap;
}
.ami-precios:hover::after{opacity:.85;transform:none}

@media (max-width:900px){
  .precios-cab{grid-template-columns:1fr;gap:30px}
  /* En el teléfono Ami va DEBAJO del texto y más pequeño: arriba robaría la
     primera pantalla, que es donde tiene que leerse el titular. */
  .ami-precios{order:2;min-height:210px}
  .gum--grande{transform:scale(1.15);margin:10px 0}
  .ami-precios__globo{font-size:.82rem;max-width:28ch}
}
@media (prefers-reduced-motion:reduce){
  .ami-precios__globo{transition:none;opacity:1;transform:none}
}

/* 🔑 21-ago-2026 · La burbuja de Ami va FIJA en la esquina inferior derecha,
   así que en el móvil se sentaba encima del botón «Hablemos» de la última
   tarjeta. Más aire abajo y el botón sube por encima de ella. */
@media (max-width:560px){
  .cta-final{padding-bottom:96px}
}

/* --- tarjeta final en pantallas estrechas --- */
/* 🔑 Medido, no estimado: a 360px el titular pedía 202px y solo tenía 198.
   Bajando el relleno a 20 y el cuerpo a 1.75rem pasa a pedir 177 sobre 206
   disponibles. La holgura es la diferencia entre «cabe» y «cabe siempre». */
@media (max-width:420px){
  .cta-final{padding-left:20px;padding-right:20px}
  .cta-final h2{font-size:1.75rem}
}
@media (max-width:340px){
  .cta-final h2{font-size:1.5rem}
}

/* 🔴 25-ago · A 320px la página se desplazaba 13px de lado. Medido hasta el
   final: NO eran los chips (van en un carril que se desliza a propósito) ni el
   halo decorativo. Era el TITULAR: a 320 el hero deja 206px de sitio y el h1
   pedía 243, porque «estandarizada,» no cabe entera y una palabra no se parte
   sola. Se deja partir y se baja un punto el tamaño.
   🔑 Mi primer intento —recortar el halo con `overflow:hidden`— no cambió NADA:
   se quitó. Un arreglo que no mueve la medición no es un arreglo. */
@media (max-width:360px){
  /* 🔑🔑 El que estiraba la columna era el ANTETÍTULO, no el titular: es un
     `inline-flex` (rayita + texto en mayúsculas con `letter-spacing:.28em`) y
     un inline-flex NO parte líneas ⇒ pedía 243px donde hay 206. Se le deja
     partir. Es la misma lección de la revisión móvil de agosto: `flex-wrap`,
     no `min-width:0`. */
  .eyebrow{flex-wrap:wrap;letter-spacing:.18em}
  .eco-title{font-size:1.62rem;overflow-wrap:anywhere}
  /* ⛔ Se PROBÓ `\.hero > div{min-width:0}` y se quitó: el desborde de 320px
     seguía (lo causa el círculo `.core`, no la columna) y de paso movía el hero
     lo justo para que Ami volviera a rozar el botón. Un arreglo que no arregla
     y sí mueve otra cosa, fuera. */
}