/* =========================================================================
   web.css — Estilos propios de la página "Páginas web".

   Solo lo específico de esta página. Reutiliza de los archivos globales:
     · .container / .section .......... layout.css
     · .eyebrow ....................... components.css
     · .btn / .btn--primary .......... components.css
     · tokens de color, tipografía y espaciado ... variables.css
     · foco visible, enlaces, tipografía base .... base.css

   Secciones: Hero · Problema · Solución · Qué podemos construir ·
   Cómo trabajamos · Después de publicar · CTA final.
   ========================================================================= */

/* ---------------------------------------------------------------
   HERO — página interior, tono editorial
   Presencia, algo más compacto que el Hero de la Home. Sin min-height,
   sin 100vh. Móvil: texto y, debajo, la representación de la web.
   >=48rem: texto (izquierda) | representación (derecha).
   --------------------------------------------------------------- */

.web-hero {
    padding-block: var(--space-section-sm);
    background-color: var(--bg-page);              /* Cal */
}

.web-hero__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-block);
}

/* --- Texto -------------------------------------------------- */

.web-hero__content {
    min-width: 0;
    max-width: 40rem;
}

.web-hero__eyebrow {
    display: block;
    margin-bottom: var(--space-md);
}

.web-hero__title {
    max-width: 20ch;
    font-size: clamp(2rem, 1.3rem + 3vw, 3.25rem);   /* misma jerarquía que aplicaciones.php */
    line-height: 1.12;                                /* algo más de aire: registro editorial */
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.web-hero__text {
    max-width: 46ch;
    margin-top: var(--space-md);
    font-size: var(--fs-300);
    line-height: var(--lh-base);
    color: var(--text-strong);
}
.web-hero__text + .web-hero__text {
    margin-top: var(--space-sm);
}

.web-hero__actions {
    margin-top: var(--space-lg);
}

/* --- Representación abstracta de una web ------------------- */
/* Estructura editorial en tres bandas: navegación · banda hero · retícula
   de contenido. Frente al mockup de gestión de aplicaciones.php (sidebar,
   filas, estados), aquí manda la jerarquía tipográfica y el espacio.
   Proporción vertical (una web se lee de arriba abajo). */

.web-hero__visual {
    min-width: 0;
}

.web-page {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 26rem;
    margin-inline: auto;                           /* centrada en móvil */
    aspect-ratio: 5 / 6;                           /* retrato: distinta del formato apaisado de app */
    padding: var(--space-sm);
    gap: var(--space-md);
    background-color: var(--color-cal);
    border: 1px solid var(--border);
}

/* Banda 1 · navegación superior */
.web-page__nav {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--border);
}
.web-page__brand {
    width: 1.5rem;
    height: 0.5rem;
    background-color: var(--color-carbon);
}
.web-page__links {
    display: flex;
    gap: var(--space-2xs);
    margin-left: auto;
}
.web-page__links > span {
    width: 1.5rem;
    height: 0.3rem;
    background-color: var(--color-piedra);
}
.web-page__navcta {
    width: 2rem;
    height: 0.7rem;
    border: 1px solid var(--border-strong);        /* "botón" de nav, sin color */
}

/* Banda 2 · hero de la web: titular + texto + CTA | imagen simulada */
.web-page__hero {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: var(--space-sm);
    align-items: start;
}
.web-page__hero-copy {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}
.web-page__headline {
    height: 0.7rem;
    background-color: var(--color-carbon);         /* jerarquía tipográfica: titular grande */
}
.web-page__headline--2 { width: 72%; }
.web-page__line {
    height: 0.32rem;
    background-color: var(--color-piedra);
}
.web-page__line--short { width: 60%; }
.web-page__btn {
    width: 3rem;
    height: 0.8rem;
    margin-top: var(--space-2xs);
    background-color: var(--color-azul);           /* único CTA en color */
}
.web-page__hero-media {
    align-self: stretch;
    min-height: 3.5rem;
    background-color: var(--color-piedra);
    position: relative;
}
.web-page__hero-media::after {                     /* único detalle Cereal, mínimo */
    content: "";
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    width: 0.4rem;
    height: 0.4rem;
    background-color: var(--color-cereal);
}

/* Banda 3 · retícula de bloques de contenido */
.web-page__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
    margin-top: auto;                             /* ancla la retícula al pie de la página */
}
.web-page__block {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.web-page__block-media {
    aspect-ratio: 3 / 2;
    background-color: var(--color-piedra);
}

/* ---------------------------------------------------------------
   >= 48rem · tablet: texto | representación en fila
   --------------------------------------------------------------- */

@media (min-width: 48rem) {

    .web-hero__inner {
        flex-direction: row;
        align-items: center;
        gap: clamp(var(--space-xl), 6vw, var(--space-2xl));
    }

    .web-hero__content {
        flex: 1 1 54%;
    }

    .web-hero__visual {
        flex: 1 1 46%;
    }

    .web-page {
        margin-inline: 0;
        margin-left: auto;
        max-width: 24rem;
    }
}

/* ---------------------------------------------------------------
   >= 60rem · desktop: presencia controlada
   --------------------------------------------------------------- */

@media (min-width: 60rem) {

    .web-hero {
        padding-block: var(--space-block);        /* algo más compacto que el Hero de la Home */
    }

    .web-hero__inner {
        gap: clamp(var(--space-2xl), 7vw, 7rem);
    }

    .web-hero__content {
        flex: 1 1 52%;
    }

    .web-hero__visual {
        flex: 1 1 48%;
    }

    .web-page {
        max-width: 27rem;
    }
}


/* =========================================================================
   SECCIÓN · Cuando tu web no cuenta bien lo que haces
   -------------------------------------------------------------------------
   Fondo Piedra (transición Cal → Piedra tras el Hero). Composición
   editorial: cabecera + introducción + UNA representación abstracta de
   "una web sin jerarquía clara" + retícula 2×2 de situaciones. Sin
   tarjetas, sin sombras, sin iconos. Reconocimiento, no miedo. Sin
   min-height. Representa el ANTES (el "después" llega más adelante).

   Móvil   : cabecera · introducción · visual · situaciones (1 columna).
   >=38rem : las situaciones pasan a 2 × 2.
   >=60rem : cabecera + introducción a la izquierda | visual a la derecha.
   ========================================================================= */

.web-problem {
    padding-block: var(--space-section-sm);
    background-color: var(--bg-surface);           /* Piedra #E8E4DC */
}

/* --- Cabecera + introducción ------------------------------ */

.web-problem__eyebrow {
    display: block;
    margin-bottom: var(--space-md);
}

.web-problem__title {
    max-width: 24ch;
    font-size: clamp(1.4rem, 1.05rem + 1.6vw, 2rem);   /* claramente por debajo del H1 */
    line-height: var(--lh-snug);
    letter-spacing: -0.01em;
    color: var(--text-strong);
    text-wrap: balance;
}

.web-problem__intro {
    max-width: 54ch;
    margin-top: var(--space-md);
    color: var(--text-strong);
}
.web-problem__intro > p + p {
    margin-top: var(--space-sm);
}

/* --- Visual: "una web sin jerarquía clara" --------------- */
/* Los mismos elementos que la web bien estructurada del Hero, pero con
   márgenes desiguales, titulares todos del mismo peso, navegación sin
   diferenciar y el CTA metido a media página. Preparado para contraponerlo
   más adelante a un "después" ordenado. */

.web-problem__visual {
    min-width: 0;
}

.web-messy {
    width: 100%;
    max-width: 22rem;
    margin-top: var(--space-lg);
    margin-inline: auto;
    padding: var(--space-sm);
    background-color: var(--color-cal);
    border: 1px solid var(--border-strong);        /* contorno legible sobre Piedra */
}

.web-messy__nav {
    display: flex;
    gap: var(--space-2xs);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--border);
}
.web-messy__nav > span {
    width: 2.2rem;                                 /* todos iguales: nada destaca */
    height: 0.32rem;
    background-color: var(--color-piedra);
}

.web-messy__body {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding-top: var(--space-sm);
}
/* Titulares: todos del mismo peso y tamaño (falta jerarquía). */
.web-messy__title {
    width: 78%;
    height: 0.55rem;
    background-color: var(--color-carbon);
}
.web-messy__title--b { width: 64%; margin-left: 1.4rem; }   /* desplazado */
.web-messy__title--c { width: 70%; margin-left: 0.6rem; }
/* Líneas de texto sueltas, anchos irregulares y márgenes desiguales. */
.web-messy__text {
    width: 92%;
    height: 0.3rem;
    background-color: rgb(23 23 21 / 0.12);
}
.web-messy__text--short { width: 48%; margin-left: 2rem; }
.web-messy__text--d { width: 84%; margin-left: 0.4rem; }
/* Imagen simulada caída en medio, sin relación con el texto. */
.web-messy__media {
    width: 55%;
    aspect-ratio: 5 / 3;
    margin-left: 1.8rem;
    background-color: var(--color-piedra);
}
/* CTA mal situado: a media página y desalineado. Único elemento en Azul. */
.web-messy__cta {
    width: 4rem;
    height: 0.8rem;
    margin-left: 3.2rem;
    background-color: var(--color-azul);
}
/* Microdetalle Cereal, fuera de sitio. */
.web-messy__body::after {
    content: "";
    align-self: flex-end;
    width: 0.4rem;
    height: 0.4rem;
    margin-right: 1.2rem;
    background-color: var(--color-cereal);
}

/* --- Retícula de situaciones ---------------------------- */
/* Líneas finas = el gap de 1px de la retícula sobre fondo --border
   (mismo recurso editorial que en aplicaciones.php). Sin recuadro exterior. */

.web-problem__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    margin-top: var(--space-block);
    background-color: var(--border);
    border-top: 1px solid var(--border);
}

.web-problem__item {
    background-color: var(--bg-surface);           /* Piedra: solo se ve el gap de 1px */
    padding: clamp(var(--space-md), 4vw, var(--space-lg)) 0;
}

.web-problem__num {
    font-family: var(--font-mono);
    font-size: var(--fs-300);
    color: var(--text-strong);
}

.web-problem__item-title {
    max-width: 26ch;
    margin-top: var(--space-2xs);
    font-size: var(--fs-400);
    line-height: var(--lh-snug);
    color: var(--text-strong);
    text-wrap: balance;
}

.web-problem__text {
    max-width: 42ch;
    margin-top: var(--space-sm);
    color: var(--text-muted);
}

/* --- >= 38rem · situaciones en 2 × 2 ------------------- */

@media (min-width: 38rem) {
    .web-problem__list {
        grid-template-columns: 1fr 1fr;
    }
    .web-problem__item {
        padding-inline: clamp(var(--space-md), 3vw, var(--space-lg));
    }
    .web-problem__item:nth-child(odd)  { padding-inline-start: 0; }
    .web-problem__item:nth-child(even) { padding-inline-end: 0; }
}

/* --- >= 60rem · cabecera (texto | visual) -------------- */

@media (min-width: 60rem) {
    .web-problem__inner {
        display: grid;
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
        column-gap: clamp(var(--space-xl), 6vw, var(--space-2xl));
        align-items: start;
    }
    .web-problem__headline { grid-column: 1; grid-row: 1; }
    .web-problem__intro    { grid-column: 1; grid-row: 2; }
    .web-problem__visual {
        grid-column: 2;
        grid-row: 1 / 3;
        align-self: center;
        margin-top: 0;
    }
    .web-messy { margin-top: 0; max-width: 24rem; }
    .web-problem__list { grid-column: 1 / -1; grid-row: 3; }
}


/* =========================================================================
   SECCIÓN · Una web pensada desde el negocio
   -------------------------------------------------------------------------
   Vuelve a fondo Cal (Hero Cal → Problema Piedra → Solución Cal). Después
   del diagnóstico de W2 (información presente pero mal organizada), aquí se
   percibe ORDEN: cabecera textual + una representación abstracta de una web
   BIEN estructurada (evolución del visual de W2) + tres principios en
   columnas editoriales. Sección más amplia que W2. Sin min-height.
   ========================================================================= */

.web-solution {
    /* Sección generosa pero tensada: un escalón por debajo de --space-section
       para que no se sienta suelta (W9). Sigue siendo la sección más amplia. */
    padding-block: clamp(var(--space-xl), 6vw, var(--space-2xl));
    background-color: var(--bg-page);              /* Cal #F7F5EF */
}

/* --- Cabecera textual ----------------------------------- */

.web-solution__intro {
    max-width: 44rem;
}

.web-solution__eyebrow {
    display: block;
    margin-bottom: var(--space-md);
}

.web-solution__title {
    max-width: 22ch;
    font-size: clamp(1.6rem, 1.2rem + 1.9vw, 2.4rem);   /* titular principal, < H1 del Hero */
    line-height: var(--lh-snug);
    letter-spacing: -0.015em;
    color: var(--text-strong);
    text-wrap: balance;
}

.web-solution__text {
    max-width: 48ch;
    margin-top: var(--space-md);
    font-size: var(--fs-300);
    line-height: var(--lh-base);
    color: var(--text-strong);
}
.web-solution__text + .web-solution__text {
    margin-top: var(--space-sm);
}
.web-solution__text--strong {
    font-weight: var(--fw-medium);
}

/* --- Visual: una web BIEN estructurada ------------------ */
/* Mismos elementos que .web-messy (W2), pero: navegación diferenciada,
   jerarquía real de titulares, todo alineado a un eje común y el CTA en su
   sitio. La transformación desorden → orden se entiende sin explicarla. */

.web-solution__showcase {
    margin-top: clamp(var(--space-xl), 5vw, var(--space-2xl));
}

.web-tidy {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    width: 100%;
    max-width: 44rem;
    margin-inline: auto;
    padding: var(--space-md);
    background-color: var(--color-cal);
    border: 1px solid var(--border);
    /* Móvil: la altura la marca el contenido (nada se recorta).
       A partir de 48rem se fija una proporción apaisada de "objeto presentado". */
}

/* Navegación claramente ordenada */
.web-tidy__nav {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--border);
}
.web-tidy__brand {
    width: 2rem;
    height: 0.55rem;
    background-color: var(--color-carbon);         /* marca diferenciada */
}
.web-tidy__links {
    display: flex;
    gap: var(--space-sm);                          /* separación regular = nav legible */
    margin-left: auto;
}
.web-tidy__links > span {
    width: 2rem;
    height: 0.32rem;
    background-color: var(--color-piedra);
}
.web-tidy__navcta {
    width: 2.4rem;
    height: 0.75rem;
    border: 1px solid var(--border-strong);
}

/* Banda hero: jerarquía de titulares + texto + CTA | imagen alineada */
.web-tidy__hero {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: var(--space-md);
    align-items: start;
}
.web-tidy__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;                       /* todo alineado al mismo eje */
    gap: 0.5rem;
    min-width: 0;
}
.web-tidy__h1 {
    width: 88%;
    height: 0.9rem;
    background-color: var(--color-carbon);         /* titular principal, claramente mayor */
}
.web-tidy__h2 {
    width: 54%;
    height: 0.5rem;
    background-color: var(--color-carbon);         /* subtítulo: jerarquía real */
}
.web-tidy__line {
    width: 100%;
    height: 0.32rem;
    background-color: rgb(23 23 21 / 0.12);
}
.web-tidy__line--short { width: 66%; }
.web-tidy__btn {
    width: 3.2rem;
    height: 0.85rem;
    margin-top: var(--space-2xs);
    background-color: var(--color-azul);           /* CTA en su sitio, dentro de la banda hero */
}
.web-tidy__media {
    align-self: stretch;
    min-height: 4rem;
    background-color: var(--color-piedra);
}

/* Tres módulos secundarios, alineados */
.web-tidy__modules {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}
.web-tidy__module {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.web-tidy__m-media {
    aspect-ratio: 3 / 2;
    background-color: var(--color-piedra);
    position: relative;
}
.web-tidy__m-line {
    height: 0.3rem;
    background-color: rgb(23 23 21 / 0.12);
}
.web-tidy__m-line--short { width: 55%; }
/* Microdetalle Cereal, discreto y en su sitio */
.web-tidy__module:last-child .web-tidy__m-media::after {
    content: "";
    position: absolute;
    bottom: 0.35rem;
    left: 0.35rem;
    width: 0.35rem;
    height: 0.35rem;
    background-color: var(--color-cereal);
}

/* >= 48rem · proporción apaisada de "objeto presentado"; los módulos
   se anclan al pie dentro de esa altura fija. */
@media (min-width: 48rem) {
    .web-tidy {
        aspect-ratio: 16 / 11;
        overflow: hidden;
    }
    .web-tidy__modules {
        margin-top: auto;
    }
}

/* --- Tres principios · columnas editoriales ------------ */
/* Mismo lenguaje que el bloque de principios de aplicaciones.php
   (número · título · texto · líneas finas · espacio), clases propias. */

.web-solution__principles {
    display: grid;
    grid-template-columns: 1fr;
    /* Mockup ↓ principios: un escalón menos que intro ↓ mockup (W9). */
    margin-top: clamp(var(--space-lg), 4vw, var(--space-xl));
    border-top: 1px solid var(--border);
}

.web-solution__principle {
    padding-block: clamp(var(--space-md), 4vw, var(--space-lg));
}
.web-solution__principle + .web-solution__principle {
    border-top: 1px solid var(--border);
}

.web-solution__num {
    font-family: var(--font-mono);
    font-size: var(--fs-300);
    color: var(--text-strong);
}
.web-solution__principle-title {
    max-width: 20ch;
    margin-top: var(--space-2xs);
    font-size: var(--fs-400);
    line-height: var(--lh-snug);
    color: var(--text-strong);
    text-wrap: balance;
}
.web-solution__principle-text {
    max-width: 36ch;
    margin-top: var(--space-sm);
    color: var(--text-muted);
}

/* --- >= 52rem · principios en 3 columnas --------------- */

@media (min-width: 52rem) {
    .web-solution__principles {
        grid-template-columns: repeat(3, 1fr);
        column-gap: clamp(var(--space-lg), 5vw, var(--space-2xl));
    }
    .web-solution__principle {
        padding-inline-end: clamp(var(--space-md), 3vw, var(--space-xl));
    }
    .web-solution__principle + .web-solution__principle {
        border-top: 0;
        border-inline-start: 1px solid var(--border);
        padding-inline-start: clamp(var(--space-lg), 5vw, var(--space-2xl));
    }
}


/* =========================================================================
   SECCIÓN · Qué podemos construir
   -------------------------------------------------------------------------
   Cambio fuerte de ritmo: fondo Carbón, texto Cal (W3 Cal → W4 Carbón).
   Necesidades, no paquetes: seis tipos de web definidos por su objetivo.
   Retícula editorial 3×2 con líneas finas en cruz (gap de 1px) y un
   microgesto gráfico secundario por elemento derivado de estructuras web.
   El 06 (funciones a medida) lleva un microacento Azul como puente hacia
   las aplicaciones. Sin cards, sin min-height.
   ========================================================================= */

.web-build {
    padding-block: var(--space-section);
    background-color: var(--bg-invert);            /* Carbón #171715 */
    color: var(--text-invert);                     /* Cal */
}

/* --- Cabecera + introducción ---------------------------- */

.web-build__head {
    max-width: 46rem;
    margin-bottom: var(--space-block);
}

.web-build__eyebrow {
    display: block;
    margin-bottom: var(--space-md);
    color: var(--color-piedra);                    /* claro sobre Carbón */
}

.web-build__title {
    max-width: 24ch;
    font-size: clamp(1.6rem, 1.15rem + 2.2vw, 2.75rem);   /* protagonista, aún < H1 del Hero */
    line-height: var(--lh-snug);
    letter-spacing: -0.015em;
    color: var(--text-invert);
    text-wrap: balance;
}

.web-build__text {
    max-width: 52ch;
    margin-top: var(--space-md);
    font-size: var(--fs-300);
    line-height: var(--lh-base);
    color: rgb(247 245 239 / 0.72);               /* secundario sobre oscuro */
}

/* --- Retícula de tipos --------------------------------- */
/* Líneas finas en cruz = el gap de 1px de la retícula sobre --border-on-dark.
   Sin recuadro exterior (no son cards). Distinta del bloque de Aplicaciones,
   que separa las columnas solo con espacio y sin líneas verticales. */

.web-build__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    margin-top: var(--space-block);
    background-color: var(--border-on-dark);
    border-top: 1px solid var(--border-on-dark);
}

.web-build__item {
    background-color: var(--bg-invert);           /* Carbón: solo se ven las líneas de 1px */
    padding: clamp(var(--space-lg), 5vw, var(--space-xl)) 0;
}

.web-build__num {
    font-family: var(--font-mono);
    font-size: var(--fs-300);
    color: rgb(247 245 239 / 0.6);
}

.web-build__item-title {
    margin-top: var(--space-2xs);
    font-size: var(--fs-300);                     /* títulos contenidos, escaneables */
    color: var(--text-invert);
}

.web-build__item-text {
    max-width: 40ch;
    margin-top: var(--space-sm);
    color: rgb(247 245 239 / 0.72);
}

/* --- Microgestos gráficos (secundarios) ---------------- */
/* 2–4 formas por elemento, derivadas de estructuras web. Tono tenue sobre
   Carbón; el contenido manda. Azul solo en el 06, Cereal solo en el 03. */

.web-build__gesture {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 2.5rem;
    margin-top: var(--space-md);
}
.web-build__gesture > span {
    background-color: rgb(247 245 239 / 0.16);
}

/* 01 · corporativa: barra de navegación + bloque hero */
.web-build__gesture--corp > span:nth-child(1) { height: 0.28rem; }
.web-build__gesture--corp > span:nth-child(2) { height: 0.85rem; }

/* 02 · servicios: lista de tres filas iguales */
.web-build__gesture--list > span { height: 0.34rem; }
.web-build__gesture--list > span:nth-child(2) { width: 78%; }
.web-build__gesture--list > span:nth-child(3) { width: 88%; }

/* 03 · catálogo: mini retícula 2×2 (una celda Cereal) */
.web-build__gesture--grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 0.6rem;
}
.web-build__gesture--grid > span:nth-child(3) {
    background-color: var(--color-cereal);        /* único microdetalle Cereal de la sección */
}

/* 04 · landing: un solo bloque enfocado + una barra (CTA) */
.web-build__gesture--focus > span:nth-child(1) { height: 1rem; }
.web-build__gesture--focus > span:nth-child(2) { height: 0.3rem; width: 55%; }

/* 05 · contenidos: feed de entradas de anchos distintos */
.web-build__gesture--feed > span { height: 0.26rem; }
.web-build__gesture--feed > span:nth-child(1) { width: 100%; }
.web-build__gesture--feed > span:nth-child(2) { width: 70%; }
.web-build__gesture--feed > span:nth-child(3) { width: 90%; }
.web-build__gesture--feed > span:nth-child(4) { width: 60%; }

/* 06 · funciones a medida: bloque + elemento activo (Azul) + bloque */
.web-build__gesture--fn > span { height: 0.34rem; }
.web-build__gesture--fn > span:nth-child(2) {
    width: 0.9rem;
    height: 0.5rem;
    background-color: var(--accent);              /* microacento Azul · puente a aplicaciones */
}

/* --- Frase final (independiente, no un séptimo tipo) --- */

.web-build__close {
    max-width: 48ch;
    margin-top: clamp(var(--space-lg), 5vw, var(--space-xl));
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border-on-dark);
    font-size: var(--fs-300);
    color: rgb(247 245 239 / 0.72);
}

/* --- >= 40rem · 2 columnas × 3 filas ------------------- */

@media (min-width: 40rem) {
    .web-build__list {
        grid-template-columns: 1fr 1fr;
    }
    .web-build__item {
        padding-inline: clamp(var(--space-md), 3vw, var(--space-lg));
    }
    .web-build__item:nth-child(odd)  { padding-inline-start: 0; }
    .web-build__item:nth-child(even) { padding-inline-end: 0; }
}

/* --- >= 60rem · 3 columnas × 2 filas ------------------- */

@media (min-width: 60rem) {
    .web-build__list {
        grid-template-columns: repeat(3, 1fr);
    }
    .web-build__item:nth-child(odd),
    .web-build__item:nth-child(even) {
        padding-inline: clamp(var(--space-md), 2.4vw, var(--space-lg));
    }
    .web-build__item:nth-child(3n+1) { padding-inline-start: 0; }
    .web-build__item:nth-child(3n)   { padding-inline-end: 0; }
}


/* =========================================================================
   SECCIÓN · Cómo trabajamos una web
   -------------------------------------------------------------------------
   Vuelve a fondo Cal (W4 Carbón → W5 Cal): nueva fase narrativa. Cómo
   llega REBLE hasta la web: cuatro etapas editoriales (objetivo → contenido
   → experiencia → construcción). Un microvisual por etapa representa una
   estructura que va adquiriendo definición. Sin cards, sin círculos, sin
   flechas, sin timeline. Sin min-height.
   ========================================================================= */

.web-flow {
    padding-block: var(--space-section-sm);
    background-color: var(--bg-page);               /* Cal */
}

/* --- Cabecera (el titular domina) --------------------- */

.web-flow__head {
    max-width: 44rem;
    margin-bottom: var(--space-block);
}

.web-flow__eyebrow {
    display: block;
    margin-bottom: var(--space-md);
}

.web-flow__title {
    max-width: 26ch;
    font-size: clamp(1.6rem, 1.2rem + 1.9vw, 2.4rem);   /* titular protagonista, < H1 del Hero */
    line-height: var(--lh-snug);
    letter-spacing: -0.015em;
    color: var(--text-strong);
    text-wrap: balance;
}

.web-flow__intro {
    max-width: 50ch;
    margin-top: var(--space-md);
    color: var(--text-strong);
}
.web-flow__intro > p + p {
    margin-top: var(--space-sm);
}
.web-flow__lead {
    font-size: var(--fs-300);
    font-weight: var(--fw-medium);                  /* "no necesitas llegar con todo decidido" */
}

/* --- Secuencia 01–04 --------------------------------- */
/* Una línea fina conecta las etapas (el border-top de la lista); en desktop
   se añaden filetes verticales entre etapas. Ni círculos ni flechas. */

.web-flow__list {
    display: grid;
    grid-template-columns: 1fr;
    border-top: 1px solid var(--border);
}

.web-flow__step {
    padding-block: var(--space-lg);
}
.web-flow__step + .web-flow__step {
    border-top: 1px solid var(--border);
}

.web-flow__num {
    margin-top: var(--space-2xs);
    font-family: var(--font-mono);
    font-size: var(--fs-300);
    color: var(--text-strong);
}

.web-flow__step-title {
    margin-top: var(--space-2xs);
    font-size: var(--fs-300);                       /* etapas secundarias: no compiten con la cabecera */
    color: var(--text-strong);
}

.web-flow__step-text {
    max-width: 34ch;
    margin-top: var(--space-sm);
    color: var(--text-muted);
}

/* --- Microvisual · una estructura que gana definición --- */
/* Mini-retícula 4×5. Piedra para bloques, Carbón para la cabecera; Azul solo
   en 03 (interacción), Cereal solo en 04 (detalle). No hay un color por
   etapa: la evolución se lee por cuánta estructura tiene cada estado. */

.web-flow__viz {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 2px;
    width: 2.4rem;
    aspect-ratio: 4 / 5;
    padding: 3px;
    margin-bottom: var(--space-sm);
    border: 1px solid var(--border);
    background-color: var(--color-cal);
}
.web-flow__viz > span {
    border-radius: 1px;
    background-color: var(--color-piedra);
}
.web-flow__viz .v-head { background-color: var(--color-carbon); }   /* cabecera de la "página" */

/* 01 · intención — dos elementos, uno poco definido */
.web-flow__viz--s1 > span:nth-child(1) { grid-area: 1 / 1 / 2 / 5; }
.web-flow__viz--s1 .v-soft { grid-area: 3 / 1 / 6 / 5; opacity: 0.4; }

/* 02 · estructura — cabecera + dos columnas + base */
.web-flow__viz--s2 > span:nth-child(1) { grid-area: 1 / 1 / 2 / 4; }
.web-flow__viz--s2 > span:nth-child(2) { grid-area: 2 / 1 / 4 / 3; }
.web-flow__viz--s2 > span:nth-child(3) { grid-area: 2 / 3 / 4 / 5; }
.web-flow__viz--s2 > span:nth-child(4) { grid-area: 4 / 1 / 6 / 5; }

/* 03 · interfaz — aparece un componente y un elemento de interacción (Azul) */
.web-flow__viz--s3 > span:nth-child(1) { grid-area: 1 / 1 / 2 / 4; }
.web-flow__viz--s3 > span:nth-child(2) { grid-area: 2 / 1 / 4 / 3; }
.web-flow__viz--s3 > span:nth-child(3) { grid-area: 2 / 3 / 3 / 5; }
.web-flow__viz--s3 .v-blue { grid-area: 3 / 3 / 4 / 4; background-color: var(--accent); }
.web-flow__viz--s3 > span:nth-child(5) { grid-area: 4 / 1 / 6 / 5; }

/* 04 · composición completa — cabecera + hero + dos módulos + detalle Cereal */
.web-flow__viz--s4 > span:nth-child(1) { grid-area: 1 / 1 / 2 / 4; }
.web-flow__viz--s4 > span:nth-child(2) { grid-area: 2 / 1 / 4 / 5; }
.web-flow__viz--s4 > span:nth-child(3) { grid-area: 4 / 1 / 6 / 3; }
.web-flow__viz--s4 > span:nth-child(4) { grid-area: 4 / 3 / 6 / 5; }
.web-flow__viz--s4 .v-warm { grid-area: 1 / 4 / 2 / 5; background-color: var(--color-cereal); }

/* --- >= 38rem · 2 × 2 ------------------------------- */

@media (min-width: 38rem) {
    .web-flow__list {
        grid-template-columns: 1fr 1fr;
        column-gap: clamp(var(--space-lg), 5vw, var(--space-2xl));
    }
    .web-flow__step + .web-flow__step { border-top: 0; }
    .web-flow__step:nth-child(n+3) { border-top: 1px solid var(--border); }
}

/* --- >= 60rem · cuatro etapas en fila, con filete vertical --- */

@media (min-width: 60rem) {
    .web-flow__list {
        grid-template-columns: repeat(4, 1fr);
        column-gap: clamp(var(--space-md), 3vw, var(--space-xl));
    }
    .web-flow__step:nth-child(n+3) { border-top: 0; }
    .web-flow__step + .web-flow__step {
        border-inline-start: 1px solid var(--border);
        padding-inline-start: clamp(var(--space-md), 3vw, var(--space-xl));
    }
    .web-flow__step-text { max-width: none; }
}


/* =========================================================================
   SECCIÓN · Después de publicar
   -------------------------------------------------------------------------
   Fondo Piedra (W5 Cal → W6 Piedra). Bloque BREVE de continuidad: publicar
   no congela la web. Cabecera en dos columnas (eyebrow + titular | texto)
   y tres ámbitos en fila (Mantener · Actualizar · Evolucionar). Sin cards,
   sin botón, sin mockup. Notablemente más compacta que W2–W5: es una pausa
   antes del CTA final. Sin min-height.
   ========================================================================= */

.web-care {
    padding-block: clamp(var(--space-lg), 5vw, var(--space-xl));   /* más compacta que --space-section-sm */
    background-color: var(--bg-surface);           /* Piedra #E8E4DC */
}

/* --- Cabecera en dos columnas -------------------------- */

.web-care__head {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.web-care__eyebrow {
    display: block;
    margin-bottom: var(--space-sm);
}

.web-care__title {
    max-width: 22ch;
    font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.15rem);   /* escala de pausa: menor que los h2 de W3/W5 */
    line-height: var(--lh-snug);
    letter-spacing: -0.015em;
    color: var(--text-strong);
    text-wrap: balance;
}

.web-care__lede {
    max-width: 48ch;
    color: var(--text-strong);
}
.web-care__lede > p + p {
    margin-top: var(--space-sm);
}
.web-care__note {
    color: var(--text-muted);                     /* "sin añadir por añadir": matiz, no titular */
}

/* --- Tres ámbitos en fila ----------------------------- */

.web-care__list {
    display: grid;
    grid-template-columns: 1fr;
    border-top: 1px solid var(--border);
}

.web-care__item {
    padding-block: var(--space-md);
}
.web-care__item + .web-care__item {
    border-top: 1px solid var(--border);
}

.web-care__item-title {
    margin-top: var(--space-2xs);
    font-size: var(--fs-300);
    color: var(--text-strong);
}

.web-care__item-text {
    max-width: 34ch;
    margin-top: var(--space-2xs);
    color: var(--text-muted);
}

/* --- Microgesto de evolución (secundario) ------------- */
/* Tres módulos pequeños que van incorporando un elemento: 1 → 2 → 3.
   En "Actualizar" el nuevo módulo lleva un toque Cereal; en "Evolucionar",
   el elemento incorporado es Azul. Único microdetalle de cada color. */

.web-care__gesture {
    display: flex;
    gap: 3px;
    height: 0.5rem;
}
.web-care__gesture > span {
    width: 0.5rem;
    background-color: rgb(23 23 21 / 0.14);
}
.web-care__gesture .v-warm { background-color: var(--color-cereal); }
.web-care__gesture .v-blue { background-color: var(--accent); }

/* --- >= 40rem · cabecera y ámbitos en horizontal ------ */

@media (min-width: 40rem) {
    .web-care__head {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
        column-gap: clamp(var(--space-lg), 6vw, var(--space-2xl));
        align-items: start;
    }

    .web-care__list {
        grid-template-columns: repeat(3, 1fr);
        column-gap: clamp(var(--space-md), 4vw, var(--space-xl));
    }
    .web-care__item + .web-care__item {
        border-top: 0;
    }
}


/* =========================================================================
   SECCIÓN · CTA final
   -------------------------------------------------------------------------
   Cierre de web.php. Única gran superficie Azul REBLE de la página
   (W6 Piedra → W7 Azul, directa; después, footer global sobre Cal).
   Composición editorial en dos zonas: izquierda eyebrow + titular ·
   derecha texto + botón. No es una landing centrada. Sección compacta/
   media (más presencia que W6, sin ser otra pantalla completa). Sin
   min-height. Sin texto Cereal sobre Azul.
   ========================================================================= */

.web-cta {
    padding-block: clamp(var(--space-xl), 7vw, var(--space-2xl));   /* más presencia que W6, sin llenar la pantalla */
    background-color: var(--accent);                /* Azul REBLE #315CFF */
    color: var(--text-invert);                      /* Cal */
}

/* Foco visible sobre Azul: aro Cal (el azul del foco no se vería). */
.web-cta :focus-visible {
    outline-color: var(--text-invert);
}

.web-cta__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

.web-cta__eyebrow {
    display: block;
    margin-bottom: var(--space-md);
    color: var(--color-on-accent);                  /* blanco: contraste máximo para el label pequeño */
}

.web-cta__title {
    max-width: 20ch;
    font-size: clamp(1.8rem, 1.3rem + 2.2vw, 2.75rem);   /* presencia de cierre, aún < H1 del Hero */
    line-height: var(--lh-tight);
    letter-spacing: -0.02em;
    color: var(--text-invert);                      /* Cal */
    text-wrap: balance;
}

.web-cta__text {
    max-width: 42ch;
    font-size: var(--fs-300);
    line-height: var(--lh-base);
    color: var(--text-invert);                      /* Cal */
}
.web-cta__text + .web-cta__text {
    margin-top: var(--space-sm);
}

.web-cta__actions {
    margin-top: var(--space-lg);
}

/* Detalle de identidad: una pequeña estructura de 3 módulos ya ordenados
   (barra + tres módulos). Discreta; el CTA funciona sin ella.
   Tonos Cal translúcidos sobre Azul + un microdetalle Cereal no textual. */
.web-cta__mark {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    width: 3.4rem;
    margin-top: var(--space-xl);
}
.web-cta__mark > span {
    height: 0.55rem;
    background-color: rgb(247 245 239 / 0.55);
}
.web-cta__mark > span:nth-child(1) {                /* barra: la estructura tiene cabecera */
    grid-column: 1 / -1;
    height: 0.34rem;
    background-color: rgb(247 245 239 / 0.9);
}
.web-cta__mark > span:nth-child(4) {                /* microdetalle Cereal, no textual */
    background-color: var(--color-cereal);
}

/* --- >= 48rem · dos zonas: eyebrow + titular | texto + botón --- */

@media (min-width: 48rem) {
    .web-cta__inner {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
        column-gap: clamp(var(--space-xl), 6vw, var(--space-2xl));
        align-items: start;
    }
}