/* =========================================================================
   home.css — Estilos propios de la Home.
   Secciones: Hero · Encaje · Servicios · Proyectos · Método ·
   Filosofía + Origen · CTA final.
   Lo reutilizable (sistema de piezas, enlaces, header, footer) vive en
   components.css.

   Ritmo vertical: cada sección usa --space-section (padding-block, vía la
   clase .section) y --space-block para separar bloques dentro de ella.
   ========================================================================= */

/* ---------------------------------------------------------------
   HERO
   Móvil : texto y, debajo, la composición.
   >=60rem: texto (con más peso) a la izquierda, composición a la derecha.
   --------------------------------------------------------------- */

.hero {
    padding-block: var(--space-section);
}

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

/* --- Bloque de texto -------------------------------------------- */

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

.hero__title {
    /* Presencia fuerte pero editorial: peso medio, no pesado. */
    font-size: clamp(2.5rem, 1.1rem + 5.4vw, 4.75rem);
    line-height: 1.06;
    letter-spacing: -0.025em;
    text-wrap: wrap;            /* corte natural por ancho (anula el "balance" de base.css) */
    max-width: 13ch;           /* reparto "Tecnología que / encaja en tu / negocio." de móvil a desktop */
}

/* Acento Cereal tras "negocio." — gesto gráfico mínimo, no una pieza más.
   Punto pequeño, ligeramente irregular; no compite con la palabra. */
.hero__mark {
    display: inline-block;
    width: 0.15em;
    height: 0.15em;
    margin-left: 0.16em;
    border-radius: 1px 2px 1px 1px;
    background-color: var(--color-cereal);
    transform: rotate(-6deg);
    vertical-align: 0.22em;
}

.hero__lead {
    max-width: 42ch;
    margin-top: var(--space-md);
    font-size: var(--fs-300);
    line-height: var(--lh-base);
    color: var(--text-strong);
}

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

/* --- Bloque visual: composición + microcopy ------------------- */

.hero__visual {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);          /* microcopy pegado a la composición */
    align-items: flex-start;
    min-width: 0;
}

.hero__composition {
    /* Retícula 10×9 con pistas ligeramente desiguales: la irregularidad
       se percibe antes de verse y disuelve la sensación de grid. */
    grid-template-columns:
        1.05fr 0.92fr 1fr 1.08fr 0.95fr 1.04fr 0.9fr 1fr 1.06fr 0.96fr;
    grid-template-rows:
        1fr 0.95fr 1.08fr 0.93fr 1.04fr 0.92fr 1.06fr 0.95fr 1fr;
    --reble-gap: clamp(0.35rem, 1vw, 0.55rem);
    aspect-ratio: 10 / 8;          /* algo apaisada: no compite en altura con el H1 */
    width: 100%;
    max-width: 24rem;
}

/* Cada pieza: posición en la retícula + jerarquía de proporciones +
   irregularidad muy contenida (rotación <= 1.2°, esquinas distintas, un
   único chaflán). Nada de rectángulos perfectos perfectamente alineados.

     a  protagonista (Piedra)      d  vertical larga (Cal)
     b  horizontal larga (Piedra)  e  acento pequeño (Cereal)
     c  peso / jerarquía (Carbón)  f  acento pequeño (Azul)

   Las piezas se agrupan y escalonan a la izquierda (a·d juntas, c bajo
   ellas desplazada, b como base). La derecha queda casi vacía: hueco
   donde "podrían encajar" más piezas sin cerrar el bloque. */
.hero__piece--a {
    grid-area: 1 / 1 / 5 / 5;        /* 4x4 · masa principal */
    --rp-x: -0.08rem;
    --rp-y: -0.12rem;
    --rp-rot: -0.5deg;
    border-radius: 0 0 3px 0;
}
.hero__piece--d {
    grid-area: 1 / 6 / 6 / 8;        /* 2x5 · vertical, junto a "a" */
    --rp-x: -0.12rem;
    --rp-y: 0.08rem;
    --rp-rot: -1deg;
    border-radius: 3px 2px 2px 3px;
}
.hero__piece--c {
    grid-area: 6 / 3 / 8 / 7;        /* 4x2 · bloque de peso, desplazado */
    --rp-x: 0.10rem;
    --rp-rot: 0.45deg;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 4% 100%, 0 91%);  /* chaflán mínimo */
}
.hero__piece--b {
    grid-area: 8 / 1 / 10 / 8;       /* 7x2 · base horizontal larga */
    --rp-x: 0.08rem;
    --rp-y: 0.04rem;
    --rp-rot: 0.4deg;
    border-radius: 2px 3px 2px 2px;
}
.hero__piece--e {
    grid-area: 2 / 8 / 3 / 9;        /* 1x1 · acento mínimo encajado junto a "d" */
    --rp-x: 0.06rem;
    --rp-y: -0.04rem;
    --rp-rot: -1.5deg;
    border-radius: 1px 2px 1px 1px;
}
.hero__piece--f {
    grid-area: 8 / 8 / 9 / 9;        /* 1x1 · acento mínimo, encaja sobre la base */
    --rp-x: -0.10rem;
    --rp-y: -0.04rem;
    --rp-rot: 1deg;
    border-radius: 1px;
}

/* --- Microcopy: anotación editorial pegada a la composición -- */

.hero__aside {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    max-width: 26ch;
    font-size: var(--fs-100);
    line-height: var(--lh-snug);
}

.hero__aside-line {
    color: var(--text-strong);
}

.hero__aside-line--accent {
    display: inline-flex;
    align-items: baseline;
    gap: 0.6ch;
    color: var(--text-muted);
}

/* Detalle Cereal mínimo junto a "También cada proyecto." */
.hero__aside-line--accent::before {
    content: "";
    flex: none;
    align-self: center;
    width: 0.36rem;
    height: 0.36rem;
    border-radius: 1px 2px 1px 1px;
    background-color: var(--color-cereal);
    transform: rotate(-6deg);
}

/* ---------------------------------------------------------------
   >= 48rem  ·  tablet: texto | composición en fila.
   Sin la altura mínima de desktop, para que la tablet no parezca
   un móvil estirado pero tampoco reserve bandas vacías.
   --------------------------------------------------------------- */

@media (min-width: 48rem) {

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

    .hero__content {
        flex: 1 1 56%;
    }

    .hero__visual {
        flex: 1 1 44%;
        align-items: flex-end;
    }

    .hero__composition {
        max-width: 24rem;
        margin-left: auto;
    }

    .hero__aside {
        align-self: flex-end;
        text-align: right;
    }

    .hero__aside-line--accent {
        flex-direction: row-reverse;   /* marca a la derecha al alinear a la derecha */
    }
}

/* ---------------------------------------------------------------
   >= 60rem  ·  desktop: presencia controlada.
   min-height y padding-block NO se suman: el padding baja a
   --space-block para que el Hero no genere bandas vacías y se
   intuya que hay contenido debajo.
   --------------------------------------------------------------- */

@media (min-width: 60rem) {

    .hero {
        display: flex;
        align-items: center;
        min-height: min(70svh, 34rem);
        padding-block: var(--space-block);
    }

    .hero__inner {
        gap: clamp(var(--space-xl), 7vw, 6rem);
        width: 100%;
    }

    .hero__content {
        flex: 1 1 58%;
    }

    .hero__visual {
        flex: 1 1 42%;
    }

    .hero__composition {
        max-width: 31rem;
    }
}


/* =========================================================================
   SECCIÓN · Encaje — "Tu negocio no tiene que adaptarse al software"
   -------------------------------------------------------------------------
   Fondo Piedra (transición Cal → Piedra respecto al Hero).
   Explica solo el PRINCIPIO: eyebrow (<p>) + <h2> + texto de apoyo, con
   UNA composición abstracta de piezas (piezas diferentes → una estructura
   que encaja). El proceso 01–04 se explica únicamente en "Método".

   Móvil   : texto y, debajo, la composición.
   >=48rem : composición a la izquierda, texto a la derecha.
   >=60rem : + división vertical fina entre ambas zonas.
   ========================================================================= */

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

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

/* --- Texto ------------------------------------------------------ */
/* El eyebrow es un <p>; el <h2> visible y el heading semántico coinciden. */

.problem__content {
    min-width: 0;
    max-width: 42rem;
}

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

/* Detalle Cereal discreto delante del eyebrow (mismo gesto que el Hero). */
.problem__eyebrow::before {
    content: "";
    display: inline-block;
    width: 0.42rem;
    height: 0.42rem;
    margin-right: 0.7ch;
    border-radius: 1px 2px 1px 1px;
    background-color: var(--color-cereal);
    transform: translateY(-0.02em) rotate(-6deg);
}

.problem__title {
    max-width: 20ch;
    font-size: clamp(1.5rem, 1.05rem + 2.1vw, 2.4rem);
    line-height: var(--lh-snug);
    letter-spacing: -0.01em;
    color: var(--text-strong);
    text-wrap: balance;
}

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

/* --- Visual: UNA sola composición ---------------------------- */
/* Piezas de distinta proporción (Piedra · Carbón · Cal · módulo abierto)
   que encajan en un único rectángulo coherente. Irregularidad mínima
   (rotación <= 1.2°). El módulo abierto deja ver el vacío como parte del
   sistema. Sin pasos, sin números: el proceso se explica en "Método". */

.problem__visual {
    min-width: 0;
}

.problem__composition {
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(4, 1fr);
    --reble-gap: clamp(0.35rem, 1.4vw, 0.6rem);
    aspect-ratio: 7 / 4;
    width: 100%;
    max-width: 26rem;
}

.problem__piece {
    border-radius: var(--radius-sm);
}

.problem__piece--1 {                 /* Piedra · pieza protagonista */
    grid-area: 1 / 1 / 4 / 4;
    --rp-rot: -0.6deg;
    --rp-x: -0.06rem;
}
.problem__piece--2 {                 /* Carbón · bloque de peso */
    grid-area: 1 / 4 / 3 / 6;
    --rp-rot: 0.8deg;
}
.problem__piece--3 {                 /* Cal · base apaisada que cierra el conjunto */
    grid-area: 3 / 4 / 5 / 8;
    --rp-rot: -0.4deg;
    --rp-x: 0.08rem;
}
.problem__piece--4 {                 /* módulo abierto · el vacío también encaja */
    grid-area: 1 / 6 / 3 / 8;
    --rp-rot: 1.1deg;
}
.problem__piece--5 {                 /* Piedra · apoyo bajo la protagonista */
    grid-area: 4 / 1 / 5 / 4;
    --rp-rot: 0.5deg;
    --rp-y: 0.06rem;
}

/* --- >= 48rem · tablet: composición | texto ------------------ */

@media (min-width: 48rem) {
    .problem__inner {
        flex-direction: row;
        align-items: flex-start;
        gap: clamp(var(--space-lg), 5vw, var(--space-xl));
    }
    .problem__visual {
        order: -1;                     /* composición a la izquierda */
        flex: 1 1 42%;
    }
    .problem__content {
        flex: 1 1 58%;
    }
}

/* --- >= 60rem · división fina entre visual y texto ---------- */

@media (min-width: 60rem) {
    .problem__inner {
        gap: clamp(var(--space-xl), 6vw, 4.5rem);
    }
    .problem__visual {
        flex: 1 1 44%;
    }
    .problem__content {
        flex: 1 1 56%;
        padding-inline-start: clamp(var(--space-xl), 6vw, 4.5rem);
        border-inline-start: 1px solid var(--border);   /* división fina, Carbón baja opacidad */
    }
}


/* =========================================================================
   SECCIÓN · Servicios / Qué hacemos
   -------------------------------------------------------------------------
   Vuelve a fondo Cal (ritmo Cal → Piedra → Cal).
   Composición ASIMÉTRICA: Aplicaciones a medida ocupa la columna izquierda
   completa; Web y Diseño comparten la derecha. Líneas finas (Carbón a baja
   opacidad) y espacio estructuran la sección — nada de tarjetas, sombras
   ni fondos de color por servicio.
   Jerarquía: H1 Hero  >  titular de sección  >  titulares de servicio.
   ========================================================================= */

.services {
    background-color: var(--bg-page);              /* Cal #F7F5EF */
    /* padding-block lo aporta .section (--space-section) */
}

/* --- Cabecera de sección -------------------------------------- */

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

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

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

/* --- Retícula de servicios ---------------------------------- */

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

.service {
    padding-block: clamp(var(--space-md), 6vw, var(--space-lg));
}

.service + .service {
    border-top: 1px solid var(--border);          /* separador entre servicios (móvil) */
}

.service__label {
    display: block;
    margin-bottom: var(--space-sm);
    color: var(--text-strong);
}

.service__title {
    font-size: var(--fs-400);
}

.service__claim {
    margin-top: var(--space-sm);
    max-width: 34ch;
    font-size: var(--fs-300);
    font-weight: var(--fw-medium);
    line-height: var(--lh-snug);
    color: var(--text-strong);
    text-wrap: pretty;
}

.service--primary .service__claim {
    font-size: clamp(1.2rem, 0.95rem + 1.1vw, 1.6rem);   /* algo más de peso: es el núcleo */
}

/* --- Jerarquía en móvil (< 48rem) --------------------------- */
/* Sin tarjetas ni color: Aplicaciones ocupa más, su titular pesa algo
   más y se separa con aire de Web y Diseño. A partir de 48rem la
   retícula asimétrica ya marca la jerarquía por sí sola. */

@media (max-width: 47.99rem) {
    .service--primary {
        padding-block: clamp(var(--space-lg), 9vw, var(--space-2xl));
    }
    .service--primary .service__title {
        font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
    }
    .service--primary + .service {
        padding-top: clamp(var(--space-lg), 7vw, var(--space-xl));
    }
}

.service__text {
    margin-top: var(--space-md);
    max-width: 46ch;
    color: var(--text-muted);
}

.service__text + .service__text {
    margin-top: var(--space-sm);
}

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

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

/* --- Visual 01 · representación abstracta de una herramienta -- */
/* Piedra / Cal / Carbón + Azul REBLE solo como pequeño estado activo.
   Sin datos, sin gráficos: recurso puramente visual. */

.app-mock {
    width: 100%;
    max-width: 30rem;
    aspect-ratio: 4 / 3;
    display: grid;
    grid-template-rows: auto 1fr;
    background-color: var(--color-cal);
    border: 1px solid var(--border);
}

.app-mock__bar {
    display: flex;
    align-items: center;
    padding: var(--space-2xs) var(--space-xs);
    border-bottom: 1px solid var(--border);
}

.app-mock__bar-seg {
    width: 32%;
    height: 0.5rem;
    background-color: var(--color-piedra);
}

.app-mock__body {
    display: grid;
    grid-template-columns: 26% 1fr;
    min-height: 0;
}

.app-mock__nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding: var(--space-xs);
    border-right: 1px solid var(--border);
    background-color: var(--color-piedra);
}

.app-mock__nav-item {
    height: 0.5rem;
    background-color: rgb(23 23 21 / 0.12);
}
.app-mock__nav-item:nth-child(1) { width: 82%; }
.app-mock__nav-item:nth-child(3) { width: 64%; }
.app-mock__nav-item:nth-child(4) { width: 74%; }
.app-mock__nav-item--active {
    width: 90%;
    background-color: var(--color-azul);          /* estado activo */
}

.app-mock__main {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding: var(--space-sm);
    min-width: 0;
}

.app-mock__row {
    width: 90%;
    height: 0.55rem;
    background-color: var(--color-piedra);
}
.app-mock__row:nth-child(2) { width: 96%; }
.app-mock__row:nth-child(4) { width: 80%; }
.app-mock__row:nth-child(5) { width: 62%; }

.app-mock__row--head {
    width: 44%;
    background-color: var(--color-carbon);
}

.app-mock__row--sel {
    width: 100%;
    border-left: 2px solid var(--color-azul);     /* fila seleccionada */
}

.app-mock__modules {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xs);
    margin-top: auto;
}

.app-mock__mod {
    aspect-ratio: 3 / 2;
    background-color: var(--color-piedra);
}

/* --- Visual 02 · representación abstracta de una web --------- */
/* Sin dispositivos, sin imágenes. Piedra / Cal / Carbón. */

.web-mock {
    width: 100%;
    max-width: 20rem;
    aspect-ratio: 4 / 3;
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding: var(--space-xs);
    background-color: var(--color-cal);
    border: 1px solid var(--border);
}

.web-mock__bar {
    width: 55%;
    height: 0.5rem;
    background-color: var(--color-carbon);
}

.web-mock__hero {
    flex: 0 0 38%;
    background-color: var(--color-piedra);
}

.web-mock__line {
    height: 0.4rem;
    background-color: var(--color-piedra);
}
.web-mock__line--short { width: 60%; }

.web-mock__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xs);
    flex: 1 1 auto;
    margin-top: auto;
}

.web-mock__col {
    background-color: var(--color-piedra);
}

/* --- Visual 03 · sistema modular REBLE --------------------- */

.service__composition {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(4, 1fr);
    --reble-gap: clamp(0.3rem, 1vw, 0.5rem);
    aspect-ratio: 3 / 2;
    width: 100%;
    max-width: 17rem;
}

.service__piece--1 { grid-area: 1 / 1 / 4 / 4; --rp-rot: -0.6deg; }
.service__piece--2 { grid-area: 1 / 5 / 3 / 7; --rp-rot: 0.8deg; --rp-x: -0.06rem; }
.service__piece--3 { grid-area: 4 / 2 / 5 / 5; --rp-rot: 0.4deg; --rp-x: 0.1rem; }
.service__piece--4 { grid-area: 3 / 5 / 4 / 6; --rp-rot: -1.6deg; }   /* Cereal · detalle mínimo */

/* --- >= 48rem · retícula asimétrica -----------------------
   Ya en tablet: Aplicaciones ocupa la columna izquierda a altura
   completa; Web y Diseño comparten la derecha. La jerarquía deja de
   depender del móvil sin parecer un escritorio reducido. */

@media (min-width: 48rem) {

    .services__grid {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    }

    .service + .service {
        border-top: 0;                             /* se anulan los separadores móviles */
    }

    .service--primary {
        grid-column: 1;
        grid-row: 1 / 3;                           /* ocupa toda la altura de la izquierda */
        padding-block: clamp(var(--space-lg), 3.5vw, var(--space-xl));
        padding-inline-end: clamp(var(--space-xl), 5vw, var(--space-2xl));
        border-inline-end: 1px solid var(--border);   /* división vertical entre columnas */
    }

    .service--secondary {
        grid-column: 2;
        padding-block: clamp(var(--space-lg), 3.5vw, var(--space-xl));
        padding-inline-start: clamp(var(--space-xl), 5vw, var(--space-2xl));
    }

    .service--secondary + .service--secondary {
        border-top: 1px solid var(--border);      /* división entre Web y Diseño */
    }
}


/* =========================================================================
   SECCIÓN · Proyectos / "Pocos proyectos. Mucha implicación."
   -------------------------------------------------------------------------
   Cambio de ritmo: fondo Carbón, texto Cal (relación cromática invertida).
   Transición directa Cal → Carbón, sin formas ni degradados.
   Presentación editorial, NO tres tarjetas: el proyecto 01 tiene más peso.
   Contenido DEMO (marcado en index.php) solo para diseñar la interfaz.

   Móvil   : 01 · 02 · 03 en vertical.
   >=60rem : 01 protagonista (visual + datos en dos zonas), 02 y 03 en fila.
   ========================================================================= */

.projects {
    background-color: var(--bg-invert);            /* Carbón #171715 */
    color: var(--text-invert);                     /* Cal — texto principal de la sección */
}

/* Acento / foco / líneas legibles sobre Carbón */
.projects :focus-visible {
    outline-color: var(--accent-on-dark);
}

.projects .link-arrow {
    color: var(--text-invert);
}
.projects .link-arrow:hover,
.projects .link-arrow:focus-visible {
    color: var(--accent-on-dark);
}

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

.projects__header {
    max-width: 42rem;
    margin-bottom: var(--space-block);
}

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

.projects__title {
    max-width: 19ch;                               /* reparto "Pocos proyectos. / Mucha implicación." */
    font-size: clamp(1.6rem, 1.15rem + 2.2vw, 2.75rem);
    line-height: var(--lh-snug);
    letter-spacing: -0.015em;
    text-wrap: pretty;
}

.projects__text {
    margin-top: var(--space-md);
    max-width: 44ch;
    font-size: var(--fs-300);
    color: rgb(247 245 239 / 0.72);                /* secundario, tono Cal atenuado */
}

.projects__cta {
    margin-top: var(--space-md);
}

/* --- Lista de proyectos ------------------------------------- */

.projects__list {
    border-top: 1px solid var(--border-on-dark);
}

.project {
    padding-block: var(--space-block);
}
.project + .project {
    border-top: 1px solid var(--border-on-dark);
}

.project__index {
    margin-bottom: var(--space-sm);
    font-family: var(--font-mono);
    font-size: var(--fs-200);
    color: rgb(247 245 239 / 0.6);
}

.project__meta {
    margin-top: var(--space-md);
}

.project__title {
    font-size: var(--fs-400);
    color: var(--text-invert);
}

.project__tags {
    margin-top: var(--space-2xs);
    font-family: var(--font-mono);
    font-size: var(--fs-100);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: rgb(247 245 239 / 0.6);
}
.project__tag + .project__tag::before {
    content: "/";
    margin-inline: 0.7ch;
    opacity: 0.55;
}

/* Proyecto protagonista */
.project--lead .project__index {
    font-size: var(--fs-300);
}
.project--lead .project__title {
    font-size: var(--fs-500);
}

/* --- Interfaces abstractas (HTML + CSS) --------------------- */
/* Sobre Carbón: superficies Cal/Piedra que destacan por contraste.
   Carbón para estructura, Azul REBLE para estados, Cereal para un
   detalle mínimo. Sin datos, sin gráficos, sin capturas. */

.project-ui {
    width: 100%;
    background-color: var(--color-cal);
    overflow: hidden;
}

.project-ui__bar {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-2xs) var(--space-xs);
    border-bottom: 1px solid var(--border);
}
.project-ui__seg {
    width: 22%;
    height: 0.5rem;
    background-color: var(--color-piedra);
}
.project-ui__seg--sm { width: 12%; }
.project-ui__state {
    width: 0.55rem;
    height: 0.55rem;
    margin-left: auto;
    background-color: var(--color-azul);           /* estado / acción */
}

.project-ui__body {
    display: grid;
    grid-template-columns: 22% 1fr;
    min-height: 0;
}

.project-ui__nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding: var(--space-xs);
    border-right: 1px solid var(--border);
    background-color: var(--color-piedra);
}
.project-ui__nav-item {
    height: 0.5rem;
    background-color: rgb(23 23 21 / 0.12);
}
.project-ui__nav-item:nth-child(1) { width: 86%; }
.project-ui__nav-item:nth-child(3) { width: 64%; }
.project-ui__nav-item:nth-child(4) { width: 78%; }
.project-ui__nav-item--active {
    width: 92%;
    background-color: var(--color-azul);           /* elemento activo */
}

/* Visual 01 · Gestión de pedidos — nav + filtros + listado + módulos */

.project-ui--orders {
    aspect-ratio: 16 / 10;
}
.project-ui--orders .project-ui__main {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding: var(--space-sm);
}
.project-ui__filters {
    display: flex;
    gap: var(--space-2xs);
    margin-bottom: var(--space-2xs);
}
.project-ui__chip {
    width: 15%;
    height: 0.5rem;
    background-color: rgb(23 23 21 / 0.1);
}
.project-ui__chip--flag {
    background-color: var(--color-cereal);         /* detalle mínimo */
}
.project-ui__row {
    width: 92%;
    height: 0.55rem;
    background-color: var(--color-piedra);
}
.project-ui__row:nth-child(5) { width: 84%; }
.project-ui__row:nth-child(6) { width: 64%; }
.project-ui__row--head {
    width: 42%;
    background-color: var(--color-carbon);         /* estructura */
}
.project-ui__row--sel {
    width: 100%;
    border-left: 2px solid var(--color-azul);      /* fila seleccionada */
}
.project-ui__modules {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xs);
    margin-top: auto;
}
.project-ui__mod {
    aspect-ratio: 5 / 2;
    background-color: var(--color-piedra);
}

/* Visual 02 · Plataforma de reservas — rejilla tipo calendario */

.project-ui--booking {
    aspect-ratio: 16 / 11;
    display: flex;
    flex-direction: column;
}
.project-ui--booking .project-ui__calendar {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    align-content: start;
    gap: var(--space-3xs);
    padding: var(--space-xs);
}
.project-ui__cell {
    aspect-ratio: 1;
    background-color: var(--color-piedra);
}
.project-ui__cell--head {
    aspect-ratio: 3 / 1;
    background-color: rgb(23 23 21 / 0.1);
}
.project-ui__cell:nth-child(11),
.project-ui__cell:nth-child(17) { background-color: var(--color-carbon); }   /* ocupado */
.project-ui__cell:nth-child(14) { background-color: var(--color-azul); }      /* reserva activa */
.project-ui__cell:nth-child(20) { background-color: var(--color-cereal); }    /* detalle mínimo */
.project-ui__timeline {
    display: flex;
    gap: var(--space-2xs);
    padding: 0 var(--space-xs) var(--space-xs);
}
.project-ui__block {
    flex: 1 1 60%;
    height: 0.6rem;
    background-color: var(--color-piedra);
}
.project-ui__block--sm { flex: 1 1 28%; }

/* Visual 03 · Catálogo de productos — facetas + rejilla de productos */

.project-ui--catalog {
    aspect-ratio: 16 / 10;
}
.project-ui--catalog .project-ui__body {
    grid-template-columns: 20% 1fr;
}
.project-ui--catalog .project-ui__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-content: start;
    gap: var(--space-2xs);
    padding: var(--space-sm);
}
.project-ui__tile {
    aspect-ratio: 4 / 3;
    background-color: var(--color-piedra);
}
.project-ui__tile:nth-child(2) {
    border-top: 2px solid var(--color-azul);       /* producto seleccionado */
}
.project-ui__tile:nth-child(6) {
    position: relative;
}
.project-ui__tile:nth-child(6)::after {
    content: "";
    position: absolute;
    top: 7%;
    right: 7%;
    width: 0.4rem;
    height: 0.4rem;
    background-color: var(--color-cereal);         /* detalle mínimo */
}

/* --- >= 60rem · 01 protagonista + 02/03 en fila ----------- */

@media (min-width: 60rem) {

    .projects__list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: clamp(var(--space-lg), 5vw, var(--space-2xl));
        row-gap: 0;
    }

    /* 01 ocupa el ancho completo y coloca visual + datos en dos zonas */
    .project--lead {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
        grid-template-areas:
            "visual index"
            "visual meta";
        grid-template-rows: auto auto;
        column-gap: clamp(var(--space-lg), 5vw, var(--space-2xl));
        align-content: center;                 /* datos centrados junto al visual grande */
    }
    .project--lead .project__index  { grid-area: index; }
    .project--lead .project__visual { grid-area: visual; align-self: start; }
    .project--lead .project__meta   { grid-area: meta; margin-top: var(--space-md); }
    /* 02 y 03 quedan en la fila inferior; su border-top (regla base)
       traza la línea entre el proyecto 01 y la pareja 02/03. */
}


/* =========================================================================
   SECCIÓN · Nuestro método
   -------------------------------------------------------------------------
   Vuelve a fondo Cal. Pausa editorial tras el bloque oscuro: notablemente
   más compacta que Encaje / Servicios / Proyectos.
   Secuencia 01 → 02 → 03 → 04 organizada solo con retícula, tipografía,
   numeración y líneas finas. Sin piezas, sin iconos, sin cajas.
   "Cuidar" lleva un único gesto diferencial: un pequeño cuadrado Azul.

   Móvil     : pasos apilados, líneas horizontales.
   >=38rem   : 2 × 2.
   >=60rem   : 4 columnas con líneas verticales finas.
   ========================================================================= */

.method {
    background-color: var(--bg-page);              /* Cal #F7F5EF */
    padding-block: var(--space-section-sm);        /* sección más compacta */
}

.method__header {
    max-width: 40rem;
    margin-bottom: var(--space-block);
}

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

.method__title {
    max-width: 24ch;
    font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);   /* por debajo del Hero y algo menor que otras secciones */
    line-height: var(--lh-snug);
    letter-spacing: -0.015em;
    text-wrap: balance;
}

/* --- Los cuatro pasos -------------------------------------------- */
/* Las líneas finas entre pasos son el propio gap de 1px de la retícula
   (color --border) — se adaptan solas a 1, 2 o 4 columnas. */

.method__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;                                       /* la "línea fina" entre pasos ES el gap */
    background-color: var(--border);                /* color de esas líneas */
    border-top: 1px solid var(--border);            /* línea bajo la cabecera */
}

.method__step {
    background-color: var(--bg-page);               /* tapa el fondo; solo se ve el gap de 1px */
    padding-block: var(--space-md);
    padding-inline: var(--method-pad, 0);
}

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

.method__step-title {
    margin-top: var(--space-2xs);
    font-size: var(--fs-400);
}

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

/* Gesto de "Cuidar": un cuadrado Azul mínimo junto al 04.
   No lo hace más grande ni lo convierte en tarjeta destacada. */
.method__step--care .method__num {
    display: inline-flex;
    align-items: center;
    gap: 0.7ch;
}
.method__step--care .method__num::after {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    background-color: var(--accent);                /* Azul REBLE */
}

/* --- >= 38rem · 2 × 2 --------------------------------------- */
/* Cada celda lleva padding lateral (--method-pad) para el "aire" en torno
   a las líneas; el margen negativo de la lista realinea los bordes
   exteriores con el .container (misma alineación que la cabecera). */

@media (min-width: 38rem) {
    .method__list {
        --method-pad: clamp(var(--space-md), 3vw, var(--space-lg));
        grid-template-columns: 1fr 1fr;
        margin-inline: calc(-1 * var(--method-pad));
    }
}

/* --- >= 60rem · 4 columnas -------------------------------- */

@media (min-width: 60rem) {
    .method {
        padding-block: clamp(var(--space-lg), 6vw, var(--space-2xl));
    }
    .method__list {
        --method-pad: clamp(var(--space-sm), 1.8vw, var(--space-md));
        grid-template-columns: repeat(4, 1fr);
    }
    .method__step {
        padding-block: var(--space-lg);
    }
    .method__text {
        max-width: none;                            /* el ancho de columna ya lo limita */
    }
}


/* =========================================================================
   SECCIÓN · Filosofía + Origen
   -------------------------------------------------------------------------
   Fondo Piedra (transición Cal → Piedra). Dos áreas editoriales en UNA
   sola sección para no alargar la Home: FILOSOFÍA | ORIGEN, unidas por el
   hilo pieza → encaje → estructura → forma de trabajar.
   Filosofía pesa algo más. El símbolo REBLE es una representación
   provisional de 3 piezas (marcada en el HTML). Origen es solo tipografía,
   líneas y microcopy — sin fotografía ni gran conjunto de piezas.

   Móvil   : Filosofía y, debajo, Origen (línea horizontal entre ambas).
   >=60rem : Filosofía | Origen con línea vertical fina.
   ========================================================================= */

.essence {
    background-color: var(--bg-surface);           /* Piedra #E8E4DC */
}

.essence__inner {
    display: grid;
    grid-template-columns: 1fr;
}

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

.essence__text {
    margin-top: var(--space-md);
    max-width: 42ch;
    color: var(--text-strong);
}
.essence__text--strong {
    margin-top: var(--space-sm);
    font-weight: var(--fw-medium);
}

/* --- Área 1 · Filosofía ------------------------------------- */

.essence__philosophy {
    padding-bottom: var(--space-block);
}

.essence__title {
    max-width: 26ch;
    font-size: clamp(1.6rem, 1.15rem + 2.1vw, 2.6rem);
    line-height: var(--lh-snug);
    letter-spacing: -0.015em;
    text-wrap: pretty;
    color: var(--text-strong);
}

/* Cereal muy discreto tras "también cada proyecto." — gesto de marca,
   no color de texto (Cereal sobre Piedra no tiene contraste de lectura). */
.essence__title-accent::after {
    content: "";
    display: inline-block;
    width: 0.16em;
    height: 0.16em;
    margin-left: 0.18em;
    border-radius: 1px 2px 1px 1px;
    background-color: var(--color-cereal);
    transform: rotate(-6deg);
    vertical-align: 0.22em;
}

/* --- Símbolo REBLE provisional (3 piezas) ------------------- */
/* Compacto, modular, ligeramente irregular; sugiere una R sin dibujarla.
   Carbón + una intervención Cereal mínima. Sin Azul.
   Al integrar el SVG oficial: se elimina este bloque y el <svg> hereda
   .essence__symbol (tamaño y colocación). */

.essence__symbol {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    --reble-gap: 0.28rem;
    width: clamp(4.5rem, 12vw, 6.5rem);
    aspect-ratio: 4 / 5;
    margin-top: var(--space-xl);
}
.essence__symbol-piece { border-radius: var(--radius-sm); }
.essence__symbol-piece--1 { grid-area: 1 / 1 / 5 / 2; --rp-rot: -1.5deg; }                 /* trazo vertical */
.essence__symbol-piece--2 { grid-area: 1 / 2 / 3 / 5; --rp-rot: 1deg;  --rp-x: 0.05rem; }  /* masa superior */
.essence__symbol-piece--3 { grid-area: 4 / 3 / 5 / 5; --rp-rot: -2deg; --rp-y: 0.05rem; }  /* apoyo · Cereal */

/* --- Área 2 · Origen -------------------------------------- */

.essence__origin {
    padding-top: var(--space-block);
    border-top: 1px solid var(--border);           /* división (móvil) */
}

.essence__origin-label {
    font-family: var(--font-mono);
    font-size: var(--fs-300);
    font-weight: var(--fw-regular);
    letter-spacing: var(--tracking-wide);
    color: var(--text-strong);
}

.essence__origin-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.4ch;
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: var(--fs-100);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-muted);
}

/* --- >= 48rem · Filosofía | Origen ----------------------- */
/* Dos columnas ya en tablet, con la división vertical fina. */

@media (min-width: 48rem) {
    .essence__inner {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.9fr);
        align-items: start;
    }
    .essence__philosophy {
        padding-bottom: 0;
        padding-inline-end: clamp(var(--space-xl), 5vw, var(--space-2xl));
    }
    .essence__origin {
        padding-top: 0;
        border-top: 0;
        padding-inline-start: clamp(var(--space-xl), 5vw, var(--space-2xl));
        border-inline-start: 1px solid var(--border);   /* división vertical, parte de la retícula */
    }
}


/* =========================================================================
   SECCIÓN · CTA final
   -------------------------------------------------------------------------
   Cierre de la Home. Primera gran superficie Azul REBLE: identidad solo con
   color + tipografía + espacio + retícula. Sin piezas, sin degradados, sin
   textura. Transición directa Piedra → Azul.
   El titular domina; el botón usa .btn--light (Cal sobre Azul).

   Móvil   : HABLEMOS · titular · texto · CTA, en vertical.
   >=60rem : HABLEMOS arriba; titular (izq., con más peso) | texto + CTA (der.).
   ========================================================================= */

.cta {
    background-color: var(--accent);               /* Azul REBLE #315CFF */
    color: var(--text-invert);                     /* Cal */
}

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

.cta__inner {
    display: grid;
    grid-template-columns: 1fr;
}

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

.cta__title {
    max-width: 22ch;                               /* 2–3 líneas en desktop, sin <br> */
    font-size: clamp(2rem, 1.35rem + 2.8vw, 3.5rem);   /* con presencia, pero por debajo del H1 del Hero */
    line-height: var(--lh-tight);
    letter-spacing: -0.02em;
    text-wrap: balance;
    color: var(--text-invert);                     /* Cal */
}

.cta__aside {
    margin-top: var(--space-xl);
    max-width: 36ch;
}

.cta__text {
    font-size: clamp(1.2rem, 1.05rem + 0.55vw, 1.45rem);
    line-height: var(--lh-base);
    color: var(--text-invert);                     /* Cal */
}

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

@media (min-width: 60rem) {
    .cta__inner {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
        column-gap: clamp(var(--space-xl), 6vw, var(--space-2xl));
        align-items: start;
    }
    .cta__eyebrow {
        grid-column: 1 / -1;
    }
    .cta__aside {
        margin-top: 0;                             /* alineado con el titular */
    }
}