/* ==========================================================
   PORTADA — solo se carga en la portada.
   v2.0 (2026-09-26): aspecto de Orbit, orden de Zarla, 13 bloques del
   brief. Lo compartido (riel, ceja, trazo, puntos, cifras en rodillos,
   Método en pista, FAQ, cierre) vive en app.css / app.js.
     · héroe: foto a todo lo ancho, velo azul noche, texto al centro;
     · cifras en tarjetas; servicios en losetas con velo blanco;
     · una frase a pantalla completa en azul noche;
     · cinco razones numeradas; blog a la izquierda / artículos a la
       derecha, como "Big ideas" de Orbit.
   ========================================================== */

/* ---- 1. Héroe ---- */
.body-home .portada{margin-top:0; min-height:calc(100svh - var(--hdr-h)); display:grid; place-items:center; padding:clamp(48px,6vw,88px) var(--gut); background-image:none; text-align:center}
.body-home .portada::before{content:""; position:absolute; inset:0; z-index:-1; animation:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c-ink) 55%,var(--navy)) 0%,color-mix(in srgb,var(--navy) 82%,transparent) 55%,var(--navy) 100%); opacity:.9}
.portada__fondo{position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; filter:saturate(.7)}
.body-home .portada__in{display:flex; flex-direction:column; align-items:center; max-width:1000px}
.body-home .portada h1{font-size:clamp(2.5rem,1.4rem + 3.6vw,4rem); line-height:1.08; max-width:18ch}
.body-home .portada__lede{margin:var(--sp-6) auto 0; max-width:60ch}
.body-home .portada__cta,.body-home .sellos{justify-content:center}
.body-home .sellos{color:var(--fg)}

/* Logos bajo el héroe: una fila quieta */
.franja-logos{background:var(--bg); border-bottom:1px solid var(--line); padding:var(--sp-6) var(--gut)}
.franja-logos__t{max-width:var(--maxw); margin:0 auto var(--sp-3); font-size:var(--t--1); font-weight:600; color:var(--fg-dim); text-align:center}
.franja-logos .logos li{width:150px; height:72px; border:0; background:none}
.franja-logos .logos img{filter:grayscale(1); opacity:.75; transition:filter var(--d-ui) var(--ease-ui), opacity var(--d-ui) var(--ease-ui)}
.franja-logos .logos li:hover img{filter:none; opacity:1}

/* ---- 3. Cifras en tarjetas ---- */
.contador--tarjetas{gap:var(--sp-4)}
.contador--tarjetas li{padding:var(--sp-7) var(--sp-5); background:var(--s-1); border:1px solid var(--line); border-radius:var(--r-lg)}
.contador--tarjetas li + li{border-left:1px solid var(--line)}
@media (max-width:560px){.contador--tarjetas li + li{border-top:1px solid var(--line); padding-top:var(--sp-7)}}
/* En el telefono las cuatro tarjetas son una cinta que corre sola (pedido
   del usuario: que no ocupe media pantalla). .copia repite la fila para que
   la vuelta no se note; el lector de pantalla no la oye. */
.contador--tarjetas .copia{display:none}
@media (max-width:560px){
  #cifras{overflow:hidden; padding-inline:0}
  .contador--tarjetas{display:flex; width:max-content; max-width:none; gap:var(--sp-3); animation:cinta 26s linear infinite}
  .contador--tarjetas:hover{animation-play-state:paused}
  .contador--tarjetas li,.contador--tarjetas li + li,.contador--tarjetas .copia{display:block; flex:none; padding:var(--sp-4) var(--sp-6); border:1px solid var(--line)}
  .js .contador--tarjetas .rv{opacity:1; transform:none}
  .contador--tarjetas b{font-size:2rem}
  .contador--tarjetas li > span{margin-top:4px; font-size:var(--t--1); white-space:nowrap}
}
@keyframes cinta{to{transform:translateX(calc(-50% - var(--sp-3) / 2))}}
@media (max-width:560px) and (prefers-reduced-motion:reduce){
  #cifras{overflow-x:auto}
  .contador--tarjetas{animation:none; padding-inline:var(--gut)}
  .contador--tarjetas .copia{display:none}
}

/* ---- 5. Servicios en losetas (foto + velo blanco que se levanta) ---- */
.losetas{max-width:var(--maxw); margin-inline:auto; display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-4)}
.loseta{position:relative; isolation:isolate; overflow:hidden; min-height:clamp(340px,34vw,440px); border-radius:var(--r-lg); display:flex; align-items:flex-end; color:var(--fg); text-decoration:none}
.loseta img{position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; transition:transform 900ms var(--ease)}
.loseta::before{content:""; position:absolute; inset:0; z-index:-1; transition:opacity var(--d-ui) var(--ease-ui);
  background:linear-gradient(180deg,color-mix(in srgb,var(--c-white) 58%,transparent) 0%,color-mix(in srgb,var(--c-white) 88%,transparent) 48%,color-mix(in srgb,var(--c-white) 94%,transparent) 100%)}
.loseta__bd{display:flex; flex-direction:column; gap:var(--sp-3); padding:var(--sp-6)}
.loseta__t{font-size:var(--t-2); font-weight:600; line-height:1.2; color:var(--navy)}
.loseta__d{font-size:var(--t-s); line-height:1.55; color:var(--c-ink-2)}
.loseta:hover img{transform:scale(1.06)}
.loseta:hover .subraya{background-size:100% 42%}
@media (max-width:980px){.losetas{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.losetas{grid-template-columns:1fr} .loseta{min-height:280px}}

/* Franja de confianza: una línea, iconos dorados, fondo blanco (brief 5.1) */
.body-home .franja{background:var(--bg); border-block:1px solid var(--line)}

/* ---- Frase a pantalla completa ---- */
.enunciado{background:var(--bg); min-height:min(88svh,760px); display:grid; place-items:center; text-align:center}
.enunciado__in{max-width:900px; margin-inline:auto}
.enunciado h2{font-size:var(--t-5); line-height:1.1}
.enunciado__p{margin:var(--sp-7) auto 0; max-width:52ch; font-size:var(--t-1); line-height:1.6; color:var(--fg-dim)}

/* ---- 4. Quiénes somos (foto a la izquierda, como Zarla) ---- */
@media (min-width:861px){.quienes{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}}
@media (max-width:860px){
  .fundador{max-width:340px}
  .quienes__txt > .subraya{display:flex; margin:var(--sp-7) auto 0}
}
.quienes h2{max-width:22ch}
.quienes .checks{margin:var(--sp-6) 0 var(--sp-7)}
.quienes .checks b{font-weight:600}
.fundador{margin:0; position:relative; max-width:440px; margin-inline:auto; border-radius:var(--r-lg); overflow:hidden; background:var(--gris)}
.fundador img{width:100%; height:auto}
.fundador figcaption{position:absolute; left:var(--sp-4); right:var(--sp-4); bottom:var(--sp-4); padding:var(--sp-3) var(--sp-4); background:var(--s-1); border-radius:var(--r); box-shadow:var(--e-1); line-height:1.35}
.fundador figcaption b{display:block; font-weight:600; color:var(--fg)}
.fundador figcaption span{font-size:var(--t--1); color:var(--fg-dim)}

/* ---- 6. Por qué elegirnos: las tarjetas numeradas son .pilares (app.css) ---- */
.body-home .pilares{margin-top:0}
.fusion__vs{max-width:var(--maxw); margin:clamp(40px,5vw,64px) auto 0; padding:clamp(20px,2.6vw,32px)}
.fusion__vs h3{font-size:var(--t-2); margin-bottom:var(--sp-5)}
@media (max-width:760px){.fusion__vs{padding:0; background:none; border:0}}

/* ---- 11. Blog: texto a la izquierda, artículos a la derecha ---- */
.ideas{max-width:var(--maxw); margin-inline:auto; display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(32px,5vw,72px); align-items:start}
.ideas__txt{position:sticky; top:calc(var(--hdr-h) + var(--sp-7))}
.ideas h2{font-size:var(--t-3)}
.ideas__txt .lede{margin-top:var(--sp-5)}
.ideas__acc{display:flex; flex-direction:column; gap:var(--sp-4); margin-top:var(--sp-7)}
.ideas__lista{display:flex; flex-direction:column; gap:var(--sp-5)}
.ideas .posts{grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); max-width:none}
@media (max-width:860px){.ideas{grid-template-columns:1fr} .ideas__txt{position:static}}

/* ---- Menos movimiento o editando: quieto ---- */
@media (prefers-reduced-motion:reduce){ .loseta img{transition:none} }