/* ============================================================
   ALCOM — Estilos de la home · Fase 1 (esqueleto)
   ============================================================ */

/* ===== Encabezado de bloque ===== */
.bloque-cabeza { display: flex; flex-direction: column; gap: var(--esp-2); max-width: 56ch; margin-bottom: var(--esp-4); }
.bloque-cabeza p { color: var(--tinta-70); }
.seccion--oscura .bloque-cabeza p { color: rgba(255,255,255,.72); }

/* ===== 1 · Inicio · linea de produccion ===== */
.inicio { position: relative; height: 280vh; }
.inicio__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.inicio__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.inicio__velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,14,22,.55) 0%, rgba(8,14,22,.34) 45%, rgba(8,14,22,.78) 100%); }
.inicio__contenido { position: relative; z-index: 2; text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--esp-2); padding: 0 var(--gutter); }
.inicio__logo { width: min(58vw, 440px); filter: brightness(0) invert(1); }
.inicio__tagline { font-family: var(--font-display); font-size: var(--fs-h3); color: rgba(255,255,255,.85); }
.inicio__scroll { position: absolute; bottom: var(--esp-4); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .6rem; font-family: var(--font-display); font-size: var(--fs-micro); letter-spacing: var(--tracking-mayus); text-transform: uppercase; color: rgba(255,255,255,.6); }
.inicio__flecha { width: 20px; height: 20px; border-right: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan); transform: rotate(45deg); animation: rebote 1.8s var(--ease-marca) infinite; }
@keyframes rebote { 0%,100% { transform: rotate(45deg) translate(0,0); } 50% { transform: rotate(45deg) translate(4px,4px); } }

/* ===== 2 · Hero · botella flotando ===== */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; justify-content: center; padding-top: var(--header-alto); overflow: hidden; background: #F2F2F2; }
.hero__botella { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 1; pointer-events: none; }
.hero__botella-img { height: min(86vh, 720px); width: auto; animation: flotar 7s var(--ease-marca) infinite; -webkit-mask-image: radial-gradient(ellipse 58% 70% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 58% 70% at 50% 50%, #000 62%, transparent 100%); }
@keyframes flotar { 0%,100% { transform: translateY(-1.6%); } 50% { transform: translateY(1.6%); } }
.hero__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--esp-3); }
.hero__inner h1, .hero__inner .eyebrow, .hero__inner p { text-shadow: 0 2px 16px rgba(242,242,242,.96), 0 0 44px rgba(242,242,242,.92); }
.hero__inner p { color: var(--tinta-70); max-width: 46ch; }
.hero__cta { display: flex; gap: var(--esp-2); flex-wrap: wrap; justify-content: center; margin-top: var(--esp-1); }

/* ===== 3 · Bloque marca ===== */
.bloque-marca .marca-texto { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--peso-medio); line-height: 1.3; max-width: 22ch; }
.bloque-marca .marca-detalle { margin-top: var(--esp-3); color: var(--tinta-70); }

/* ===== Marquee ===== */
.marquee { overflow: hidden; background: var(--azul-profundo); padding-block: var(--esp-3); }
.marquee__pista { display: flex; gap: var(--esp-4); width: max-content; white-space: nowrap; }
.marquee__marca { font-family: var(--font-display); font-size: clamp(1.9rem, 3.6vw, 3.1rem); font-weight: var(--peso-bold); color: var(--blanco); padding-inline: var(--esp-2); }
.marquee__logo { height: clamp(2.6rem, 5vw, 4.2rem); width: auto; padding-inline: var(--esp-3); }

/* ===== 4 · Líneas de negocio ===== */
.lineas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--esp-3); }
.linea-card { display: flex; flex-direction: column; gap: .6rem; padding: var(--esp-3); background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-m); border-top: 4px solid var(--acento, var(--azul)); transition: transform var(--dur-media) var(--ease-suave), box-shadow var(--dur-media) var(--ease-suave); }
.linea-card:hover { transform: translateY(-8px); box-shadow: var(--sombra-m); }
.linea-card__num { font-family: var(--font-display); font-weight: var(--peso-bold); font-size: 1.1rem; color: var(--acento, var(--azul)); }
.linea-card h3 { font-size: var(--fs-h3); }
.linea-card p { font-size: var(--fs-peq); color: var(--tinta-70); flex: 1; }
.linea-card__link { font-family: var(--font-display); font-weight: var(--peso-semi); font-size: var(--fs-peq); color: var(--azul); }
.linea-card__link:hover { color: var(--cyan); }
.linea-card__marca { font-family: var(--font-display); font-weight: var(--peso-bold); font-size: 2.1rem; color: var(--acento, var(--azul)); line-height: 1; }
.linea-card__logo { height: 58px; width: auto; align-self: flex-start; }

/* ===== 5 · Datos / capacidad ===== */
.bloque-datos { position: relative; overflow: hidden; background: var(--celeste); }
.datos-botella { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 0; pointer-events: none; }
.datos-botella__video { height: 128%; width: auto; opacity: .55; animation: flotar 7s var(--ease-marca) infinite; -webkit-mask-image: radial-gradient(ellipse 50% 58% at 50% 50%, #000 52%, transparent 100%); mask-image: radial-gradient(ellipse 50% 58% at 50% 50%, #000 52%, transparent 100%); }
.datos-botella__img { height: 105%; width: auto; opacity: .55; animation: flotar 7s var(--ease-marca) infinite; -webkit-mask-image: radial-gradient(ellipse 50% 58% at 50% 50%, #000 52%, transparent 100%); mask-image: radial-gradient(ellipse 50% 58% at 50% 50%, #000 52%, transparent 100%); }
.marca-botella__img { height: 95%; width: auto; opacity: .22; animation: flotar 7s var(--ease-marca) infinite; -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 55%, transparent 100%); }
.bloque-datos .contenedor { position: relative; z-index: 1; }
.datos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--esp-3); }
.dato { padding: var(--esp-3); border-radius: var(--radio-m); background: rgba(255,255,255,.74); border: 1px solid var(--linea); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.dato__cifra { font-family: var(--font-display); font-weight: var(--peso-bold); font-size: clamp(2.6rem, 5vw, 3.8rem); line-height: 1; background: var(--grad-marca); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dato__etq { margin-top: .5rem; font-size: var(--fs-peq); color: var(--tinta-70); }

/* ===== 6 · CTA final ===== */
.cta-final { text-align: center; }
.cta-final__inner { display: flex; flex-direction: column; align-items: center; gap: var(--esp-3); }
.cta-final h2 { max-width: 18ch; }
.cta-final p { color: var(--tinta-70); }

/* ===== Responsive ===== */
@media (max-width: 860px) { .hero__botella-img { height: min(60vh, 460px); } .inicio__logo { width: min(72vw, 340px); } .inicio { height: 100svh; } .inicio__sticky { position: relative; height: 100svh; } }

/* ===== 4 · Maquila · tarjeta desplegable ===== */
.lineas-grid { align-items: start; }
.linea-card--maquila { padding: 0; overflow: hidden; }
.linea-card--maquila > summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: .55rem; padding: var(--esp-3); }
.linea-card--maquila > summary::-webkit-details-marker { display: none; }
.linea-card--maquila .linea-card__logo { height: 30px; }
.linea-card--maquila summary h3 { font-size: var(--fs-h3); }
.linea-card--maquila summary p { font-size: var(--fs-peq); color: var(--tinta-70); }
.linea-maq__toggle { margin-top: .25rem; font-family: var(--font-display); font-weight: var(--peso-semi); font-size: var(--fs-peq); color: var(--azul); display: inline-flex; align-items: center; gap: .45rem; }
.linea-maq__toggle i { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--dur-rapida) var(--ease-marca); }
.linea-card--maquila[open] .linea-maq__toggle { color: var(--cyan); }
.linea-card--maquila[open] .linea-maq__toggle i { transform: rotate(-135deg); }
.linea-maq__sub { display: flex; flex-direction: column; gap: .55rem; padding: 0 var(--esp-3) var(--esp-3); }
.linea-sub { display: flex; flex-direction: column; gap: .25rem; padding: var(--esp-2); border-radius: var(--radio-s); background: var(--celeste); transition: background var(--dur-rapida), transform var(--dur-rapida) var(--ease-suave); }
.linea-sub:hover { background: #d8edf3; transform: translateX(3px); }
.linea-sub strong { font-family: var(--font-display); font-weight: var(--peso-semi); font-size: var(--fs-peq); color: var(--azul-profundo); }
.linea-sub span { font-size: var(--fs-micro); color: var(--tinta-70); line-height: 1.5; }
.linea-card--maquila[open] .linea-maq__sub { animation: subreveal .42s var(--ease-suave); }
@keyframes subreveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* ===== Hero · logo de marca ===== */
.hero__marca { height: clamp(50px, 7vw, 80px); width: auto; margin-bottom: var(--esp-1); filter: drop-shadow(0 4px 18px rgba(242,242,242,.95)); }

/* ===== 4 · Líneas de negocio · versión divertida ===== */
.lineas-grid { gap: clamp(1.1rem, 2.4vw, 1.8rem); }
.linea-card { position: relative; overflow: hidden; border: 1px solid var(--linea); border-radius: var(--radio-l); background: var(--blanco); box-shadow: var(--sombra-s); transition: transform .5s var(--ease-suave), box-shadow .5s var(--ease-suave), border-color .4s; }
.linea-card:not(.linea-card--maquila) { padding: var(--esp-4) var(--esp-3) var(--esp-3); }
.linea-card::after { content: ""; position: absolute; top: -45px; right: -45px; width: 140px; height: 140px; border-radius: 50%; background: var(--acento, var(--azul)); opacity: .12; transition: transform .6s var(--ease-suave), opacity .4s; z-index: 0; }
.linea-card > * { position: relative; z-index: 1; }
.linea-card:hover { transform: translateY(-10px); box-shadow: 0 28px 60px -26px var(--acento, rgba(14,51,84,.45)); border-color: var(--acento, var(--cyan)); }
.linea-card:hover::after { transform: scale(1.55); opacity: .2; }
.linea-card h3 { font-size: var(--fs-h3); color: var(--azul-profundo); }
.linea-card__marca { font-size: 2.6rem; }
.linea-card__link { align-self: flex-start; display: inline-flex; align-items: center; gap: .4em; font-family: var(--font-display); font-weight: var(--peso-semi); font-size: var(--fs-peq); color: var(--acento, var(--azul)); margin-top: .4rem; transition: gap .25s var(--ease-suave), color .25s; }
.linea-card__link:hover { gap: .85em; color: var(--cyan); }

/* ===== Qué es Algroup · descripción grande + KPIs ===== */
.marca-grande { font-family: var(--font-display); font-weight: var(--peso-semi); font-size: clamp(1.7rem, 3.4vw, 2.7rem); line-height: 1.22; letter-spacing: var(--tracking-titulo); color: var(--azul-profundo); max-width: 30ch; margin-top: var(--esp-2); }
.marca-kpis { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: var(--esp-4); }
.kpi { display: inline-flex; align-items: center; gap: .55em; padding: .75em 1.2em; border-radius: var(--radio-full); background: var(--blanco); border: 1px solid var(--linea); font-family: var(--font-display); font-weight: var(--peso-semi); font-size: var(--fs-peq); color: var(--azul-profundo); box-shadow: var(--sombra-s); }
.kpi__punto { width: 8px; height: 8px; border-radius: 50%; background: var(--grad-marca); }

/* ===== Línea de negocio · tag de Maquila ===== */
.linea-card__tag { font-family: var(--font-display); font-size: var(--fs-micro); font-weight: var(--peso-bold); letter-spacing: var(--tracking-mayus); text-transform: uppercase; color: var(--acento, var(--azul)); padding: .4em .9em; border-radius: var(--radio-full); background: rgba(255,255,255,.6); border: 1.5px solid currentColor; align-self: flex-start; margin-bottom: .35rem; }

/* ===== Qué es Algroup · botella de fondo ===== */
.bloque-marca { position: relative; overflow: hidden; }
.marca-botella { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 0; pointer-events: none; }
.marca-botella__video { height: 105%; width: auto; opacity: .22; -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 55%, transparent 100%); }
.bloque-marca .contenedor { position: relative; z-index: 1; }