/* Funcionalidades (desde 2026-10-07): al estilo de la home y de Cómo trabajamos.
   Hero sobre noche con degradé tonal a petróleo y grano, índice de los seis grupos; fondos que alternan
   (claro · noche · hueso · claro · petróleo · hueso); un solo título por grupo; capturas con marco de 1px,
   lo más grandes posible (el tablero a todo el ancho) y en celular con su propio desplazamiento horizontal.
   Solo la carga funcionalidades.html. Clases con prefijo f-: .lp de paginas.css queda intacto para los casos. */
:root{
  --texto-2:rgba(230,237,240,.74);           /* 6,9:1 sobre noche · 5,0:1 sobre petróleo */
  --filete-claro:rgba(230,237,240,.18);
}

/* ── grano (de la home: estático) ── */
.grano{position:relative;isolation:isolate}
.grano::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.grano>*{position:relative;z-index:1}

/* etiqueta «• NOMBRE»: DM Mono con punto salvia */
.f-eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:22px;font:500 11px/1.3 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--f-eb,var(--tinta-suave))}
.f-eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--salvia);flex:none}

/* ═══ HERO ═══════════════════════════════════════════════ */
.f-hero{color:var(--claro);--fuerte:var(--claro);--f-eb:var(--salvia);
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(34,79,85,.95) 0%, rgba(34,79,85,.45) 38%, rgba(34,79,85,0) 72%),
    var(--noche);
  padding-block:clamp(56px,6.5vw,96px) clamp(64px,7vw,104px);overflow-x:clip}
.f-hero .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,6vw,96px);align-items:end}
.f-hero .f-eyebrow{margin-bottom:26px}
.f-hero h1{font-size:clamp(40px,5vw,70px);line-height:1.02;letter-spacing:-.04em;color:var(--claro)}
.f-hero h1 .serif{color:var(--salvia-claro);font-size:.66em;line-height:1.15;margin-top:14px;letter-spacing:-.005em}
.f-bajada{margin-top:24px;font-size:17.5px;line-height:1.6;color:var(--texto-2);max-width:33em;text-wrap:pretty}

.f-hero-indice ol{list-style:none;border-top:1px solid var(--filete-claro)}
.f-hero-indice li{border-bottom:1px solid var(--filete-claro)}
.f-hero-indice a{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:11px 0 12px;color:var(--claro);text-decoration:none}
.f-hero-indice .n{font:500 12px/1 var(--mono);letter-spacing:.2em;color:var(--texto-2)}
.f-hero-indice b{display:block;font-size:17.5px;font-weight:600;letter-spacing:-.015em;line-height:1.3}
.f-hero-indice small{display:block;margin-top:1px;font-size:14px;line-height:1.4;color:var(--texto-2)}
.f-hero-indice .flecha{color:var(--texto-2);transition:transform 200ms var(--ease-out),color 200ms ease}
@media (hover:hover) and (pointer:fine){
  .f-hero-indice a:hover b{color:var(--salvia-claro)}
  .f-hero-indice a:hover .flecha{transform:translateY(3px);color:var(--claro)}
}

/* ═══ GRUPOS: fondos que alternan ════════════════════════ */
.f-sec{padding-block:clamp(64px,7vw,104px);scroll-margin-top:66px}
.f-claro{background:var(--claro)}
.f-hueso{background:var(--hueso)}
.f-noche,.f-petroleo{color:var(--claro);--fuerte:var(--claro);--f-eb:var(--salvia)}
.f-noche{background:var(--noche)}
.f-petroleo{background:var(--petroleo);--f-eb:var(--salvia-claro)}   /* salvia como texto sobre petróleo no pasa: salvia claro 5,1:1 */

/* títulos: uno por grupo; la frase serif debajo, más chica */
.f-sec h2{font-size:clamp(34px,3.7vw,52px);line-height:1.04;letter-spacing:-.04em;text-wrap:balance}
.f-sec h2 .serif{font-size:.7em;line-height:1.12;margin-top:12px}
.f-noche h2 .serif,.f-petroleo h2 .serif{color:var(--salvia-claro)}
.f-sec h3{font-size:clamp(24px,2.2vw,31px);font-weight:700;letter-spacing:-.03em;line-height:1.12;text-wrap:balance}
.f-sec h3 span{display:block;color:var(--tinta-suave)}
.f-noche h3 span,.f-petroleo h3 span{color:var(--texto-2)}
.f-txt>p:not(.f-eyebrow),.f-ancho .f-txt p{margin-top:16px;font-size:17px;line-height:1.6;color:var(--tinta-media);max-width:30em;text-wrap:pretty}
.f-noche .f-txt p:not(.f-eyebrow),.f-petroleo .f-txt p:not(.f-eyebrow),.f-noche .f-intro,.f-petroleo .f-intro{color:var(--texto-2)}
.f-txt .lp-link{margin-top:18px}
.f-noche .lp-link,.f-petroleo .lp-link{color:var(--salvia-claro)}   /* 8,3:1 sobre noche · 5,1:1 sobre petróleo */
@media (hover:hover) and (pointer:fine){.f-sec .lp-link:hover{text-decoration:underline;text-underline-offset:5px}}
.lp-link .flecha{display:inline-block;transition:transform 200ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.f-sec .lp-link:hover .flecha{transform:translateX(3px)}}

/* cabecera de los grupos con varios bloques: título a la izquierda, bajada a la derecha */
.f-cab{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);column-gap:clamp(40px,6vw,96px);align-items:end;
  padding-bottom:clamp(24px,2.8vw,40px);margin-bottom:clamp(36px,3.8vw,52px);border-bottom:1px solid var(--linea-fuerte)}
.f-noche .f-cab,.f-petroleo .f-cab{border-color:var(--filete-claro)}
.f-cab .f-eyebrow{grid-column:1/-1}
.f-intro{font-size:17.5px;line-height:1.6;color:var(--tinta-media);max-width:30em;text-wrap:pretty}
.f-bloques{display:flex;flex-direction:column;gap:clamp(48px,5vw,72px)}

/* bloque partido: texto angosto + captura grande (f-inv da vuelta las columnas) */
.f-par{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.45fr);gap:clamp(32px,4vw,64px);align-items:center}
.f-par.f-inv{grid-template-columns:minmax(0,2.45fr) minmax(0,1fr)}
.f-par.f-inv .f-txt{order:2}
/* un solo bloque en el grupo: el título del grupo pide una columna de texto más ancha */
.f-par-uno{grid-template-columns:minmax(0,1.4fr) minmax(0,2.1fr)}
.f-par-uno.f-inv{grid-template-columns:minmax(0,2.1fr) minmax(0,1.4fr)}
.f-par-uno h2,.f-par-pasos h2{font-size:clamp(32px,3.3vw,48px)}
.f-par-pasos{grid-template-columns:minmax(0,4.6fr) minmax(0,7.4fr)}
.f-par-pasos.f-inv{grid-template-columns:minmax(0,7.4fr) minmax(0,4.6fr)}
/* pantalla con letra grande (ficha de Maru Nails): no necesita tanto ancho */
.f-par.f-chica{grid-template-columns:minmax(0,1fr) minmax(0,1.7fr)}
.f-txt{min-width:0}

/* bloque ancho: el texto en una fila arriba y la captura a todo el ancho del contenedor */
.f-ancho .f-txt{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);column-gap:clamp(40px,6vw,96px);align-items:start;margin-bottom:clamp(24px,2.6vw,36px)}
.f-ancho .f-txt p{margin-top:2px}

/* ═══ CAPTURAS: marco de 1px, sin panel de color ni filtros ═══ */
.f-fig{margin:0;min-width:0}
.f-pantalla{border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;background:var(--blanco)}
.f-noche .f-pantalla,.f-petroleo .f-pantalla{border-color:var(--filete-claro)}
.f-pantalla img{display:block;width:100%;height:auto}
.f-fig figcaption{margin-top:12px;font:500 11px/1.5 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-suave)}
.f-noche .f-fig figcaption,.f-petroleo .f-fig figcaption{color:var(--texto-2)}
.f-deslizar{display:none}
.f-deslizar::after{content:' · '}

/* pasos 1-2-3 (Café Aruba y Maru Nails): mismos componentes, sobre claro; el número en petróleo (el lima queda para el botón) */
.f-sec .lp-pasos{gap:clamp(10px,1.3vw,18px)}
.f-sec .lp-pasos li{color:var(--tinta);font-size:15.5px;gap:14px}
.f-sec .lp-pasos li>b{white-space:nowrap}
.f-sec .lp-n{background:var(--petroleo);color:var(--claro)}
.f-sec .lp-paso-img{width:min(100%,250px);box-shadow:0 0 0 1px rgba(25,35,42,.08),0 18px 36px rgba(25,35,42,.16)}
.f-par-pasos .f-fig figcaption{text-align:center}

/* entrada de los pasos: una vez, escalonada y rápida (v3.js pone .listo/.visto en [data-al-ver]; con movimiento reducido no los pone) */
.f-par-pasos.listo .lp-pasos li{opacity:0;transform:translateY(12px)}
.f-par-pasos.visto .lp-pasos li{opacity:1;transform:none;transition:opacity 280ms var(--ease-out),transform 280ms var(--ease-out)}
.f-par-pasos.visto .lp-pasos li:nth-child(2){transition-delay:60ms}
.f-par-pasos.visto .lp-pasos li:nth-child(3){transition-delay:120ms}

/* pedido de contacto a mitad de página: una línea discreta */
.f-cta{margin-top:clamp(48px,5vw,72px);padding-top:24px;border-top:1px solid var(--linea-fuerte)}
.f-cta .lp-link{margin-top:0;font-size:16px}

/* ═══ CIERRE (el de la home y Cómo trabajamos) ═══════════ */
.cierre-b{color:var(--claro);--fuerte:var(--claro);padding-block:clamp(88px,10vw,140px);
  background:radial-gradient(60% 80% at 0% 100%, rgba(34,79,85,.85) 0%, rgba(34,79,85,0) 70%),var(--noche)}
.cierre-b .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:end}
.cierre-b h2{font-size:clamp(34px,4.6vw,64px);line-height:1.02;letter-spacing:-.045em}
.cierre-b h2 .serif{display:block;color:var(--salvia-claro);font-size:.66em;margin-top:12px}
.cierre-acc{justify-self:end}
.btn-b{display:inline-flex;align-items:center;gap:12px;font:500 16px/1 var(--sans);padding:17px 22px;border-radius:2px;text-decoration:none;border:1px solid transparent;
  transition:background-color 200ms ease,border-color 200ms ease,transform 160ms var(--ease-out)}
.btn-b:active{transform:scale(.97)}
.btn-b .flecha{transition:transform 200ms var(--ease-out)}
.btn-lima-b{background:var(--lima);color:var(--tinta)}
@media (hover:hover) and (pointer:fine){.btn-lima-b:hover{background:#CEDF79}.btn-b:hover .flecha{transform:translateX(3px)}}
.micro{margin-top:16px;font:500 11px/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:rgba(230,237,240,.72)}

/* ════════ RESPONSIVE ════════ */
@media (max-width:1100px){
  .f-par,.f-par.f-inv{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
  .f-par.f-inv{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
}
@media (max-width:900px){
  .f-hero .wrap,.f-cab,.f-ancho .f-txt,.cierre-b .wrap{grid-template-columns:1fr}
  .f-hero .wrap{gap:40px}
  .f-cab .f-intro{margin-top:16px}
  .f-ancho .f-txt p{margin-top:14px}
  .f-par,.f-par.f-inv,.f-par.f-chica,.f-par-uno,.f-par-uno.f-inv,.f-par-pasos,.f-par-pasos.f-inv{grid-template-columns:minmax(0,1fr);gap:28px}
  .f-par.f-inv .f-txt{order:0}
  .cierre-acc{justify-self:start}
}
/* celular: cada pantalla de escritorio se ve a un tamaño que se lee y se desliza de costado (arranca sin el menú lateral) */
@media (max-width:760px){
  .f-pantalla{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--azul-gris) transparent;
    margin-inline:calc(-1*clamp(20px,4vw,40px));border-radius:0;border-inline:0}
  .f-pantalla{height:var(--hm,auto)}   /* recorte de la zona que cuenta la frase: se ve de arriba hasta --hm */
  .f-pantalla img{width:var(--m,720px);max-width:none}
  .f-pantalla:focus-visible{outline:2px solid var(--petroleo);outline-offset:-2px}
  .f-noche .f-pantalla:focus-visible,.f-petroleo .f-pantalla:focus-visible{outline-color:var(--lima)}
  .f-fig figcaption{letter-spacing:.1em}
  .f-deslizar{display:inline;color:var(--tinta)}
  .f-noche .f-deslizar,.f-petroleo .f-deslizar{color:var(--claro)}
  .f-par-pasos .f-fig figcaption{text-align:left}
}
@media (max-width:860px){
  .f-sec .lp-paso-img{width:100%}
  .f-sec .lp-pasos{grid-auto-columns:62%}
}
/* tableta: entran los tres teléfonos lado a lado, sin carril */
@media (min-width:561px) and (max-width:860px){
  .f-sec .lp-pasos{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;padding-bottom:0}
  .f-sec .lp-pasos li>b{white-space:normal;text-align:center;font-size:14.5px}
}
@media (max-width:560px){
  .f-hero{padding-top:44px;padding-bottom:60px}
  .f-bajada{font-size:16.5px}
  .f-hero-indice a{padding:10px 0 11px}
  .f-hero-indice b{font-size:16.5px}
  .f-hero-indice small{display:none}
  .f-hero-indice a{align-items:center;padding:12px 0}
  .f-sec{padding-block:56px}
  .f-cab{padding-bottom:22px;margin-bottom:32px}
  .f-sec h2{font-size:32px}
  .f-txt>p:not(.f-eyebrow),.f-ancho .f-txt p,.f-intro{font-size:16px;line-height:1.55}
  .f-sec h3{font-size:23px}
  .f-bloques{gap:56px}
}

/* movimiento reducido: los pasos quietos y completos (v3.js ya no los prepara; esto es por las dudas) */
@media (prefers-reduced-motion:reduce){
  .f-par-pasos.listo .lp-pasos li{opacity:1;transform:none;transition:none}
  .f-hero-indice .flecha,.lp-link .flecha,.btn-b,.btn-b .flecha{transition:none}
}

/* Factura del proveedor: el PDF que se sube y se carga solo (una vez, al entrar en pantalla) */
.f-fig-pdf{position:relative}
.f-pdf{position:absolute;z-index:2;right:2%;top:-128px;width:158px;display:flex;flex-direction:column;align-items:center;pointer-events:none}
.f-pdf-hoja{position:relative;width:142px;padding:14px 12px 12px;background:var(--blanco);border:1px solid rgba(25,35,42,.18);border-radius:3px;font-family:Arial,Helvetica,sans-serif;color:var(--tinta);display:flex;flex-direction:column;gap:3px;transform:rotate(-4deg);box-shadow:0 10px 24px rgba(0,0,0,.28)}
.f-pdf-hoja>b{font-size:11px;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--tinta);align-self:flex-start;padding:2px 5px;margin-bottom:4px}
.f-pdf-prov{font-size:9.5px;font-weight:bold}
.f-pdf-num{font-size:8.5px;color:var(--tinta-suave);margin-bottom:6px}
.f-pdf-hoja i{display:block;height:4px;border-radius:1px;background:var(--bruma)}
.f-pdf-hoja i:nth-of-type(2){width:82%}.f-pdf-hoja i:nth-of-type(3){width:90%}.f-pdf-hoja i:nth-of-type(4){width:64%}
.f-pdf-tot{margin-top:7px;padding-top:6px;border-top:1px solid var(--linea);font-size:8.5px;color:var(--tinta-suave);display:flex;justify-content:space-between}
.f-pdf-tot b{font-size:10px;color:var(--tinta)}
.f-pdf-tag{position:absolute;top:-9px;right:-9px;background:var(--naranja);color:var(--tinta);font:bold 10px/1 Arial,Helvetica,sans-serif;letter-spacing:.06em;padding:5px 6px;border-radius:2px}
.f-pdf-flecha{width:16px;height:28px;margin-top:4px;color:var(--claro)}
.f-pdf-ok{position:absolute;top:calc(100% + 66px);right:0;white-space:nowrap;background:var(--lima);color:var(--tinta);font:600 12.5px/1 var(--sans);padding:8px 11px;border-radius:2px}
@media (prefers-reduced-motion:no-preference){
  .f-pdf.listo .f-pdf-hoja{opacity:0;transform:translateY(-26px) rotate(-10deg)}
  .f-pdf.listo .f-pdf-flecha path{stroke-dasharray:60;stroke-dashoffset:60}
  .f-pdf.listo .f-pdf-ok{opacity:0;transform:scale(.88);transform-origin:right center}
  .f-pdf.listo.visto .f-pdf-hoja{opacity:1;transform:rotate(-4deg);transition:opacity 420ms var(--ease-out),transform 520ms var(--ease-out)}
  .f-pdf.listo.visto .f-pdf-flecha path{stroke-dashoffset:0;transition:stroke-dashoffset 320ms var(--ease-out) 480ms}
  .f-pdf.listo.visto .f-pdf-ok{opacity:1;transform:none;transition:opacity 220ms var(--ease-out) 860ms,transform 220ms var(--ease-out) 860ms}
}
@media (min-width:761px){.f-pdf{top:-118px}.f-pdf-flecha{display:none}}
@media (min-width:761px) and (max-width:1100px){.f-pdf{top:-104px;width:132px}.f-pdf-hoja{width:122px}}
@media (max-width:760px){
  .f-pdf{position:static;width:auto;flex-direction:row;justify-content:flex-start;gap:10px;margin-bottom:14px}
  .f-pdf-hoja{width:112px;transform:rotate(-3deg)}
  .f-pdf-flecha{transform:rotate(-90deg);margin:0 2px}
  .f-pdf-ok{position:static}
  @media (prefers-reduced-motion:no-preference){.f-pdf.listo.visto .f-pdf-hoja{transform:rotate(-3deg)}}
}