/* ==================================================================
   EleMa — sistema visual
   Estética: «alacena de terminal». Despensa artesanal cruzada con
   consola de sistema. Oscuro, verde lima de la marca, papel crema.
   ================================================================== */

:root{
  /* --- Superficies --- */
  --bg:        #050807;
  --panel:     #0A120D;
  --footer:    #030504;
  --vidrio:    rgba(255,255,255,.045);
  --vidrio-2:  rgba(255,255,255,.075);

  /* --- Tinta --- */
  --ink:       #F2F7F3;
  --ink-70:    rgba(242,247,243,.72);
  --ink-55:    rgba(242,247,243,.55);
  --ink-35:    rgba(242,247,243,.35);
  --ink-18:    rgba(242,247,243,.18);
  --ink-12:    rgba(242,247,243,.12);

  /* --- El verde de la marca (medido del logo EleMa) --- */
  --lima:      #57FC0F;
  --lima-on:   #08150A;
  --brote:     #B4FF7E;              /* serifas y frases de color */
  --lima-06:   rgba(87,252,15,.06);
  --lima-12:   rgba(87,252,15,.12);
  --lima-25:   rgba(87,252,15,.25);
  --lima-40:   rgba(87,252,15,.40);
  --lima-60:   rgba(87,252,15,.60);

  /* --- Papel del recibo --- */
  --paper:     #F7F2E5;
  --paper-ink: #14231C;
  --paper-btn: #F4EFE2;

  /* --- Curvas y tiempos --- */
  --ease-out:    cubic-bezier(.23,1,.32,1);
  --ease-in-out: cubic-bezier(.77,0,.175,1);
  --t-rapido: 160ms;
  --t-ui:     240ms;
  --t-lento:  560ms;   /* solo reveals de marketing */

  /* --- Medidas --- */
  --ancho:      1240px;
  --ancho-slim: 1140px;
  --borde-hdr:  84px;   /* alto del header sticky, para el offset del ancla */
}

*,*::before,*::after{ box-sizing:border-box }

html{ scroll-behavior:smooth; scroll-padding-top:var(--borde-hdr) }

body{
  margin:0;
  color:var(--ink);
  font-family:'Bricolage Grotesque',system-ui,sans-serif;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  background-color:var(--bg);
  background-image:
    radial-gradient(1100px 540px at 78% -10%, rgba(87,252,15,.075), transparent 62%),
    linear-gradient(rgba(242,247,243,.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242,247,243,.026) 1px, transparent 1px);
  background-size:auto, 100% 34px, 34px 100%;
  background-attachment:fixed;
  overflow-x:hidden;
}

a{ color:var(--ink); text-decoration:none; transition:color var(--t-rapido) ease }
a:hover{ color:var(--lima) }
img{ max-width:100%; display:block }
::selection{ background:var(--lima); color:var(--lima-on) }

:focus-visible{
  outline:2px solid var(--lima);
  outline-offset:3px;
  border-radius:2px;
}

.mono{ font-family:'Fragment Mono',ui-monospace,monospace }
.serif{ font-family:'Instrument Serif',Georgia,serif; font-style:italic; font-weight:400 }

.saltar{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--lima); color:var(--lima-on);
  font-family:'Fragment Mono',monospace; font-size:12px;
  padding:12px 18px; border-radius:0 0 3px 0;
}
.saltar:focus{ left:0 }

.envoltura{ max-width:var(--ancho); margin-inline:auto; padding-inline:24px }
.envoltura--slim{ max-width:var(--ancho-slim) }

.ojito{                        /* eyebrow */
  font-family:'Fragment Mono',monospace;
  font-size:13px; letter-spacing:.08em;
  color:var(--lima);
  text-shadow:0 0 14px var(--lima-40);
}

/* ==================================================================
   1. Header
   ================================================================== */

.hdr{
  position:sticky; top:0; z-index:50;
  background:rgba(5,8,7,.82);
  backdrop-filter:blur(12px) saturate(1.2);
  border-bottom:1px solid var(--ink-12);
}
.hdr__fila{
  max-width:var(--ancho); margin-inline:auto;
  padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; flex-wrap:wrap;
}

.logo{
  display:inline-flex; align-items:baseline; gap:1px;
  font-weight:800; font-size:24px; letter-spacing:-.03em;
  color:var(--ink);
}
.logo:hover{ color:var(--ink) }
.logo em{ font-style:normal; color:var(--lima); text-shadow:0 0 18px var(--lima-40) }
.logo__terminal{
  display:inline-flex; align-items:center; gap:2px; align-self:center;
  border:1px solid var(--lima); border-radius:3px;
  padding:2px 4px; margin-left:8px;
  box-shadow:0 0 10px var(--lima-40);
}
.logo__terminal i{
  font-family:'Fragment Mono',monospace; font-size:8px;
  color:var(--lima); line-height:1; font-style:normal;
}
.cursor{
  display:inline-block; width:4px; height:7px;
  background:var(--lima);
  animation:parpadeo 1.1s steps(1) infinite;
}

.nav{ display:flex; gap:26px; flex-wrap:wrap }
.nav a{
  font-family:'Fragment Mono',monospace; font-size:12px;
  letter-spacing:.08em; color:var(--ink-70);
  padding-block:4px; position:relative;
}
.nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--lima);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--t-ui) var(--ease-out);
}
.nav a:hover{ color:var(--ink) }
@media (hover:hover) and (pointer:fine){
  .nav a:hover::after{ transform:scaleX(1) }
}

.hdr__derecha{ display:flex; align-items:center; gap:16px }

.idioma{ display:flex; gap:3px }
.idioma button,
.idioma a{
  font-family:'Fragment Mono',monospace; font-size:11px; line-height:1.4;
  padding:5px 9px; border-radius:3px; border:0; cursor:pointer;
  background:transparent; color:var(--ink-55);
  transition:background var(--t-rapido) ease, color var(--t-rapido) ease;
}
.idioma button[aria-pressed="true"],
.idioma a[aria-current="true"]{ background:var(--lima); color:var(--lima-on) }
.idioma button:not([aria-pressed="true"]):hover,
.idioma a:not([aria-current="true"]):hover{ color:var(--ink) }

/* ==================================================================
   2. Botones
   ================================================================== */

.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:'Fragment Mono',monospace; letter-spacing:.1em;
  border-radius:2px; border:1px solid transparent;
  cursor:pointer;
  transition:background var(--t-ui) var(--ease-out),
             color var(--t-ui) var(--ease-out),
             border-color var(--t-ui) var(--ease-out),
             transform var(--t-rapido) var(--ease-out),
             box-shadow var(--t-ui) var(--ease-out);
}
.btn:active{ transform:translateY(1px) }

.btn--lima{
  background:var(--lima); color:var(--lima-on);
  box-shadow:0 0 26px var(--lima-40);
}
.btn--lima:hover{ background:var(--ink); color:var(--lima-on); box-shadow:0 0 30px rgba(242,247,243,.25) }

.btn--linea{ border-color:var(--ink-35); color:var(--ink) }
.btn--linea:hover{ border-color:var(--lima); color:var(--lima) }

.btn--sm{ font-size:11px; padding:11px 16px }
.btn--md{ font-size:12px; padding:17px 28px }
.btn--lg{ font-size:13px; padding:20px 34px }

/* ==================================================================
   3. Hero
   ================================================================== */

.hero{ padding-block:92px 40px }

.hero__prompt{
  font-family:'Fragment Mono',monospace; font-size:13px;
  letter-spacing:.08em; color:var(--lima);
  text-shadow:0 0 14px var(--lima-40);
  min-height:1.4em;
}
.hero__prompt .cursor{ width:9px; height:15px; margin-left:6px; vertical-align:-2px; box-shadow:0 0 10px var(--lima-60) }

.hero h1{
  margin:22px 0 0;
  font-size:clamp(52px,8.8vw,116px); font-weight:800;
  letter-spacing:-.045em; line-height:.94;
  text-wrap:balance;
}
.hero h1 em{
  font-family:'Instrument Serif',Georgia,serif; font-style:italic; font-weight:400;
  color:var(--lima); letter-spacing:-.02em;
  text-shadow:0 0 30px var(--lima-40);
}
.hero__sub{
  max-width:620px; font-size:18px; line-height:1.65;
  color:var(--ink-70); margin:30px 0 0; text-wrap:pretty;
}
.hero__ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-top:36px }

/* --- Barra de números --- */
.stats{
  display:flex; gap:44px; flex-wrap:wrap;
  border-top:1.5px solid rgba(242,247,243,.85);
  margin-top:56px; padding-top:22px;
}
.stat{ display:flex; align-items:baseline; gap:12px }
.stat b{
  font-weight:800; font-size:clamp(30px,3.4vw,38px);
  letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.stat span{
  font-family:'Fragment Mono',monospace; font-size:11px;
  letter-spacing:.08em; color:var(--ink-55); max-width:190px; line-height:1.5;
}

/* ==================================================================
   4. LA REPISA Y LOS FRASCOS  —  la pieza central
   ================================================================== */

.repisa{ margin-top:36px }

.repisa__rotulo{
  display:flex; align-items:baseline; gap:18px; flex-wrap:wrap;
}
.repisa__rotulo b{
  font-family:'Fragment Mono',monospace; font-size:12px;
  letter-spacing:.1em; font-weight:400; color:var(--ink);
}
.repisa__rotulo i{
  font-family:'Instrument Serif',Georgia,serif; font-style:italic;
  font-size:15px; color:var(--ink-55);
}
.repisa__rotulo .linea{
  flex:1 1 60px; height:1px; background:var(--ink-18); min-width:40px;
}

/* La fila de frascos.
   Alturas de fila FIJAS: es lo que permite que la tabla de la repisa sea
   una sola línea continua de pared a pared, dibujada detrás de todo, en
   vez de un subrayado por frasco que se corta donde se acaban los frascos.
     --hueco  alto del espacio donde se para el frasco
     --pie    alto reservado para nombre + descripción + chip
     --fila   el paso vertical entre repisas = hueco + tabla + pie */
.repisa__fila{
  position:relative;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
  grid-auto-rows:var(--fila);
  gap:0;
  margin-top:34px;
  --tarro:104px;
  --hueco:142px;
  --pie:144px;   /* reflejo + nombre de 2 líneas + tag de 2 + chip */
  --fila:288px;
}

/* La tabla: una sola pieza, repetida a la altura exacta de cada fila.
   Se enciende de izquierda a derecha como un tubo de neón. */
.js .repisa__tabla{
  position:absolute; inset:0;
  pointer-events:none;
  background-image:repeating-linear-gradient(
    to bottom,
    transparent 0, transparent var(--hueco),
    var(--lima) var(--hueco), var(--lima) calc(var(--hueco) + 2px),
    transparent calc(var(--hueco) + 2px), transparent var(--fila));
  filter:drop-shadow(0 0 7px var(--lima-60)) drop-shadow(0 0 22px var(--lima-25));
  transform:scaleX(0); transform-origin:left center;
  transition:transform 880ms var(--ease-out);
}
.js .repisa.visible .repisa__tabla{ transform:scaleX(1) }

/* Una repisa de pocos frascos cabe entera en una fila; si no, el último
   queda solo en la fila de abajo y la repisa se ve coja. */
@media (min-width:1080px){
  .repisa--una-fila .repisa__fila{
    grid-template-columns:repeat(var(--cuantos,4),minmax(0,1fr));
  }
}

/* La repisa del hero se ajusta a cuántos frascos haya (hoy 3) */
.repisa--hero .repisa__fila{
  grid-template-columns:repeat(var(--cuantos,4),minmax(0,1fr));
  max-width:calc(var(--cuantos,4) * 170px); margin-inline:auto;
  --tarro:88px; --hueco:118px; --pie:46px; --fila:166px;
}
/* En la repisa del hero el nombre va en mono, pequeño, como una etiqueta */
.repisa--hero .frasco__nombre{
  font-family:'Fragment Mono',monospace; font-weight:400;
  font-size:10.5px; letter-spacing:.06em;
  color:var(--ink-55); margin-top:11px;
}
@media (hover:hover) and (pointer:fine){
  .repisa--hero .frasco:hover .frasco__nombre{ color:var(--lima) }
}
@media (max-width:560px){
  .repisa--hero .repisa__fila{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}

/* ==================================================================
   EL FRASCO
   Un objeto de vidrio que se asienta en la repisa. El ícono de cada
   programa es su contenido; el frasco es lo que hace que doce íconos
   de estilos distintos se lean como una sola colección.
   ================================================================== */

.frasco{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  color:inherit;
  padding:0 14px;
}
.frasco:hover{ color:inherit }

/* El hueco donde se para el frasco. Alto fijo: así los vidrios de una
   misma fila apoyan a la misma altura y la tabla sale recta. */
.frasco__hueco{
  position:relative;
  width:100%; height:var(--hueco);
  display:flex; align-items:flex-end; justify-content:center;
}

/* El frasco es el ícono mismo, parado sobre la tabla. Lo que hace que
   doce íconos de estilos distintos se lean como una colección no es
   meterlos en una caja: es darles el mismo trato físico — un tamaño, una
   sombra de contacto, un reflejo en la madera y la misma luz verde
   rebotando desde abajo. */
.frasco__vidrio{
  position:relative;
  width:var(--tarro,104px); height:var(--tarro,104px);
  display:flex; align-items:center; justify-content:center;
  transition:transform var(--t-ui) var(--ease-out), filter var(--t-ui) var(--ease-out);
  will-change:transform;
}

.frasco__icono{
  width:100%; height:100%;
  object-fit:contain;
  border-radius:calc(var(--tarro,104px) * .22);
  filter:
    drop-shadow(0 14px 18px rgba(0,0,0,.72))
    drop-shadow(0 2px 3px rgba(0,0,0,.5));
}
/* Los íconos que vienen con fondo claro o transparente necesitan su
   propia base para no verse como un recorte flotando. */
.frasco__icono--claro{
  background:#fff;
  box-shadow:inset 0 0 0 1px rgba(20,35,28,.14);
}
/* Los íconos sin fondo propio se asientan sobre un vidrio oscuro, para que
   no queden flotando al lado de los que sí son tarros cuadrados. */
.frasco__icono--suelto{
  background:linear-gradient(165deg, rgba(255,255,255,.07), rgba(255,255,255,.015));
  box-shadow:inset 0 0 0 1px rgba(242,247,243,.11), inset 0 1px 0 rgba(255,255,255,.10);
  padding:11%;
}

/* La sombra de contacto: lo que asienta el frasco en la tabla. */
.frasco__poso{
  position:absolute; bottom:-4px; left:50%;
  width:calc(var(--tarro,104px) * .96); height:11px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(0,0,0,.85) 0%, rgba(0,0,0,.35) 45%, transparent 72%);
  transition:width var(--t-ui) var(--ease-out), opacity var(--t-ui) var(--ease-out);
  pointer-events:none;
}

/* El reflejo en la tabla. Es el detalle que los vuelve objetos.
   La ventana recorta la franja de abajo del ícono; el volteo va en la
   imagen y sobre su propio centro, que es lo que deja esa franja —el
   borde que toca la repisa— justo bajo la línea. */
.frasco__reflejo{
  position:absolute; top:calc(var(--hueco) + 4px); left:50%;
  width:var(--tarro,104px); height:calc(var(--tarro,104px) * .34);
  transform:translateX(-50%);
  overflow:hidden;
  opacity:.21;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, transparent 92%);
  mask-image:linear-gradient(to bottom, #000 0%, transparent 92%);
  transition:opacity var(--t-ui) var(--ease-out);
}
.frasco__reflejo img{
  width:var(--tarro,104px); height:var(--tarro,104px);
  object-fit:contain;
  border-radius:calc(var(--tarro,104px) * .22);
  transform:scaleY(-1);
  filter:blur(.5px);
}

.frasco__pie{
  display:flex; flex-direction:column; align-items:center;
  padding-top:2px; height:var(--pie); overflow:hidden;
  position:relative; z-index:1;   /* por encima del reflejo */
}

/* El nombre arranca por debajo del reflejo, no encima de él */
.frasco__nombre{
  font-weight:650; font-size:16.5px; margin-top:36px;
  text-align:center; color:var(--ink); line-height:1.25;
  transition:color var(--t-rapido) ease;
}
.frasco__tag{
  font-size:13.5px; color:var(--ink-55); line-height:1.45;
  margin-top:4px; text-align:center; text-wrap:pretty;
}
.frasco__chip-caja{ margin-top:14px }

/* Al pasar el mouse se levanta EL FRASCO, no la repisa: la tabla se queda
   quieta y por eso se siente que hay un objeto encima de ella. La sombra
   se encoge y el reflejo se despega, como pasaría de verdad. */
@media (hover:hover) and (pointer:fine){
  .frasco:hover .frasco__vidrio{
    transform:translateY(-10px);
    filter:drop-shadow(0 0 22px var(--lima-25));
  }
  .frasco:hover .frasco__poso{ width:calc(var(--tarro,104px) * .62); opacity:.55 }
  .frasco:hover .frasco__reflejo{ opacity:.11 }
  .frasco:hover .frasco__nombre{ color:var(--lima) }
}
.frasco:focus-visible{ outline-offset:6px; border-radius:4px }

/* La etiqueta «En la cocina» colgando sobre el frasco */
.frasco__colgante{
  position:absolute; top:-30px; left:50%; transform:translateX(-50%);
  font-family:'Fragment Mono',monospace; font-size:10.5px;
  letter-spacing:.12em; color:var(--lima);
  text-shadow:0 0 14px var(--lima-40);
  white-space:nowrap;
}

/* --- Chips de estado --- */
.chip{
  display:inline-block;
  font-family:'Fragment Mono',monospace; font-size:10.5px;
  text-transform:uppercase; letter-spacing:.12em;
  padding:5px 10px; border-radius:3px;
}
.chip--prod{ background:var(--lima); color:var(--lima-on) }
.chip--obra{ border:1px solid var(--lima); color:var(--lima); background:var(--lima-06) }
.chip--casa{ border:1.5px solid rgba(242,247,243,.62); color:var(--ink) }

.repisa__pie{
  text-align:center; margin-top:24px;
  font-family:'Instrument Serif',Georgia,serif; font-style:italic;
  font-size:19px; color:var(--brote);
}

/* ==================================================================
   5. Banda de Facturador CR + el recibo
   ================================================================== */

.facturador{
  background:var(--panel);
  border-top:1px solid var(--lima-25);
  border-bottom:1px solid var(--lima-25);
  margin-top:70px;
  position:relative; overflow:hidden;
}
.facturador::before{           /* respiración de luz detrás del recibo */
  content:''; position:absolute; inset:0;
  background:radial-gradient(620px 420px at 76% 50%, rgba(87,252,15,.07), transparent 70%);
  pointer-events:none;
}
.facturador__grid{
  position:relative;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
  gap:64px; padding-block:100px; align-items:center;
}
.facturador h2{
  margin:24px 0 0; font-size:clamp(40px,5.4vw,74px);
  font-weight:800; letter-spacing:-.04em; line-height:1;
}
.facturador__it{
  font-family:'Instrument Serif',Georgia,serif; font-style:italic;
  font-size:24px; color:var(--brote); margin-top:14px;
}
/* Solo los párrafos de la columna de texto: el recibo tiene su propia
   tinta y una regla suelta `.facturador p` se la borraba. */
.facturador__texto > p:not(.facturador__it){ font-size:17px; line-height:1.7; color:var(--ink-70); max-width:520px; margin:22px 0 0; text-wrap:pretty }
.recibo p{ color:var(--paper-ink) }
.recibo > p{ margin:0 }

.marca-obra{
  display:inline-block;
  font-family:'Fragment Mono',monospace; font-size:11px; letter-spacing:.12em;
  border:1px solid var(--lima); color:var(--lima);
  padding:6px 12px; border-radius:3px; background:var(--lima-06);
}

.lista-num{ margin-top:30px }
.lista-num > div{
  display:flex; gap:18px; align-items:baseline;
  padding:14px 0; border-top:1px solid rgba(242,247,243,.13);
}
.lista-num b{
  font-family:'Fragment Mono',monospace; font-size:12px;
  color:var(--lima); font-weight:400; flex:none;
}
.lista-num span{ font-size:16px; line-height:1.5 }

/* --- El recibo de papel --- */
.recibo-caja{ display:flex; flex-direction:column; align-items:center }

.recibo{
  position:relative;
  background:var(--paper); color:var(--paper-ink);
  width:min(360px,100%);
  padding:30px 28px 40px;
  border-radius:6px 6px 0 0;
  box-shadow:0 0 60px rgba(87,252,15,.12), 0 34px 70px rgba(0,0,0,.6);
  transform:rotate(1.5deg);
  /* se "imprime" de arriba hacia abajo al entrar en vista */
  transition:clip-path 1100ms var(--ease-out);
}
.js .recibo{ clip-path:inset(0 0 100% 0) }
.js .visible .recibo{ clip-path:inset(0 0 0 0) }

.recibo__head{
  font-family:'Fragment Mono',monospace; font-size:11px;
  text-transform:uppercase; letter-spacing:.22em; text-align:center;
}
.recibo__corte{ border-top:1.5px dashed rgba(20,35,28,.35); margin:18px 0 }
.recibo__fila{
  display:flex; justify-content:space-between; gap:12px;
  font-family:'Fragment Mono',monospace; font-size:12.5px; padding:6px 0;
}
.recibo__precio{ margin-top:6px !important; text-align:center; font-weight:800; font-size:42px; letter-spacing:-.03em; font-variant-numeric:tabular-nums }
.recibo__precio-sub{
  text-align:center; font-family:'Fragment Mono',monospace; font-size:11px;
  text-transform:uppercase; letter-spacing:.14em; opacity:.6; margin-top:6px !important;
}
.recibo__cta{
  display:block; text-align:center;
  background:var(--paper-ink); color:var(--paper-btn);
  font-family:'Fragment Mono',monospace; font-size:12px;
  text-transform:uppercase; letter-spacing:.14em;
  padding:16px; border-radius:2px; margin-top:20px;
  transition:background var(--t-ui) var(--ease-out), color var(--t-ui) var(--ease-out);
}
.recibo__cta:hover{ background:var(--lima); color:var(--lima-on) }
.recibo__nota{ font-family:'Fragment Mono',monospace; font-size:10.5px; text-align:center; opacity:.6; margin-top:14px !important }

/* el borde dentado de abajo, como papel arrancado */
.recibo__dientes{
  position:absolute; left:0; right:0; bottom:-1px; height:13px;
  background-image:radial-gradient(circle at 11px 0, var(--panel) 7px, transparent 7.5px);
  background-size:22px 13px; background-repeat:repeat-x;
}
.recibo-caja__nota{
  font-family:'Instrument Serif',Georgia,serif; font-style:italic;
  font-size:19px; color:var(--brote);
  transform:rotate(-2.5deg); margin-top:28px;
}

/* ==================================================================
   6. Alacena
   ================================================================== */

.alacena{ padding-block:100px 40px }
.alacena h2{
  margin:16px 0 0; font-size:clamp(42px,6.4vw,84px);
  font-weight:800; letter-spacing:-.04em; line-height:.96;
}
.alacena__sub{
  font-family:'Instrument Serif',Georgia,serif; font-style:italic;
  font-size:22px; color:var(--brote); margin-top:14px; max-width:660px; line-height:1.35;
}
.alacena .repisa + .repisa{ margin-top:88px }

/* ==================================================================
   7. Servicios
   ================================================================== */

.servicios{ padding-block:90px 20px }
.servicios h2{
  margin:16px 0 34px; font-size:clamp(34px,4.4vw,56px);
  font-weight:800; letter-spacing:-.035em;
}
.servicio{
  display:grid; grid-template-columns:70px 1fr auto;
  gap:24px; align-items:baseline; padding:28px 0;
  border-top:1.5px solid rgba(242,247,243,.85);
  transition:padding-left var(--t-ui) var(--ease-out);
}
.servicio > b{ font-family:'Fragment Mono',monospace; font-size:14px; color:var(--lima); font-weight:400 }
.servicio h3{ font-weight:700; font-size:24px; letter-spacing:-.02em; margin:0 }
.servicio p{ font-size:15.5px; color:var(--ink-70); line-height:1.6; max-width:560px; margin:6px 0 0; text-wrap:pretty }
.servicio__precio{
  font-family:'Fragment Mono',monospace; font-size:13px;
  text-align:right; white-space:nowrap;
}
.servicios__cierre{ border-top:1.5px solid rgba(242,247,243,.85) }

@media (hover:hover) and (pointer:fine){
  .servicio:hover{ padding-left:10px }
}
@media (max-width:640px){
  .servicio{ grid-template-columns:44px 1fr; row-gap:8px }
  .servicio__precio{ grid-column:2; text-align:left }
}

/* ==================================================================
   8. Nosotros / Contacto / Footer
   ================================================================== */

.nosotros{
  padding-block:100px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:56px;
}
.nosotros__pull{
  font-family:'Instrument Serif',Georgia,serif; font-style:italic;
  font-size:clamp(28px,3.4vw,42px); line-height:1.22;
  margin-top:20px; text-wrap:balance;
}
.nosotros p{ font-size:17px; line-height:1.75; color:var(--ink-70); margin:0; text-wrap:pretty }
.nosotros p + p{ margin-top:18px }
.nosotros__firma{
  font-family:'Fragment Mono',monospace; font-size:12px;
  letter-spacing:.1em; color:var(--ink-35); margin-top:26px;
}

.contacto{ padding-block:20px 120px }
.contacto__caja{ border-top:1.5px solid rgba(242,247,243,.85); padding-top:60px }
.contacto h2{
  margin:0; font-size:clamp(46px,7.8vw,104px);
  font-weight:800; letter-spacing:-.045em; line-height:.95; text-wrap:balance;
}
.contacto h2 em{
  font-family:'Instrument Serif',Georgia,serif; font-style:italic; font-weight:400;
  color:var(--lima); text-shadow:0 0 30px var(--lima-40);
}
.contacto__ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-top:38px }
.contacto__nota{ font-family:'Fragment Mono',monospace; font-size:12px; color:var(--ink-35); margin-top:26px }

.pie{ background:var(--footer); border-top:1px solid var(--lima-25) }
.pie__caja{ padding:64px 24px 40px }
.pie__logo{ font-weight:800; font-size:38px; letter-spacing:-.03em; display:inline-flex; align-items:baseline }
.pie__iconos{ display:flex; gap:10px; flex-wrap:wrap; margin:26px 0 30px }
.pie__iconos a{
  display:block; width:32px; height:32px; border-radius:8px; overflow:hidden;
  opacity:.82; transition:opacity var(--t-ui) ease, transform var(--t-ui) var(--ease-out);
}
.pie__iconos img{ width:100%; height:100%; object-fit:cover }
@media (hover:hover) and (pointer:fine){
  .pie__iconos a:hover{ opacity:1; transform:translateY(-3px) }
}
.pie__linea{
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  border-top:1px solid rgba(242,247,243,.14); padding-top:22px;
  font-family:'Fragment Mono',monospace; font-size:11px; letter-spacing:.06em;
  color:var(--ink-55);
}
.pie__linea a{ color:var(--ink-55) }
.pie__linea a:hover{ color:var(--lima) }

/* ==================================================================
   9. Detalle de programa
   ================================================================== */

.detalle{ padding:44px 24px 110px; max-width:var(--ancho-slim); margin-inline:auto }

.volver{
  display:inline-flex; align-items:center; gap:9px;
  font-family:'Fragment Mono',monospace; font-size:12px;
  letter-spacing:.1em; color:var(--lima);
}
.volver span{ transition:transform var(--t-ui) var(--ease-out); display:inline-block }
.volver:hover{ color:var(--lima) }
@media (hover:hover) and (pointer:fine){
  .volver:hover span{ transform:translateX(-4px) }
}

.detalle__cabeza{
  display:flex; gap:44px; align-items:flex-end; flex-wrap:wrap; margin-top:44px;
}
.detalle__frasco{ width:186px; flex:none }
.detalle__frasco .frasco{ padding:0 14px; --tarro:150px; --hueco:184px }
.detalle__frasco .frasco__reflejo{ display:none }
/* su propio tramo de repisa, de borde a borde de la columna */
.detalle__frasco .frasco::after{
  content:''; display:block;
  width:calc(100% + 28px); margin-inline:-14px; height:2.5px;
  background:var(--lima);
  box-shadow:0 0 16px var(--lima-60), 0 0 44px var(--lima-25);
}
.detalle__meta{
  font-family:'Fragment Mono',monospace; font-size:12px;
  letter-spacing:.1em; color:var(--ink-55);
}
.detalle__cabeza h1{
  margin:10px 0 0; font-size:clamp(40px,6.4vw,80px);
  font-weight:800; letter-spacing:-.04em; line-height:.98; text-wrap:balance;
}
.detalle__tag{
  font-family:'Instrument Serif',Georgia,serif; font-style:italic;
  font-size:23px; color:var(--brote); margin-top:10px;
}

.detalle__cuerpo{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:56px; margin-top:64px; align-items:start;
}
.detalle__desc{ font-size:17.5px; line-height:1.72; margin:16px 0 0; color:var(--ink-70); text-wrap:pretty }
.detalle .lista-num > div{ padding:15px 0; border-top-color:rgba(242,247,243,.15) }
.detalle .lista-num span{ font-size:16.5px }
.lista-num__cierre{ border-top:1px solid rgba(242,247,243,.15) }

.ficha{
  border:1px solid rgba(242,247,243,.2); border-radius:4px;
  padding:26px; background:var(--vidrio);
  position:sticky; top:104px;
}
.ficha__titulo{
  font-family:'Fragment Mono',monospace; font-size:11px;
  text-transform:uppercase; letter-spacing:.2em; color:var(--ink-55);
}
.ficha__fila{
  display:flex; justify-content:space-between; gap:14px;
  font-family:'Fragment Mono',monospace; font-size:12.5px;
  padding:12px 0; border-bottom:1px dashed rgba(242,247,243,.25);
}
.ficha__fila dt{ color:var(--ink-55); margin:0 }
.ficha__fila dd{ text-align:right; margin:0 }
.ficha__precio{ font-weight:800; font-size:31px; letter-spacing:-.03em; margin-top:20px }
.ficha__precio-sub{ font-family:'Fragment Mono',monospace; font-size:11px; color:var(--ink-55); margin-top:4px }
.ficha__cta{ width:100%; justify-content:center; margin-top:20px }
.ficha__correo{
  display:block; text-align:center;
  font-family:'Fragment Mono',monospace; font-size:11px;
  margin-top:12px; color:var(--lima);
}
@media (max-width:800px){ .ficha{ position:static } }

.capturas{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:22px; align-items:start; margin-top:20px;
}
.capturas figure{ margin:0 }
.capturas img{
  width:100%; border:1px solid rgba(242,247,243,.26); border-radius:4px;
  box-shadow:0 24px 50px rgba(0,0,0,.5);
}
.capturas figcaption{
  font-family:'Fragment Mono',monospace; font-size:11px;
  letter-spacing:.04em; color:var(--ink-55); margin-top:10px; line-height:1.5;
}
.detalle__nota{ font-family:'Fragment Mono',monospace; font-size:11px; color:var(--ink-35); margin-top:14px; line-height:1.6; max-width:70ch }

.detalle__pies{
  border-top:1.5px solid rgba(242,247,243,.85);
  margin-top:80px; padding-top:24px;
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-family:'Fragment Mono',monospace; font-size:13px;
}
.detalle__pies small{
  display:block; font-size:10.5px; letter-spacing:.1em;
  color:var(--ink-35); margin-bottom:5px;
}

/* ==================================================================
   10. Movimiento
   ================================================================== */

@keyframes parpadeo{ 0%,49%{opacity:1} 50%,100%{opacity:0} }

/* Reveal al entrar en vista.

   Todo lo de abajo cuelga de `html.js`, que solo aparece si el JavaScript
   arrancó. Así el estado escondido —opacidad 0— nunca se queda pegado: si el
   script falla, no carga o tarda, la página se ve entera igual. Esconder por
   omisión y confiar en que el script lo arregle es cómo un sitio termina en
   blanco para quien peor conexión tiene. */
.js [data-sube]{
  opacity:0; transform:translateY(18px);
  transition:opacity var(--t-lento) var(--ease-out),
             transform var(--t-lento) var(--ease-out);
  transition-delay:var(--retraso,0ms);
}
.js .visible [data-sube], .js [data-sube].visible{ opacity:1; transform:none }

/* Los frascos aterrizan sobre la repisa: primero se enciende el tramo de
   tabla, luego baja el frasco, luego entra su nombre. */
.js .repisa .frasco__vidrio{
  opacity:0; transform:translateY(-20px);
  transition:opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
  transition-delay:calc(var(--retraso,0ms) + 120ms);
}
.js .repisa .frasco__poso{
  opacity:0; transform:translateX(-50%) scaleX(.5);
  transition:opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
  transition-delay:calc(var(--retraso,0ms) + 120ms);
}
.js .repisa .frasco__reflejo{
  opacity:0;
  transition:opacity 520ms var(--ease-out);
  transition-delay:calc(var(--retraso,0ms) + 300ms);
}
.js .repisa .frasco__pie{
  opacity:0;
  transition:opacity 460ms var(--ease-out);
  transition-delay:calc(var(--retraso,0ms) + 300ms);
}
.js .repisa.visible .frasco__vidrio{ opacity:1; transform:none }
.js .repisa.visible .frasco__poso{ opacity:1; transform:translateX(-50%) }
.js .repisa.visible .frasco__reflejo{ opacity:.21 }
.js .repisa.visible .frasco__pie{ opacity:1 }

@media (hover:hover) and (pointer:fine){
  .repisa.visible .frasco:hover .frasco__vidrio{ transform:translateY(-10px) }
  .repisa.visible .frasco:hover .frasco__reflejo{ opacity:.11 }
}

/* Entrada de una vista (home ↔ detalle) cuando no hay View Transitions */
.entra{ animation:sube 460ms var(--ease-out) both }
@keyframes sube{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  /* se conserva el desvanecido, se quita el desplazamiento */
  [data-sube], .repisa .frasco__vidrio, .repisa .frasco__pie{ opacity:1; transform:none }
  .repisa .frasco__poso{ opacity:1; transform:translateX(-50%) }
  .repisa .frasco__reflejo{ opacity:.21 }
  .repisa__tabla{ transform:scaleX(1) }
  .recibo{ clip-path:none }
  .cursor{ animation:none; opacity:1 }
}

/* ==================================================================
   11. Ajustes de pantalla pequeña
   ================================================================== */

@media (max-width:860px){
  .hdr__fila{ padding:12px 20px; gap:12px }
  .nav{ order:3; width:100%; gap:20px; justify-content:space-between }
  .nav a{ font-size:11px }
  .hero{ padding-block:64px 30px }
  .stats{ gap:26px }
  .facturador__grid{ padding-block:72px; gap:48px }
  .alacena{ padding-block:72px 30px }
  .nosotros{ padding-block:72px; gap:36px }
  .detalle__cabeza{ gap:26px }
  .detalle__frasco{ width:150px }
  .detalle__frasco .frasco{ --tarro:118px; --hueco:146px }
}

@media (max-width:480px){
  /* la rotación del recibo se le sale del contenedor por un pelo */
  .recibo{ width:min(330px,100%) }
}

/* En pantalla angosta la alacena va a dos columnas: doce frascos en fila
   india se vuelven un rollo interminable. */
@media (max-width:700px){
  .repisa__fila{
    grid-template-columns:repeat(2,minmax(0,1fr));
    --tarro:80px; --hueco:112px; --pie:136px; --fila:250px;
  }
  .repisa--hero .repisa__fila{ --tarro:66px; --hueco:92px; --pie:42px; --fila:136px }
  .frasco{ padding-inline:8px }
  .frasco__nombre{ font-size:15px; margin-top:28px }
  .frasco__tag{ font-size:12.5px }
  .repisa__pie{ font-size:17px }
}

@media (max-width:400px){
  .hero h1{ font-size:clamp(40px,10.5vw,52px) }
  /* --pie aguanta el caso peor: «Presupuesto Familiar», que a este ancho
     parte el nombre en dos líneas y el tag en tres. */
  .repisa__fila{ --tarro:72px; --hueco:100px; --pie:162px; --fila:264px }
}