@font-face{font-family:"Inter Tight";src:url(../fonts/InterTight.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{--r:#ee3a2e;--b:#45a7e2;--k:#1a1a1a;--w:#fcfcfc;--g:16px;--e:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box}
html,body{margin:0;background:var(--w);color:var(--k);font-family:"Inter Tight",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font-family:inherit;color:inherit}
.mask{display:block;background:currentColor;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
.logo{-webkit-mask-image:url(../img/logotipo.png);mask-image:url(../img/logotipo.png);aspect-ratio:1190/451}
.iso{-webkit-mask-image:url(../img/isotipo.png);mask-image:url(../img/isotipo.png);aspect-ratio:1075/314}
.ast{-webkit-mask-image:url(../img/asterisco.png);mask-image:url(../img/asterisco.png);aspect-ratio:1}
.cap{text-transform:uppercase;font-weight:500;letter-spacing:-.035em;line-height:.86}
.meta{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.01em;line-height:1.05;color:var(--r)}
.kao{position:absolute;color:var(--r);pointer-events:none}
.kao.in{animation:hop .9s var(--e) both,sway 6s ease-in-out .9s infinite}
.kt{animation:sway 6s ease-in-out 1.2s infinite;transform-origin:50% 70%}
.kao{transform-origin:50% 70%}
@keyframes sway{0%,100%{transform:none}18%{transform:rotate(-4deg) translateY(-1px)}34%{transform:rotate(3deg)}46%{transform:none}70%{transform:translateY(-3px)}76%{transform:none}}
@keyframes hop{0%{opacity:0;transform:translateY(10px) rotate(-6deg)}60%{opacity:1;transform:translateY(-3px) rotate(2deg)}100%{transform:none}}

/* ---------- entrance (unchanged) */
.hero{position:sticky;top:0;height:100vh;height:100svh;z-index:0;display:grid;place-items:center;background:var(--r);color:var(--b);overflow:hidden}
.hero .logo{width:min(84vw,1180px)}
.hero.run{animation:hF 1.7s steps(1,end) both}
.hero.run .logo{animation:hL 1.7s steps(1,end) both}
@keyframes hF{0%{background:var(--k)}22%{background:var(--b)}44%{background:var(--w)}64%{background:var(--k)}84%,100%{background:var(--r)}}
@keyframes hL{0%{color:var(--w)}22%{color:var(--w)}44%{color:var(--r)}64%{color:var(--b)}84%,100%{color:var(--b)}}
main{position:relative;z-index:1;background:var(--w)}

/* ---------- header: a quiet editorial line, all red, all small */
.hd{position:fixed;left:0;right:0;top:0;z-index:5;height:48px;padding:0 var(--g);display:flex;align-items:center;justify-content:space-between;background:var(--w);color:var(--r);transform:translateY(-100%);transition:transform .45s var(--e)}
.hd.on{transform:none}
.hd .logo{width:62px}
.hd .meta{font-size:11px}
.hd .mid{display:none}
.hd a:hover{text-decoration:underline;text-underline-offset:2px}

/* ---------- 1. presentation: an open page, few things, well placed */
.intro{position:relative;min-height:92svh;padding:84px var(--g) 64px;display:flex;flex-direction:column}
.intro .top{display:flex;justify-content:space-between;align-items:flex-start}
.intro .desc{margin:0}
.kt{width:72px;color:var(--r);margin-top:2px}
.pa .ffi{color:var(--r)}
.intro .k1{display:none}
.attr .ff{display:none}
.phrase{margin:0;font-size:19.5vw}
.phrase .ln{display:block}
.phrase .r{position:relative;color:var(--r);text-align:right}
.phrase{margin-top:auto!important}
.attr{margin-top:34px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.attr p{margin:0}
.pa{font-size:12px;font-weight:600;letter-spacing:.01em;color:var(--k)}
.pa i{font-style:normal;color:var(--r);padding:0 .2em}
.ff{display:inline-flex;align-items:center;height:30px;padding:0 14px;border:1px solid var(--r);border-radius:999px;color:var(--r);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.01em}

/* ---------- 2. product: photo off-centre, answers beside it */
.prod{position:relative;padding:24px 0 112px}
.prod picture{display:block;margin-left:48px}
.prod img{display:block;width:100%;height:auto}
.acc{margin:48px var(--g) 0}
.acc .meta{margin:0 0 12px}
.ai{border-top:1px solid var(--r)}
.ai:last-child{border-bottom:1px solid var(--r)}
.ah{width:100%;display:flex;align-items:center;justify-content:space-between;background:none;border:0;padding:14px 0 13px;cursor:pointer;text-align:left}
.ah span{font-size:16px;font-weight:500;letter-spacing:-.01em}
.ah i{position:relative;width:11px;height:11px;color:var(--r)}
.ah i:before,.ah i:after{content:"";position:absolute;left:0;top:5px;width:11px;height:1.5px;background:currentColor;transition:transform .35s var(--e)}
.ah i:after{transform:rotate(90deg)}
.ah[aria-expanded=true] i:after{transform:rotate(0)}
.ah[aria-expanded=true] span{color:var(--r)}
.ah:focus-visible{outline:2px solid var(--b);outline-offset:3px}
.ap{padding:0 0 20px;animation:apIn .45s var(--e) both}
@keyframes apIn{from{opacity:0;transform:translateY(-6px)}}
.ap p{margin:0 0 10px;font-size:15px;line-height:1.45;max-width:36em}
.ap p b{font-weight:600;color:var(--r)}
.rc+.rc{margin-top:16px;padding-top:14px;border-top:1px dashed rgba(238,58,46,.45)}
.ap .rt{margin:0 0 6px;font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--r)}
.ap .rd{margin:0 0 6px;font-size:17px;line-height:1.2;font-weight:500;letter-spacing:-.01em}
.ap .rd b{color:var(--k)}
.ap .ing{font-size:16px;line-height:1.35;letter-spacing:-.01em;font-weight:500}
.fmt{margin:0 0 10px;max-width:22em}
.fmt div{display:flex;justify-content:space-between;align-items:baseline;padding:10px 0;border-bottom:1px dashed rgba(238,58,46,.45)}
.fmt div:first-child{padding-top:2px}
.fmt dt{font-size:24px;font-weight:500;letter-spacing:-.03em;line-height:1}
.fmt dd{margin:0;font-size:15px;font-weight:500}
.ap .nt{margin:0;font-size:12px;color:#666}

/* ---------- 3. where: contained editorial rows, same hairlines as the answers */
.donde{padding:0 var(--g)}
.donde .leg{margin:0 0 12px}
.row{border-top:1px solid var(--r);padding:12px 0 14px}
.row:last-child{border-bottom:1px solid var(--r)}
.row .cn{margin:0 0 6px}
.nm{margin:0;font-size:22px;line-height:1.05;color:var(--k)}
.nm i{font-style:normal;color:var(--r);padding:0 .12em}
.nm span{color:var(--r);white-space:nowrap}
.nm b{font-weight:inherit;white-space:nowrap;cursor:default;transition:color .6s ease-in-out}
.nm b em{font-style:normal;display:inline-block;transition:transform .35s var(--e)}
.nm b:hover,.nm b.on,.nm b.lit{color:var(--r)}
.nm b:hover em,.nm b.on em{transform:translateY(-2px)}
/* ---------- 4. the invitation: one outlined capsule, the whole width */
.pedir{position:relative;padding:120px var(--g) 96px}
.qmc{width:100%;height:62px;display:flex;align-items:center;gap:12px;padding:0 20px 0 22px;border:1px solid var(--r);border-radius:999px;background:var(--w);color:var(--r);font-size:26px;cursor:pointer;transition:background .3s var(--e),color .3s var(--e);animation:qp 3.6s ease-in-out infinite}
.qmc .t{white-space:nowrap}
.qmc .k5{display:none;flex:none}
.qmc .ast{width:20px;margin-left:auto;animation:qr 7s linear infinite}
.qmc .x{display:none;margin-left:auto;font-size:28px;line-height:1}
.qmc:hover{background:var(--r);color:var(--w)}
.qmc.open{background:var(--r);color:var(--w);animation:none}
.qmc.open .ast{display:none}.qmc.open .x{display:block}
@keyframes qr{to{transform:rotate(360deg)}}
@keyframes qp{0%,66%{transform:none;box-shadow:0 0 0 0 rgba(238,58,46,0)}72%{transform:scale(1.02);box-shadow:0 0 0 0 rgba(238,58,46,.4)}78%{transform:none}100%{box-shadow:0 0 0 14px rgba(238,58,46,0)}}
.qmc:focus-visible,.opt:focus-visible,.cty:focus-visible,.wa:focus-visible{outline:2px solid var(--b);outline-offset:3px}
.step{display:none;margin-top:24px}
.step.open{display:block;animation:sIn .5s var(--e) both}
@keyframes sIn{from{opacity:0;transform:translateY(-8px)}}
.lbl{margin:0 0 8px}
.opt{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;background:none;border:0;border-top:1px solid var(--r);padding:13px 2px;text-align:left;cursor:pointer}
.opt:last-child{border-bottom:1px solid var(--r)}
.opt b{display:block;font-size:22px}
.opt small{display:block;margin-top:5px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.02em;color:var(--r)}
.opt[aria-pressed=true]{color:var(--r)}
.cities{display:flex;gap:8px}
.cty{flex:1;height:46px;border:1px solid var(--r);border-radius:999px;background:none;color:var(--r);font-size:20px;cursor:pointer}
.cty[aria-pressed=true]{background:var(--r);color:var(--w)}
.wa{margin-top:20px;height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;border-radius:999px;background:var(--r);color:var(--w);font-size:22px}
.wa .arw{width:22px;aspect-ratio:1;-webkit-mask-image:url(../img/flecha.png);mask-image:url(../img/flecha.png)}
.contact{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.contact p{margin:0;font-size:14px;line-height:1.35}
.contact b{display:block;margin-bottom:3px}

/* ---------- footer */
.pie{margin:0 var(--g);padding:16px 0 26px;border-top:1px solid var(--r);display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--r)}
.pie .iso{width:52px}
.pie .bm{display:none}

/* =============== DESKTOP: its own composition =============== */
@media (min-width:761px){
  :root{--g:32px}
  .hd{height:56px;display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px}
  .hd .logo{width:76px;grid-column:1/3}
  .hd .mid{display:block;grid-column:5/8}
  .hd .go{grid-column:11/13;justify-self:end}
  .intro{min-height:100vh;padding:120px var(--g) 72px;display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;grid-template-rows:auto 1fr auto auto}
  .intro .top{display:none}
  .attr .ff{display:inline-flex}
  .pa .ffi{display:none}
  .intro .k1{display:block;position:static}
  .phrase{grid-column:1/13;grid-row:2;align-self:end;margin:0;font-size:9.6vw}
  .phrase .ln{white-space:nowrap}
  .phrase .r{padding-left:0}
  .intro .k1{grid-column:10/13;grid-row:2;justify-self:end;align-self:start;width:150px;margin:0}
  .attr{grid-column:1/13;grid-row:3;margin-top:40px}
  .pa{font-size:13px}.ff{height:36px;font-size:13px;padding:0 18px}
  .prod{padding:80px var(--g) 200px;display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:start}
  .prod picture{grid-column:6/13;grid-row:1;margin:0}
  .acc{grid-column:2/6;grid-row:1;margin:0;align-self:end}
  .ah{padding:16px 0 15px}.ah span{font-size:17px}
  .ap p{font-size:15px}.fmt dt{font-size:28px}.fmt dd{font-size:16px}.ap .nt{font-size:13px}.ap .rd{font-size:20px}.ap .ing{font-size:18px}
  .donde{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px}
  .donde .leg{grid-column:2/13;margin-bottom:16px}
  .row{grid-column:2/13;display:grid;grid-template-columns:repeat(11,1fr);column-gap:24px;align-items:baseline;padding:18px 0 20px}
  .row .cn{grid-column:1/3;margin:0}
  .nm{grid-column:3/12;font-size:min(34px,1.98vw);white-space:nowrap}
  .pedir{padding:200px var(--g) 140px;display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:start}
  .pedir .act{grid-column:1/13}
  .qmc{height:96px;font-size:56px;padding:0 34px 0 30px;gap:22px}
  .qmc .k5{display:block;width:150px}
  .qmc .ast{width:30px}
  .qmc .x{font-size:44px}
  .step{max-width:calc((100% - 11*24px)/12*6 + 5*24px)}
  .opt b{font-size:28px}
  .cty{height:56px;font-size:26px}
  .wa{height:72px;font-size:28px}
  .contact{grid-column:1/6;grid-row:2;margin-top:36px;grid-template-columns:1fr 1fr}
  .contact p{font-size:15px}
  .pie .bm{display:inline}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}