/*
 * m—e studio · web nueva (octubre de 2026).
 *
 * El diseño va en línea en las plantillas, tal cual se aprobó en la maqueta.
 * Esta hoja pone solo lo que el marcado en línea no puede: la base de la
 * página, los ajustes de móvil, el cursor, y el estilo del contenido que llega
 * de WordPress sin clases propias (texto de proyectos y posts, páginas
 * legales, formulario, lista de clientes).
 *
 * Reglas del diseño: fondo claro y cálido, nunca negro ni gris; titulares en
 * Space Grotesk bold y en minúscula; enlaces y menús en Inconsolata; botones
 * de acción en amarillo.
 */

:root {
    --tinta: #112222;
    --fondo: #FBFAF7;
    --linea: rgba(17, 34, 34, 0.18);
    --gris: rgba(17, 34, 34, 0.66);
    --amarillo: #EFFF5D;
    --naranja: #E8501A;
    --sg: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
    --inter: 'Inter', 'Helvetica Neue', Arial, sans-serif;
    --mono: 'Inconsolata', ui-monospace, Menlo, monospace;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--fondo);
    color: var(--tinta);
    -webkit-font-smoothing: antialiased;
}

img,
video,
iframe {
    max-width: 100%;
}

a {
    color: inherit;
}

/* Hover como en la web oficial: el enlace de texto pasa a naranja; la tarjeta
   (enlace con imagen) deja la imagen en blanco y negro y colorea su título;
   el botón amarillo matiza el fondo y se encoge un 2% al pulsar. */
a {
    transition: color 0.2s ease;
}

/* El logotipo no cambia de color. */
a:not(:has(img, h2, h3)):not([aria-label*="home"]):hover {
    color: var(--naranja);
}

a:has(h3) img {
    transition: filter 0.4s ease;
}

a:has(h3) h3 {
    transition: color 0.2s ease;
}

a:has(h3):hover img {
    filter: grayscale(1) contrast(1.08);
}

a:has(h3):hover h3 {
    color: var(--naranja);
}

a[style*="background: #EFFF5D"],
button.me-button,
.search-submit {
    transition: background-color 0.4s ease, transform 0.2s ease;
}

a[style*="background: #EFFF5D"]:hover,
a[style*="background: #EFFF5D"]:focus-visible,
button.me-button:hover,
button.me-button:focus-visible,
.search-submit:hover {
    background: color-mix(in srgb, var(--amarillo) 85%, #fff) !important;
    color: var(--tinta);
}

a[style*="background: #EFFF5D"]:active,
button.me-button:active {
    transform: scale(0.98);
}

/* Flecha del hero: al pasar por ella o por el botón sale por arriba a la
   derecha, en su propia dirección, y vuelve a entrar por abajo a la izquierda. */
@keyframes hero-flecha {
    0%     { transform: translate(0, 0); }
    49.9%  { transform: translate(105%, -105%); }
    50%    { transform: translate(-105%, 105%); }
    100%   { transform: translate(0, 0); }
}

/* Bajo el titular del hero: una bola azul se desprende de otra, con la
   tensión de una gota, y las dos giran entre sí. Los valores salen del banco
   de pruebas migracion/animacion-hero.html. */
.hero-bolas-giro{transform-origin:100px 60px;animation:hero-bolas-giro 11s linear infinite}
.hero-bola-a,.hero-bola-b{animation:3.3s cubic-bezier(.65,0,.35,1) infinite alternate}
/* La grande pierde la masa que se lleva la pequeña: unidas mide 32,8 (la suma
   de las dos áreas) y al soltarla se queda en su radio, 28. */
.hero-bola-a{transform-box:fill-box;transform-origin:center;animation-name:hero-bola-a}
.hero-bola-b{animation-name:hero-bola-b}
@keyframes hero-bolas-giro{to{transform:rotate(360deg)}}
@keyframes hero-bola-a{0%,11%{transform:translateX(0) scale(1.17)}100%{transform:translateX(-26px) scale(1)}}
@keyframes hero-bola-b{0%,11%{transform:translateX(6px)}58.8%{transform:translateX(34px)}100%{transform:translateX(52px)}}

/* En reposo titila muy poco: baja a un 60 % de opacidad y vuelve, despacio. */
@keyframes hero-titila {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.6; }
}

.hero-flecha {
    animation: hero-titila 2.4s ease-in-out infinite;
}

.hero-boton:hover + .hero-flecha,
.hero-flecha:hover {
    animation: none;
}

.hero-boton:hover + .hero-flecha svg,
.hero-boton:focus-visible + .hero-flecha svg,
.hero-flecha:hover svg {
    animation: hero-flecha 0.6s cubic-bezier(0.6, 0, 0.3, 1);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

::selection {
    background: var(--amarillo);
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.salto:focus {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 30;
    width: auto;
    height: auto;
    clip-path: none;
    background: var(--fondo);
    padding: 8px 12px;
}

/* WordPress pone width y height en cada <img>; sin esto el alto del atributo
   gana a la proporción que marca el diseño. Las que fijan su alto en línea
   (las tiras de la portada) no se ven afectadas. */
#home-root img[style*="aspect-ratio"] {
    height: auto;
}

/* El círculo sustituye a la flecha solo cuando js/archivo.js lo está moviendo. */
html.con-cursor,
html.con-cursor * {
    cursor: none !important;
}

/* Lista en línea con un guion entre elementos (los servicios de Info). */
.con-guion li:not(:last-child)::after {
    content: "—";
    margin-left: 12px;
}

/* Cinta de logos de «selected global partnerships», como en la web oficial. */
.logos-cinta{display:flex;gap:100px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.logos-pista{display:flex;align-items:center;gap:100px;flex:none;list-style:none;margin:0;padding:0;animation:logos-cinta 40s linear infinite}
.logos-pista img{display:block;width:160px;height:160px;object-fit:contain}
@keyframes logos-cinta{to{transform:translateX(calc(-100% - 100px))}}
@media (prefers-reduced-motion: reduce){.logos-cinta{overflow-x:auto}.logos-pista + .logos-pista{display:none}}

/* Etiquetas y fechas (todo lo que el diseño pinta en tinta al 66 %) van en
   Inconsolata, como los enlaces y los botones. */
#home-root [style*="color: rgba(17,34,34,0.66)"] {
    font-family: var(--mono);
    font-size: 16px;
    letter-spacing: 0;
}

/* Filtro de Work: la tarjeta que no toca se esconde. */
[data-cats][hidden] {
    display: none !important;
}


/* ---------------------------------------------------------------------
 * Texto de un proyecto (llega de WordPress)
 * ------------------------------------------------------------------- */

.proyecto-texto .entradilla {
    margin: 0;
    font-family: var(--inter);
    font-weight: 700;
    font-size: clamp(22px, 2.4vw, 34px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    max-width: 26ch;
}

.proyecto-columnas > * {
    margin: 0 0 16px;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400;
}

.proyecto-columnas > *:last-child {
    margin-bottom: 0;
}

.proyecto-medios > * {
    margin: 0;
}

.proyecto-medios figure {
    margin: 0;
}

.proyecto-medios img,
.proyecto-medios video {
    display: block;
    width: 100%;
    height: auto;
}

.proyecto-medios iframe {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 0;
}

.proyecto-medios > p,
.proyecto-medios > h2,
.proyecto-medios > h3,
.proyecto-medios > ul {
    max-width: 62ch;
    padding: 32px 0;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400;
}

.proyecto-medios > h2,
.proyecto-medios > h3 {
    font-family: var(--inter);
    font-weight: 700;
    font-size: clamp(22px, 2.4vw, 34px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    padding-bottom: 0;
}

.proyecto-medios .wp-block-columns,
.proyecto-medios .wp-block-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.proyecto-medios .wp-block-column,
.proyecto-medios .wp-block-gallery > figure {
    flex: 1 1 240px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.proyecto-medios .wp-block-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.me-video-play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 64px;
    height: 64px;
    border: 1px solid var(--tinta);
    border-radius: 50%;
    background: var(--fondo);
}


/* ---------------------------------------------------------------------
 * Post del journal
 * ------------------------------------------------------------------- */

.post-imagen img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    background: #EFEDE7;
}

.post-texto > * {
    margin: 0;
}

.post-texto p,
.post-texto li {
    font-size: 18px;
    line-height: 1.45;
    max-width: 52ch;
}

.post-texto .entradilla {
    max-width: none;
    font-family: var(--inter);
    font-weight: 700;
    font-size: clamp(22px, 2.4vw, 34px);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.post-texto .entradilla em {
    font-style: normal;
}

.post-texto h2,
.post-texto h3,
.post-texto h4 {
    font-family: var(--inter);
    font-weight: 700;
    font-size: clamp(22px, 2.2vw, 31px);
    line-height: 1.12;
    letter-spacing: -0.02em;
    padding-top: 16px;
}

.post-texto img,
.post-texto video {
    display: block;
    width: 100%;
    height: auto;
}

.post-texto a,
.proyecto-columnas a,
.prosa-legal a {
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* ---------------------------------------------------------------------
 * Páginas de texto: imprint, privacidad
 * ------------------------------------------------------------------- */

.prosa-legal {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 760px;
}

.prosa-legal > * {
    margin: 0;
}

.prosa-legal p,
.prosa-legal li {
    font-size: 16px;
    line-height: 1.5;
    max-width: 70ch;
}

.prosa-legal > h2,
.prosa-legal > h3,
.prosa-legal > h4,
.prosa-legal > .apartado {
    border-top: 1px solid var(--linea);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.35;
    padding: 14px 0 4px;
    margin-top: 28px;
}

.prosa-legal > :first-child {
    margin-top: 0;
}

.prosa-legal strong {
    font-weight: 500;
}


/* ---------------------------------------------------------------------
 * Formulario de contacto (me_studio_formulario_contacto)
 * ------------------------------------------------------------------- */

.me-form-inner,
.me-form-campos {
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.me-form-campo {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: var(--mono);
    font-size: 16px;
}

.me-form-campo input,
.me-form-campo textarea {
    font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
    font-size: 18px;
    color: var(--tinta);
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(17, 34, 34, 0.5);
    border-radius: 0;
    padding: 12px 0;
    min-height: 48px;
    width: 100%;
}

.me-form-campo textarea {
    resize: vertical;
}

/* Trampa de miel: fuera de la vista sin display:none, que algunos bots detectan. */
.me-form-trampa {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.me-form-enviar {
    margin: 0;
}

button.me-button {
    border: 0;
    border-radius: 0;
    background: var(--amarillo);
    color: var(--tinta);
    padding: 8px 14px;
    min-height: 44px;
    font-family: var(--mono);
    font-size: 16px;
}

/* Lo que espera al sí de las cookies: el hueco de un vídeo de Vimeo y la
   verificación del formulario. Un bloque azul con la explicación y el botón. */
.me-video-bloqueo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 16px;
    width: 100%;
    aspect-ratio: 16 / 9;
    padding: clamp(16px, 3vw, 32px);
    background: #A2C1C4;
}

/* El iframe sin src no ocupa ni tapa nada hasta que haya consentimiento. */
iframe[data-vimeo-src] {
    display: none !important;
}

.me-video-bloqueo--encima {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
}

.me-video-bloqueo p {
    margin: 0;
    padding: 0;
    max-width: 34ch;
    font-family: var(--inter);
    font-weight: 700;
    font-size: clamp(18px, 1.8vw, 24px);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.me-form-bloqueo {
    aspect-ratio: auto;
    padding: 20px;
}

.me-form-bloqueo p {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.4;
    max-width: 52ch;
}

button.me-button[disabled] {
    opacity: 0.4;
}

/* Aviso de cookies: «Decline» pesa lo mismo que «Accept», solo cambia el relleno. */
#me-consent[hidden] {
    display: none !important;
}

button.me-button-linea {
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--tinta);
}

button.me-button-linea:hover,
button.me-button-linea:focus-visible {
    background: var(--tinta) !important;
    color: var(--fondo);
}

button[data-consent-abrir] {
    transition: color 0.2s ease;
}

button[data-consent-abrir]:hover {
    color: var(--naranja);
}

.me-form-aviso {
    margin: 0;
    border-top: 1px solid var(--linea);
    border-bottom: 1px solid var(--linea);
    padding: 14px 0;
    font-size: 18px;
}


/* ---------------------------------------------------------------------
 * «work built on trust» ([work_collaborations])
 * ------------------------------------------------------------------- */

.confianza ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.work-collaborations-list {
    border-top: 1px solid var(--linea);
}

.work-collaboration {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 4px 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--linea);
}

.work-collaboration-client {
    font-weight: 500;
    font-size: 16px;
}

.work-collaboration-items {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: var(--mono);
    font-size: 16px;
}

.work-collaboration-items a {
    text-decoration: none;
}


/* ---------------------------------------------------------------------
 * Búsqueda y paginación
 * ------------------------------------------------------------------- */

.search-form {
    display: flex;
    gap: 12px;
    align-items: flex-end;
}

.search-field {
    font-size: 18px;
    border: 0;
    border-bottom: 1px solid rgba(17, 34, 34, 0.5);
    border-radius: 0;
    padding: 12px 0;
    background: transparent;
}

.search-submit {
    border: 0;
    background: var(--amarillo);
    padding: 8px 14px;
    font-family: var(--mono);
    font-size: 16px;
}

.pagination {
    padding-top: 56px;
    font-family: var(--mono);
    font-size: 16px;
}

.pagination .nav-links {
    display: flex;
    gap: 16px;
}


/* ---------------------------------------------------------------------
 * Móvil
 * ------------------------------------------------------------------- */

@media (max-width: 700px) {

    /* Zonas táctiles: los enlaces del menú, del pie, de la lista de clientes
       y el filtro de Work miden una línea de texto; con el dedo hacen falta
       al menos 40 px de alto. */
    #home-root header nav a,
    #home-root footer a:not([aria-label]),
    #home-root footer button,
    .work-collaboration-items a {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    /* Estos traen su padding en línea; hace falta imponerse. */
    [data-filtro] button[data-cat],
    #home-root footer button {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    /* Enlaces sueltos en Inconsolata («View project», «About the two of us»). */
    #home-root main a[style*="Inconsolata"]:not([style*="background"]):not([style*="display: flex"]) {
        display: inline-block;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .m-full {
        grid-column: 1 / -1 !important;
    }

    .m-left {
        text-align: left !important;
    }

    .m-wide {
        max-width: none !important;
    }

    .m-one,
    .work-collaboration {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (prefers-reduced-motion: reduce) {

    * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/*
 * Reseñas: si no caben todas, la barra de abajo se queda a la vista (07-10-2026).
 * En Mac la barra del sistema se esconde sola y no se sabe que hay más; esta
 * es propia —una línea fina con el tramo oscuro— y solo sale si hay desborde.
 */
/* Firefox. En Chrome estas dos propiedades anulan las ::-webkit de abajo y la barra vuelve a esconderse. */
@supports not selector(::-webkit-scrollbar) {
    #voices {
        scrollbar-width: thin;
        scrollbar-color: #112222 rgba(17, 34, 34, 0.18);
    }
}
#voices::-webkit-scrollbar {
    height: 3px;
}
#voices::-webkit-scrollbar-track {
    background: rgba(17, 34, 34, 0.18);
}
#voices::-webkit-scrollbar-thumb {
    background: #112222;
}

/*
 * Cabecera en móvil con el selector de idioma (08-10-2026): con EN DE ES el
 * menú ya no cabía en una fila y «Contact» caía a una segunda. Se aprietan
 * los huecos y un punto la letra para que quepa también en alemán y español.
 */
@media (max-width: 480px) {
    header nav[aria-label] {
        flex: 1 1 100%;
        justify-content: space-between;
        gap: 8px 8px !important;
        font-size: 15px !important;
    }
    header nav[aria-label] > [role="group"] {
        gap: 8px !important;
    }
    header nav[aria-label] > a[style*="#EFFF5D"] {
        padding: 8px 10px !important;
    }
}