/* 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 {
    --tinta: #14181f;
    --tinta-media: #454f5f;
    --tinta-suave: #6b7482;
    --papel: #ffffff;
    --papel-hueso: #f6f7f9;
    --papel-hondo: #10141b;
    --naranja: #e86a0c;
    --naranja-hondo: #c2570a;
    --verde: #1f8a4c;
    --linea: #e3e6ec;
    --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;
}

img { max-width: 100%; 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; }
.marca { display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: 1.14rem; text-decoration: none; }
.marca__sello {
    display: grid; place-items: center; width: 33px; height: 33px;
    border-radius: 9px; background: var(--naranja); color: #fff;
    font-size: 1.02rem; font-weight: 800;
}
.marca b { color: var(--naranja); }
.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;
}
.tira__rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.oficio {
    position: relative; border-radius: var(--radio); overflow: hidden;
    background: var(--papel-hueso); aspect-ratio: 3 / 2;
}
.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: #ff9a4d; }

.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: #ff9a4d; 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 1.55fr; gap: 46px; align-items: center; }
.pantalla:nth-child(even) .pantalla__marco { order: -1; }
.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);
}

/* --- 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;
}

/* --- 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 { grid-template-columns: 1fr; gap: 32px; }
    .pantalla:nth-child(even) .pantalla__marco { order: 0; }
    .cadena, .sectores { grid-template-columns: repeat(2, 1fr); }
    .navegacion { display: none; }
}
@media (max-width: 620px) {
    body { font-size: 16px; }
    .seccion { padding: 64px 0; }
    .portada { padding-top: 54px; }
    .fugas, .cadena, .sectores { grid-template-columns: 1fr; }
    .tira__rejilla { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .oficio__etiqueta { left: 7px; bottom: 7px; padding: 3px 8px; font-size: .62rem; }
    .portada__acciones .boton, .portada__acciones .boton-linea { width: 100%; justify-content: center; }
}

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