/* landing/estilos.css — Función IA
 *
 * Sobrio industrial: tipografía fuerte, mucho aire, una sola familia y un
 * solo acento. La fotografía entra en dosis pequeñas y siempre etiquetada,
 * para que el rubro se lea de inmediato sin que la página parezca un folleto.
 */

:root {
    /* Paleta institucional (Guia visual esencial v1.0). Los valores marcados
       vienen textuales de la guia y no se ajustan "a ojo": la guia prohibe
       expresamente cambiar los colores institucionales. */
    --tinta: #111317;            /* negro grafito, guia */
    --tinta-media: #454f5f;
    --tinta-suave: #6b7280;      /* gris medio, guia */
    --papel: #ffffff;            /* blanco, guia */
    --papel-hueso: #f6f7f9;
    --papel-hondo: #111317;      /* negro grafito, guia */
    --naranja: #f26a1a;          /* naranja principal, guia */
    --naranja-hondo: #ce5a16;    /* derivado del anterior, solo para :hover */
    --verde: #1f8a4c;            /* WhatsApp, ajeno a la marca */
    --linea: #e5e7eb;            /* gris claro, guia */
    --linea-tenue: #eef0f4;

    --ancho: 1140px;
    --radio: 12px;
    --sombra: 0 14px 40px rgba(16, 20, 27, .09);
    --transicion: .18s cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    background: var(--papel);
    color: var(--tinta);
    font: 400 17px/1.65 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* height:auto es imprescindible, no decorativo: las imagenes traen atributos
   width/height en el HTML (que evitan el salto de maquetacion al cargar), y
   sin esto el navegador limita el ancho pero conserva el alto en pixeles.
   Resultado: la imagen se aplasta. Se veia en movil de forma escandalosa y en
   escritorio de forma sutil. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.envoltura { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 26px; }

/* --- Tipografía ------------------------------------------------------- */

h1, h2, h3 { letter-spacing: -.028em; line-height: 1.1; font-weight: 800; }
h1 { font-size: clamp(2.4rem, 5.6vw, 4rem); }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.6rem); }
h3 { font-size: 1.14rem; letter-spacing: -.015em; line-height: 1.3; }

.rotulo {
    font-size: .74rem; font-weight: 700; letter-spacing: .15em;
    text-transform: uppercase; color: var(--naranja);
}
.entrada { font-size: 1.18rem; color: var(--tinta-media); max-width: 62ch; }
.apunte { font-size: .95rem; color: var(--tinta-suave); }

/* --- Botones ---------------------------------------------------------- */

.boton, .boton-linea {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 15px 26px; border-radius: 999px;
    font-size: 1rem; font-weight: 700; letter-spacing: -.01em;
    text-decoration: none; border: 2px solid transparent;
    transition: var(--transicion); cursor: pointer;
}
.boton { background: var(--naranja); color: #fff; }
.boton:hover { background: var(--naranja-hondo); transform: translateY(-1px); }
.boton-linea { border-color: var(--linea); color: var(--tinta); background: var(--papel); }
.boton-linea:hover { border-color: var(--tinta); }
.boton-wa { background: var(--verde); color: #fff; }
.boton-wa:hover { background: #19703d; }
.boton:focus-visible, .boton-linea:focus-visible, a:focus-visible {
    outline: 3px solid var(--naranja); outline-offset: 3px;
}

/* --- Encabezado ------------------------------------------------------- */

.cabecera {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255, 255, 255, .93);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--linea);
}
.cabecera__fila { display: flex; align-items: center; justify-content: space-between; height: 68px; }
/* Bloque de marca: isotipo + nombre + lema, como lo arma la guia visual.
   El isotipo va en linea en el HTML y no como <img>: asi el trazo puede
   heredar color donde el fondo lo exija y no cuesta una peticion aparte. */
.marca { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.marca__iso { width: 35px; height: 36px; flex: 0 0 auto; display: block; }
.marca__texto { display: flex; flex-direction: column; line-height: 1; }
.marca__nombre { font-weight: 800; font-size: 1.14rem; letter-spacing: -.02em; }
.marca__lema {
    font-size: .585rem; font-weight: 600; letter-spacing: .19em;
    text-transform: uppercase; color: var(--tinta-suave); margin-top: 4px;
}
.marca b { color: var(--naranja); }

/* Sobre el negro grafito el trazo oscuro del isotipo desaparece -- la guia lo
   marca como uso incorrecto. Ahi se usa la variante clara, que es el mismo
   dibujo con el trazo en blanco. */
.seccion--honda .marca__iso [stroke="#111317"] { stroke: #fff; }
.seccion--honda .marca__iso [fill="#111317"] { fill: #fff; }
.seccion--honda .marca__lema { color: #b7bfcc; }
.navegacion { display: flex; gap: 30px; }
.navegacion a {
    text-decoration: none; font-size: .95rem; font-weight: 600;
    color: var(--tinta-media); transition: var(--transicion);
}
.navegacion a:hover { color: var(--tinta); }
.cabecera .boton { padding: 10px 19px; font-size: .92rem; }

/* --- Portada ---------------------------------------------------------- */

.portada { padding: 82px 0 0; }
/* Flex de bloque, no en linea: como inline-flex el parrafo no tomaba altura
   y el rotulo se encimaba con el titulo. */
.portada__marca { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 22px; }
.portada__marca .punto {
    /* Alineado a la primera linea, no al centro del bloque: en pantallas
       angostas el rotulo ocupa dos lineas y el punto quedaba flotando. */
    flex: 0 0 auto; width: 7px; height: 7px; margin-top: .52em;
    border-radius: 50%; background: var(--naranja);
}
.portada h1 { max-width: 15ch; margin-bottom: 24px; }
.portada h1 em { font-style: normal; color: var(--naranja); }
.portada .entrada { margin-bottom: 34px; }
.portada__acciones { display: flex; flex-wrap: wrap; gap: 13px; align-items: center; }
.portada__nota { margin-top: 17px; display: flex; align-items: center; gap: 9px; font-size: .92rem; color: var(--tinta-suave); }

/* Tira de oficio: tres fotos pequeñas y etiquetadas. Su trabajo es que en
   dos segundos quede claro para qué taller es esto, sin volverse el motivo
   principal de la página. */
.tira { margin-top: 62px; border-top: 1px solid var(--linea); padding-top: 26px; }
.tira__titulo {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 18px; margin-bottom: 18px; flex-wrap: wrap;
}
/* Seis oficios. En una sola fila cada foto caeria a 170 px y a ese tamano ya
   no se distingue el trabajo, que es lo unico que tienen que comunicar. Dos
   filas de tres las devuelven a 353 px, legibles. */
.tira__rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.oficio {
    position: relative; border-radius: var(--radio); overflow: hidden;
    background: var(--papel-hueso); aspect-ratio: 16 / 10;
}
.oficio img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) contrast(1.03); }
.oficio__etiqueta {
    position: absolute; left: 12px; bottom: 11px;
    padding: 5px 12px; border-radius: 999px;
    background: rgba(16, 20, 27, .82); color: #fff;
    font-size: .76rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    backdrop-filter: blur(4px);
}

/* --- Secciones -------------------------------------------------------- */

.seccion { padding: 92px 0; }
.seccion--hueso { background: var(--papel-hueso); border-block: 1px solid var(--linea); }
.seccion--honda { background: var(--papel-hondo); color: #fff; }
.seccion--honda h2 { color: #fff; }
.seccion--honda .entrada { color: #b7bfcc; }
.seccion--honda .rotulo { color: var(--naranja); }

.encabezado-seccion { max-width: 66ch; margin-bottom: 46px; }
.encabezado-seccion .rotulo { display: block; margin-bottom: 13px; }
.encabezado-seccion h2 { margin-bottom: 16px; }

/* --- Oficio propio (la credibilidad) ---------------------------------- */

.oficio-propio { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.oficio-propio__foto { border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); }
.oficio-propio__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.oficio-propio p + p { margin-top: 17px; }
.oficio-propio p { color: #c4cbd6; font-size: 1.06rem; }
.oficio-propio strong { color: #fff; font-weight: 700; }

/* Firma de la empresa desarrolladora. Cierra la sección de autoridad: el
   taller aporta el oficio, la empresa de software aporta la ingeniería y el
   soporte. Sin las dos mitades, el argumento cojea. */
.firma {
    margin-top: 30px; padding: 22px 24px;
    border-radius: var(--radio);
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .12);
    border-left: 3px solid var(--naranja);
}
.firma__rotulo {
    font-size: .72rem; font-weight: 700; letter-spacing: .15em;
    text-transform: uppercase; color: var(--naranja); margin-bottom: 5px;
}
.firma__nombre {
    font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em;
    color: #fff; margin-bottom: 10px;
}
.firma__texto { font-size: .98rem; color: #b7bfcc; }
.oficio-propio .firma__texto { margin-top: 0; }

/* --- Cadena del trabajo ----------------------------------------------- */

.cadena { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
.eslabon { background: var(--papel); padding: 27px 25px 30px; }
.eslabon__num {
    font-size: .76rem; font-weight: 800; letter-spacing: .1em;
    color: var(--naranja); margin-bottom: 13px;
}
.eslabon h3 { margin-bottom: 8px; }
.eslabon p { font-size: .96rem; color: var(--tinta-suave); }

/* --- Fugas (el problema) ---------------------------------------------- */

.fugas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.fuga {
    padding: 25px 26px; border-radius: var(--radio);
    background: var(--papel); border: 1px solid var(--linea);
    border-left: 3px solid var(--naranja);
}
.fuga h3 { margin-bottom: 7px; }
.fuga p { font-size: .97rem; color: var(--tinta-suave); }

/* --- Pantallas del producto ------------------------------------------- */

.pantallas { display: flex; flex-direction: column; gap: 62px; }
.pantalla { display: grid; grid-template-columns: 1fr 2fr; gap: 46px; align-items: center; }
/* Las filas pares invierten el orden visual, PERO invirtiendo tambien las
   columnas. Antes se lograba con `order:-1` sobre el marco, que lo metia en
   la columna angosta: las capturas impares salian a 631 px y las pares a
   407 px. Esa diferencia es la que se leia como "apachurrada" en escritorio.
   La captura siempre debe caer en la columna ancha. */
.pantalla:nth-child(even) { grid-template-columns: 2fr 1fr; }
.pantalla:nth-child(even) .pantalla__texto { order: 2; }
.pantalla__texto h3 { font-size: 1.42rem; margin-bottom: 12px; letter-spacing: -.02em; }
.pantalla__texto p { color: var(--tinta-suave); font-size: 1.02rem; }
.pantalla__texto .rotulo { display: block; margin-bottom: 11px; }
.pantalla__marco {
    border-radius: var(--radio); overflow: hidden;
    border: 1px solid var(--linea); box-shadow: var(--sombra);
    background: var(--papel);
}
/* Las capturas son tableros densos de 3000 px. Dentro del ancho normal de
   lectura quedan reducidas casi cinco veces y su texto deja de distinguirse.
   En pantallas holgadas la seccion se ensancha para que la interfaz se
   alcance a leer, que es el unico motivo por el que estan aqui. */
@media (min-width: 1240px) {
    #producto .envoltura { max-width: 1320px; }
}

/* --- Sectores --------------------------------------------------------- */

.sectores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.sector {
    display: flex; align-items: center; gap: 13px;
    padding: 17px 19px; border-radius: var(--radio);
    background: var(--papel); border: 1px solid var(--linea);
    font-weight: 600; font-size: .99rem;
}
.sector span {
    display: grid; place-items: center; flex: 0 0 auto;
    width: 34px; height: 34px; border-radius: 9px;
    background: var(--papel-hueso); color: var(--naranja); font-size: 1.05rem;
}

/* --- Capacidades (lo que el sistema hace solo) ------------------------- */

.capacidades { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.capacidad {
    padding: 27px 26px 30px; border-radius: var(--radio);
    background: var(--papel); border: 1px solid var(--linea);
}
.capacidad .rotulo { display: block; margin-bottom: 11px; }
.capacidad h3 { margin-bottom: 9px; font-size: 1.2rem; }
.capacidad p { font-size: .97rem; color: var(--tinta-suave); }

/* --- Reparto de accesos ----------------------------------------------- */

.reparto { display: grid; grid-template-columns: 1.05fr .95fr; gap: 52px; align-items: center; }
.reparto__lista { display: flex; flex-direction: column; gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
.reparto__fila { display: grid; grid-template-columns: 8.5rem 1fr; gap: 18px; background: var(--papel); padding: 17px 21px; align-items: baseline; }
.reparto__quien { font-weight: 700; font-size: .97rem; }
.reparto__que { font-size: .95rem; color: var(--tinta-suave); }

/* --- Banda fotografica ------------------------------------------------- */

/* Una sola imagen ancha y baja: su trabajo es enseñar el surtido de piezas
   que salen de estos talleres -- lona, promocionales, prendas -- sin robarle
   la pagina al texto. */
.banda {
    margin-top: 46px; border-radius: var(--radio); overflow: hidden;
    border: 1px solid var(--linea); background: var(--papel-hueso);
    position: relative;
}
.banda img { width: 100%; aspect-ratio: 21 / 8; object-fit: cover; filter: saturate(.94); }
.banda figcaption {
    position: absolute; left: 16px; bottom: 14px;
    padding: 6px 14px; border-radius: 999px;
    background: rgba(16, 20, 27, .82); color: #fff;
    font-size: .76rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    backdrop-filter: blur(4px);
}

/* --- Extras (para el que ya se convencio) ------------------------------ */

.extras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin-top: 34px; }
.extra { padding: 16px 19px; border-radius: var(--radio); background: var(--papel); border: 1px solid var(--linea); }
.extra b { display: block; font-size: .97rem; margin-bottom: 4px; }
.extra span { font-size: .9rem; color: var(--tinta-suave); }

/* --- Cierre ----------------------------------------------------------- */

.cierre { text-align: center; }
.cierre h2 { margin-bottom: 16px; }
.cierre .entrada { margin: 0 auto 32px; }
.cierre__acciones { display: flex; flex-wrap: wrap; gap: 13px; justify-content: center; }

.pie { border-top: 1px solid var(--linea); padding: 34px 0; }
.pie__fila { display: flex; justify-content: space-between; align-items: center; gap: 22px; flex-wrap: wrap; }
.pie p { font-size: .9rem; color: var(--tinta-suave); text-align: right; }
.pie strong { color: var(--tinta); font-weight: 700; }
@media (max-width: 620px) { .pie p { text-align: left; } }

/* --- Adaptación ------------------------------------------------------- */

@media (max-width: 940px) {
    .oficio-propio, .pantalla,
    .pantalla:nth-child(even) { grid-template-columns: 1fr; gap: 32px; }
    .pantalla:nth-child(even) .pantalla__texto { order: 0; }
    .sectores, .capacidades, .extras { grid-template-columns: repeat(2, 1fr); }
    /* La cadena se queda en tres: son nueve eslabones y en dos columnas
       sobraria una celda vacia, que aqui no es espacio en blanco sino un
       bloque gris (la rejilla dibuja sus lineas con el fondo). */
    .cadena { grid-template-columns: repeat(3, 1fr); }
    .tira__rejilla { grid-template-columns: repeat(2, 1fr); }
    .reparto { grid-template-columns: 1fr; gap: 34px; }
    .banda img { aspect-ratio: 16 / 9; }
    .navegacion { display: none; }
}
@media (max-width: 620px) {
    body { font-size: 16px; }
    .seccion { padding: 64px 0; }
    .portada { padding-top: 54px; }
    .fugas, .cadena, .sectores, .capacidades, .extras { grid-template-columns: 1fr; }
    .reparto__fila { grid-template-columns: 1fr; gap: 4px; }
    .banda img { aspect-ratio: 4 / 3; }
    /* En el ancho de un telefono la etiqueta se partia en dos renglones y la
       pastilla redondeada quedaba deforme. */
    .banda figcaption { left: 12px; bottom: 12px; padding: 5px 11px; font-size: .68rem; }
    /* Tres fotos repartidas en 390 px dan 107 px cada una: a ese tamano no
       se distingue el oficio, que es justo lo que tienen que comunicar. Se
       convierten en una tira que se desliza, con tarjetas legibles. */
    .tira__rejilla {
        display: flex; gap: 11px;
        overflow-x: auto; scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        margin-inline: -26px; padding-inline: 26px;
        scrollbar-width: none;
    }
    .tira__rejilla::-webkit-scrollbar { display: none; }
    .oficio { flex: 0 0 68%; scroll-snap-align: start; }
    .oficio__etiqueta { left: 10px; bottom: 10px; padding: 4px 10px; font-size: .68rem; }
    .portada__acciones .boton, .portada__acciones .boton-linea { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; }
}