* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    /* Unidad de escala: 1 "píxel de Figma" = --k.
       El diseño de escritorio está hecho a 1920px de ancho, así que a 1920px --k vale 1px
       y a otros anchos todo se reduce o crece en la misma proporción.
       (En tablet y móvil --k se redefine más abajo con su propio ancho de referencia.) */
    --k: calc(100vw / 1920);

    /* Colores base */
    --primary-color: #F6ECDB;
    --secundary-color: #FC825A;
    --terciary-color: #F2C46D;

    /* Botones */
    --button-primary-color: #2975B8;
    --button-secundary-color: #FC825A;
    --button-hover-color: #F6ECDB;

    /* Colores por categoría */
    --estrategia-comunicacion-color: #2975B8;
    --produccion-escrita-color: #F3BBB3;
    --sistema-grafico-color: #FC825A;
    --entretenimiento-digital-color: #F2C46D;
    --produccion-audiovisual-color: #214C70;
    --fotografia-color: #BBD9F2;

    /* Indicador del carrusel móvil (segmentos inactivos) */
    --indicador-inactivo-color: #9B9B9B;

    /* Tipografía (Figma escritorio: 64 / 32 / 24 / 16 px), con un mínimo para que siga siendo legible */
    --font-color: #214C70;
    --font-type: 'Montserrat', sans-serif;
    --font-h1-size: max(2rem, calc(64 * var(--k)));
    --font-h2-size: max(1.1rem, calc(32 * var(--k)));
    --font-h3-size: max(0.8rem, calc(24 * var(--k)));
    --font-h4-size: max(0.75rem, calc(16 * var(--k)));

    /* Forma de las tarjetas (medidas del diseño) */
    --radio-arco: calc(264 * var(--k));
    --radio-esquina: calc(24 * var(--k));

    /* Perspectiva del grupo de tarjetas: con ella animaciones.js curva las tarjetas (como un cilindro) */
    --perspectiva: calc(1500 * var(--k));
}

/* ---------- Base ---------- */
html {
    font-family: var(--font-type);
    color: var(--font-color);
    background-color: var(--primary-color);
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    gap: calc(30 * var(--k));
    padding: calc(38 * var(--k)) calc(42 * var(--k)) calc(46 * var(--k));
}

/* Mientras el popup está abierto, la página de fondo no se desplaza */
body:has(.creditos[open]) {
    overflow: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

h1 { font-size: var(--font-h1-size); font-weight: 700; line-height: 1.05; }
h2 { font-size: var(--font-h2-size); font-weight: 400; line-height: 1.05; }
h3 { font-size: var(--font-h3-size); font-weight: 700; text-transform: uppercase; line-height: normal; }
h4 { font-size: var(--font-h4-size); font-weight: 700; text-transform: capitalize; line-height: normal; }

/* ---------- Header ---------- */
.header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: calc(32 * var(--k));
}

.header__marca {
    display: flex;
    align-items: center;
    gap: calc(32 * var(--k));
}

.header__logo {
    display: block;
    height: calc(164 * var(--k));
    width: auto;
}

.header__titulos {
    display: flex;
    flex-direction: column;
    gap: calc(16 * var(--k));
    padding-left: calc(32 * var(--k));
    border-left: max(2px, calc(3 * var(--k))) solid var(--secundary-color);
}

/* Botón de créditos (es un <button>, así que quitamos su estilo por defecto) */
.header__creditos {
    flex-shrink: 0;
    width: max(2.75rem, calc(71 * var(--k)));
    height: max(2.75rem, calc(71 * var(--k)));
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    transition: transform .2s ease;
}

.header__creditos:hover,
.header__creditos:focus-visible {
    transform: scale(1.08);
}

.header__creditos img {
    display: block;
    width: 100%;
    height: 100%;
}

/* ---------- Categorías ---------- */
.categorias {
    display: grid;
    /* 6 columnas exactamente iguales */
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: calc(21 * var(--k));
    perspective: var(--perspectiva);      /* para la curvatura 3D de animaciones.js */
}

.categoria {
    --fondo: var(--button-primary-color);
    --texto: var(--primary-color);

    /* El <a> es solo la "caja" (tamaño y posición en la fila/carrusel, donde engancha el snap).
       Lo que se ve y se inclina en 3D es .categoria__cara: así la curvatura no mueve los puntos de snap. */
    display: block;
    min-width: 0;
    aspect-ratio: 289 / 799;              /* proporción de la tarjeta en Figma */
}

.categoria__cara {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    padding: calc(24 * var(--k));
    background-color: var(--fondo);
    color: var(--texto);
    border-radius: var(--radio-esquina);
    transition: transform .2s ease, box-shadow .2s ease;
}

.categoria:hover .categoria__cara,
.categoria:focus-visible .categoria__cara {
    transform: translateY(-6px);
    box-shadow: 0 10px 24px rgb(33 76 112 / .25);
}

/* Arco: izquierda en las impares, derecha en las pares */
.categoria:nth-child(odd)  .categoria__cara { border-top-left-radius: var(--radio-arco); }
.categoria:nth-child(even) .categoria__cara { border-top-right-radius: var(--radio-arco); }

/* Ícono: el SVG se usa como máscara y toma el color del texto de la tarjeta */
.categoria__icono {
    display: block;
    flex-shrink: 0;
    width: calc(208 * var(--k));
    height: calc(208 * var(--k));
    background-color: currentColor;
    -webkit-mask: var(--icono) center / contain no-repeat;
            mask: var(--icono) center / contain no-repeat;
}

.categoria__texto {
    display: flex;
    flex-direction: column;
    gap: calc(16 * var(--k));
    min-height: calc(94 * var(--k));      /* alto de 2 líneas: así todos los íconos quedan a la misma altura */
    margin-top: calc(120 * var(--k));
}

.categoria__texto h3 {
    overflow-wrap: anywhere;              /* red de seguridad si una palabra no cabe */
}

.categoria__flecha {
    flex-shrink: 0;
    width: calc(56 * var(--k));
    height: calc(56 * var(--k));
    margin-top: calc(57 * var(--k));
}

/* Un modificador por categoría: solo cambia fondo y color de texto */
.categoria--estrategia-comunicacion, .pagina--estrategia-comunicacion { --fondo: var(--estrategia-comunicacion-color); --texto: var(--primary-color); }
.categoria--produccion-escrita, .pagina--produccion-escrita      { --fondo: var(--produccion-escrita-color);      --texto: var(--font-color); }
.categoria--sistema-grafico, .pagina--sistema-grafico         { --fondo: var(--sistema-grafico-color);         --texto: var(--primary-color); }
.categoria--entretenimiento-digital, .pagina--entretenimiento-digital { --fondo: var(--entretenimiento-digital-color); --texto: var(--font-color); }
.categoria--produccion-audiovisual, .pagina--produccion-audiovisual  { --fondo: var(--produccion-audiovisual-color);  --texto: var(--primary-color); }
.categoria--fotografia, .pagina--fotografia              { --fondo: var(--fotografia-color);              --texto: var(--font-color); }

/* En el diseño, "Entretenimiento digital" usa 23px para que quepa */
.categoria--entretenimiento-digital h3 {
    font-size: max(0.78rem, calc(23 * var(--k)));
}

/* Indicador y aviso de deslizar: solo existen en la versión móvil */
.indicador,
.deslizar {
    display: none;
}

/* ---------- Animaciones (GSAP, ver scripts/animaciones.js) ---------- */

/* Antes de la entrada, lo que se anima empieza oculto (la clase la pone y la quita el JS) */
html.con-animaciones :is(.header__logo, .header__titulos > *, .header__creditos, .categoria, .indicador, .deslizar) {
    opacity: 0;
}

/* Con GSAP activo, él mueve y curva las tarjetas (transform): la transición del CSS solo queda para la sombra,
   si no se pelearía con él y las tarjetas irían "arrastradas". */
html.gsap-activo .categoria__cara {
    transition: box-shadow .2s ease;
}

/* Clic en una categoría: el color se expande desde el punto del clic (el clip-path lo anima animaciones.js) */
.relleno {
    position: fixed;
    inset: 0;
    z-index: 150;
    pointer-events: none;
}

/* Pantalla de carga (solo la primera vez de cada visita): la huella del trofeo se va formando */
.carga {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100;
    place-items: center;
    background-color: var(--primary-color);
}

html.con-carga .carga {
    display: grid;
}

html.con-carga body {
    overflow: hidden;
}

/* Máscaras de texto: cada línea queda dentro de una caja con overflow oculto para poder "subirla" desde abajo.
   El padding y el margen negativo se compensan: el texto ocupa exactamente el mismo espacio que antes
   (y no se cortan las letras con cola, como la "g" o la "j"). */
.mascara {
    display: block;
    overflow: hidden;
    padding-bottom: 0.14em;
    margin-bottom: -0.14em;
}

.mascara__texto {
    display: block;
}

/* ---------- Popup de créditos (500 x 338 en Figma) ---------- */
/* El popup usa tamaños fijos en rem (no depende de --k) para que el texto
   se lea bien en cualquier pantalla. */
.creditos {
    /* El reset global quita el margin:auto que centra el <dialog>, hay que ponerlo de nuevo */
    margin: auto;
    width: min(31.25rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    overflow: auto;
    padding: 0;                           /* el padding va en .creditos__contenido para que el clic en el fondo cierre bien */
    border: 0;
    border-radius: 1.5rem;
    background-color: var(--primary-color);
    color: var(--font-color);
}

.creditos::backdrop {
    background-color: rgb(33 76 112 / .55);
    backdrop-filter: blur(3px);
}

.creditos[open] {
    animation: creditos-entrada .25s ease;
}

.creditos[open]::backdrop {
    animation: creditos-fondo .25s ease;
}

@keyframes creditos-entrada {
    from { opacity: 0; transform: translateY(1rem) scale(.97); }
    to   { opacity: 1; transform: none; }
}

@keyframes creditos-fondo {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.creditos__contenido {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem 1.5rem 2.5rem;
}

.creditos__cabecera {
    position: relative;
    display: flex;
    justify-content: center;
}

.creditos__logo {
    display: block;
    width: min(17.65rem, calc(100% - 7rem));   /* deja espacio al botón de cerrar en pantallas angostas */
    height: auto;
}

.creditos__cerrar {
    position: absolute;
    top: 0;
    right: 0;
    width: 3.5rem;
    height: 3.5rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--font-color);
    cursor: pointer;
    transition: color .2s ease, transform .2s ease;
}

.creditos__cerrar:hover,
.creditos__cerrar:focus-visible {
    color: var(--secundary-color);
    transform: scale(1.08);
}

.creditos__cerrar svg {
    display: block;
    width: 100%;
    height: 100%;
}

.creditos__textos {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    font-size: 1rem;
    text-align: center;
}

.creditos__derechos {
    font-weight: 700;
    line-height: 1.05;
}

.creditos__subtitulo {
    font-weight: 400;
    line-height: 1.05;
}

.creditos__lista {
    padding-left: 1.5rem;
    list-style: disc;
    font-weight: 700;
    line-height: 1.5;
    text-align: left;
}

@media (prefers-reduced-motion: reduce) {
    .creditos[open],
    .creditos[open]::backdrop {
        animation: none;
    }
}

/* ---------- Tablet y móvil ---------- */

/* Hasta 1024px (tablet y móvil) se usa el mismo diseño del frame móvil de Figma
   (Home_celular): header en dos filas, categorías en carrusel, indicador y aviso de deslizar.
   Lo único que cambia entre tablet y móvil es la escala (--k) de cada rango. */
@media (max-width: 1024px) {
    :root {
        /* Tablet: referencia de 600px de ancho. Se limita también por el alto
           (852 = alto del frame móvil) para que en horizontal el carrusel quepa sin scroll vertical. */
        --k: min(calc(100vw / 600), calc(100vh / 852));

        --font-h1-size: max(1.75rem, calc(32 * var(--k)));
        --font-h2-size: max(0.875rem, calc(16 * var(--k)));
        --font-h3-size: max(1rem, calc(24 * var(--k)));
        --font-h4-size: max(0.875rem, calc(16 * var(--k)));

        --radio-arco: calc(251 * var(--k));
        --perspectiva: calc(900 * var(--k));
    }

    body {
        gap: calc(23 * var(--k));
        padding: calc(32 * var(--k)) calc(16 * var(--k)) calc(24 * var(--k));
        overflow-x: hidden;
    }

    /* Header: logo a la izquierda, créditos a la derecha y el título debajo */
    .header {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: start;
        row-gap: calc(20 * var(--k));
        column-gap: calc(16 * var(--k));
    }

    .header__marca {
        display: contents;                /* el logo y los títulos pasan a ser celdas del grid */
    }

    .header__logo {
        grid-column: 1;
        grid-row: 1;
        height: calc(88 * var(--k));
    }

    .header__creditos {
        grid-column: 2;
        grid-row: 1;
        width: max(2.75rem, calc(42 * var(--k)));
        height: max(2.75rem, calc(42 * var(--k)));
    }

    .header__titulos {
        grid-column: 1 / -1;
        grid-row: 2;
        gap: calc(8.8 * var(--k));
        padding-left: 0;
        border-left: 0;
    }

    main {
        display: flex;
        flex-direction: column;
        gap: calc(20 * var(--k));
    }

    /* Carrusel: las tarjetas van en fila y se desliza con el dedo.
       Llega hasta los bordes de la pantalla para que se vea asomar la siguiente tarjeta. */
    .categorias {
        display: flex;
        gap: calc(24 * var(--k));
        margin-inline: calc(-16 * var(--k));
        padding-inline: calc(16 * var(--k));
        margin-block: calc(-40 * var(--k));   /* espacio extra arriba y abajo: al curvarse, el borde cercano de la tarjeta crece */
        padding-block: calc(40 * var(--k));
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: calc(16 * var(--k));
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .categorias::-webkit-scrollbar {
        display: none;
    }

    .categoria {
        flex: 0 0 calc(275 * var(--k));
        width: calc(275 * var(--k));
        height: calc(488 * var(--k));
        aspect-ratio: auto;
        scroll-snap-align: start;
    }

    /* En pantalla táctil no hay hover: evitamos que la tarjeta se corte al "subir" */
    .categoria:hover .categoria__cara,
    .categoria:focus-visible .categoria__cara {
        transform: none;
        box-shadow: none;
    }

    .categoria__icono {
        width: calc(120 * var(--k));
        height: calc(120 * var(--k));
        align-self: center;
    }

    .categoria__texto {
        margin-top: calc(24 * var(--k));
        text-align: center;
    }

    .categoria__texto h3 {
        white-space: nowrap;
        overflow-wrap: normal;
    }

    .categoria__flecha {
        margin-top: calc(52 * var(--k));
    }

    /* "Entretenimiento digital" es la palabra más larga: le damos un poco más de ancho útil */
    .categoria--entretenimiento-digital .categoria__cara {
        padding-inline: calc(20 * var(--k));
    }

    /* Indicador: el segmento largo marca la tarjeta actual (lo actualiza carrusel.js) */
    .indicador {
        display: flex;
        align-items: center;
        gap: calc(12 * var(--k));
    }

    .indicador__marca {
        display: block;
        width: calc(12 * var(--k));
        height: max(3px, calc(3.5 * var(--k)));
        border-radius: 999px;
        background-color: var(--indicador-inactivo-color);
        transition: width .25s ease, background-color .25s ease;
    }

    .indicador__marca--activa {
        width: calc(32 * var(--k));
        background-color: var(--font-color);
    }

    /* Aviso de deslizar */
    .deslizar {
        display: flex;
        align-items: center;
        font-size: var(--font-h4-size);
        line-height: 1.05;
    }

    .deslizar p {
        width: calc(290 * var(--k));
    }

    .deslizar svg {
        flex-shrink: 0;
        width: calc(56 * var(--k));
        height: calc(32 * var(--k));
    }
}

/* Móvil (hasta 600px): el diseño se reescala a 393px de referencia */
@media (max-width: 600px) {
    :root {
        --k: calc(100vw / 393);
        --perspectiva: calc(560 * var(--k));
    }
}

/* ---------- Páginas de categoría (categorias/*.html) ---------- */
/* Los colores de cada categoría (--fondo y --texto) vienen de la clase .pagina--<categoria>,
   que comparte regla con los modificadores .categoria--<categoria> de la portada. */
.pagina {
    --columnas: 3;
    --margen-x: calc(145 * var(--k));
    --separacion: calc(32 * var(--k));
    --titulo-tamano: max(1.5rem, calc(44 * var(--k)));
    --volver-tamano: max(0.95rem, calc(30 * var(--k)));
    --icono-volver: max(1.75rem, calc(44 * var(--k)));
    --tarjeta-padding: calc(24 * var(--k));
    --tarjeta-radio: calc(24 * var(--k));
    --imagen-radio: calc(19 * var(--k));
    --nombre-tamano: max(0.8rem, calc(22 * var(--k)));

    gap: calc(63 * var(--k));
    padding: calc(76 * var(--k)) var(--margen-x) calc(60 * var(--k));
}

.pagina__cabecera {
    display: grid;
    grid-template-columns: 1fr auto 1fr;   /* el título queda centrado en la página */
    align-items: center;
    gap: var(--separacion);
}

.pagina__volver {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: calc(16 * var(--k));
    font-size: var(--volver-tamano);
    font-weight: 700;
    transition: color .2s ease;
}

.pagina__volver svg {
    flex-shrink: 0;
    width: var(--icono-volver);
    height: var(--icono-volver);
    transform: scaleX(-1);                 /* la flecha del símbolo apunta a la derecha */
    transition: transform .2s ease;
}

.pagina__volver:hover,
.pagina__volver:focus-visible {
    color: var(--secundary-color);
}

.pagina__volver:hover svg,
.pagina__volver:focus-visible svg {
    transform: scaleX(-1) translateX(-3px);
}

.pagina__cabecera h1 {
    font-size: var(--titulo-tamano);
    text-transform: uppercase;
    text-align: center;
}

.proyectos {
    display: grid;
    grid-template-columns: repeat(var(--columnas), minmax(0, 1fr));
    gap: var(--separacion);
}

.proyecto {
    display: flex;
    flex-direction: column;
    gap: calc(12 * var(--k));
    min-width: 0;
    padding: var(--tarjeta-padding);
    background-color: var(--fondo);
    color: var(--texto);
    border-radius: var(--tarjeta-radio);
}

/* Espacio de la imagen (en el diseño es el recuadro claro de cada tarjeta) */
.proyecto__imagen {
    display: block;
    width: 100%;
    aspect-ratio: 474 / 290;
    object-fit: cover;
    border-radius: var(--imagen-radio);
    background-color: var(--primary-color);
}

.proyecto__nombre {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: calc(2 * 1.2em);           /* alto de 2 líneas: todas las tarjetas del mismo alto */
    font-size: var(--nombre-tamano);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-wrap: balance;
}

/* Tablet: 2 columnas. Se reescala con 768px de referencia, y el título pasa debajo del botón de volver. */
@media (max-width: 1024px) {
    :root:has(.pagina) { --k: calc(100vw / 768); }

    .pagina {
        --columnas: 2;
        --margen-x: calc(40 * var(--k));
        --separacion: calc(24 * var(--k));
        --titulo-tamano: max(1.5rem, calc(36 * var(--k)));
        --volver-tamano: max(0.95rem, calc(20 * var(--k)));
        --icono-volver: max(2rem, calc(36 * var(--k)));
        --tarjeta-padding: calc(20 * var(--k));
        --tarjeta-radio: calc(20 * var(--k));
        --imagen-radio: calc(14 * var(--k));
        --nombre-tamano: max(0.9rem, calc(20 * var(--k)));

        gap: calc(28 * var(--k));
        padding: calc(40 * var(--k)) var(--margen-x) calc(40 * var(--k));
    }

    .pagina__cabecera {
        grid-template-columns: 1fr;
        gap: calc(20 * var(--k));
    }

    .pagina__cabecera h1 {
        text-align: left;
    }
}

/* Móvil: 1 columna, 393px de referencia */
@media (max-width: 600px) {
    :root:has(.pagina) { --k: calc(100vw / 393); }

    .pagina {
        --columnas: 1;
        --margen-x: calc(16 * var(--k));
        --separacion: calc(16 * var(--k));
        --titulo-tamano: max(1.5rem, calc(28 * var(--k)));
        --volver-tamano: max(0.95rem, calc(16 * var(--k)));
        --icono-volver: max(2rem, calc(32 * var(--k)));
        --tarjeta-padding: calc(16 * var(--k));
        --tarjeta-radio: calc(20 * var(--k));
        --imagen-radio: calc(14 * var(--k));
        --nombre-tamano: max(1rem, calc(18 * var(--k)));

        gap: calc(20 * var(--k));
        padding: calc(32 * var(--k)) var(--margen-x) calc(32 * var(--k));
    }
}

/* ---------- Entrada a una página de categoría desde la portada ---------- */
/* La página arranca cubierta con el color de la categoría (--color-entrada, definido en el <html> de cada página)
   y lo va descubriendo de abajo hacia arriba. Así continúa el color con el que terminó la portada. */
html.viene-de-portada::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 200;
    pointer-events: none;
    background-color: var(--color-entrada);
    animation: entrada-categoria .45s cubic-bezier(.76, 0, .24, 1) .05s both;
}

@keyframes entrada-categoria {
    from { clip-path: inset(0 0 0 0); }
    to   { clip-path: inset(0 0 100% 0); }
}

@media (prefers-reduced-motion: reduce) {
    html.viene-de-portada::before {
        display: none;
    }
}

/* Tarjetas de la página de categoría: ahora son enlaces a la página de su proyecto */
a.proyecto {
    overflow: hidden;                      /* recorta el acercamiento de la imagen dentro de la tarjeta */
    color: var(--texto);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform .4s cubic-bezier(.16, 1, .3, 1);
}

.proyecto__imagen {
    transition: transform .4s cubic-bezier(.16, 1, .3, 1);
}

/* Con cursor (escritorio): al pasar por encima la tarjeta se levanta */
@media (hover: hover) and (min-width: 1025px) {
    a.proyecto:hover,
    a.proyecto:focus-visible {
        transform: translateY(calc(-6 * var(--k)));
    }
}

a.proyecto:focus-visible {
    outline: calc(3 * var(--k)) solid var(--font-color);
    outline-offset: calc(4 * var(--k));
}

/* Al presionar (clic o toque, en cualquier pantalla): la tarjeta se hunde un poco y su imagen
   hace un leve acercamiento, para que la pulsación se sienta. En escritorio conserva medio levantamiento. */
a.proyecto:active {
    transform: scale(.955);
    transition-duration: .12s;
}

a.proyecto:active .proyecto__imagen {
    transform: scale(1.05);
    transition-duration: .12s;
}

@media (hover: hover) and (min-width: 1025px) {
    a.proyecto:active { transform: translateY(calc(-3 * var(--k))) scale(.965); }
}

/* Si el usuario pide menos movimiento, la pulsación solo baja la opacidad */
@media (prefers-reduced-motion: reduce) {
    a.proyecto:active { transform: none; opacity: .75; }
    a.proyecto:active .proyecto__imagen { transform: none; }
}

/* ---------- Páginas de proyecto (proyectos/<categoria>/<proyecto>.html) ---------- */
/* El color de la categoría (--fondo y --texto) viene de la clase .pagina--<categoria> del body. */
.proyecto-pagina {
    --margen-x: calc(145 * var(--k));
   --columnas-ficha: minmax(0, 1fr) minmax(0, 1fr);
    --separacion: calc(64 * var(--k));
    --titulo-tamano: max(1.75rem, calc(56 * var(--k)));
    --etiqueta-tamano: max(0.8rem, calc(18 * var(--k)));
    --dato-tamano: max(1rem, calc(24 * var(--k)));
    --texto-tamano: max(0.9rem, calc(18 * var(--k)));
    --radio: calc(32 * var(--k));
    --icono-cerrar: max(2.25rem, calc(56 * var(--k)));
    --integrante-foto: calc(120 * var(--k));

    gap: calc(48 * var(--k));
    padding: calc(56 * var(--k)) var(--margen-x) calc(80 * var(--k));
}

.ficha__cabecera {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "cerrar categoria"
        "titulo titulo";
    align-items: center;
    gap: calc(28 * var(--k)) calc(24 * var(--k));
}

.ficha__cerrar {
    grid-area: cerrar;
    display: inline-flex;
    transition: color .2s ease, transform .3s cubic-bezier(.16, 1, .3, 1);
}

.ficha__cerrar svg {
    width: var(--icono-cerrar);
    height: var(--icono-cerrar);
}

.ficha__cerrar:hover,
.ficha__cerrar:focus-visible {
    color: var(--secundary-color);
    transform: rotate(90deg);
}

/* Etiqueta con el color de la categoría */
.ficha__categoria {
    grid-area: categoria;
    justify-self: end;
    padding: .55em 1.3em;
    border-radius: 999px;
    background-color: var(--fondo);
    color: var(--texto);
    font-size: var(--font-h2-size);
    font-weight: 700;
}

.ficha__titulo {
    grid-area: titulo;
    font-size: var(--titulo-tamano);
    line-height: 1.1;
    text-wrap: balance;
}

.ficha {
    display: grid;
    grid-template-columns: var(--columnas-ficha);
    gap: calc(48 * var(--k)) var(--separacion);
    align-items: start;
}

/* Galería (sin marco de color: así no choca con los colores de las fotografías) */
.ficha__galeria {
    position: relative;
    min-width: 0;
}

.galeria__pista {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    border-radius: var(--radio);
    outline-offset: calc(4 * var(--k));
}

.galeria__pista::-webkit-scrollbar { display: none; }

.galeria__imagen {
    flex: 0 0 100%;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    scroll-snap-align: center;
    background-color: var(--primary-color);
}

.galeria__flecha {
    position: absolute;
    top: 50%;
    z-index: 1;
    display: grid;
    place-items: center;
    width: max(2.25rem, calc(56 * var(--k)));
    height: max(2.25rem, calc(56 * var(--k)));
    border: 0;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: var(--font-color);
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}

.galeria__flecha svg { width: 55%; height: 55%; }
.galeria__flecha--anterior { left: calc(20 * var(--k)); }
.galeria__flecha--anterior svg { transform: scaleX(-1); }
.galeria__flecha--siguiente { right: calc(20 * var(--k)); }

.galeria__flecha:hover,
.galeria__flecha:focus-visible {
    background-color: var(--secundary-color);
    color: var(--primary-color);
}

.galeria__flecha[disabled] { opacity: .35; cursor: default; pointer-events: none; }

.galeria__puntos {
    position: absolute;
    left: 50%;
    bottom: calc(20 * var(--k));
    display: flex;
    gap: calc(10 * var(--k));
    padding: calc(10 * var(--k)) calc(16 * var(--k));
    border-radius: 999px;
    background-color: var(--primary-color);
    transform: translateX(-50%);
}

.galeria__punto {
    width: max(.5rem, calc(12 * var(--k)));
    height: max(.5rem, calc(12 * var(--k)));
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--indicador-inactivo-color);
    cursor: pointer;
    transition: background-color .2s ease, transform .2s ease;
}

.galeria__punto[aria-current="true"] {
    background-color: var(--font-color);
    transform: scale(1.25);
}

/* Categorías con una sola imagen (producción escrita y fotografía): no hay carrusel */
.ficha__galeria--unica {
    justify-self: start;                   /* el marco se ajusta a la foto, que se ve completa y sin recortes */
    max-width: 100%;
}

.ficha__galeria--unica .galeria__imagen {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    aspect-ratio: auto;                    /* anula el 16/10 del carrusel: aquí manda la proporción de la foto */
    border-radius: var(--radio);
    object-fit: contain;
    object-position: left top;
}

/* Información */
.ficha__info {
    display: flex;
    flex-direction: column;
    gap: calc(12 * var(--k));
}

.ficha__etiqueta {
    color: var(--button-secundary-color);
    font-size: var(--etiqueta-tamano);
    font-weight: 900;
    opacity: .75;
}

.ficha__dato {
    font-size: var(--dato-tamano);
    font-weight: 700;
}

.ficha__linea {
    width: 100%;
    margin: calc(8 * var(--k)) 0;
    border: 0;
    border-top: calc(2 * var(--k)) solid var(--font-color);
    opacity: .25;
}

.ficha__descripcion {
    margin-top: calc(12 * var(--k));
    font-size: var(--texto-tamano);
    line-height: 1.5;
}

.ficha__boton {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: calc(14 * var(--k));
    margin-top: calc(24 * var(--k));
    padding: .8em 1.9em;
    border-radius: 999px;
    background-color: var(--button-secundary-color);
    color: var(--primary-color);
    font-size: var(--dato-tamano);
    font-weight: 700;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}

.ficha__boton svg {
    width: 1.6em;
    height: 1em;
    transition: transform .25s cubic-bezier(.16, 1, .3, 1);
}

.ficha__boton:hover,
.ficha__boton:focus-visible {
    background-color: var(--button-primary-color);
}

.ficha__boton:hover svg,
.ficha__boton:focus-visible svg {
    transform: translateX(calc(6 * var(--k)));
}

/* Integrantes */
.ficha__integrantes {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: calc(28 * var(--k));
    min-width: 0;
}

.ficha__integrantes h2 {
    font-size: var(--dato-tamano);
}

.integrantes__lista {
    display: flex;
    gap: calc(32 * var(--k));
    overflow-x: auto;
    padding-bottom: calc(12 * var(--k));
    list-style: none;
    scrollbar-width: none;
}

.integrantes__lista::-webkit-scrollbar { display: none; }

.integrante {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(14 * var(--k));
    width: calc(var(--integrante-foto) * 1.9);
    text-align: center;
}

.integrante__foto {
    width: var(--integrante-foto);
    height: var(--integrante-foto);
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--fondo);
}

.integrante__nombre {
    font-size: var(--etiqueta-tamano);
    font-weight: 700;
    line-height: 1.25;
}

/* Escritorio: la página de proyecto debe caber en la pantalla sin hacer scroll.
   La altura de la galería = alto de la ventana menos lo que ocupan el resto de bloques (--resto-ficha),
   con un mínimo y un máximo para que no quede ni diminuta ni gigante. */
@media (min-width: 1025px) {
    .proyecto-pagina {
        --resto-ficha: calc(510 * var(--k) + 14px);
        --integrante-foto: calc(88 * var(--k));

        gap: calc(32 * var(--k));
        padding-top: calc(40 * var(--k));
        padding-bottom: calc(32 * var(--k));
    }

    .ficha { gap: calc(32 * var(--k)) var(--separacion); }

    /* La información toma su alto natural. Si la descripción es larga, scripts/ajuste-descripcion.js
       le reduce un poco la letra hasta que todo el texto quepa sin hacer scroll en la página. */
    .ficha__info { align-self: start; }

    .ficha__boton { margin-top: calc(12 * var(--k)); }

    /* Pantallas muy bajitas: ajuste-descripcion.js activa este modo para ganar unos píxeles de alto */
    .ficha__info[data-compacto] { gap: calc(4 * var(--k)); }
    .ficha__info[data-compacto] .ficha__dato { font-size: max(.9rem, calc(20 * var(--k))); }
    .ficha__info[data-compacto] .ficha__linea { margin: 0; }
    .ficha__info[data-compacto] .ficha__descripcion { margin-top: calc(4 * var(--k)); }
    .ficha__info[data-compacto] .ficha__boton { margin-top: calc(8 * var(--k)); padding-block: .55em; }

    .galeria__imagen {
        aspect-ratio: auto;
        height: clamp(calc(300 * var(--k)), calc(100vh - var(--resto-ficha)), calc(460 * var(--k)));
    }

    /* Con una sola foto la columna de la imagen se ajusta a su ancho, así la información queda pegada a la foto
       (y no lejos de ella cuando la foto es vertical) */
    .ficha:has(.ficha__galeria--unica) {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .ficha__galeria--unica .galeria__imagen {
        height: clamp(calc(300 * var(--k)), calc(100vh - var(--resto-ficha)), calc(460 * var(--k)));
    }
}

/* Indicador de "hay más integrantes": degradado en el borde + flecha (los activa scripts/integrantes.js) */
.integrantes {
    position: relative;
    min-width: 0;
}

.integrantes::before,
.integrantes::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    width: calc(56 * var(--k));
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s ease;
}

.integrantes::before { left: 0;  background: linear-gradient(to right, var(--primary-color), transparent); }
.integrantes::after  { right: 0; background: linear-gradient(to left,  var(--primary-color), transparent); }

.integrantes[data-mas-izquierda]::before,
.integrantes[data-mas-derecha]::after { opacity: 1; }

.integrantes__mas {
    position: absolute;
    top: calc(var(--integrante-foto) / 2);
    right: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    width: max(2rem, calc(40 * var(--k)));
    height: max(2rem, calc(40 * var(--k)));
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--fondo);
    color: var(--texto);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%);
    transition: opacity .25s ease, transform .25s cubic-bezier(.16, 1, .3, 1);
}

.integrantes__mas svg { width: 55%; height: 55%; }

.integrantes[data-mas-derecha] .integrantes__mas {
    opacity: 1;
    pointer-events: auto;
    animation: integrantes-invitar 1.8s ease-in-out infinite;
}

.integrantes__mas:hover,
.integrantes__mas:focus-visible { background-color: var(--secundary-color); color: var(--primary-color); }

/* La flecha "empuja" suavemente hacia la derecha para invitar a deslizar */
@keyframes integrantes-invitar {
    0%, 100% { transform: translate(0, -50%); }
    50%      { transform: translate(calc(-5 * var(--k)), -50%); }
}

/* Flecha para volver atrás (la crea scripts/integrantes.js): misma forma que la de "más", pegada al borde izquierdo */
.integrantes__menos {
    position: absolute;
    top: calc(var(--integrante-foto) / 2);
    left: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    width: max(2rem, calc(40 * var(--k)));
    height: max(2rem, calc(40 * var(--k)));
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--fondo);
    color: var(--texto);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%);
    transition: opacity .25s ease, transform .25s cubic-bezier(.16, 1, .3, 1);
}

.integrantes__menos svg { width: 55%; height: 55%; transform: scaleX(-1); }

.integrantes[data-mas-izquierda] .integrantes__menos {
    opacity: 1;
    pointer-events: auto;
    animation: integrantes-invitar-atras 1.8s ease-in-out infinite;
}

.integrantes__menos:hover,
.integrantes__menos:focus-visible { background-color: var(--secundary-color); color: var(--primary-color); }

@keyframes integrantes-invitar-atras {
    0%, 100% { transform: translate(0, -50%); }
    50%      { transform: translate(calc(5 * var(--k)), -50%); }
}

@media (prefers-reduced-motion: reduce) {
    .integrantes[data-mas-derecha] .integrantes__mas,
    .integrantes[data-mas-izquierda] .integrantes__menos { animation: none; }
}

/* Tablet */
@media (max-width: 1024px) {
    :root:has(.proyecto-pagina) { --k: calc(100vw / 768); }

    .proyecto-pagina {
        --margen-x: calc(40 * var(--k));
        --columnas-ficha: minmax(0, 1fr);
        --titulo-tamano: max(1.1rem, calc(44 * var(--k)));
        --etiqueta-tamano: max(.8rem, calc(16 * var(--k)));
        --dato-tamano: max(1rem, calc(22 * var(--k)));
        --texto-tamano: max(.9rem, calc(18 * var(--k)));
        --radio: calc(28 * var(--k));
        --icono-cerrar: max(2.25rem, calc(48 * var(--k)));
        --integrante-foto: calc(104 * var(--k));

        gap: calc(32 * var(--k));
        padding: calc(40 * var(--k)) var(--margen-x) calc(56 * var(--k));
    }
}

/* Móvil */
@media (max-width: 600px) {
    :root:has(.proyecto-pagina) { --k: calc(100vw / 393); }

    .proyecto-pagina {
        --margen-x: calc(16 * var(--k));
        --titulo-tamano: max(1.5rem, calc(28 * var(--k)));
        --etiqueta-tamano: max(.8rem, calc(14 * var(--k)));
        --dato-tamano: max(1rem, calc(18 * var(--k)));
        --texto-tamano: max(.9rem, calc(15 * var(--k)));
        --radio: calc(20 * var(--k));
        --icono-cerrar: max(2.25rem, calc(40 * var(--k)));
        --integrante-foto: calc(80 * var(--k));

        gap: calc(24 * var(--k));
        padding: calc(24 * var(--k)) var(--margen-x) calc(40 * var(--k));
    }

    .galeria__flecha--anterior { left: calc(12 * var(--k)); }
    .galeria__flecha--siguiente { right: calc(12 * var(--k)); }
    .galeria__puntos { bottom: calc(12 * var(--k)); }
    .ficha__boton { align-self: stretch; justify-content: center; }

    /* Integrantes: menos espacio entre ellos y alrededor de cada foto */
    .ficha__integrantes { gap: calc(16 * var(--k)); }
    .integrantes__lista { gap: calc(12 * var(--k)); }
    .integrante { width: calc(var(--integrante-foto) * 1.5); }
}