/* ==========================================================================
   rIL · PÁGINAS DE PROYECTO (portafolio)                 v1.0 · 18/10/2026
   Figma:      «🟠 rIL - Web Design 2026» › página 7203:6321 · frame «Hawaya»
               (7203:6323, 1728 px). Alivia Finance, Opal y Jocca usan la misma
               estructura: hero · bloques · proyecto relacionado.
   Requiere:   ril-home-nueva.css cargado ANTES (tokens, capas, .ril-media,
               .media-text, .link-more, .sun). Este archivo no viene del
               generador de ril-web-temp: se mantiene a mano aquí.
   Retícula:   la maqueta encaja en 12 columnas con 24 px de hueco sobre los
               1648 px útiles (533 = 4 col., 393 = 3, 951 = 7, 812 = 6).
   Vistas:     resources/views/componentes/proyecto/*.blade.php
   Móvil:      Figma no tiene frame móvil: todo se apila en una columna con
               los mismos tokens fluidos que Home y Servicios.
   ========================================================================== */
@layer tokens, reset, base, layout, components, utilities;

/* ───── tokens propios (misma fórmula fluida que tokens-ril) ───── */
@layer tokens {
  :root {
    --fs-proyecto-min:     68; --fs-proyecto-max:     180;   /* título del proyecto (Figma: 180, wdth 75, interlínea 156) */
    --fs-proyecto-rel-min: 54; --fs-proyecto-rel-max: 150;   /* título del proyecto relacionado (Figma: 150, wdth 77) */
    --fs-proyecto-dato-min: 20; --fs-proyecto-dato-max: 25;  /* valores SERVICIOS / SECTOR y «/ 2026» (Figma: 25, wdth 77) */
    --fs-proyecto:      clamp(calc(var(--fs-proyecto-min) * 1rem / 16), calc(var(--fs-proyecto-min) * 1rem / 16 + (var(--fs-proyecto-max) - var(--fs-proyecto-min)) * var(--fluid)), calc(var(--fs-proyecto-max) * 1rem / 16));
    --fs-proyecto-rel:  clamp(calc(var(--fs-proyecto-rel-min) * 1rem / 16), calc(var(--fs-proyecto-rel-min) * 1rem / 16 + (var(--fs-proyecto-rel-max) - var(--fs-proyecto-rel-min)) * var(--fluid)), calc(var(--fs-proyecto-rel-max) * 1rem / 16));
    --fs-proyecto-dato: clamp(calc(var(--fs-proyecto-dato-min) * 1rem / 16), calc(var(--fs-proyecto-dato-min) * 1rem / 16 + (var(--fs-proyecto-dato-max) - var(--fs-proyecto-dato-min)) * var(--fluid)), calc(var(--fs-proyecto-dato-max) * 1rem / 16));
    --proyecto-gap:   calc(14 * 1rem / 16 + 10 * var(--fluid-c));   /* hueco horizontal (Figma: 24; móvil = margen de 14) */
    --proyecto-gap-y: calc(14 * 1rem / 16 + 18 * var(--fluid-c));   /* entre bloques (Figma: 21-50, casi siempre 33) */
  }
}

/* ───── COMPONENTE: .proyecto-media · pieza base (imagen, vídeo o ficha de color) ───── */
@layer components {
  /* ficha de color con logo (Figma: 812 × 497, #0b2f5b, logo 365 de ancho centrado) */
  .proyecto-media--color {
    display: grid;
    place-items: center;
    background-color: var(--proyecto-media-bg);
  }
  .proyecto-media__logo { width: var(--proyecto-logo-w, 45%); height: auto; }
  /* GIF sobre blanco: se funde con el fondo de la ficha */
  .proyecto-media--blend { background-color: transparent; mix-blend-mode: multiply; }
}

@layer layout {
  /* ───── bloques: separación vertical común ───── */
  .proyecto-bloque { position: relative; }
  .proyecto-bloque + .proyecto-bloque { margin-top: var(--proyecto-gap-y); }

  /* ───── SECCIÓN: .proyecto-hero ─────
     Figma: título 180 (top 59 bajo la cabecera) + SERVICIOS/SECTOR a 40 + resumen a 70
            + VISITAR WEB a 36, en 1-4; «/ 2026» (25) y media 812/513 en 6-12, 12 px más abajo.
            173 px hasta la primera imagen. */
  .proyecto-hero { padding-block: calc(24 * 1rem / 16 + 35 * var(--fluid-c)) calc(48 * 1rem / 16 + 125 * var(--fluid-c)); }
  .proyecto-hero__sun { --sun-z: -1; }
  .proyecto-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .proyecto-hero__title {
    font-size: var(--fs-proyecto);
    font-stretch: var(--ril-stretch-display);
    line-height: var(--lh-display);
    letter-spacing: 0;
  }
  /* subtítulo opcional (Alivia / Finance): segunda línea del h1 a un tercio del tamaño, en minúsculas */
  .proyecto-hero__subtitle {
    display: block;
    margin-top: 0.12em;
    font-size: calc(var(--fs-proyecto) * 0.33);
    line-height: 1.1;
    text-transform: none;
  }
  .proyecto-hero__meta {
    display: grid;
    grid-template-columns: minmax(0, 340fr) minmax(0, 168fr);
    gap: calc(20 * 1rem / 16 + 10 * var(--fluid-c));
    margin-top: calc(20 * 1rem / 16 + 20 * var(--fluid-c));
  }
  .proyecto-hero__meta-item { display: grid; gap: var(--space-3xs); align-content: start; }
  .proyecto-hero__label {
    font-size: var(--fs-eyebrow-sm);
    font-weight: var(--fw-medium);
    font-stretch: var(--ril-stretch-label);
    line-height: var(--lh-label);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    opacity: 0.5;
  }
  .proyecto-hero__value, .proyecto-hero__year {
    font-size: var(--fs-proyecto-dato);
    font-weight: var(--ril-fw-black);
    font-stretch: var(--ril-stretch-condensed);
    line-height: 1.2;
    text-transform: uppercase;
  }
  /* servicio enlazado: mismo aspecto, línea de 2 px que se dibuja al pasar (como en Servicios) */
  .proyecto-hero__link { color: inherit; text-decoration: none; }
  .proyecto-hero__link-text {
    background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 2px;
    transition: background-size var(--dur-base) var(--ease-standard);
  }
  .proyecto-hero__link:is(:hover, :focus-visible) .proyecto-hero__link-text { background-size: 100% 2px; }
  .proyecto-hero__summary {
    display: grid;
    justify-items: start;
    gap: calc(24 * 1rem / 16 + 12 * var(--fluid-c));
    margin-top: calc(28 * 1rem / 16 + 42 * var(--fluid-c));
  }
  .proyecto-hero__text { max-width: 25em; font-size: var(--fs-lead); line-height: 1.5; }
  .proyecto-hero__visual { display: grid; gap: calc(12 * 1rem / 16 + 9 * var(--fluid-c)); align-content: start; }
  .proyecto-hero__visual .ril-media { --media-ratio: 812 / 513; }

  @media (width >= 48em) {
    .proyecto-hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--proyecto-gap); }
    /* 5 columnas para el título (una palabra de 6 letras a 180 mide ~538 px, más que 4 columnas);
       los datos y el resumen se quedan en su ancho de Figma (538 y 549 px) */
    .proyecto-hero__info { grid-column: 1 / 6; }
    .proyecto-hero__meta { max-width: calc(538 * 1rem / 16); }
    .proyecto-hero__visual { grid-column: 6 / 13; padding-top: calc(12 * 1rem / 16); }
  }

  /* ───── SECCIÓN: .proyecto-galeria · fila de piezas (--cols de 12) ───── */
  .proyecto-galeria { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--proyecto-gap-y); }
  @media (width >= 48em) {
    .proyecto-galeria { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--proyecto-gap); }
    .proyecto-galeria__item { grid-column: span var(--cols, 12); }
  }

  /* ───── .media-text--wide · texto + imagen de Servicios en versión de proyecto ─────
     Figma: foto 951 × 592 en 1-7; titular (74) y texto (22, regular) en 8-12, arriba,
            19 px por debajo del borde de la foto; 32 px entre titular y texto. */
  .media-text--wide { padding-block: 0; }
  .media-text--wide .media-text__figure { --media-ratio: initial; order: 0; }   /* usa la proporción de los datos y va primero también en móvil */
  @media (width >= 48em) {
    .media-text--wide .media-text__grid { column-gap: var(--proyecto-gap); align-items: start; }
    .media-text--wide .media-text__figure { grid-column: 1 / 8; }
    .media-text--wide .media-text__body { grid-column: 8 / 13; gap: calc(32 * 1rem / 16); margin: calc(19 * 1rem / 16) 0 0 calc(6 * 1rem / 16); }
    .media-text--wide .media-text__text { font-weight: var(--fw-regular); max-width: 27.6em; }
  }

  /* variante invertida (Alivia): texto en 1-5 y foto en 7-12 (812 × 593), el texto alineado arriba como en la normal */
  .media-text--invertido .media-text__figure { --media-ratio: initial; }
  @media (width >= 48em) {
    .media-text--invertido .media-text__body { grid-column: 1 / 6; grid-row: 1; margin: calc(19 * 1rem / 16) 0 0; }
    .media-text--invertido .media-text__figure { grid-column: 7 / 13; grid-row: 1; }
  }

  /* ───── SECCIÓN: .proyecto-frase · ficha blanca con frase destacada ─────
     Figma: 1648 × 831, blanca, radio 8; logo animado 252 a 134 px del borde; titular (74)
            a 51 px; pie (20) a 32 px; 197 px de aire abajo. */
  .proyecto-frase {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(40 * 1rem / 16 + 94 * var(--fluid-c)) var(--space-md) calc(40 * 1rem / 16 + 157 * var(--fluid-c));
    border-radius: var(--radius-small);
    background-color: var(--ril-color-white);
    text-align: center;
  }
  .proyecto-frase__media { width: calc(140 * 1rem / 16 + 112 * var(--fluid-c)); margin-bottom: calc(24 * 1rem / 16 + 27 * var(--fluid-c)); --media-radius: 0; }
  .proyecto-frase__title { font-size: var(--fs-h1); line-height: var(--lh-heading); }
  .proyecto-frase__pie {
    margin-top: calc(20 * 1rem / 16 + 12 * var(--fluid-c));
    font-size: var(--fs-label);
    font-stretch: var(--ril-stretch-label);
    line-height: var(--lh-label);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
  }

  /* frase: antetítulo pequeño encima del titular y variante plana, sin ficha blanca (Alivia: «Estrategia digital») */
  .proyecto-frase__antetitulo {
    margin-bottom: calc(14 * 1rem / 16 + 12 * var(--fluid-c));
    font-size: var(--fs-label);
    font-stretch: var(--ril-stretch-label);
    line-height: var(--lh-label);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    opacity: 0.6;
  }
  .proyecto-frase--plana { background-color: transparent; padding-block: calc(40 * 1rem / 16 + 60 * var(--fluid-c)); }

  /* ───── SECCIÓN: .proyecto-cifras · tres tarjetas blancas con una cifra ─────
     Figma: Jocca › «Frame 431» (1647 × 358): tres fichas blancas de radio 8 (497 × 332); arriba la cifra
            (74, negra condensada) y, abajo, título y texto a 22. 4 + 4 + 4 columnas; en móvil, una debajo de otra. */
  .proyecto-cifras { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--proyecto-gap-y); }
  .proyecto-cifras__item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;                      /* cifra arriba, texto abajo */
    gap: calc(40 * 1rem / 16 + 80 * var(--fluid-c));      /* aire mínimo entre ambos */
    padding: calc(16 * 1rem / 16 + 22 * var(--fluid-c));
    border-radius: var(--radius-small);
    background-color: var(--ril-color-white);
  }
  .proyecto-cifras__num {
    margin: 0;
    font-size: var(--fs-h1);
    font-weight: var(--ril-fw-black);
    font-stretch: var(--ril-stretch-condensed);
    line-height: var(--lh-heading);
    text-transform: uppercase;
  }
  .proyecto-cifras__body { display: grid; gap: calc(6 * 1rem / 16); }
  /* el h3 hereda «condensada y mayúsculas» de los titulares: aquí es un rótulo normal en peso medio */
  .proyecto-cifras__title {
    margin: 0;
    font-size: var(--fs-body-lg);
    font-weight: var(--fw-medium, 500);
    font-stretch: normal;
    line-height: var(--lh-normal);
    letter-spacing: normal;
    text-transform: none;
  }
  .proyecto-cifras__text { margin: 0; max-width: 15.5em; font-size: var(--fs-body-lg); line-height: var(--lh-normal); }   /* se parte en dos líneas, como en el diseño */
  @media (width >= 48em) {
    .proyecto-cifras { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--proyecto-gap); }
    .proyecto-cifras__item { aspect-ratio: 3 / 2; }      /* 497 × 332 en el diseño */
  }

  /* ───── SECCIÓN: .proyecto-mosaico · dos columnas con pilas de alto libre ───── */
  .proyecto-mosaico { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--proyecto-gap-y); }
  .proyecto-mosaico__col { display: grid; gap: var(--proyecto-gap-y); align-content: start; }
  @media (width >= 48em) {
    .proyecto-mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--proyecto-gap); align-items: start; }
  }

  /* rótulo de sección dentro de texto-media: pegado encima del titular */
  .media-text__head { display: grid; gap: calc(14 * 1rem / 16); }

  /* ───── .proyecto-seccion · cabecera de sección (número + título grande) ─────
     Mucho aire por encima para separar los grandes bloques del portafolio. */
  /* fijos: 80 px por encima y 32 px (--space-lg) por debajo */
  /* el selector `.proyecto-bloque + .proyecto-seccion` (y no solo `.proyecto-seccion`) es necesario para ganar
     a `.proyecto-bloque + .proyecto-bloque`, que si no impone los 33 px habituales por encima */
  .proyecto-seccion, .proyecto-bloque + .proyecto-seccion { margin-top: calc(80 * 1rem / 16); }
  .proyecto-seccion + .proyecto-bloque { margin-top: var(--space-lg); }
  .proyecto-seccion__numero { margin-bottom: calc(10 * 1rem / 16); }
  .proyecto-seccion__titulo { margin: 0; font-size: var(--fs-h1); line-height: var(--lh-heading); }

  /* ───── SECCIÓN: .proyecto-carrusel · fila arrastrable (ratón) o deslizable (táctil) ─────
     Todas las piezas con el mismo alto; el ancho sale de su proporción (--ratio). Con ratón, el
     módulo drag-scroll mueve la fila con suavizado e inercia (sin imán, que pelearía con él);
     el imán de scroll-snap queda solo para el dedo. Las fotos no llevan la animación de entrada
     de reveal.js: el módulo las excluye y esta regla lo asegura. */
  .proyecto-carrusel {
    --carrusel-h: calc(240 * 1rem / 16 + 300 * var(--fluid-c));
    display: flex;
    gap: var(--proyecto-gap);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    will-change: scroll-position;
    cursor: grab;
    border-radius: var(--radius-small);
  }
  @media (pointer: coarse) { .proyecto-carrusel { scroll-snap-type: x proximity; } }
  .proyecto-carrusel::-webkit-scrollbar { display: none; }
  .proyecto-carrusel:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
  .proyecto-carrusel[data-dragging] { cursor: grabbing; user-select: none; }
  .proyecto-carrusel__item {
    flex: none;
    height: var(--carrusel-h);
    aspect-ratio: var(--ratio);
    scroll-snap-align: start;
    contain: paint;
  }
  .proyecto-carrusel__item .ril-media { width: 100%; height: 100%; aspect-ratio: auto; }
  .proyecto-carrusel [data-reveal] { opacity: 1; translate: none; transition: none; }
  /* con ratón en escritorio manda el cursor circular de la web (cursor.css lo oculta por debajo de 820 px) */
  @media (hover: hover) and (pointer: fine) and (width >= 51.3125em) {
    .proyecto-carrusel, .proyecto-carrusel[data-dragging] { cursor: none; }
  }

  /* barra de progreso: tramo oscuro = parte visible; --w y --x los escribe drag-scroll */
  .proyecto-carrusel__progreso {
    position: relative;
    height: 4px;
    margin-top: calc(12 * 1rem / 16 + 6 * var(--fluid-c));
  }
  .proyecto-carrusel__progreso::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 1px;
    height: 2px;
    background-color: #ccc;
  }
  .proyecto-carrusel__barra {
    position: absolute;
    top: 0;
    left: var(--x, 0%);
    width: var(--w, 100%);
    height: 4px;
    border-radius: 2px;
    background-color: var(--color-dark);
  }
  .proyecto-carrusel__progreso[data-oculto] { display: none; }

  /* ───── SECCIÓN: .proyecto-comparador · antes / después con control deslizante ─────
     --pos (0-100 %) lo escribe el módulo compare-slider; sin JS queda al 50 %. */
  .proyecto-comparador {
    --pos: 50%;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-small);
    aspect-ratio: var(--media-ratio-data, 16 / 9);
  }
  .proyecto-comparador .ril-media { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
  .proyecto-comparador__despues { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
  .proyecto-comparador__rotulo {
    position: absolute;
    bottom: var(--space-sm);
    padding: 0.35em 0.9em;
    border-radius: 999px;
    background-color: var(--ril-color-white);
    color: var(--color-text);
    font-size: var(--fs-label);
    font-stretch: var(--ril-stretch-label);
    line-height: var(--lh-label);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    pointer-events: none;
  }
  .proyecto-comparador__rotulo--antes { left: var(--space-sm); }
  .proyecto-comparador__rotulo--despues { right: var(--space-sm); }
  .proyecto-comparador__asa {
    position: absolute;
    inset-block: 0;
    left: var(--pos);
    display: none;
    width: 2px;
    margin-left: -1px;
    background-color: var(--color-dark);
    pointer-events: none;
  }
  /* círculo negro con dos flechas ↗ (la de los enlaces de proyecto de la portada) giradas a ← y → en blanco */
  .proyecto-comparador__boton {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    gap: calc(6 * 1rem / 16);
    padding: calc(14 * 1rem / 16) calc(12 * 1rem / 16);
    translate: -50% -50%;
    border-radius: 999px;
    background-color: var(--color-dark);
    color: var(--ril-color-white);
  }
  .proyecto-comparador__flecha { --icon-size: calc(14 * 1rem / 16); --icon-stroke: 3; }
  .proyecto-comparador__flecha--izq { rotate: -135deg; }
  .proyecto-comparador__flecha--der { rotate: 45deg; }
  /* el control solo existe con JS */
  .proyecto-comparador__range { display: none; }
  .proyecto-comparador[data-state="ready"] .proyecto-comparador__asa { display: block; }
  .proyecto-comparador[data-state="ready"] .proyecto-comparador__range {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    appearance: none;
    background: transparent;
    opacity: 0;
    cursor: ew-resize;
    touch-action: pan-y;
  }
  .proyecto-comparador:has(.proyecto-comparador__range:focus-visible) { outline: 2px solid currentColor; outline-offset: 4px; }

  /* ───── SECCIÓN: .proyecto-relacionado · enlace al siguiente proyecto ─────
     Figma: franja con la imagen del proyecto desenfocada (blur 10, 42 % de opacidad) que
            se funde con el crema hacia arriba; PROYECTOS RELACIONADOS (20) + miniatura
            392 × 262 a 28 px; a 26 px, alineados abajo, VER PROYECTO COMPLETO (20, 60 %)
            y el título (150). */
  .proyecto-relacionado {
    margin-top: calc(64 * 1rem / 16 + 56 * var(--fluid-c));
    padding-block: calc(40 * 1rem / 16 + 36 * var(--fluid-c)) calc(48 * 1rem / 16 + 42 * var(--fluid-c));
    overflow: clip;
  }
  .proyecto-relacionado__fondo {
    position: absolute;
    inset: 0;
    background: center / cover no-repeat;
    filter: blur(10px);
    opacity: 0.42;
    pointer-events: none;
  }
  .proyecto-relacionado::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(var(--color-background), transparent);
    pointer-events: none;
  }
  .proyecto-relacionado > .ril-container { position: relative; z-index: 2; }
  .proyecto-relacionado__link { display: grid; gap: var(--space-md); color: inherit; text-decoration: none; }
  .proyecto-relacionado__link:hover { color: inherit; }
  .proyecto-relacionado__col { display: grid; gap: calc(16 * 1rem / 16 + 12 * var(--fluid-c)); }
  .proyecto-relacionado__label, .proyecto-relacionado__cta {
    font-size: var(--fs-label);
    font-stretch: var(--ril-stretch-label);
    line-height: var(--lh-label);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
  }
  .proyecto-relacionado__media { --media-ratio: 392 / 262; }
  .proyecto-relacionado__media .media__el { transition: transform var(--dur-slow) var(--ease-standard); }
  .proyecto-relacionado__body { display: grid; gap: calc(2 * 1rem / 16); }
  .proyecto-relacionado__cta { opacity: 0.6; transition: opacity var(--dur-base) var(--ease-standard); }
  .proyecto-relacionado__title {
    font-size: var(--fs-proyecto-rel);
    font-weight: var(--ril-fw-black);
    font-stretch: var(--ril-stretch-condensed);
    line-height: var(--lh-heading);
    text-transform: uppercase;
  }
  .proyecto-relacionado__link:is(:hover, :focus-visible) .media__el { transform: scale(1.04); }
  .proyecto-relacionado__link:is(:hover, :focus-visible) .proyecto-relacionado__cta { opacity: 1; }
  @media (width >= 48em) {
    .proyecto-relacionado__link { display: flex; align-items: flex-end; gap: calc(26 * 1rem / 16); }
    .proyecto-relacionado__col { flex: none; width: calc(220 * 1rem / 16 + 172 * var(--fluid-c)); }
    .proyecto-relacionado__body { flex: 1; min-width: 0; }
  }
}