/* =====================================================================
   Maritima · LP variant A — "Protocolo · Dos veces"
   Sala de planificación: porcelain base, one dark planning screen,
   a mono data layer for everything measurable, technical linework.
   Colour rule (hard): cyan only on dark, teal only on light.
   ===================================================================== */

/* ------------------------------------------------------------- fonts */
@font-face{font-family:"Archivo";src:url("/lp/fonts/archivo.woff2") format("woff2");
  font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("/lp/fonts/instrumentsans.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Spline Sans Mono";src:url("/lp/fonts/splinesansmono.woff2") format("woff2");
  font-weight:300 700;font-style:normal;font-display:swap}

/* ------------------------------------------------------------ tokens */
:root{
  --hueso:#F5F7F6;      /* page base            */
  --porcelana:#E8EDEC;  /* secondary surfaces   */
  --papel:#FFFFFF;      /* cards                */
  --panel:#0C1E24;      /* the planning screen  */
  --tinta:#12272E;      /* body text, CTA face  */
  --tinta-mut:#47585E;  /* 6.9:1 on hueso       */
  --teal:#0E6470;       /* interaction on light, 6.3:1 */
  --cian:#6FD4E0;       /* interaction on dark,  9.9:1 */
  --linea:#CBD6D4;
  --error:#9E2B25;

  --panel-mut:rgba(245,247,246,.72);
  --panel-line:rgba(111,212,224,.26);
  --panel-fill:rgba(111,212,224,.07);

  --f-disp:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-body:"Instrument Sans",-apple-system,"Segoe UI",Arial,sans-serif;
  --f-mono:"Spline Sans Mono",SFMono-Regular,Consolas,monospace;

  --t-hero:clamp(2.4rem,8.5vw,4.5rem);
  --t-h2:clamp(1.8rem,6vw,3rem);
  --t-h3:clamp(1.25rem,4vw,1.6rem);
  --t-body:clamp(1rem,2.6vw,1.125rem);
  --t-data:.8125rem;

  --ease:cubic-bezier(.16,1,.3,1);
  --wrap:1200px;
  --gut:clamp(1.25rem,4vw,3rem);
  --sp-sec:clamp(3.5rem,9vw,7rem);   /* normal section rhythm            */
  --sp-break:clamp(5rem,12vw,9rem);  /* the page breathes before a decision */
  --cut:10px;                        /* cut corner, top-left             */
}

/* ------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;overflow-x:clip;background:var(--hueso);color:var(--tinta);
  font-family:var(--f-body);font-size:var(--t-body);line-height:1.55;
  font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
h1,h2,h3,p,dl,dd,figure,ul,ol{margin:0}
ul,ol{list-style:none;padding:0}
a{color:inherit}
button,input,select{font:inherit;color:inherit}

:where(a,button,summary,input,select,[tabindex]):focus-visible{
  outline:3px solid var(--teal);outline-offset:3px;border-radius:2px}
.panel :where(a,button,summary,input,select):focus-visible,
.reserva__intro :where(a,button):focus-visible,
.team__band :where(a,button):focus-visible,
.sticky :where(a,button):focus-visible{outline-color:var(--cian)}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
[id]{scroll-margin-top:1.25rem}

.skip{position:absolute;left:-9999px;top:0;z-index:60;background:var(--tinta);color:var(--hueso);
  padding:.85rem 1.25rem;font-family:var(--f-mono);font-size:var(--t-data);text-decoration:none}
.skip:focus{left:.5rem;top:.5rem}

/* --------------------------------------------------------- typography */
.f-disp,h1,h2,.wordmark__a{font-family:var(--f-disp);font-stretch:122%;
  font-variation-settings:"wdth" 122}
h1,h2{font-weight:600;line-height:1.06;letter-spacing:-.005em}

.h2{font-size:var(--t-h2)}
.lead{font-size:var(--t-body);max-width:62ch;margin-top:1.25rem;color:var(--tinta-mut)}

.eyebrow{font-family:var(--f-mono);font-size:var(--t-data);font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:var(--teal)}
.eyebrow--dark{color:var(--cian)}

/* ---------------------------------------------------------- document */
/* Cut top-left corner = "plan sheet". Border is a second layer so the
   diagonal keeps its hairline; clip-path on the element itself would
   also clip the focus ring. */
.doc{position:relative;isolation:isolate;--doc-bg:var(--papel);--doc-line:var(--linea)}
.doc::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--doc-line);
  clip-path:polygon(var(--cut) 0,100% 0,100% 100%,0 100%,0 var(--cut))}
.doc::after{content:"";position:absolute;inset:1px;z-index:-1;background:var(--doc-bg);
  clip-path:polygon(calc(var(--cut) - 1px) 0,100% 0,100% 100%,0 100%,0 calc(var(--cut) - 1px))}

/* ----------------------------------------------------------- buttons */
.btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;
  justify-content:center;gap:.6rem;min-height:56px;padding:.9rem 1.6rem;border:0;
  background:transparent;cursor:pointer;text-decoration:none;text-align:center;
  font-family:var(--f-mono);font-size:var(--t-data);font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;
  transition:transform 200ms var(--ease)}
.btn .ico{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}

.btn--primary{color:var(--hueso)}
.btn--primary::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--tinta);
  clip-path:polygon(var(--cut) 0,100% 0,100% 100%,0 100%,0 var(--cut));
  transition:background 200ms var(--ease)}
.btn--primary::after{content:"";position:absolute;left:1.5rem;right:1.5rem;bottom:.75rem;
  height:1.5px;background:var(--cian);transform:scaleX(0);transform-origin:left;
  transition:transform 250ms var(--ease)}
.btn--primary:hover{transform:translateY(-1px)}
.btn--primary:hover::after,.btn--primary:focus-visible::after{transform:scaleX(1)}
.btn--primary:active{transform:translateY(1px)}
.btn--primary[disabled]{opacity:.6;cursor:not-allowed;transform:none}
.btn--primary[disabled]::after{transform:scaleX(0)}
.btn--full{display:flex;width:100%}

.btn--ghost{border-radius:6px;color:var(--cian);
  box-shadow:inset 0 0 0 1.5px currentColor;transition:background 200ms var(--ease)}
.btn--ghost:hover{background:var(--panel-fill)}

/* ------------------------------------------------------------ topbar */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:56px;padding-inline:var(--gut);
  max-width:var(--wrap);margin-inline:auto}
.wordmark{display:flex;align-items:baseline;gap:.5rem;text-decoration:none;line-height:1}
.wordmark__a{font-size:.9375rem;font-weight:700;letter-spacing:.06em}
.wordmark__b{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.06em;
  color:var(--tinta-mut);text-transform:uppercase}
.topbar__tel{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding-inline:.25rem;
  text-decoration:none;color:var(--teal)}
.topbar__tel .ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}
.topbar__num{font-family:var(--f-mono);font-size:.8125rem;font-weight:500;letter-spacing:.03em}

/* -------------------------------------------------------------- hero */
.planstrip{display:flex;align-items:center;gap:.75rem;min-height:32px;
  padding:.4rem clamp(.75rem,3vw,1.25rem);background:var(--panel);color:var(--cian);
  font-family:var(--f-mono);font-size:.6875rem;font-weight:400;letter-spacing:.1em;
  text-transform:uppercase;overflow:hidden}
.planstrip__txt{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;text-align:center}
.planstrip__brk{flex:none;width:12px;height:12px}
.planstrip__brk svg{width:12px;height:12px;display:block;fill:none;stroke:currentColor;
  stroke-width:1.1;opacity:.85}

.hero{padding-bottom:var(--sp-break)}
.hero__inner{position:relative;max-width:var(--wrap);margin-inline:auto;
  padding:clamp(1.5rem,5vw,3.25rem) var(--gut) 0}

.hero__h1{font-size:var(--t-hero);max-width:15ch}
.hero__h1 span{display:block}
.hero__h1 .r2{max-width:14ch}

.hero__sub{margin-top:clamp(1rem,3vw,1.5rem);max-width:46ch;color:var(--tinta-mut);
  font-size:clamp(.9375rem,2.4vw,1.125rem)}

.hero__act{margin-top:clamp(1.25rem,4vw,2rem);max-width:34rem}
.hero__act .btn--primary{width:100%}
.hero__micro{margin-top:.75rem;font-family:var(--f-mono);font-size:.75rem;line-height:1.6;
  letter-spacing:.02em;color:var(--tinta-mut)}
.micro-link{display:inline-flex;align-items:center;gap:.4rem;color:var(--teal);
  font-weight:500;text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;white-space:nowrap}
.micro-link:hover{text-decoration-thickness:2px}
.ico-arrow{width:17px;height:10px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}

/* stappen-ticker: a measuring line that doubles as the scroll cue */
.ticker{position:relative;display:flex;align-items:center;gap:.5rem;
  margin-top:clamp(2rem,7vw,3.5rem);padding-top:.9rem;min-height:44px;
  text-decoration:none;color:var(--tinta-mut);
  font-family:var(--f-mono);font-size:.75rem;letter-spacing:.14em}
.ticker__line{position:absolute;left:0;right:0;top:0;height:1px;background:var(--linea)}
.ticker__n{position:relative;padding-top:.1rem}
.ticker__n::before{content:"";position:absolute;left:50%;top:-.9rem;width:1px;height:.5rem;
  background:var(--linea)}
.ticker__d{opacity:.5}
.ticker:hover{color:var(--teal)}

/* desktop-only line fragment of the Plan-Panel, bleeding off the right */
.hero__frag{display:none;position:absolute;right:calc(var(--gut) * -1);top:1rem;
  width:min(30vw,400px);height:auto;pointer-events:none;
  fill:none;stroke:var(--linea);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.hero__frag .hf-rule{stroke-dasharray:1 16;stroke-width:9;stroke-linecap:butt;opacity:.85}
.hero__frag .hf-brk{opacity:.9}
.hero__frag .hf-cross{opacity:.75}

/* ============================================ SIGNATURE · PLAN-PANEEL */
.panel{background:var(--panel);color:var(--hueso);padding-top:var(--sp-break)}
.panel__head{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);
  padding-bottom:clamp(1.75rem,5vw,3rem)}
.panel__h2{margin-top:1rem;font-size:var(--t-h2);max-width:22ch}

.plan{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);
  padding-bottom:var(--sp-break)}

.plan__viz{position:sticky;top:0;z-index:3;background:var(--panel);
  margin-inline:calc(var(--gut) * -1);padding:.5rem var(--gut) 1rem}
.plan__viz::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--panel-line)}

.plan-svg{width:100%;height:auto;display:block;fill:none;stroke:var(--cian);
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 26px rgba(111,212,224,.10))}
.plan-svg [data-draw],.plan-svg .pl-thin,.plan-svg .pl-canal,
.plan-svg .pl-mark,.plan-svg .pl-frame,.plan-svg .pl-brk{vector-effect:non-scaling-stroke}

.pl-frame{opacity:.2}
.pl-brk{opacity:.5}
.pl-tick-s,.pl-tick-l,.pl-tick-v{stroke-linecap:butt}
.pl-tick-s{stroke-dasharray:1 24;stroke-width:11;opacity:.3}
.pl-tick-l{stroke-dasharray:1 99;stroke-width:19;opacity:.42}
.pl-tick-v{stroke-dasharray:1 24;stroke-width:11;opacity:.3}

.pl-canal{--o:.5;stroke-dasharray:7 8}
.pl-mark{--o:.9}
.pl-thin{--o:.42;stroke-width:1}
.pl-lbl{--o:.62;font-family:var(--f-mono);font-size:30px;font-weight:400;letter-spacing:2.4px;
  text-transform:uppercase;fill:var(--cian);stroke:none}
.pl-lbl--r{text-anchor:end}
.pl-canal,.pl-mark,.pl-thin,.pl-lbl{opacity:var(--o)}

.pl-layer{transition:opacity 400ms var(--ease)}

/* steps */
.step{padding-block:1.5rem}
.step__ticks{display:flex;gap:5px;margin-bottom:1rem}
.step__ticks i{display:block;width:14px;height:2px;background:var(--cian)}
.step__ticks i:nth-child(2){width:9px;opacity:.7}
.step__ticks i:nth-child(3){width:5px;opacity:.45}
.step__head{font-family:var(--f-mono);font-size:.8125rem;font-weight:500;letter-spacing:.11em;
  text-transform:uppercase;color:var(--hueso)}
.step__idx{color:var(--panel-mut);transition:color 320ms var(--ease)}
.step__body{margin-top:.85rem;max-width:44ch;color:var(--panel-mut);
  font-size:clamp(1rem,2.4vw,1.0625rem)}

/* ================================================== MEDIR DOS VECES */
.medir{padding-block:var(--sp-sec)}
.medir__main{max-width:62ch}
.medir__kicker{margin-top:1.5rem;font-family:var(--f-disp);font-stretch:122%;
  font-variation-settings:"wdth" 122;font-weight:500;
  font-size:var(--t-h3);line-height:1.2;color:var(--tinta)}

.ficha{--doc-bg:var(--porcelana);margin-top:clamp(2rem,5vw,0rem);padding:1.5rem}
.ficha__ttl{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--teal);padding-bottom:.9rem;
  border-bottom:1px solid var(--linea)}
.ficha__row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding-block:.85rem;border-bottom:1px solid var(--linea);
  font-family:var(--f-mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase}
.ficha__row:last-child{border-bottom:0;padding-bottom:0}
.ficha__row dt{color:var(--tinta-mut)}
.ficha__row dd{margin:0;font-weight:500;color:var(--tinta);text-align:right}

/* ============================================================ EQUIPO */
.team{background:var(--hueso)}
.team__band{background:var(--panel);color:var(--hueso);
  padding-block:clamp(3rem,8vw,5rem) clamp(6rem,14vw,10rem)}
.team__h2{margin-top:1rem;font-size:var(--t-h2)}
.team__sub{margin-top:.85rem;color:var(--panel-mut);max-width:44ch}

.team__grid{display:grid;gap:clamp(1.5rem,3vw,1.75rem);
  margin-top:calc(-1 * clamp(4.5rem,10vw,7.5rem))}

.doc--photo{--doc-bg:var(--papel);padding:1px;padding-bottom:0}
.photo{position:relative;isolation:isolate;aspect-ratio:3/4;overflow:hidden;
  background:#0E2B33;                       /* duotone shadow end */
  clip-path:polygon(calc(var(--cut) - 1px) 0,100% 0,100% 100%,0 100%,0 calc(var(--cut) - 1px))}
.photo img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.08) brightness(1.02);mix-blend-mode:screen}
.photo::after{content:"";position:absolute;inset:0;background:#E4EAEA;
  mix-blend-mode:multiply}                  /* duotone highlight end */
.photo__cap{padding:1rem 1.1rem 1.15rem}
.photo__name{font-family:var(--f-disp);font-stretch:122%;font-variation-settings:"wdth" 122;
  font-weight:600;font-size:1rem;line-height:1.2}
.photo__col{display:flex;align-items:center;gap:.45rem;margin-top:.5rem;
  font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.06em;color:var(--tinta-mut)}
.ico-x{width:11px;height:11px;flex:none;fill:none;stroke:var(--teal);stroke-width:1.1}
.team__foot{margin-top:clamp(1.75rem,4vw,2.5rem);padding-bottom:var(--sp-sec);
  font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.06em;color:var(--tinta-mut)}

/* ============================================================ PRECIO */
.precio{background:var(--porcelana);padding-block:var(--sp-break)}
.precio__h2{max-width:20ch}
.precio__inner .lead{margin-top:1.5rem}

.strip{margin-top:clamp(2rem,5vw,2.75rem);display:grid;gap:.75rem;max-width:34rem}
.strip__row{--doc-bg:var(--papel);display:flex;align-items:baseline;gap:.6rem;
  padding:1rem 1.15rem;font-family:var(--f-mono);font-size:.75rem;
  letter-spacing:.09em;text-transform:uppercase}
.strip__k{color:var(--tinta-mut)}
.strip__sep{color:var(--linea)}
.strip__v{font-weight:500;color:var(--tinta)}
.precio__cta{margin-top:clamp(2rem,5vw,2.75rem)}

/* =============================================================== FAQ */
.faq{padding-block:var(--sp-sec)}
.faq__h2{max-width:16ch}
.faq__list{margin-top:clamp(1.75rem,4vw,2.5rem);max-width:52rem;
  border-top:1px solid var(--linea)}

.qa{border-bottom:1px solid var(--linea)}
.qa summary{display:flex;align-items:center;gap:clamp(.75rem,3vw,1.25rem);
  min-height:64px;padding-block:1rem;cursor:pointer;list-style:none;
  transition:color 200ms var(--ease)}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--teal)}
.qa__idx{flex:none;font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.09em;
  color:var(--tinta-mut);transition:color 200ms var(--ease)}
.qa__q{flex:1 1 auto;font-family:var(--f-disp);font-stretch:122%;
  font-variation-settings:"wdth" 122;font-weight:500;
  font-size:clamp(1.0625rem,2.9vw,1.3rem);line-height:1.25}
.qa__ico{flex:none;width:16px;height:16px;color:var(--teal);
  transition:transform 200ms var(--ease)}
.qa__ico svg{width:16px;height:16px;display:block;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round}
.qa[open] .qa__ico{transform:rotate(45deg)}
.qa[open] .qa__idx{color:var(--teal)}
.qa__a{padding:0 0 1.5rem clamp(2.6rem,8vw,4rem);max-width:60ch;color:var(--tinta-mut)}
.qa__a a{color:var(--teal);text-underline-offset:3px;text-decoration-thickness:1px}
.qa__a a:hover{text-decoration-thickness:2px}
.js .qa[open] .qa__a{animation:qa-in 240ms var(--ease) both}
@keyframes qa-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* =========================================================== RESERVA */
.reserva{background:var(--panel);color:var(--hueso);padding-block:var(--sp-break)}
.reserva__grid{display:grid;gap:clamp(2.5rem,6vw,4rem)}
.reserva__h2{margin-top:1rem;font-size:var(--t-h2);max-width:16ch}
.reserva__sub{margin-top:1rem;max-width:40ch;color:var(--panel-mut)}

.direct{margin-top:clamp(2rem,5vw,2.75rem);display:grid;gap:.75rem;max-width:26rem}
.direct__hours{margin-top:.5rem;font-family:var(--f-mono);font-size:.6875rem;
  letter-spacing:.06em;color:var(--panel-mut)}

/* the form is a light plan sheet laid on the dark planning screen */
.formwrap{--doc-bg:var(--hueso);--doc-line:var(--panel-line);color:var(--tinta);
  padding:clamp(1.5rem,4vw,2.25rem)}

.field{margin-bottom:1.1rem}
.field label{display:block;margin-bottom:.5rem;font-family:var(--f-mono);font-size:.6875rem;
  font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--tinta-mut);
  transition:color 200ms var(--ease)}
.field input,.field select{width:100%;min-height:52px;padding:.7rem .9rem;border:0;
  border-radius:6px 6px 0 0;background:var(--porcelana);
  box-shadow:inset 0 -1.5px 0 rgba(18,39,46,.3);
  transition:box-shadow 180ms var(--ease)}
.field input:focus,.field select:focus{outline:none;box-shadow:inset 0 -2px 0 var(--teal)}
.field input:focus-visible,.field select:focus-visible{outline:3px solid var(--teal);
  outline-offset:3px}
.field:focus-within label{color:var(--teal)}
.field input[aria-invalid]{box-shadow:inset 0 -2px 0 var(--error)}

.sel{position:relative;display:block}
.sel select{appearance:none;-webkit-appearance:none;padding-right:2.5rem;cursor:pointer}
.sel::after{content:"";position:absolute;right:1.1rem;top:calc(50% - 5px);width:8px;height:8px;
  border-right:1.5px solid var(--tinta-mut);border-bottom:1.5px solid var(--tinta-mut);
  transform:rotate(45deg);pointer-events:none}

.hint{display:block;margin-top:.45rem;font-family:var(--f-mono);font-size:.6875rem;
  letter-spacing:.03em;color:var(--tinta-mut)}
.err{display:block;margin-top:.45rem;font-family:var(--f-mono);font-size:.6875rem;
  letter-spacing:.03em;color:var(--error)}

.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}

.consent{display:flex;align-items:flex-start;gap:.7rem;margin-top:1.5rem}
.consent input{flex:none;width:22px;height:22px;margin:11px 0 0;accent-color:var(--teal);cursor:pointer}
.consent label{font-size:.875rem;line-height:1.45;cursor:pointer;min-height:44px;display:flex;align-items:center}
.consent a{color:var(--teal);text-underline-offset:3px;text-decoration-thickness:1px}
.consent a:hover{text-decoration-thickness:2px}
.rgpd{margin-top:.7rem;font-family:var(--f-mono);font-size:.625rem;line-height:1.5;
  letter-spacing:.02em;color:var(--tinta-mut)}
.formwrap .btn--primary{margin-top:1.5rem}
.reassure{margin-top:1rem;font-family:var(--f-mono);font-size:.625rem;line-height:1.55;
  letter-spacing:.04em;text-transform:uppercase;color:var(--tinta-mut)}

.formerr{margin-top:1rem;padding:.9rem 1rem;border-left:3px solid var(--error);
  background:rgba(158,43,37,.07);color:var(--error);
  font-family:var(--f-mono);font-size:.75rem;line-height:1.5}

.success__ttl{font-family:var(--f-mono);font-size:.8125rem;font-weight:500;letter-spacing:.11em;
  text-transform:uppercase;color:var(--teal)}
.success__body{margin-top:.85rem;font-size:var(--t-h3);font-family:var(--f-disp);
  font-stretch:122%;font-variation-settings:"wdth" 122;font-weight:500;line-height:1.25}
.success__act{margin-top:1.5rem;display:grid;gap:.75rem}
.success .btn--ghost{color:var(--teal)}
.success .btn--ghost:hover{background:var(--porcelana)}
.success .direct__hours{color:var(--tinta-mut)}
.success:focus{outline:none}

/* ============================================================ FOOTER */
.foot{background:var(--hueso);border-top:1px solid var(--linea);
  padding-block:clamp(2.5rem,6vw,3.5rem) calc(clamp(2.5rem,6vw,3.5rem) + 84px)}
.foot__legal{font-family:var(--f-mono);font-size:.6875rem;line-height:1.7;
  letter-spacing:.03em;color:var(--tinta-mut);max-width:70ch}
.foot__reg{margin-top:.5rem;color:var(--tinta)}
.foot__links{margin-top:1.25rem;font-family:var(--f-mono);font-size:.6875rem;line-height:2;
  letter-spacing:.03em;color:var(--tinta-mut)}
.foot__links a{color:var(--teal);text-underline-offset:3px;text-decoration-thickness:1px}
.foot__links a:hover{text-decoration-thickness:2px}

/* ======================================================== STICKY BAR */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;gap:1px;
  padding:0 0 env(safe-area-inset-bottom);background:var(--panel);
  transform:translateY(110%);visibility:hidden;
  transition:transform 350ms var(--ease),visibility 0s linear 350ms}
.sticky.is-visible{transform:none;visibility:visible;transition-delay:0s}
.sticky__cta{flex:1 1 75%;min-height:64px;color:var(--hueso)}
.sticky__cta::before{background:var(--panel);clip-path:none;
  box-shadow:inset 0 1px 0 var(--panel-line)}
.sticky__cta::after{background:var(--cian);transform:scaleX(1);left:1.5rem;right:1.5rem;bottom:1rem}
.sticky__wa{flex:0 0 25%;display:flex;align-items:center;justify-content:center;
  min-height:64px;color:var(--cian);box-shadow:inset 1px 1px 0 var(--panel-line)}
.sticky__wa svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}
.sticky__wa:hover{background:var(--panel-fill)}

/* ============================================================ MOTION */
/* Hidden states live behind .js so a failed script never blanks the page. */
.js [data-reveal]{opacity:0;transform:translateY(12px);
  transition:opacity 450ms var(--ease) var(--rd,0ms),transform 450ms var(--ease) var(--rd,0ms)}
.js [data-reveal].is-in{opacity:1;transform:none}
.hero__h1 .r2{--rd:80ms}
.hero__sub{--rd:160ms}
.hero__act{--rd:240ms}

.js .planstrip__brk svg{animation:cross-in 300ms var(--ease) both}
@keyframes cross-in{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}

/* the drawing: stroke-dashoffset so it reads as being drawn, not revealed */
.js .pl-layer [data-draw]{stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 600ms var(--ease) var(--d,0ms)}
.js .pl-layer.is-drawn [data-draw]{stroke-dashoffset:0}
.js .pl-layer .pl-canal,.js .pl-layer .pl-mark,
.js .pl-layer .pl-thin,.js .pl-layer .pl-lbl{opacity:0;transform:translateX(8px);
  transition:opacity 420ms var(--ease) var(--d,0ms),transform 420ms var(--ease) var(--d,0ms)}
.js .pl-layer.is-drawn .pl-canal,.js .pl-layer.is-drawn .pl-mark,
.js .pl-layer.is-drawn .pl-thin,.js .pl-layer.is-drawn .pl-lbl{opacity:var(--o);transform:none}
.pl-layer>*:nth-child(2){--d:90ms}
.pl-layer>*:nth-child(3){--d:180ms}
.pl-layer>*:nth-child(4){--d:270ms}
.pl-layer>*:nth-child(5){--d:360ms}
.pl-layer>*:nth-child(6){--d:450ms}
.pl-layer>*:nth-child(7){--d:540ms}
.pl-layer>*:nth-child(8){--d:630ms}
.pl-layer>*:nth-child(9){--d:720ms}
.js .pl-layer.is-drawn:not(.is-current){opacity:.45}

.js .step{opacity:.55;transition:opacity 400ms var(--ease)}
.js .step.is-active{opacity:1}
.js .step.is-active .step__idx{color:var(--cian)}
.js .step__ticks i{opacity:0;transform:translateX(8px);
  transition:opacity 320ms var(--ease) var(--td,0ms),transform 320ms var(--ease) var(--td,0ms)}
.js .step.is-active .step__ticks i{opacity:1;transform:none}
.step__ticks i:nth-child(2){--td:40ms}
.step__ticks i:nth-child(3){--td:80ms}

/* ======================================================== BREAKPOINTS */

/* Short viewports: CTA + micro must stay inside screen 1 (spec fallback). */
@media (max-height:700px){
  .hero__sub-tail{display:none}
  .ticker{display:none}
  .hero__inner{padding-top:1.25rem}
  .hero{padding-bottom:var(--sp-sec)}
}

@media (min-width:600px){
  .team__grid{grid-template-columns:repeat(2,1fr)}
  .card-2,.card-4{margin-top:clamp(1.5rem,4vw,2.5rem)}
  .direct{grid-template-columns:1fr 1fr;max-width:none}
  .direct__hours{grid-column:1 / -1}
  .success__act{grid-template-columns:1fr 1fr}
  .strip{grid-template-columns:1fr 1fr;max-width:none}
}

@media (min-width:900px){
  .hero__frag{display:block}
  .hero__inner{padding-top:clamp(2rem,5vw,3.25rem)}
  .hero__h1,.hero__sub,.hero__act{position:relative;z-index:1}

  .plan{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
    gap:0 clamp(2rem,4vw,4.5rem);align-items:start}
  .plan__viz{height:100vh;display:flex;align-items:center;
    margin-inline:0;padding:0;background:none}
  .plan__viz::after{display:none}
  .step{min-height:52vh;display:flex;flex-direction:column;justify-content:center;
    padding-block:2rem}

  .medir__grid{display:grid;grid-template-columns:7fr 4fr;gap:clamp(2rem,5vw,4rem);
    align-items:start}
  .ficha{margin-top:2.5rem}

  .team__grid{grid-template-columns:repeat(4,1fr)}
  .card-2{margin-top:0}
  .card-3{margin-top:clamp(2rem,4vw,3.5rem)}
  .card-4{margin-top:clamp(4rem,8vw,7rem)}

  .reserva__grid{grid-template-columns:5fr 6fr;gap:clamp(3rem,6vw,5rem);align-items:start}

  .sticky{left:auto;right:1.5rem;bottom:1.5rem;width:min(28rem,90vw);gap:0}
  .sticky__cta::before{clip-path:polygon(var(--cut) 0,100% 0,100% 100%,0 100%,0 var(--cut));
    background:var(--tinta);box-shadow:none}
  .sticky__wa{border-radius:0 6px 6px 0;box-shadow:inset 0 0 0 1.5px var(--panel-line)}
  .foot{padding-bottom:clamp(2.5rem,6vw,3.5rem)}
}

/* Annotation labels are illegible once the drawing is scaled down; the
   step cards carry the same words, so drop them rather than shrink them. */
@media (max-width:899px){
  .pl-lbl{display:none}
}

/* --------------------------------------------------- reduced motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;transition-delay:0s !important}
  .js [data-reveal]{opacity:1;transform:none}
  .js .pl-layer [data-draw]{stroke-dashoffset:0}
  .js .pl-layer .pl-canal,.js .pl-layer .pl-mark,
  .js .pl-layer .pl-thin,.js .pl-layer .pl-lbl{opacity:var(--o);transform:none}
  .js .step{opacity:1}
  .js .step__ticks i{opacity:1;transform:none}
  .plan-svg{filter:none}
}