/* IA del Valle · hoja de estilo compartida
   Extraída de index.html para que las páginas nuevas no la dupliquen. */

:root{
  --ink:#0A0B0D;
  --ink-2:#14161A;
  --paper:#F0EAD9;
  --paper-2:#E6DFCB;
  --paper-3:#D4CBB2;
  --steel:#5fa6c4;
  --steel-2:#2f5d77;
  --olive:#7ba668;
  --olive-2:#3d6533;
  --muted:#5A5648;--steel-mid:#4A7B96;--steel-hondo:#2F5D77;--clay:#C98B45;--ink-3:#1A1C20;--ink-4:#23252A;--ink-5:#2A2C32;--on-dark-05:#ffffff10;--on-dark-08:#ffffff14;--on-dark-10:#ffffff18;--on-dark-14:#ffffff22;--on-dark-text:#ffffffc0;
  --line:#0A0B0D12;
  --barra:80px;
  --hero-img:url('/media/img/cat-1920.jpg');
  --hero-img-lg:url('/media/img/cat-2400.jpg');
  --case-img:url('/media/img/vista-1920.jpg');
  --view-img:url('/media/img/hk-1920.jpg');
  --hero-img-mid:url('/media/img/cat-1200.jpg');
  --case-img-mid:url('/media/img/vista-1200.jpg');
  --view-img-mid:url('/media/img/hk-1200.jpg');
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--paper)}
body{
  background:var(--paper);
  color:var(--ink);
  font:400 16px/1.45 "Inter","Helvetica Neue",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0}
img,video{display:block;max-width:100%}
.mono{font-family:"JetBrains Mono","Courier New",monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:12px;top:12px;z-index:10000;background:var(--paper);color:var(--ink);padding:10px 14px;border-radius:999px;transform:translateY(-160%);transition:transform .2s}
.skip-link:focus{transform:translateY(0)}
#loader{position:fixed;inset:0;background:var(--ink);color:var(--paper);z-index:9999;display:grid;place-items:center;transition:opacity .34s ease,visibility 0s linear .34s}
#loader.is-hidden{opacity:0;visibility:hidden}
#loader .number{font:700 min(24vw,280px)/1 "Inter Tight","Inter",sans-serif;letter-spacing:-.06em}
#loader .status{position:absolute;bottom:22px;left:22px;right:22px;display:flex;justify-content:space-between;gap:18px;opacity:.55}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.22;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
#background-canvas{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.7}
.cursor-ring,


.cursor-dot{width:5px;height:5px;background:var(--paper);border-radius:50%;transform:translate(-50%,-50%)}

#scroll-progress{position:fixed;top:0;left:0;height:2px;background:var(--steel-mid);z-index:100;width:0;transition:width .1s}
.site-nav{position:fixed;top:0;left:0;right:0;z-index:50;padding:18px 28px;display:flex;align-items:center;justify-content:space-between;color:var(--ink);background:rgba(240,234,217,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid #0A0B0D14}
.site-nav .logo{display:flex;align-items:center;height:42px}
.site-nav .logo img{height:30px;width:auto;display:block}
@media(max-width:780px){.site-nav .logo img{height:24px}}
.site-nav .nav-list{display:flex;gap:clamp(13px,1.5vw,22px);list-style:none;font-size:12.5px;white-space:nowrap}
.site-nav .nav-list a{position:relative;padding:2px 0}
.site-nav .nav-list a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s}
.site-nav .nav-list a:hover::after,.site-nav .nav-list a:focus-visible::after{transform:scaleX(1)}
.site-nav .cta{padding:9px 16px;border:1px solid currentColor;border-radius:40px;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;transition:all .3s}
.site-nav .cta:hover,.site-nav .cta:focus-visible{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.site-nav .nav-right{display:flex;align-items:center;gap:12px}
.site-nav .nav-list a[aria-current="page"]{color:var(--steel-2);font-weight:700}
.site-nav .nav-list a[aria-current="page"]::after{transform:scaleX(1);background:var(--steel-2)}
.nav-toggle{display:none;width:40px;height:36px;border:1px solid var(--ink);border-radius:8px;background:transparent;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;padding:0}
.nav-toggle span{display:block;width:17px;height:1.6px;background:var(--ink);transition:transform .28s,opacity .28s}
.site-nav.is-open .nav-toggle span:nth-child(1){transform:translateY(5.6px) rotate(45deg)}
.site-nav.is-open .nav-toggle span:nth-child(2){opacity:0}
.site-nav.is-open .nav-toggle span:nth-child(3){transform:translateY(-5.6px) rotate(-45deg)}
@media(max-width:800px){
  .nav-toggle{display:flex}
  .site-nav .cta{display:none}
  .site-nav .nav-list{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:rgba(240,234,217,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid #0A0B0D14;padding:6px 0;display:none}
  .site-nav.is-open .nav-list{display:flex}
  .site-nav .nav-list li{border-top:1px solid var(--line)}
  .site-nav .nav-list li:first-child{border-top:0}
  .site-nav .nav-list a{display:block;padding:15px 28px;font-size:15px;font-weight:600}
  .site-nav .nav-list a::after{display:none}
}
.hero{position:relative;min-height:100vh;padding:120px 28px 40px;display:flex;flex-direction:column;justify-content:space-between;z-index:2}
.hero .top{display:flex;justify-content:space-between;gap:24px;color:var(--muted);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-family:"JetBrains Mono",monospace}
.hero h1{font:900 clamp(56px,14.5vw,260px)/.84 "Inter Tight","Inter",sans-serif;letter-spacing:-.055em;margin-top:auto;position:relative;z-index:3;will-change:transform}
.hero h1 em{font-style:normal;color:var(--steel)}
.hero h1 .word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.2em;margin-bottom:-.2em}
.hero h1 .word span{display:inline-block;transform:translateY(110%);animation:rise .95s cubic-bezier(.2,.9,.2,1) forwards}
.hero h1 .word:nth-child(2) span{animation-delay:.08s}
.hero h1 .word:nth-child(3) span{animation-delay:.16s}
.hero h1 .word:nth-child(5) span{animation-delay:.24s}
@keyframes rise{to{transform:translateY(0)}}
.hero .bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;font-size:13.5px;color:var(--muted);margin-top:38px;flex-wrap:wrap}
.hero .lead{max-width:48ch;line-height:1.6;color:var(--ink)}
.hero .lead b{color:var(--steel-2)}
.hero .availability{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.clock-pill{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.1em;color:var(--ink);padding:4px 10px;border:1px solid var(--ink);border-radius:30px}
.hero-photo{position:absolute;right:28px;top:120px;width:32vw;max-width:480px;aspect-ratio:3/4;background:var(--hero-img) center/cover;clip-path:inset(0);animation:revealPhoto 1.4s cubic-bezier(.7,0,.2,1) .5s both;z-index:1;border-radius:2px;box-shadow:0 30px 60px -20px rgba(0,0,0,.4);will-change:transform}
@keyframes revealPhoto{0%{clip-path:inset(0 0 100% 0);opacity:0}30%{opacity:1}100%{clip-path:inset(0);opacity:1}}
.ticker{padding:36px 0;background:var(--ink);color:var(--paper);overflow:hidden;position:relative;z-index:3;border-block:1px solid var(--on-dark-08)}
.ticker-track{display:flex;gap:50px;animation:marquee 38s linear infinite;white-space:nowrap;font:600 19px/1 "Inter Tight",sans-serif;letter-spacing:-.01em;width:max-content}
.ticker-track span{display:flex;align-items:center;gap:50px}
.ticker-track span::after{content:"●";color:var(--steel);font-size:.5em;opacity:.7}
@keyframes marquee{to{transform:translateX(-50%)}}
.section-head{display:flex;justify-content:space-between;align-items:end;padding:0 28px 30px;border-bottom:1px solid var(--line);margin-bottom:54px;flex-wrap:wrap;gap:22px}
.section-head h2{font:800 clamp(38px,5.6vw,84px)/.9 "Inter Tight",sans-serif;letter-spacing:-.04em;color:var(--ink)}
.section-head h2 em{font-style:normal;color:var(--steel-2)}.reel .section-head h2 em,.gallery .section-head h2 em,.pricing .section-head h2 em{color:var(--steel)}
.section-head .number{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.work{padding:110px 0;position:relative;z-index:2;background:var(--paper)}
.work-row{display:flex;gap:18px;padding:0 28px 30px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab}
.work-row::-webkit-scrollbar{display:none}
.work-row.is-dragging{cursor:grabbing}
/* La tarjeta de un caso es una ventana de navegador, no un cartel.
   Antes era vertical (3:4) con la captura apaisada (16:10) dentro y recorte
   "cover": se veia menos de la mitad del ancho de cada web y el panel de texto
   tapaba el 42% de abajo. Del cliente no se leia ni el titular. Ahora el hueco
   de la foto tiene la misma forma que la captura, asi que entra entera, y el
   texto va debajo en vez de encima. */
/* Todas las tarjetas comparten la altura de la imagen: por eso la fila cuadra
   aunque dentro haya una ventana de navegador apaisada y un movil de pie. */
.work-row{--media:352px;--barra:34px}
/* El bloque de imagen mide lo mismo en toda la fila: la ventana de navegador
   es barra + captura, y el movil ocupa esa misma altura de una pieza. */
.card{flex:0 0 auto;position:relative;background:var(--ink);scroll-snap-align:start;display:flex;flex-direction:column;color:var(--paper);border-radius:14px;overflow:hidden;text-decoration:none;box-shadow:0 1px 2px #0a0b0d14,0 14px 30px -16px #0a0b0d45;transition:transform .35s,box-shadow .35s}
.card-web{width:min(calc(var(--media) * 1.6),86vw)}
.card-movil{width:min(340px,86vw)}
.card:hover,.card:focus-visible{transform:translateY(-5px);box-shadow:0 2px 4px #0a0b0d1a,0 26px 48px -18px #0a0b0d55}
.card:focus-visible{outline:2px solid var(--steel);outline-offset:3px}

.card .marco{background:var(--ink-3)}
.card .barra{display:flex;align-items:center;gap:6px;height:var(--barra);padding:0 14px;background:var(--ink-4)}
.card .barra i{width:9px;height:9px;border-radius:50%;background:#ffffff26;flex:none}
.card .barra i:first-child{background:#e2604a}
.card .barra i:nth-child(2){background:#e0a83f}
.card .barra i:nth-child(3){background:#69a95c}
.card .dominio{margin-left:10px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  background:#00000038;border-radius:5px;padding:3px 10px;
  font:500 10.5px/1.5 "JetBrains Mono",monospace;letter-spacing:.06em;color:#ffffffa8}
.card .dominio-vacio{background:#00000024}

/* El hueco de la foto: exactamente la forma en que se toma la captura. */
.card .lienzo{position:relative;height:var(--media);overflow:hidden;background:var(--ink-3);display:block}
.card .preview-img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;
  transition:transform 1.1s cubic-bezier(.2,.9,.2,1),filter .4s;filter:saturate(1.03)}
.card:hover .preview-img,.card:focus-visible .preview-img{transform:scale(1.03)}
.card .lienzo .marca-agua{display:none}
.card .lienzo.sin-captura{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--ink-3),var(--ink-5))}
.card .lienzo.sin-captura .marca-agua{display:block;font:800 clamp(18px,2.6vw,26px)/1.15 "Inter Tight",sans-serif;letter-spacing:-.025em;color:var(--paper-3);text-align:center;padding:0 24px}

.card .placeholder-content{height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--ink-3),var(--ink-5))}
.card .placeholder-content b{font:800 28px/1 "Inter Tight",sans-serif;letter-spacing:-.025em;color:rgba(255,255,255,.4)}
.card .construction-content{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:repeating-linear-gradient(45deg,var(--ink-3) 0,var(--ink-3) 14px,var(--ink-4) 14px,var(--ink-4) 28px);color:var(--paper-3);padding:20px;text-align:center}
.card .construction-icon{width:54px;height:54px;border-radius:50%;background:rgba(201,139,69,.15);border:1.5px solid var(--clay);display:grid;place-items:center;color:var(--clay)}
.card .construction-icon svg{width:26px;height:26px}
.card .construction-content b{font:800 14px/1 "JetBrains Mono",monospace;letter-spacing:.18em;color:var(--clay)}
.card .construction-content span{font:500 11px/1 "JetBrains Mono",monospace;letter-spacing:.14em;color:rgba(255,255,255,.4);text-transform:uppercase}

.card .tag-live{display:inline-block;background:var(--olive);color:var(--ink);padding:2px 7px;border-radius:3px;font-weight:800;font-size:9px;letter-spacing:.18em}
.card .tag-soon{display:inline-block;background:var(--steel);color:var(--ink);padding:2px 7px;border-radius:3px;font-weight:800;font-size:9px;letter-spacing:.18em;animation:tagPulse 2s infinite}
.card .tag-construction{display:inline-block;background:var(--clay);color:var(--ink);padding:2px 7px;border-radius:3px;font-weight:800;font-size:9px;letter-spacing:.18em}

/* El texto, debajo y sobre fondo solido: se lee siempre, no depende de que la
   captura sea oscura por abajo. */
.card .info{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1;background:var(--ink)}
.card .category{font:700 10px/1.5 "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--steel);margin-bottom:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card h3{font:800 clamp(22px,2.4vw,30px)/1.05 "Inter Tight",sans-serif;letter-spacing:-.025em;margin-bottom:8px}
.card p{font-size:13.5px;line-height:1.5;color:var(--on-dark-text);margin:0 0 14px}
.card .ir{margin-top:auto;display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  font:700 11px/1 "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--paper);
  border-bottom:1px solid #ffffff3d;padding-bottom:5px;transition:border-color .25s,gap .25s}
.card .ir b{font-weight:700;transition:transform .25s}
.card:hover .ir,.card:focus-visible .ir{border-color:var(--paper);gap:11px}
.card:hover .ir b,.card:focus-visible .ir b{transform:translate(2px,-2px)}
.card.sin-enlace .ir b{transform:none}
.card.placeholder{background:var(--paper-2);color:var(--muted)}
.card.placeholder b{font:800 28px/1 "Inter Tight",sans-serif;letter-spacing:-.025em;color:var(--ink)}
.full-bleed{height:88vh;background:var(--hero-img) center/cover;background-attachment:fixed;position:relative;z-index:2}
.full-bleed::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,11,13,.15) 0%,transparent 40%,rgba(10,11,13,.7) 100%)}
.full-bleed .caption{position:absolute;left:28px;right:28px;bottom:28px;color:var(--paper);display:flex;justify-content:space-between;align-items:end;gap:28px;flex-wrap:wrap;z-index:2}
.full-bleed blockquote{font:600 clamp(22px,2.6vw,40px)/1.18 "Inter Tight",sans-serif;letter-spacing:-.025em;max-width:21ch}
.full-bleed blockquote em{color:var(--steel);font-family:"Inter Tight",sans-serif}
.full-bleed .meta{font:700 11px/1 "JetBrains Mono",monospace;letter-spacing:.15em;text-transform:uppercase;opacity:.85}
.reel{padding:120px 28px;background:var(--ink);color:var(--paper);position:relative;z-index:3}
.reel .section-head{padding-inline:0;border-color:var(--on-dark-10)}
.reel .section-head h2{color:var(--paper)}
.reel .section-head .number{color:var(--paper-3)}
.video-box{aspect-ratio:16/9;background:#000;position:relative;overflow:hidden;border:1px solid var(--on-dark-08)}
.video-box video{width:100%;height:100%;object-fit:cover;display:block}
.video-box .badge{position:absolute;left:18px;top:18px;background:rgba(10,11,13,.7);backdrop-filter:blur(6px);padding:6px 10px;font:700 10px/1 "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--paper);border-radius:3px;z-index:2}
.video-box .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(10,11,13,.4);transition:opacity .3s;cursor:pointer}
.video-box .play b{width:80px;height:80px;border-radius:50%;background:var(--paper);display:flex;align-items:center;justify-content:center;color:var(--ink);font-size:26px}
.video-box.is-playing .play{opacity:0;pointer-events:none}
.gallery{padding:110px 0;background:var(--ink);position:relative;z-index:3}
.gallery .section-head{padding-inline:28px;border-color:var(--on-dark-10)}
.gallery .section-head h2{color:var(--paper)}
.gallery .section-head .number{color:var(--paper-3)}
.gallery-row{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.gallery-row .image{aspect-ratio:4/5;background-size:cover;background-position:center;position:relative;overflow:hidden;transition:filter .35s}
.gallery-row .image::after{content:attr(data-label);position:absolute;left:18px;bottom:18px;color:var(--paper);font:700 11px/1 "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;padding:7px 10px;background:rgba(10,11,13,.6);backdrop-filter:blur(6px);border-radius:4px}
.gallery-row .image:hover{filter:brightness(1.1) saturate(1.2)}
.client-strip{padding:54px 0;background:var(--ink);color:var(--paper);overflow:hidden;position:relative;z-index:3;border-block:1px solid var(--on-dark-05)}
.client-strip .track{display:flex;gap:70px;animation:marquee 42s linear infinite;white-space:nowrap;width:max-content}
.client-strip span{font:800 clamp(38px,5.8vw,86px)/1 "Inter Tight",sans-serif;letter-spacing:-.04em;display:flex;align-items:center;gap:70px}
.client-strip span::after{content:"✦";color:var(--steel);font-size:.4em}
.client-strip .highlight{color:var(--steel)}
.services{padding:110px 28px;background:var(--paper);position:relative;z-index:2}
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ink);border:1px solid var(--ink);margin-top:6px}
.service-item{background:var(--paper);padding:28px 22px;position:relative;font:700 14.5px/1.2 "Inter Tight",sans-serif;letter-spacing:-.01em;transition:background .25s,color .25s;cursor:default;display:flex;flex-direction:column;justify-content:flex-end;min-height:140px}
.service-item:hover{background:var(--ink);color:var(--paper)}
.service-item small{font:400 10px/1 "JetBrains Mono",monospace;letter-spacing:.14em;color:var(--muted);position:absolute;top:14px;left:14px}
.service-item:hover small{color:var(--paper-3)}
.service-item span{font-weight:400;font-size:12.5px;color:var(--muted)}
.service-item:hover span{color:var(--paper-3)}
.pricing{padding:110px 28px;background:var(--ink);color:var(--paper);position:relative;z-index:3}
.pricing .section-head{padding-inline:0;border-color:var(--on-dark-10)}
.pricing .section-head h2{color:var(--paper)}
.pricing .section-head .number{color:var(--paper-3)}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.plan{border:1px solid var(--on-dark-14);padding:30px;display:flex;flex-direction:column;gap:16px;transition:transform .4s,border-color .4s;position:relative;overflow:hidden}
.plan:hover{transform:translateY(-8px);border-color:var(--steel)}
.plan.featured{background:var(--steel);color:var(--ink);border-color:var(--steel)}
.plan .tag-small{font:700 10px/1 "JetBrains Mono",monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--steel);align-self:flex-start;padding:6px 10px;border:1px solid currentColor;border-radius:30px}
.plan.featured .tag-small{color:var(--ink);border-color:var(--ink)}
.plan h3{font:800 clamp(26px,3.2vw,42px)/.95 "Inter Tight",sans-serif;letter-spacing:-.03em}
.plan .price{font:700 44px/1 "Inter Tight",sans-serif;letter-spacing:-.03em;padding:10px 0;border-bottom:1px solid var(--on-dark-14)}
.plan.featured .price{border-color:#0A0B0D32}
.plan .price small{font-size:13px;font-weight:500;color:var(--paper-3);display:block;margin-top:4px}
.plan.featured .price small{color:#0A0B0Dd4}
.plan .objective{font:700 10px/1 "JetBrains Mono",monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--paper-3)}
.plan.featured .objective{color:#0A0B0Dd4}
.plan p{font-size:13px;color:var(--paper-3);line-height:1.5}
.plan.featured p{color:#0A0B0Dd4}
.plan ul{list-style:none;font-size:14px;line-height:1.55;display:flex;flex-direction:column;gap:7px}
.plan li::before{content:"→ ";color:var(--steel)}
.plan.featured li::before{color:var(--ink)}
.plan .button{margin-top:auto;padding:14px 22px;text-align:center;border:1px solid currentColor;border-radius:40px;font:700 12px/1 "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;transition:all .3s;display:inline-block}
.plan .button:hover,.plan .button:focus-visible{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.plan.featured .button:hover,.plan.featured .button:focus-visible{background:var(--ink);color:var(--paper)}
.contact{padding:120px 28px;background:var(--paper);position:relative;z-index:2}
.contact-wrap{max-width:920px;margin:0 auto}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.contact label{display:block;position:relative}
.contact label small{position:absolute;top:-8px;left:14px;background:var(--paper);padding:0 8px;font:700 10px/1 "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.contact input,.contact select,.contact textarea{width:100%;padding:18px 16px;background:transparent;border:1px solid var(--ink);border-radius:2px;font:500 15px/1.4 "Inter",sans-serif;color:var(--ink);transition:border-color .25s,background .25s}
.contact input:focus,.contact select:focus,.contact textarea:focus{outline:none;border-color:var(--steel-mid);background:#6FA8C90c}
.contact textarea{min-height:140px;resize:vertical;font-family:"Inter",sans-serif}
.contact .honeypot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.contact .actions{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-top:8px;flex-wrap:wrap}
.contact .actions small{color:var(--muted);font-size:12px;line-height:1.5;max-width:38ch}
.contact button[type=submit]{padding:18px 36px;background:var(--ink);color:var(--paper);border-radius:50px;font:700 12px/1 "JetBrains Mono",monospace;letter-spacing:.16em;text-transform:uppercase;transition:all .3s;border:0;display:inline-flex;align-items:center;gap:10px}
.contact button[type=submit]:hover,.contact button[type=submit]:focus-visible{background:var(--steel);color:var(--ink);color:var(--ink)}
.contact button[type=submit][disabled]{opacity:.5;cursor:not-allowed}
.contact button[type=submit] b{width:8px;height:8px;background:var(--paper);border-radius:50%;animation:pulse 1.4s infinite}
.contact button[type=submit]:hover b{background:var(--ink)}
.form-message{margin-top:18px;padding:14px 16px;border-radius:4px;font-size:13.5px;display:none}
.form-message.ok{background:#7A8F6822;color:var(--olive);border:1px solid var(--olive);display:block}
.form-message.error{background:#d9575722;color:#a52a2a;border:1px solid #a52a2a;display:block}
.final-cta{padding:140px 28px;background:var(--paper-3);text-align:center;position:relative;z-index:2}
.final-cta h2{font:900 clamp(48px,8.5vw,140px)/.9 "Inter Tight",sans-serif;letter-spacing:-.04em;color:var(--ink);margin-bottom:34px}
.final-cta h2 em{font-style:normal;color:var(--steel-2)}
.final-cta .button{display:inline-flex;align-items:center;gap:12px;padding:18px 36px;background:var(--ink);color:var(--paper);border-radius:50px;font:700 13px/1 "JetBrains Mono",monospace;letter-spacing:.15em;text-transform:uppercase;transition:all .3s}
.final-cta .button:hover,.final-cta .button:focus-visible{background:var(--steel);color:var(--ink);color:var(--ink)}
.final-cta .button b{width:8px;height:8px;background:var(--paper);border-radius:50%;animation:pulse 1.4s infinite}
.final-cta .button:hover b{background:var(--ink)}
.site-footer{padding:84px 28px 30px;background:var(--ink);color:var(--paper);position:relative;z-index:3}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px;padding-bottom:60px;border-bottom:1px solid var(--on-dark-08)}
.footer-column h3{font:800 clamp(38px,5vw,76px)/.9 "Inter Tight",sans-serif;letter-spacing:-.04em;margin-bottom:18px}
.footer-column small{font:700 10px/1 "JetBrains Mono",monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--paper-3);display:block;margin-bottom:14px}
.footer-column a{display:block;padding:5px 0;font-size:13.5px;transition:color .3s}
.footer-column a:hover,.footer-column a:focus-visible{color:var(--steel)}
.footer-bottom{padding-top:30px;display:flex;justify-content:space-between;font-size:12px;color:var(--paper-3);flex-wrap:wrap;gap:14px}
/* Badge logo fijo (lateral derecho-medio, no se solapa con nada) */
.fixed-mark{
  position:fixed;
  top:50%;
  right:24px;
  transform:translateY(-50%);
  z-index:60;
  width:54px;
  height:54px;
  border-radius:50%;
  background:rgba(10,11,13,.85);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 32px -8px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.05) inset;
  transition:transform .4s cubic-bezier(.2,.9,.2,1), box-shadow .35s, right .3s;
  animation:markIn 1.4s cubic-bezier(.2,.9,.2,1) 1s both;
}
.fixed-mark:hover{
  transform:translateY(-50%) scale(1.12);
  box-shadow:0 16px 44px -8px rgba(95,166,196,.45), 0 0 0 1.5px rgba(95,166,196,.35) inset;
  right:28px;
}
.fixed-mark img,.fixed-mark svg{
  width:42px;
  height:42px;
  display:block;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.4));
  transition:transform .4s cubic-bezier(.2,.9,.2,1);
}
.fixed-mark:hover img{transform:rotate(15deg) scale(1.05)}
.fixed-mark .pulse{
  position:absolute;
  inset:-3px;
  border-radius:50%;
  border:1.5px solid var(--steel);
  opacity:0;
  animation:markPulse 3.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes markIn{
  from{opacity:0;transform:translate(60px,-50%) scale(.4)}
  to{opacity:1;transform:translate(0,-50%) scale(1)}
}
@keyframes markPulse{
  0%,100%{opacity:0;transform:scale(1)}
  50%{opacity:.55;transform:scale(1.22)}
}
@media(max-width:780px){
  .fixed-mark{width:46px;height:46px;right:14px}
  .fixed-mark img,.fixed-mark svg{width:36px;height:36px}
}
@media(max-width:520px){
  .fixed-mark{width:42px;height:42px;right:12px;bottom:96px;top:auto;transform:none}
  .fixed-mark:hover{transform:scale(1.08);right:14px}
  @keyframes markIn{
    from{opacity:0;transform:translateY(60px) scale(.4)}
    to{opacity:1;transform:translateY(0) scale(1)}
  }
}

.chat{position:fixed;bottom:24px;right:24px;z-index:200}
.chat-open{width:62px;height:62px;border-radius:50%;background:var(--ink);color:var(--paper);border:1px solid #F0EAD926;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 32px -10px rgba(10,11,13,.5);animation:float 2.6s infinite;cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.chat-open:hover,.chat-open:focus-visible{background:var(--steel);color:var(--ink);border-color:var(--steel)}
.chat-open svg{width:26px;height:26px}
.chat-panel{position:absolute;bottom:78px;right:0;width:340px;max-height:520px;background:var(--ink);color:var(--paper);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 18px 60px -10px rgba(0,0,0,.45);transform:scale(.9) translateY(20px);opacity:0;pointer-events:none;transition:all .35s cubic-bezier(.2,.9,.3,1);transform-origin:bottom right}
.chat.is-open .chat-panel{transform:scale(1) translateY(0);opacity:1;pointer-events:auto}
.chat-header{padding:16px 18px;border-bottom:1px solid var(--on-dark-08);display:flex;justify-content:space-between;align-items:center;font:700 13px/1 "Inter Tight",sans-serif}
.chat-close{font-size:18px;opacity:.7;cursor:pointer}
.chat-messages{padding:18px;flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:10px;font-size:13.5px;line-height:1.5}
.chat-message{padding:11px 13px;background:var(--on-dark-05);border-radius:14px 14px 14px 4px;max-width:85%}
.chat-message.user{align-self:flex-end;background:var(--steel);color:var(--ink);border-radius:14px 14px 4px 14px}
.typing{padding:11px 13px;background:var(--on-dark-05);border-radius:14px;display:flex;gap:4px;align-self:flex-start}
.typing b{width:6px;height:6px;background:var(--paper-3);border-radius:50%;animation:dot 1.3s infinite}
.typing b:nth-child(2){animation-delay:.15s}.typing b:nth-child(3){animation-delay:.3s}
.chat-options{display:flex;flex-wrap:wrap;gap:6px;padding:0 0 4px}
.chat-options button{padding:8px 13px;background:var(--on-dark-08);color:var(--paper);border-radius:30px;font-size:12px;cursor:pointer;transition:background .25s}
.chat-options button:hover,.chat-options button:focus-visible{background:var(--steel);color:var(--ink);color:var(--ink)}

/* Pie de las preguntas: el que no encuentra la suya va al asistente */
.faq-pie{margin:26px auto 0;max-width:72ch;font-size:14.5px;line-height:1.65;color:var(--muted);text-align:center}
.faq-pie b{color:var(--ink)}
.faq-chat{font:700 14.5px/1.65 "Inter Tight",system-ui,sans-serif;color:var(--steel-hondo);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:0 2px}
.faq-chat:hover,.faq-chat:focus-visible{color:var(--ink)}

/* ── Asistente: barra de escritura, enlaces y formulario ─────────────────── */
.chat-panel{max-height:min(560px,calc(100vh - 140px))}
.chat-barra{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--on-dark-08);background:var(--ink-3);flex-shrink:0}
.chat-barra input{flex:1;min-width:0;background:var(--on-dark-05);border:1px solid var(--on-dark-10);color:var(--paper);border-radius:22px;padding:10px 14px;font:400 13px/1.4 "Inter Tight",system-ui,sans-serif}
.chat-barra input::placeholder{color:#ffffff66}
.chat-barra input:focus{outline:none;border-color:var(--steel);background:var(--on-dark-08)}
.chat-barra button{flex-shrink:0;width:38px;height:38px;border-radius:50%;background:var(--steel);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s,background .2s}
.chat-barra button svg{width:17px;height:17px}
.chat-barra button:hover,.chat-barra button:focus-visible{transform:translateX(2px);background:#7CBBD6}
.chat-message b{color:#fff}
.chat-message em{color:var(--paper-3);font-style:italic}
.chat-link{display:inline-block;margin-top:2px;padding:9px 15px;background:var(--steel);color:var(--ink);border-radius:30px;font:700 12px/1 "Inter Tight",sans-serif;text-decoration:none;align-self:flex-start;transition:background .2s}
.chat-link:hover,.chat-link:focus-visible{background:#7CBBD6}
.chat-quiza{font:500 11px/1 "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:#ffffff7a;padding:6px 2px 0}
.chat-form{display:flex;flex-direction:column;gap:9px;padding:14px;background:var(--on-dark-05);border-radius:14px;border:1px solid var(--on-dark-10)}
.chat-form label{display:flex;flex-direction:column;gap:4px}
.chat-form small{font:500 10.5px/1 "JetBrains Mono",monospace;letter-spacing:.11em;text-transform:uppercase;color:#ffffff8c}
.chat-form small i{font-style:normal;text-transform:none;letter-spacing:0;color:#ffffff66}
.chat-form input[type=text],.chat-form input[type=email],.chat-form input:not([type]){background:var(--ink);border:1px solid var(--on-dark-14);color:var(--paper);border-radius:9px;padding:9px 11px;font:400 13px/1.4 "Inter Tight",system-ui,sans-serif;width:100%}
.chat-form input:focus{outline:none;border-color:var(--steel)}
.chat-consent{flex-direction:row!important;align-items:flex-start;gap:8px!important;font-size:11.5px;line-height:1.45;color:#ffffffc7}
.chat-consent input{margin-top:2px;accent-color:var(--steel);flex-shrink:0;width:15px;height:15px}
.chat-consent a{color:var(--steel);text-decoration:underline;text-underline-offset:2px}
.chat-form button{margin-top:2px;padding:11px 16px;background:var(--steel);color:var(--ink);border-radius:30px;font:700 12.5px/1 "Inter Tight",sans-serif;cursor:pointer;transition:background .2s}
.chat-form button:hover:not(:disabled){background:#7CBBD6}
.chat-form button:disabled{opacity:.55;cursor:default}
.chat-aviso{margin:0;font-size:11.5px;line-height:1.4;color:#F0B0A0;min-height:0}
.chat-aviso:empty{display:none}
[data-reveal]{opacity:0;transform:translateY(35px);transition:opacity .9s cubic-bezier(.2,.9,.2,1),transform .9s cubic-bezier(.2,.9,.2,1)}
[data-reveal].is-visible{opacity:1;transform:translateY(0)}
.spark{position:fixed;width:6px;height:6px;background:var(--steel);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);animation:spark .65s ease-out forwards}
@keyframes pulse{50%{transform:scale(1.7);opacity:.45}}
@keyframes float{50%{transform:translateY(-6px)}}
@keyframes dot{50%{transform:translateY(-5px);opacity:.5}}
@keyframes spark{0%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(calc(-50% + var(--dx,0)),calc(-50% + var(--dy,0))) scale(0);opacity:0}}
@media(max-width:1100px){.hero-photo{position:relative;width:100%;max-width:none;top:0;right:0;margin:30px 0 -20px;aspect-ratio:16/10}.hero h1 em{color:var(--steel-2)}}
@media(max-width:900px){.pricing-grid{grid-template-columns:1fr}.services-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:800px){.gallery-row{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.form-grid{grid-template-columns:1fr}.card{flex-basis:88vw}.chat-panel{width:min(340px,calc(100vw - 32px));right:-8px}}
@media(max-width:520px){.services-grid{grid-template-columns:1fr}.hero,.site-nav,.contact,.pricing,.services,.reel{padding-inline:18px}.section-head{padding-inline:18px}.hero .top{flex-direction:column;gap:8px}.footer-grid{grid-template-columns:1fr}}
@media (hover:hover) and (pointer:fine){
  body
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  #background-canvas{display:none}
  .ticker-track,.client-strip .track{animation:none}
  .full-bleed{background-attachment:scroll}
}

/* ============================================================
   PÁGINAS INTERIORES · componentes compartidos
   ============================================================ */
.breadcrumb{font:500 11px/1 "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:26px}
.breadcrumb a{color:var(--muted);transition:color .25s}
.breadcrumb a:hover,.breadcrumb a:focus-visible{color:var(--steel-2)}
.breadcrumb span[aria-current]{color:var(--ink)}
.breadcrumb .sep{opacity:.45}

.page-hero{position:relative;padding:132px 28px 64px;background:var(--paper);z-index:2;border-bottom:1px solid var(--line)}
.page-hero .eyebrow{font:700 11px/1 "JetBrains Mono",monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--steel-2);display:inline-flex;align-items:center;gap:9px;padding:7px 13px;border:1px solid var(--steel-2);border-radius:30px;margin-bottom:24px}
.page-hero .eyebrow b{width:7px;height:7px;border-radius:50%;background:var(--olive-2);animation:pulse 1.6s infinite}
.page-hero h1{font:900 clamp(40px,7.6vw,112px)/.9 "Inter Tight","Inter",sans-serif;letter-spacing:-.05em;color:var(--ink);max-width:16ch}
.page-hero h1 em{font-style:normal;color:var(--steel-2)}
.page-hero .lead{max-width:60ch;margin-top:26px;font-size:17px;line-height:1.6;color:var(--ink)}
.page-hero .lead b{color:var(--steel-2);font-weight:700}
.page-hero .lead+.lead{margin-top:14px;font-size:15.5px;color:var(--muted)}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}

.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 28px;border-radius:50px;font:700 12px/1 "JetBrains Mono",monospace;letter-spacing:.13em;text-transform:uppercase;transition:background .3s,color .3s,border-color .3s,transform .3s;border:1px solid var(--ink)}
.btn-solid{background:var(--ink);color:var(--paper)}
.btn-solid:hover,.btn-solid:focus-visible{background:var(--steel-2);border-color:var(--steel-2);color:var(--paper)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover,.btn-ghost:focus-visible{background:var(--ink);color:var(--paper)}
.on-dark .btn{border-color:var(--paper)}
.on-dark .btn-solid{background:var(--paper);color:var(--ink)}
.on-dark .btn-solid:hover,.on-dark .btn-solid:focus-visible{background:var(--steel);border-color:var(--steel);color:var(--ink)}
.on-dark .btn-ghost{color:var(--paper)}
.on-dark .btn-ghost:hover,.on-dark .btn-ghost:focus-visible{background:var(--paper);color:var(--ink)}

.stat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ink);border:1px solid var(--ink);margin-top:48px}
.stat-strip div{background:var(--paper);padding:22px 20px}
.stat-strip b{display:block;font:800 clamp(26px,3.4vw,44px)/1 "Inter Tight",sans-serif;letter-spacing:-.035em;color:var(--ink)}
.stat-strip small{display:block;margin-top:8px;font:500 11px/1.35 "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

.block{padding:104px 28px;position:relative;z-index:2;background:var(--paper)}
.block.alt{background:var(--paper-2)}
.block.on-dark{background:var(--ink);color:var(--paper)}
.block .section-head{padding-inline:0}
.block.on-dark .section-head{border-color:var(--on-dark-10)}
.block.on-dark .section-head h2{color:var(--paper)}
.block.on-dark .section-head h2 em{color:var(--steel)}
.block.on-dark .section-head .number{color:var(--paper-3)}
.block>p.intro{max-width:68ch;font-size:16.5px;line-height:1.62;color:var(--ink);margin-bottom:44px}
.block.on-dark>p.intro{color:var(--paper-3)}
.block>p.intro b{color:var(--steel-2);font-weight:700}
.block.on-dark>p.intro b{color:var(--steel)}

.leak-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ink);border:1px solid var(--ink)}
.leak-grid article{background:var(--paper);padding:30px 26px;display:flex;flex-direction:column;gap:11px;transition:background .25s,color .25s}
.block.alt .leak-grid article{background:var(--paper-2)}
.leak-grid article:hover{background:var(--ink);color:var(--paper)}
.leak-grid .n{font:500 10px/1 "JetBrains Mono",monospace;letter-spacing:.16em;color:var(--muted)}
.leak-grid article:hover .n{color:var(--steel)}
.leak-grid h3{font:800 19px/1.15 "Inter Tight",sans-serif;letter-spacing:-.025em}
.leak-grid p{font-size:14px;line-height:1.55;color:var(--muted)}
.leak-grid article:hover p{color:var(--paper-3)}
.leak-grid .fix{margin-top:auto;padding-top:10px;font:700 11px/1.4 "JetBrains Mono",monospace;letter-spacing:.08em;color:var(--steel-2)}
.leak-grid article:hover .fix{color:var(--steel)}

.piece-group{margin-bottom:46px}
.piece-group>h3{font:800 clamp(21px,2.6vw,30px)/1 "Inter Tight",sans-serif;letter-spacing:-.03em;margin-bottom:6px}
.piece-group>p{font-size:14px;color:var(--muted);margin-bottom:20px;max-width:60ch}
.block.on-dark .piece-group>p{color:var(--paper-3)}
/* Rejilla de piezas. Antes era una cuadricula con fondo oscuro asomando por
   los huecos de 1px: bonita con las filas llenas, pero cuando la ultima fila
   quedaba a medias el hueco se pintaba de negro. Ahora cada pieza lleva su
   propio borde y la fila que no llena se centra, que es donde tiene que estar. */
.piece-list{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.piece-list div{flex:0 1 calc(25% - 10.5px);min-width:210px;background:var(--paper);border:1px solid #0A0B0D1F;border-radius:13px;padding:30px 20px 22px;display:flex;flex-direction:column;justify-content:flex-end;min-height:132px;position:relative;transition:background .25s,color .25s,border-color .25s}
.piece-list div:hover{border-color:var(--ink)}
.block.on-dark .piece-list div{background:transparent;border-color:var(--on-dark-14)}
.block.on-dark .piece-list div:hover{background:var(--paper);border-color:var(--paper)}
.block.alt .piece-list div{background:var(--paper-2)}
/* Con la misma especificidad que la linea de arriba. Sin esto, el fondo del
   bloque alterno gana al del hover y el texto sale crema sobre crema: 1,11
   de contraste, o sea invisible. Llevaba asi en la portada y en hoteles. */
.block.alt .piece-list div:hover{background:var(--ink);color:var(--paper)}
.piece-list div:hover{background:var(--ink);color:var(--paper)}
.piece-list b{font:700 14.5px/1.22 "Inter Tight",sans-serif;letter-spacing:-.015em}
.piece-list span{font-size:12.5px;color:var(--muted);margin-top:5px;line-height:1.4}
.piece-list div:hover span{color:var(--paper-3)}
.piece-list small{position:absolute;top:13px;left:14px;font:400 10px/1 "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.piece-list div:hover small{color:var(--steel)}

.proof-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:54px;align-items:start}
.proof-grid .claim{font:600 clamp(21px,2.5vw,34px)/1.22 "Inter Tight",sans-serif;letter-spacing:-.028em;color:var(--paper)}
.proof-grid .claim em{font-style:normal;color:var(--steel)}
.proof-grid .body p{font-size:15px;line-height:1.65;color:var(--paper-3);margin-bottom:14px}
.proof-grid .body p b{color:var(--paper);font-weight:700}
.proof-list{list-style:none;display:flex;flex-direction:column;gap:12px;margin-top:26px}
.proof-list li{padding-left:22px;position:relative;font-size:14.5px;line-height:1.5;color:var(--paper-3)}
.proof-list li::before{content:"→";position:absolute;left:0;color:var(--steel)}
.proof-list li b{color:var(--paper)}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:paso}
.steps article{border-top:2px solid var(--ink);padding-top:20px;display:flex;flex-direction:column;gap:9px}
.steps .n{font:700 11px/1 "JetBrains Mono",monospace;letter-spacing:.16em;color:var(--steel-2)}
.steps h3{font:800 20px/1.12 "Inter Tight",sans-serif;letter-spacing:-.025em}
.steps p{font-size:14px;line-height:1.55;color:var(--muted)}
.steps .when{margin-top:auto;padding-top:8px;font:500 11px/1 "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);opacity:.7}

.faq-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{cursor:pointer;list-style:none;padding:24px 40px 24px 0;font:700 clamp(17px,2.1vw,23px)/1.28 "Inter Tight",sans-serif;letter-spacing:-.025em;position:relative;color:var(--ink)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";position:absolute;right:4px;top:22px;font:400 26px/1 "Inter Tight",sans-serif;color:var(--steel-2);transition:transform .3s}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list summary:hover,.faq-list summary:focus-visible{color:var(--steel-2)}
.faq-list .answer{padding:0 40px 26px 0;max-width:76ch;font-size:15.5px;line-height:1.65;color:var(--muted)}
.faq-list .answer b{color:var(--ink);font-weight:700}
.faq-list .answer a{color:var(--steel-2);text-decoration:underline;text-underline-offset:3px}

.next-pages{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
.next-pages a{border:1px solid var(--line);padding:26px 24px;display:flex;flex-direction:column;gap:8px;transition:background .3s,color .3s,border-color .3s}
.next-pages a:hover,.next-pages a:focus-visible{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.next-pages small{font:500 10px/1 "JetBrains Mono",monospace;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.next-pages a:hover small{color:var(--steel)}
.next-pages b{font:800 20px/1.1 "Inter Tight",sans-serif;letter-spacing:-.03em}
.next-pages span{font-size:13.5px;line-height:1.5;color:var(--muted)}
.next-pages a:hover span{color:var(--paper-3)}

@media(max-width:1100px){
  .stat-strip{grid-template-columns:repeat(2,1fr)}
  .leak-grid,.steps,.next-pages{grid-template-columns:repeat(2,1fr)}
  .piece-list div{flex-basis:calc(50% - 7px)}
  .proof-grid{grid-template-columns:1fr;gap:34px}
  .page-hero{padding:118px 20px 54px}
  .block{padding:78px 20px}
}
@media(max-width:700px){
  .stat-strip,.leak-grid,.steps,.next-pages{grid-template-columns:1fr}
  .piece-list div{flex-basis:100%;min-width:0}
  .page-hero h1{max-width:none}
  .hero-actions .btn{width:100%;justify-content:center}
}

/* ============================================================
   HOME · restaurante · un solo CTA
   ============================================================ */
.cta-band{padding:78px 28px;background:var(--ink);color:var(--paper);text-align:center;position:relative;z-index:3}
.cta-band.light{background:var(--paper-3);color:var(--ink)}
.cta-band h2{font:800 clamp(26px,4.2vw,52px)/1.06 "Inter Tight",sans-serif;letter-spacing:-.04em;max-width:20ch;margin:0 auto 14px}
.cta-band h2 em{font-style:normal;color:var(--steel)}
.cta-band.light h2 em{color:var(--steel-2)}
.cta-band p{font-size:15px;line-height:1.55;color:var(--paper-3);max-width:52ch;margin:0 auto 28px}
.cta-band.light p{color:var(--muted)}
.cta-band .btn-solid{padding:18px 34px;font-size:13px}
.cta-band .micro{display:block;margin-top:16px;font:500 11px/1 "JetBrains Mono",monospace;letter-spacing:.13em;text-transform:uppercase;color:var(--paper-3)}
.cta-band.light .micro{color:var(--muted)}

.tier-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:960px}
.tier{border:1px solid var(--on-dark-14);padding:32px;display:flex;flex-direction:column;gap:14px;transition:transform .4s,border-color .4s}
.tier:hover{transform:translateY(-6px);border-color:var(--steel)}
.tier.featured{background:var(--steel);color:var(--ink);border-color:var(--steel)}
.tier .tag-small{font:700 10px/1.45 "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--steel);align-self:flex-start;max-width:100%;padding:6px 12px;border:1px solid currentColor;border-radius:30px;text-wrap:balance}
.tier.featured .tag-small{color:var(--ink);border-color:var(--ink)}
.tier h3{font:800 clamp(26px,3.2vw,40px)/.95 "Inter Tight",sans-serif;letter-spacing:-.035em}
.tier .rows{border-top:1px solid var(--on-dark-14);border-bottom:1px solid var(--on-dark-14);padding:14px 0;display:flex;flex-direction:column;gap:10px}
.tier.featured .rows{border-color:#0A0B0D32}
.tier .row{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.tier .row span{font:500 11px/1 "JetBrains Mono",monospace;letter-spacing:.13em;text-transform:uppercase;color:var(--paper-3)}
.tier.featured .row span{color:#0A0B0Dcc}
.tier .row b{font:700 clamp(24px,3vw,34px)/1 "Inter Tight",sans-serif;letter-spacing:-.03em}
.tier .row.small b{font-size:19px}
.tier ul{list-style:none;font-size:14px;line-height:1.55;display:flex;flex-direction:column;gap:7px}
.tier li::before{content:"→ ";color:var(--steel)}
.tier.featured li::before{color:var(--ink)}
.tier .note{font-size:12.5px;line-height:1.5;color:var(--paper-3);margin-top:auto}
.tier.featured .note{color:#0A0B0Dcc}

.lead-form{max-width:760px}
.lead-form .form-grid{grid-template-columns:1fr 1fr}
@media(min-width:1180px){.lead-form .form-grid{grid-template-columns:repeat(4,1fr)}}
.lead-form .actions{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:6px}
.lead-form .actions small{font-size:12px;line-height:1.5;color:var(--muted);max-width:44ch}

@media(max-width:1100px){
  .tier-grid{grid-template-columns:1fr}
  .cta-band{padding:62px 20px}
}
@media(max-width:700px){
  .lead-form .form-grid{grid-template-columns:1fr}
  .cta-band .btn{width:100%;justify-content:center}
}

/* Home · titular de frase larga (no cabe a 14.5vw) */
.hero.hero-claim h1{font:900 clamp(34px,6.4vw,92px)/.95 "Inter Tight","Inter",sans-serif;letter-spacing:-.045em;max-width:17ch}
.hero.hero-claim h1 .word:nth-child(4) span{animation-delay:.16s}
.hero.hero-claim .lead{max-width:54ch;font-size:16.5px}
.hero.hero-claim .hero-actions{margin-top:30px}
@media(max-width:900px){.hero.hero-claim .hero-photo{display:none}.hero.hero-claim h1{max-width:none}}

/* En móvil el badge fijo se solapa con botones y con el chat: el logo ya está en la barra */
@media(max-width:800px){.fixed-mark{display:none}}

/* Pantalla ancha: el titular manda, que llene */
@media(min-width:1400px){
  .hero.hero-claim h1{font-size:clamp(92px,7.4vw,142px);max-width:none}
  .hero.hero-claim .lead{font-size:18px;max-width:58ch}
}
/* Móvil: el botón del chat no puede tapar el final del hero */
@media(max-width:700px){
  .hero{padding-bottom:104px}
  .hero .bottom .mono{max-width:26ch}
}

/* ============================================================
   EL CASO QUE SE PUEDE TOCAR · demo dentro de los casos
   ============================================================ */
.caso-demo{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,5vw,64px);
  align-items:center;margin:64px 28px 0;padding-top:54px;border-top:1px solid var(--line)}
.caso-demo .etiqueta{display:inline-flex;align-items:center;gap:9px;
  font:700 10.5px/1 "JetBrains Mono",monospace;letter-spacing:.16em;text-transform:uppercase;
  color:var(--steel-2);border:1px solid var(--steel-2);border-radius:30px;padding:7px 13px;margin-bottom:20px}
.caso-demo .etiqueta b{width:6px;height:6px;border-radius:50%;background:var(--olive-2);animation:pulse 1.6s infinite}
.caso-demo h3{font:800 clamp(24px,3.4vw,40px)/1.08 "Inter Tight",sans-serif;letter-spacing:-.035em;
  color:var(--ink);margin:0 0 16px;text-wrap:balance}
.caso-demo h3 em{font-style:normal;color:var(--steel-2)}
.caso-demo p{font-size:15.5px;line-height:1.62;color:var(--muted);margin:0 0 12px;max-width:54ch}
.caso-demo p b{color:var(--ink);font-weight:700}
.caso-demo .nota{padding:13px 16px;background:var(--paper-2);border-left:3px solid var(--clay);
  font-size:14.5px;margin-bottom:20px}
.caso-demo .incluye{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:8px}
.caso-demo .incluye li{padding-left:22px;position:relative;font-size:14.5px;line-height:1.5;color:var(--ink)}
.caso-demo .incluye li::before{content:"→";position:absolute;left:0;color:var(--steel-2);font-weight:700}

/* Maqueta de móvil: dibujada, no una captura que envejece */
.caso-demo .movil{display:flex;justify-content:center}
.caso-demo .pantalla{width:min(100%,288px);background:var(--ink);border-radius:26px;
  border:8px solid var(--ink-3);padding:18px 16px 16px;color:var(--paper);
  box-shadow:0 30px 60px -24px rgba(10,11,13,.55);font-size:13px}
.caso-demo .app-barra{display:flex;justify-content:space-between;align-items:center;
  padding-bottom:13px;margin-bottom:13px;border-bottom:1px solid var(--on-dark-14)}
.caso-demo .app-barra span{font:700 13.5px/1 "Inter Tight",sans-serif;letter-spacing:-.02em}
.caso-demo .app-barra b{background:var(--steel);color:var(--ink);border-radius:20px;
  padding:3px 9px;font:700 10.5px/1 "JetBrains Mono",monospace}
.caso-demo .app-linea{display:flex;justify-content:space-between;gap:12px;padding:7px 0;
  color:var(--paper-3);font-size:12.5px;line-height:1.35}
.caso-demo .app-linea b{color:var(--paper);white-space:nowrap;font-variant-numeric:tabular-nums}
.caso-demo .app-linea.sep{border-top:1px solid var(--on-dark-08);margin-top:6px;padding-top:11px}
.caso-demo .app-total{display:flex;justify-content:space-between;align-items:baseline;
  border-top:1px solid var(--on-dark-14);margin-top:10px;padding-top:12px}
.caso-demo .app-total span{font:500 10.5px/1 "JetBrains Mono",monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--paper-3)}
.caso-demo .app-total b{font:800 23px/1 "Inter Tight",sans-serif;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.caso-demo .app-boton{margin-top:14px;text-align:center;background:var(--steel);color:var(--ink);
  border-radius:30px;padding:13px;font:700 11.5px/1 "JetBrains Mono",monospace;
  letter-spacing:.1em;text-transform:uppercase}
.caso-demo .app-pie{margin-top:11px;text-align:center;font:500 10px/1.5 "JetBrains Mono",monospace;
  letter-spacing:.08em;color:var(--paper-3)}
.caso-demo .app-pie b{color:var(--steel)}

@media(max-width:900px){
  .caso-demo{grid-template-columns:1fr;gap:34px}
  .caso-demo .movil{order:-1}
  .caso-demo .pantalla{width:min(100%,262px)}
}
@media(max-width:520px){.caso-demo{margin-inline:18px}}
@media(prefers-reduced-motion:reduce){.caso-demo .etiqueta b{animation:none}}

/* El botón del agente no puede tapar el último botón de ninguna portada */
@media(max-width:700px){
  .page-hero{padding-bottom:104px}
  .page-hero .stat-strip{margin-bottom:0}
}


/* El agente no compite con el CTA de la portada en móvil */
@media(max-width:700px){
  .chat-open{width:54px;height:54px;transition:opacity .3s,transform .3s,background .3s}
  .chat-open svg{width:23px;height:23px}
  body.portada-visible .chat-open{opacity:0;transform:scale(.7);pointer-events:none}
}


/* ============================================================
   HERO CON VÍDEO · tamaño original, entero, sin ampliar
   ============================================================ */
.hero.hero-video{margin-top:var(--barra);min-height:0;padding:clamp(14px,1.6vw,22px) clamp(14px,1.6vw,22px) clamp(48px,6vw,86px);
  display:block;background:var(--paper)}

.hero.hero-video .fondo-video{position:relative;width:100%;max-width:1920px;margin:0 auto;
  aspect-ratio:16/9;background:var(--ink);overflow:hidden;border-radius:3px;
  box-shadow:0 24px 70px -30px rgba(10,11,13,.5)}
.hero.hero-video .cartel,
.hero.hero-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;background:#000}
.hero.hero-video video{opacity:0;transition:opacity .8s ease}
.hero.hero-video.rodando video{opacity:1}
.hero.hero-video.rodando .cartel{opacity:0;transition:opacity .8s ease}
.hero.hero-video .velo{display:none}

/* Botón de sonido, dentro del marco */
.hero.hero-video .sonido{position:absolute;left:14px;bottom:14px;z-index:6;
  display:inline-flex;align-items:center;gap:9px;padding:10px 15px 10px 12px;border-radius:40px;
  background:rgba(8,9,11,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(240,234,217,.32);color:var(--paper);cursor:pointer;
  font:700 10.5px/1 "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;
  transition:background .3s,color .3s,border-color .3s}
.hero.hero-video .sonido:hover,.hero.hero-video .sonido:focus-visible{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.hero.hero-video .sonido svg{width:17px;height:17px}
.hero.hero-video .sonido .onda{opacity:0}
.hero.hero-video .sonido[aria-pressed="true"] .mudo{opacity:0}
.hero.hero-video .sonido[aria-pressed="true"] .onda{opacity:1}

/* El titular vuelve a su sitio: debajo del vídeo, sobre crema */
.hero.hero-video .top{display:flex;justify-content:space-between;gap:24px;
  max-width:1920px;margin:clamp(22px,2.6vw,34px) auto 0;color:var(--muted)}
.hero.hero-video h1{max-width:1920px;margin:clamp(20px,2.4vw,30px) auto 0;color:var(--ink);text-shadow:none}
.hero.hero-video h1 em{color:var(--steel-2)}
.hero.hero-video .bottom{max-width:1920px;margin:clamp(20px,2.4vw,30px) auto 0;color:var(--muted)}
.hero.hero-video .lead{color:var(--ink);text-shadow:none}
.hero.hero-video .lead b{color:var(--steel-2)}
.hero.hero-video .btn{border-color:var(--ink)}
.hero.hero-video .btn-solid{background:var(--ink);color:var(--paper)}
.hero.hero-video .btn-solid:hover,.hero.hero-video .btn-solid:focus-visible{background:var(--steel-2);border-color:var(--steel-2);color:var(--paper)}
.hero.hero-video .btn-ghost{color:var(--ink);background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.hero.hero-video .btn-ghost:hover,.hero.hero-video .btn-ghost:focus-visible{background:var(--ink);color:var(--paper)}

@media(max-width:700px){
  .hero.hero-video{padding-bottom:104px}
  .hero.hero-video .sonido{left:10px;bottom:10px;padding:8px 11px 8px 9px}
  .hero.hero-video .sonido span{display:none}
}
@media(prefers-reduced-motion:reduce){
  .hero.hero-video video,.hero.hero-video .cartel{transition:none}
}

/* Siete apartados: por debajo de 1180 px el menú desplegable entra antes */
@media(max-width:1180px) and (min-width:801px){
  .site-nav{padding-inline:20px}
  .site-nav .nav-list{font-size:11.8px}
  .site-nav .cta{padding:8px 13px;font-size:10.8px}
}
@media(max-width:1010px){
  .site-nav .nav-list{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
    background:rgba(240,234,217,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid #0A0B0D14;padding:6px 0;display:none;white-space:normal}
  .site-nav.is-open .nav-list{display:flex}
  .site-nav .nav-list li{border-top:1px solid var(--line)}
  .site-nav .nav-list li:first-child{border-top:0}
  .site-nav .nav-list a{display:block;padding:15px 28px;font-size:15px;font-weight:600}
  .site-nav .nav-list a::after{display:none}
  .nav-toggle{display:flex}
}

/* Quien pide menos movimiento, no tiene por qué ver flotar el agente */
@media(prefers-reduced-motion:reduce){
  .chat-open{animation:none}
  .final-cta .button b,.page-hero .eyebrow b,.caso-demo .etiqueta b{animation:none}
}

/* ── Consentimiento de cookies ────────────────────────────────── */
.cookies{position:fixed;left:0;right:0;bottom:0;z-index:70;padding:0 clamp(12px,3vw,24px) clamp(12px,3vw,24px);
  transform:translateY(115%);transition:transform .4s cubic-bezier(.7,0,.2,1);pointer-events:none}
.cookies.viva{transform:none;pointer-events:auto}
.cookies-caja{max-width:620px;margin:0 auto;background:var(--ink);color:var(--paper);
  padding:clamp(18px,3vw,24px);border-radius:4px;border:1px solid #ffffff1f;
  box-shadow:0 24px 60px -24px rgba(10,11,13,.85)}
.cookies-caja h2{font-size:clamp(17px,2.4vw,20px);font-weight:500;letter-spacing:-.01em;margin-bottom:8px}
.cookies-caja p{font-size:13.5px;line-height:1.55;color:#ffffffc4}
.cookies-caja p b{color:var(--paper);font-weight:600}
.cookies-detalle{margin-top:14px;padding-top:14px;border-top:1px solid #ffffff1f}
.cookies-fila{display:flex;align-items:flex-start;gap:11px;padding:10px 0;cursor:pointer}
.cookies-fila+.cookies-fila{border-top:1px solid #ffffff14}
.cookies-fila.fija{cursor:default;opacity:.85}
.cookies-fila input{width:18px;height:18px;margin-top:2px;flex:0 0 auto;accent-color:var(--steel)}
.cookies-fila span{font-size:12.5px;line-height:1.5;color:#ffffffb4}
.cookies-fila span b{display:block;font-size:13.5px;color:var(--paper);font-weight:600;margin-bottom:3px}
.cookies-botones{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.cookies-botones button{padding:11px 18px;border-radius:2px;font-size:14px;font-weight:600;cursor:pointer;transition:.2s}
.cookies-botones .si{background:var(--paper);color:var(--ink);flex:1 1 auto}
.cookies-botones .si:hover,.cookies-botones .si:focus-visible{background:var(--steel);color:var(--ink)}
.cookies-botones .no{background:transparent;color:var(--paper);border:1px solid #ffffff3d;flex:1 1 auto}
.cookies-botones .no:hover,.cookies-botones .no:focus-visible{border-color:var(--paper);background:#ffffff14}
.cookies-botones .mas{background:transparent;color:#ffffffc4;text-decoration:underline;text-underline-offset:3px;padding:11px 10px}
.cookies-botones .mas:hover,.cookies-botones .mas:focus-visible{color:var(--paper)}
.cookies-guardar{margin-top:10px}
.cookies-guardar button{width:100%;padding:12px;background:var(--steel);color:var(--ink);
  border-radius:2px;font-size:14.5px;font-weight:600;cursor:pointer;transition:.2s}
.cookies-guardar button:hover,.cookies-guardar button:focus-visible{background:var(--paper)}
.cookies-enlaces{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px;font-size:12.5px}
.cookies-enlaces a{color:#ffffffa8;border-bottom:1px solid #ffffff30;padding-bottom:1px}
.cookies-enlaces a:hover,.cookies-enlaces a:focus-visible{color:var(--paper);border-color:var(--paper)}
@media(max-width:520px){
  .cookies-botones .mas{flex:1 1 100%;text-align:center}
}
@media(prefers-reduced-motion:reduce){ .cookies{transition:none} }

/* ── Páginas legales ──────────────────────────────────────────── */
.legal-doc{max-width:760px;margin:0 auto;padding:clamp(28px,5vw,56px) clamp(16px,4vw,28px) clamp(56px,8vw,96px)}
.legal-doc h2{font-size:clamp(20px,3vw,26px);font-weight:400;letter-spacing:-.01em;
  margin:clamp(30px,4vw,44px) 0 12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.legal-doc h3{font-size:16px;font-weight:600;margin:22px 0 8px}
.legal-doc p,.legal-doc li{font-size:15.5px;line-height:1.65;color:var(--ink)}
.legal-doc p+p{margin-top:12px}
.legal-doc ul,.legal-doc ol{margin:12px 0 12px 22px}
.legal-doc li+li{margin-top:7px}
.legal-doc a{color:var(--steel-2);border-bottom:1px solid currentColor}
.legal-doc a:hover,.legal-doc a:focus-visible{color:var(--ink)}
.legal-doc .fecha{font-family:"JetBrains Mono","Courier New",monospace;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.legal-doc .destacado{margin:18px 0;padding:16px 18px;background:var(--paper-2);
  border-left:3px solid var(--ink);border-radius:0 3px 3px 0;font-size:14.5px;line-height:1.6}
.legal-doc .pendiente,.legal-doc .datos .pendiente{background:#F6E7D2;border-bottom:1px solid #8A5A1E;
  padding:1px 6px;border-radius:2px;color:#5E3A0F;font-weight:600;flex:0 1 auto;font-size:inherit}
.legal-doc .datos{margin:16px 0;border:1px solid var(--paper-3);border-radius:3px;overflow:hidden}
.legal-doc .datos div{display:flex;flex-wrap:wrap;gap:4px 16px;padding:10px 14px;font-size:14.5px}
.legal-doc .datos div+div{border-top:1px solid var(--line)}
.legal-doc .datos div>span:first-child{flex:0 0 190px;color:var(--muted);font-size:13px}
.legal-doc .tabla{margin:16px 0;overflow-x:auto;border:1px solid var(--paper-3);border-radius:3px}
.legal-doc table{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
.legal-doc th,.legal-doc td{padding:10px 13px;text-align:left;vertical-align:top;line-height:1.5}
.legal-doc th{background:var(--paper-2);font-size:12px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);font-weight:600;white-space:nowrap}
.legal-doc tbody tr+tr{border-top:1px solid var(--line)}
.legal-doc .boton-cookies{display:inline-block;margin-top:6px;padding:11px 20px;background:var(--ink);
  color:var(--paper);border-radius:2px;font-size:14.5px;font-weight:600;cursor:pointer;transition:.2s;border:0}
.legal-doc .boton-cookies:hover,.legal-doc .boton-cookies:focus-visible{background:var(--steel-2)}

/* Enlaces legales en el pie */
.footer-legal{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;
  padding-top:22px;margin-top:-1px;border-top:1px solid var(--on-dark-08)}
.footer-legal a,.footer-legal button{font-size:13px;color:var(--paper-3);transition:color .3s;cursor:pointer;padding:4px 0}
.footer-legal a:hover,.footer-legal a:focus-visible,
.footer-legal button:hover,.footer-legal button:focus-visible{color:var(--steel)}

/* Casilla de consentimiento en los formularios */
.consent{display:flex;align-items:flex-start;gap:11px;margin:4px 0 18px;cursor:pointer}
.consent input{width:18px;height:18px;margin-top:2px;flex:0 0 auto;accent-color:var(--steel)}
.consent span{font-size:13px;line-height:1.5;color:var(--muted)}
.consent a{color:var(--steel-2);border-bottom:1px solid currentColor}
.consent a:hover,.consent a:focus-visible{color:var(--ink)}

/* El bloque de resultados medibles dentro de quién soy */
.on-dark .body .resultados{margin-top:18px;padding:16px 18px;background:#ffffff0d;
  border-left:3px solid var(--steel);border-radius:0 2px 2px 0}
.on-dark .body .resultados b{color:var(--paper)}

/* La trayectoria completa: visible para quien la quiera y para el buscador */
.trayectoria{margin:20px 0;border-top:1px solid var(--on-dark-14);border-bottom:1px solid var(--on-dark-14)}
.trayectoria summary{cursor:pointer;padding:14px 0;list-style:none;display:flex;align-items:center;gap:10px;
  font:700 11px/1 "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--steel);
  transition:color .25s}
.trayectoria summary::-webkit-details-marker{display:none}
.trayectoria summary::before{content:"+";font-size:16px;line-height:1;width:16px;transition:transform .25s}
.trayectoria[open] summary::before{content:"–"}
.trayectoria summary:hover,.trayectoria summary:focus-visible{color:var(--paper)}
.trayectoria .tray-cuerpo{padding-bottom:18px;display:flex;flex-direction:column;gap:14px}

/* ── Precios: la auditoría primero ─────────────────────────────── */
.pricing .intro{font-size:clamp(16px,2vw,18px);line-height:1.6;color:var(--paper-3)}
.pricing .intro b{color:var(--paper);font-weight:600}

.auditoria-paso{border:2px solid var(--steel);background:#5fa6c412;border-radius:3px;overflow:hidden}
.ap-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:22px clamp(18px,3vw,28px) 18px;border-bottom:1px solid var(--on-dark-14)}
.ap-cab h3{font:600 clamp(26px,4vw,38px)/1 "Inter Tight",sans-serif;letter-spacing:-.02em;margin-top:8px}
.ap-precio{text-align:right}
.ap-precio b{display:block;font:700 clamp(28px,4vw,40px)/1 "JetBrains Mono",monospace;color:var(--steel)}
.ap-precio small{display:block;margin-top:5px;font-size:12px;color:var(--paper-3)}
.ap-cuerpo{display:grid;grid-template-columns:1.35fr 1fr;gap:0}
.ap-que{padding:22px clamp(18px,3vw,28px);border-right:1px solid var(--on-dark-14)}
.ap-que p{font-size:14.5px;line-height:1.65;color:var(--paper-3)}
.ap-que p + p{margin-top:12px}
.ap-que b{color:var(--paper);font-weight:600}
.ap-garantia{padding:22px clamp(18px,3vw,28px);background:#7ba66814}
.gar-sello{display:inline-block;margin-bottom:10px;padding:4px 10px;background:var(--olive);color:var(--ink);
  font:700 10px/1 "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase}
.ap-garantia p{font-size:15.5px;line-height:1.6;color:var(--paper)}
.ap-garantia p b{font-weight:700}
.gar-letra{margin-top:10px;font-size:12.5px!important;line-height:1.55;color:var(--paper-3)!important}
.ap-pie{padding:18px clamp(18px,3vw,28px);border-top:1px solid var(--on-dark-14);
  font-size:14.5px;line-height:1.6;color:var(--paper-3)}
.ap-pie b{color:var(--paper);font-weight:600}

.paso-dos{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:34px 0 22px;
  font-size:15.5px;line-height:1.6;color:var(--paper-3)}
.paso-dos span{font:700 10px/1 "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;
  color:var(--steel);border:1px solid var(--steel);padding:6px 11px;white-space:nowrap}

/* Los tres paquetes ocupan exactamente lo mismo que el titular de la seccion.
   Estaban topados en 1180 px: en un monitor ancho se apelotonaban a la
   izquierda y quedaba media pantalla negra al lado. El tope estaba ahi para
   que la linea no se hiciera ilegible de larga, pero eso se arregla dentro de
   la tarjeta —midiendo el texto en caracteres— y no encogiendo la rejilla. */
.tier-grid.tres{grid-template-columns:repeat(3,1fr);max-width:none}
.tier h3{text-wrap:balance}
.tier-lema{margin:-2px 0 14px;font-size:13.5px;line-height:1.45;color:var(--steel);font-style:italic}
.tier.featured .tier-lema{color:#0A0B0DB8}

@media(max-width:900px){
  .ap-cuerpo{grid-template-columns:1fr}
  .ap-que{border-right:0;border-bottom:1px solid var(--on-dark-14)}
  /* Paso intermedio: de tres a uno de golpe dejaba una tarjeta de 844 px de
     ancho con seis lineas de texto dentro, que es peor que dos columnas. */
  .tier-grid.tres{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
  .tier-grid.tres{grid-template-columns:1fr}
}

/* Si una captura no ha llegado, se enseña el nombre, no un agujero */
/* Caso cuya web no responde el dia de la captura: se enseña, pero no se enlaza */
.card.sin-enlace{cursor:default}

/* ── Vídeo de "quién te lo monta" ────────────────────────────────────────
   Vertical, pegado bajo la frase grande y ocupando la columna que antes se
   quedaba vacía. Se queda fijo mientras se lee el texto de al lado. */
.proof-grid .claim-col{display:flex;flex-direction:column;gap:30px;position:sticky;top:calc(var(--barra,74px) + 28px)}
.quien-video{margin:0;position:relative;max-width:330px;border-radius:18px;overflow:hidden;background:#000;border:1px solid var(--on-dark-14);box-shadow:0 20px 50px -18px rgba(0,0,0,.6)}
.quien-video video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;background:#000}
.quien-video figcaption{position:absolute;left:0;right:0;bottom:0;padding:44px 16px 14px;font:500 12px/1.4 "JetBrains Mono",monospace;letter-spacing:.06em;color:var(--paper);background:linear-gradient(to top,rgba(0,0,0,.82),transparent)}
.quien-video .sonido{position:absolute;top:12px;right:12px;display:flex;align-items:center;gap:7px;padding:8px 13px;border-radius:30px;background:rgba(10,11,13,.62);color:var(--paper);border:1px solid #ffffff2E;font:600 11px/1 "Inter Tight",system-ui,sans-serif;cursor:pointer;backdrop-filter:blur(6px);transition:background .2s}
.quien-video .sonido:hover,.quien-video .sonido:focus-visible{background:rgba(10,11,13,.85)}
.quien-video .sonido svg{width:15px;height:15px}
.quien-video .sonido .onda{opacity:0}
.quien-video .sonido[aria-pressed=true] .mudo{opacity:0}
.quien-video .sonido[aria-pressed=true] .onda{opacity:1}
@media(max-width:1024px){
  .proof-grid .claim-col{position:static}
  .quien-video{max-width:300px}
}
@media(max-width:680px){
  .quien-video{max-width:100%}
}
@media(prefers-reduced-motion:reduce){
  .proof-grid .claim-col{position:static}
}


/* ── La tarjeta del movil ────────────────────────────────────────────────────
   Un programa que se abre en el movil del huesped no se enseña dentro de una
   ventana de navegador. El movil se dibuja con HTML en vez de con una captura:
   queda nitido en cualquier pantalla, pesa cero y no depende de que exista un
   fichero. Todo lo de dentro va en em, atado al tamaño del marco, asi que la
   pantalla entera escala de una pieza. */
.card-movil .marco-movil{height:calc(var(--media) + var(--barra));display:flex;align-items:flex-end;justify-content:center;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0%,#232730 0%,#12141a 62%,#0a0b0d 100%)}
.card-movil .lienzo{height:calc(var(--media) + var(--barra) - 28px);width:calc((var(--media) + var(--barra) - 28px) * 0.462);
  background:#111;border-radius:22px 22px 0 0;padding:5px 5px 0;box-shadow:0 0 0 1.5px #ffffff26,0 -10px 34px -12px #000}
.card-movil .movil{height:100%;border-radius:18px 18px 0 0;overflow:hidden;background:#fff;position:relative}
.card-movil .movil::before{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);
  width:32%;height:9px;background:#111;border-radius:99px;z-index:3}
.card-movil .movil-pantalla{height:100%;overflow:hidden}

.rs{height:100%;background:#FBF7F2;font-size:calc(var(--media) / 38);line-height:1.3;color:#2a1f22;
  font-family:"Inter Tight",system-ui,sans-serif;display:flex;flex-direction:column}
.rs-cabecera{background:#6E2233;color:#fff;padding:1.9em .9em .95em;text-align:center;flex:none}
.rs-alto{display:flex;align-items:center;justify-content:space-between;margin-bottom:.7em}
.rs-hab{background:#ffffff2e;border-radius:99px;padding:.28em .7em;font-size:.82em;font-weight:600;white-space:nowrap}
.rs-idiomas{display:flex;gap:.18em;background:#ffffff2e;border-radius:99px;padding:.26em .34em}
.rs-idiomas i{width:.92em;height:.66em;border-radius:1.5px;display:block}
.rs-idiomas i:nth-child(1){background:linear-gradient(#c60b1e 0 28%,#ffc400 28% 72%,#c60b1e 72%)}
.rs-idiomas i:nth-child(2){background:#00247d}
.rs-idiomas i:nth-child(3){background:linear-gradient(#000 0 33%,#dd0000 33% 66%,#ffce00 66%)}
.rs-marca small{display:block;font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:.86em;opacity:.9}
.rs-marca b{display:block;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:1.34em;letter-spacing:.14em;margin-top:.05em}
.rs-cabecera p{font-size:.78em;opacity:.84;margin:.6em 0 0;line-height:1.35}

.rs-familias{display:flex;gap:.42em;padding:.75em .7em .2em;flex:none}
.rs-fam{flex:1;background:#fff;border-radius:.72em;padding:.52em .4em;text-align:center;box-shadow:0 1px 4px #6e223314}
.rs-fam b{display:block;font-size:.84em;font-weight:700}
.rs-fam i{display:block;font-style:normal;font-size:.62em;color:#8a7a7d;margin-top:.12em;line-height:1.2}
.rs-fam-on{background:#6E2233;color:#fff}
.rs-fam-on i{color:#e8c9a0}

.rs-horario{align-self:center;background:#F6EADC;color:#7a5a32;border-radius:99px;
  padding:.34em .9em;font-size:.72em;font-weight:600;margin:.75em 0 .1em;white-space:nowrap;flex:none}

.rs-platos{padding:.35em .8em 0;flex:1;min-height:0;overflow:hidden}
.rs-plato{display:flex;align-items:center;gap:.6em;padding:.62em 0;border-bottom:1px solid #00000010}
.rs-foto{width:2.9em;height:2.9em;border-radius:.5em;flex:none;
  background:linear-gradient(140deg,#e2cbab,#c08f5e 55%,#8d5f3c)}
.rs-plato:nth-child(2) .rs-foto{background:linear-gradient(140deg,#efe4cd,#cdb488 55%,#8e7a4f)}
.rs-plato:nth-child(3) .rs-foto{background:linear-gradient(140deg,#f0dfc2,#d9b57e 52%,#9a6c46)}
.rs-plato:nth-child(4) .rs-foto{background:linear-gradient(140deg,#e8c4a8,#c47f5e 55%,#7e4733)}
.rs-texto{flex:1;min-width:0}
.rs-texto b{display:block;font-size:.83em;font-weight:700;line-height:1.22}
.rs-sello{display:inline-block;font-style:normal;background:var(--sello,#7d2b3a);color:#fff;
  border-radius:.3em;padding:.14em .42em;font-size:.56em;font-weight:800;letter-spacing:.05em;margin-top:.3em}
.rs-texto u{display:block;text-decoration:none;color:#a07b2e;font-weight:700;font-size:.84em;margin-top:.26em}
.rs-mas{width:1.9em;height:1.9em;border-radius:50%;background:#C9A227;color:#fff;flex:none;
  display:grid;place-items:center;font-size:1em;font-weight:600;line-height:1}


/* En movil se ve una tarjeta cada vez, asi que ya no hace falta que todas midan
   lo mismo: lo que hace falta es que ninguna recorte. La captura recupera su
   proporcion y el movil, su altura, en vez de quedarse los dos atados a una
   altura pensada para verlas en fila. */
@media(max-width:680px){
  .card-web{width:calc(100vw - 56px)}
  .card-web .lienzo{height:auto;aspect-ratio:1440/900}
  .card-movil{width:min(320px,calc(100vw - 56px))}
  .card-movil .marco-movil{height:430px}
  .card-movil .lienzo{height:402px;width:186px}
}