/* ============================================================
   Portada — plantilla de marketing de 09/2026.
   Hoja propia de src/pages/[...lang]/index.astro.
   ============================================================ */

.hm { display: flex; flex-direction: column; --hm-borde: rgba(255, 255, 255, 0.1); --hm-panel: rgba(255, 255, 255, 0.025); }
.hm section { position: relative; }
.hm p { color: var(--text-dim); }
.hm svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hm button { font: inherit; }
.hm .marker { font-size: 0.74rem; margin-bottom: 12px; }
.hm .btn { font-size: 0.92rem; font-weight: 800; padding: 14px 24px; }
.hm-btn-borde { border-color: rgba(255, 255, 255, 0.35); }
.hm-flecha { display: inline-block; margin-left: 8px; transition: transform 0.2s ease; }
.hm a:hover .hm-flecha { transform: translateX(3px); }
.hm-enlace, .hm-mas { color: var(--teal-bright); font-weight: 700; font-size: 0.85rem; text-decoration: none; }
.hm-ico {
  display: inline-grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px;
  border-radius: 10px; border: 1px solid rgba(47, 214, 188, 0.45); color: var(--teal-bright);
  background: rgba(12, 14, 13, 0.6);
}
.hm-ico svg { width: 22px; height: 22px; }

/* cabecera de sección: título a la izquierda, texto y enlace a la derecha */
.hm-cab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 20px 56px; align-items: end; margin-bottom: 30px; }
.hm-cab h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); max-width: 22ch; }
.hm-cab p { font-size: 0.95rem; line-height: 1.6; margin-bottom: 12px; }

/* el orden de las dos primeras secciones, por decidir (?orden=familias) */
.hm > * { order: 5; }
.hm > .hero { order: 0; }
.hm-soluciones { order: 1; }
.hm-familias { order: 2; }
.hm[data-orden="familias"] .hm-familias { order: 1; }
.hm[data-orden="familias"] .hm-soluciones { order: 2; }

/* ---------- 1 · Héroe en vídeo ---------- */
.hero-video video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  background: var(--bg);
}
/* sombra para que el texto de abajo a la izquierda y el menú de arriba lean bien */
.hero-video .hero-sombra {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(16, 18, 17, 0.92) 0%, rgba(16, 18, 17, 0.55) 32%, rgba(16, 18, 17, 0) 62%),
    linear-gradient(to right, rgba(16, 18, 17, 0.55) 0%, rgba(16, 18, 17, 0) 55%),
    linear-gradient(to bottom, rgba(16, 18, 17, 0.6) 0%, rgba(16, 18, 17, 0) 28%);
}
.hero-video .hero-txt { display: grid; gap: 10px; max-width: 60ch; } /* más ancho que el .lead de antes; sin justificar (Eric lo probó y no le gustó) */
.hero-video .hero-txt .lead { max-width: none; } /* titular y frase como dos párrafos; el titular en negrita (Eric, 28/10/2026) */
.hero-video .hero-titulo { margin: 0; font-weight: 700; color: #fff; }
.hero-video .content { padding: 0 28px 88px; } /* el .hero genérico quitaba el margen lateral del .wrap y en móvil el texto tocaba el borde */
/* En teléfono el vídeo apaisado se ve entero: a todo el ancho, con su proporción 16:9,
   bajo la cabecera, y el texto y los botones debajo (no encima recortado). */
@media (max-width: 720px) {
  .hero-video { min-height: 0; justify-content: flex-start; padding-top: 64px; } /* la cabecera fija (64 px); la barra superior ya la descuenta el body */
  .hero-video video { position: static; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; }
  .hero-video .hero-sombra { display: none; }
  .hero-video .content { padding: 22px 20px 44px; }
}

/* ---------- 2 · Soluciones ---------- */
.hm-soluciones { padding: 80px 0; border-bottom: 1px solid var(--hm-borde); }
.hm-sol-rejilla { list-style: none; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.hm-sol-rejilla li { grid-column: span 3; }
.hm-sol-rejilla li:nth-child(n + 5) { grid-column: span 4; }
.hm-sol {
  position: relative; display: block; height: 100%; overflow: hidden; text-decoration: none; color: var(--text);
  border: 1px solid var(--hm-borde); border-radius: 10px; background: var(--hm-panel);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.hm-sol:hover { border-color: rgba(47, 214, 188, 0.55); transform: translateY(-3px); }
.hm-sol img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 0.5s ease; }
.hm-sol-rejilla li:nth-child(n + 5) .hm-sol img { aspect-ratio: 16 / 7; }
.hm-sol:hover img { transform: scale(1.04); }
.hm-sol-pie {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  background: #121514; border-top: 1px solid var(--hm-borde);
}
.hm-sol-pie svg { width: 22px; height: 22px; color: var(--teal-bright); flex-shrink: 0; }
.hm-sol-pie b { flex: 1; font-size: 0.95rem; font-weight: 700; }
.hm-sol-pie .hm-flecha { color: var(--teal-bright); }

/* ---------- 3 · Familias ---------- */
.hm-familias { padding: 80px 0; border-bottom: 1px solid var(--hm-borde); }
.hm-fam-rejilla { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.hm-fam {
  display: flex; flex-direction: column; height: 100%; overflow: hidden; text-decoration: none; color: var(--text);
  border: 1px solid var(--hm-borde); border-radius: 12px; background: var(--hm-panel);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.hm-fam:hover { border-color: rgba(47, 214, 188, 0.55); transform: translateY(-3px); }
.hm-fam img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 0.5s ease; }
.hm-fam:hover img { transform: scale(1.04); }
.hm-fam-txt {
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: start;
  padding: 20px 22px 22px; flex: 1; background: #121514;
}
.hm-fam-txt .hm-ico { grid-row: 1 / 3; width: 50px; height: 50px; }
.hm-fam-txt b { padding-top: 2px; font-size: 1.05rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.hm-fam-desc { grid-column: 2; font-size: 0.86rem; line-height: 1.5; color: var(--text-dim); }
.hm-fam-txt .hm-mas { grid-column: 2; margin-top: 12px; }

/* ---------- 4 · Compromiso ---------- */
.hm-compromiso { overflow: hidden; padding: 90px 0; border-bottom: 1px solid var(--hm-borde); }
.hm-compromiso-foto {
  position: absolute; z-index: 0; top: 0; left: 0; width: 62%; height: 100%; object-fit: cover; opacity: 0.8;
  -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent);
  mask-image: linear-gradient(90deg, #000 45%, transparent);
}
.hm-compromiso::before { /* oscurece la foto bajo el titular */
  content: ''; position: absolute; z-index: 1; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(16, 18, 17, 0.85), rgba(16, 18, 17, 0.35) 38%, rgba(16, 18, 17, 0) 62%);
}
.hm-compromiso-in { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; align-items: center; }
.hm-compromiso h2 { font-size: clamp(1.9rem, 3.2vw, 2.8rem); max-width: 13ch; }
.hm-compromiso-lista { list-style: none; display: grid; gap: 22px; }
.hm-compromiso-lista li { display: flex; gap: 16px; align-items: center; }
.hm-compromiso-lista p { font-size: 0.84rem; line-height: 1.45; }
.hm-compromiso-lista b { display: block; color: var(--text); font-size: 0.98rem; margin-bottom: 2px; }

/* ---------- 5 · Proyectos ---------- */
/* un proyecto destacado en grande (2×2) y los demás a su lado, con su solución,
   el cliente y el titular del caso */
.hm-proyectos { padding: 96px 0; border-bottom: 1px solid var(--hm-borde); }
.hm-proyectos .hm-cab h2 { font-size: clamp(2.1rem, 3.6vw, 3.1rem); }
.hm-pro-rejilla { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 250px; gap: 16px; }
.hm-pro-destacado { grid-column: span 2; grid-row: span 2; }
.hm-pro-3 .hm-pro-destacado, .hm-pro-2 .hm-pro-destacado { grid-row: span 1; }
.hm-pro {
  position: relative; display: block; height: 100%; overflow: hidden; text-decoration: none; color: var(--text);
  border: 1px solid var(--hm-borde); border-radius: 12px; background: var(--hm-panel);
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.hm-pro:hover { border-color: rgba(47, 214, 188, 0.6); transform: translateY(-3px); }
.hm-pro img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.hm-pro:hover img { transform: scale(1.05); }
.hm-pro-txt {
  position: absolute; inset: auto 0 0 0; display: grid; justify-items: start; gap: 4px; padding: 60px 18px 16px;
  background: linear-gradient(transparent, rgba(8, 10, 9, 0.94) 55%);
}
.hm-pro-sol {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 4px; padding: 3px 9px 3px 7px; border-radius: 99px;
  background: rgba(8, 10, 9, 0.55); border: 1px solid rgba(47, 214, 188, 0.5); color: var(--teal-bright);
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; backdrop-filter: blur(6px);
}
.hm-pro-sol svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hm-pro-txt b { font-size: 1rem; font-weight: 800; line-height: 1.25; }
.hm-pro-tit { font-size: 0.8rem; line-height: 1.45; color: var(--text-dim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hm-pro-ir { display: none; align-items: center; gap: 8px; margin-top: 8px; color: var(--teal-bright); font-weight: 800; font-size: 0.88rem; }
.hm-pro-ir svg { width: 16px; height: 16px; }
/* el destacado, con más texto y a mayor tamaño */
.hm-pro-destacado .hm-pro-txt { padding: 120px 30px 28px; gap: 8px; }
.hm-pro-destacado .hm-pro-txt b { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
.hm-pro-destacado .hm-pro-tit { font-size: 0.98rem; max-width: 52ch; -webkit-line-clamp: 3; color: rgba(244, 246, 245, 0.82); }
.hm-pro-destacado .hm-pro-ir { display: inline-flex; }

/* ---------- 6 · Cierre ---------- */
.hm-cierre { overflow: hidden; padding: 70px 0; }
.hm-cierre-foto {
  position: absolute; top: 0; right: 0; width: 70%; height: 100%; object-fit: cover; opacity: 0.6;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%);
  mask-image: linear-gradient(90deg, transparent, #000 40%);
}
.hm-cierre-in { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.hm-cierre h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin-bottom: 12px; }
.hm-cierre-in > div > p { max-width: 44ch; margin-bottom: 26px; color: rgba(244, 246, 245, 0.8); }
/* la presentación: una tarjeta de vídeo (fotograma + rótulo), no un botón flotante */
.hm-play {
  flex: 0 0 400px; display: block; padding: 0; cursor: pointer; text-align: left; color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 14px; overflow: hidden; background: #0a0c0b;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.hm-play:hover { border-color: rgba(47, 214, 188, 0.6); transform: translateY(-3px); }
.hm-play-img { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.hm-play-img img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.85; transition: opacity 0.3s ease, transform 0.6s ease; }
.hm-play:hover .hm-play-img img { opacity: 1; transform: scale(1.03); }
/* el rótulo, con el botón de reproducir pequeño: el fotograma queda limpio */
.hm-play-pie {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  font-weight: 800; font-size: 0.95rem; border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.hm-play-ico {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: var(--teal-bright); color: #0c0e0d; transition: transform 0.25s ease;
}
.hm-play:hover .hm-play-ico { transform: scale(1.1); }
.hm-play-ico svg { width: 16px; height: 16px; fill: currentColor; stroke: none; margin-left: 2px; }
.hm-video {
  width: min(1100px, 92vw); padding: 0; border: 0; border-radius: 12px; overflow: visible; background: #000;
}
.hm-video::backdrop { background: rgba(0, 0, 0, 0.82); backdrop-filter: blur(4px); }
.hm-video-marco { aspect-ratio: 16 / 9; }
.hm-video-marco iframe { width: 100%; height: 100%; border: 0; border-radius: 12px; display: block; }
.hm-video-cerrar {
  position: absolute; top: -44px; right: 0; width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, 0.12); border: 0; color: #fff; font-size: 1.4rem; line-height: 1;
}

/* ---------- Pantallas más estrechas ---------- */
@media (max-width: 1100px) {
  .hm-sol-rejilla li, .hm-sol-rejilla li:nth-child(n + 5) { grid-column: span 6; }
  .hm-sol-rejilla li:nth-child(n + 5) .hm-sol img { aspect-ratio: 16 / 9; }
  .hm-pro-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 220px; }
  .hm-compromiso-in { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .hm-cab { grid-template-columns: 1fr; }
  .hm-fam-rejilla { grid-template-columns: 1fr; }
  /* en móvil el icono no monta sobre la foto: va dentro del bloque de texto */
  .hm-fam-txt { padding-top: 18px; }
  .hm-fam-txt .hm-ico { width: 44px; height: 44px; }
  .hm-compromiso-foto { width: 100%; opacity: 0.3; }
  .hm-cierre-in { flex-direction: column; align-items: flex-start; }
  .hm-cierre-foto { width: 100%; opacity: 0.3; }
  .hm-play { flex: none; width: 100%; max-width: 440px; }
}
@media (max-width: 540px) {
  /* soluciones, familias y casos de éxito en carrusel horizontal: la tarjeta
     siguiente asoma por la derecha, y la lista sangra hasta el borde de la pantalla */
  .hm-sol-rejilla, .hm-fam-rejilla, .hm-pro-rejilla {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 -28px; padding: 4px 28px 8px; scroll-padding: 0 28px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .hm-sol-rejilla::-webkit-scrollbar, .hm-fam-rejilla::-webkit-scrollbar, .hm-pro-rejilla::-webkit-scrollbar { display: none; }
  .hm-sol-rejilla li, .hm-sol-rejilla li:nth-child(n + 5), .hm-fam-rejilla li, .hm-pro-rejilla li {
    flex: 0 0 82%; scroll-snap-align: start;
  }
  .hm-pro-rejilla li { height: 300px; }
  .hm-pro-destacado .hm-pro-txt { padding: 70px 18px 18px; gap: 4px; }
  .hm-pro-destacado .hm-pro-txt b { font-size: 1.15rem; }
  .hm-pro-destacado .hm-pro-tit { font-size: 0.85rem; -webkit-line-clamp: 2; }
}

/* Ritmo de fondos de la portada: liso (soluciones) → banda verdosa (familias) →
   liso (casos de éxito, que ya llevan mucha foto) → secciones con foto. Así dos
   secciones seguidas nunca comparten el mismo fondo. */
.hm-familias {
  background:
    radial-gradient(ellipse at 15% 0%, rgba(0, 168, 148, 0.16), transparent 55%),
    radial-gradient(ellipse at 90% 100%, rgba(0, 168, 148, 0.08), transparent 50%),
    #131716;
  border-top: 1px solid rgba(47, 214, 188, 0.12);
}