/*
Theme Name:   M-E Studio
Theme URI:    https://github.com/chenouk/me-studio-theme
Description:  Tema propio de M-E Studio. Sin tema padre y sin page builders.
Author:       M-E Studio
Version:      2.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain:  me-studio
*/

/* ==================================================
   TOKENS DE DISEÑO
   Recuperados del Kit global de Elementor para que el
   tema no dependa de él. Colores y tipografías del kit,
   más el naranja propio del footer.
================================================== */

:root {
    --me-bg:             #F3F2EE;
    --me-text:           #112222;
    --me-primary:        #B5A239;
    --me-secondary:      #F25F2C;
    --me-accent-light:   #EFFF5D;
    --me-accent-neutral: #A2C1C4;
    --me-accent-deep:    #018391;
    --me-white:          #FFFFFF;
    --me-orange:         #E8501A;

    /* Margen lateral de todo el sitio: el mismo espacio a izquierda y derecha
       en todas las paginas. Cambiando este valor se mueve el marco entero.
       En movil se redefine mas abajo, y las secciones lo siguen solas. */
    --me-gutter:         40px;

    --me-font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
    --me-font-body:    "Inter", "Helvetica Neue", Arial, sans-serif;
    --me-font-mono:    "Inconsolata", ui-monospace, monospace;
}

/* Marco mas estrecho en movil. Al redefinir el token aqui, cada seccion lo
   hereda sin necesidad de un override propio en su media query. */
@media (max-width: 767px) {
    :root {
        --me-gutter: 20px;
    }
}

/* ==================================================
   BASE
   Reset y tipografía de partida. Antes venían del
   tema padre; ahora que me-studio es independiente
   los define él.
================================================== */

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

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

body {
    margin: 0;
    background-color: var(--me-bg);
    color: var(--me-text);
    font-family: var(--me-font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--me-font-display);
    font-weight: 700;
    line-height: 1.2;
    color: inherit;
    margin: 0 0 16px;
}

h1 { font-size: 62px; }
h2 { font-size: 32px; }
h3 { font-size: 28px; }
h4 { font-size: 24px; }
h5 { font-size: 20px; }
h6 { font-size: 16px; }

p {
    margin: 0 0 16px;
}

a {
    color: inherit;
}

img,
video,
svg {
    max-width: 100%;
    height: auto;
}

figure {
    margin: 0;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

/* Alineaciones del editor de WordPress */
.alignleft   { float: left;  margin: 5px 20px 20px 0; }
.alignright  { float: right; margin: 5px 0 20px 20px; }
.aligncenter { clear: both; display: block; margin-inline: auto; }
.alignwide   { margin-inline: -80px; }
.alignfull   { margin-inline: calc(50% - 50vw); max-width: 100vw; width: 100vw; }

.wp-caption { margin-block-end: 20px; max-width: 100%; }
.wp-caption img { display: block; margin-inline: auto; }
.wp-caption-text { margin: 0; font-size: 13px; }

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}


/* ==================================================
   HEADER
   La clase es .me-header, no .site-header. Viene de
   cuando el tema era hijo de Hello Elementor, que
   estilaba .site-header con un max-width de 1140px.
   Se mantiene el nombre por coherencia con .me-footer.
================================================== */

.me-header {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #eee;

    /* Fijo al hacer scroll. sticky en vez de fixed para que siga ocupando
       su hueco en el flujo y no haga falta compensar con padding en el body. */
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* Con la barra de admin de WordPress (fixed, 32px) el header se colaria
   por debajo. En movil la barra pasa a 46px y deja de ser fixed al hacer scroll. */
body.admin-bar .me-header {
    top: 32px;
}

@media (max-width: 782px) {
    body.admin-bar .me-header {
        top: 0;
    }
}

/* Los anclajes internos no deben quedar tapados por el header. */
html {
    scroll-padding-top: 120px;
}

.me-header-inner {
    width: 100%;
    padding: 14px var(--me-gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    z-index: 1000;
}

.me-header-logo {
    font-size: 18px;
    font-weight: 500;
}

.me-header-logo a {
    text-decoration: none;
    color: #1a1a1a;
}

.site-logo-img {
    width: 80px;
    height: auto;
}

/* ===== Navegación (desktop) ===== */

.main-nav {
    display: flex;
}

.nav-menu,
.nav-menu li {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-menu {
    gap: 24px;
}

.nav-menu li {
    display: block;
}

.nav-menu a {
    font-family: "Inconsolata", monospace;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #1a1a1a;
    text-decoration: none;
}

.nav-menu a:hover,
.nav-menu .current-menu-item > a {
    color: #E8501A;
}

/* ==================================================
   WORK GRID
================================================== */

.work-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.work-item {
    display: block;
    text-decoration: none;
    color: inherit;
}

.work-item img {
    width: 100%;
    height: auto;
    display: block;
}

/* El título va pegado a la imagen, que es block y no deja hueco. Solo en la
   página work: la rejilla de la portada usa el mismo .work-item y allí se
   mantiene como estaba. */
.work-page .work-item h3 {
    padding-top: 16px;
}

/* ==================================================
   MOBILE MENU
================================================== */

.menu-toggle {
    display: none;
    background: none;
    border: 0;
    font-size: 28px;
    cursor: pointer;
}

@media (max-width: 768px) {

    .menu-toggle {
        display: block;
    }

    .main-nav {
        display: none;
        width: 100%;
    }

    .main-nav.active {
        display: block;
    }

    .me-header-inner {
        flex-wrap: wrap;
        gap: 10px;
        padding: 14px var(--me-gutter);
    }

    .nav-menu {
        flex-direction: column;
        gap: 12px;
    }

    .work-grid {
        grid-template-columns: 1fr;
    }
}

/* ==================================================
   VALUE ANIMATION HOME
================================================== */
.value-animation img {
    animation: rotate 10s linear infinite;
    width: 240px !important;
    height: 240px !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: 0 !important;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}


/* ===== JOURNAL HOME ===== */
.journal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

@media (max-width: 768px) {
    .journal-grid {
        grid-template-columns: 1fr;
    }
}

.journal-item {
    display: block;
    text-decoration: none;
    color: inherit;
}

.journal-item img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 12px;
}

.journal-item h3 {
    font-size: 16px;
    font-weight: 400;
    margin: 0;
}


/* ===== FOOTER ===== */
.me-footer {
    background-color: #E8501A;
    padding: 60px var(--me-gutter) 30px;
    color: #1a1a1a;
}

.me-footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 80px;
}

.me-footer-tagline {
    font-size: 62px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 40px 0;
    color: #1a1a1a;
}

.me-footer-social {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.me-footer-social a {
    font-size: 13px;
    color: #1a1a1a;
    text-decoration: none;
    font-family: monospace;
}

.me-footer-social a:hover {
    text-decoration: underline;
}

.me-footer-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 40px;
}

.me-footer-cta {
    font-size: 13px;
    color: #1a1a1a;
    text-decoration: none;
    font-family: monospace;
}

.me-footer-logo img {
    width: 120px;
    height: auto;
    filter: brightness(0);
}

.me-footer-bottom {
    font-size: 11px;
    color: #1a1a1a;
    font-family: monospace;
}

.me-footer-bottom a {
    color: #1a1a1a;
    text-decoration: none;
}

.me-footer-bottom a:hover {
    text-decoration: underline;
}

/* ===== SINGLE PROJECT ===== */
/* Mismo fondo claro que la pagina journal: la ficha de proyecto no hereda
   el beige del body. Vale para todos los proyectos, que comparten plantilla. */
.single-project {
    max-width: 100%;
    background: var(--me-white);
}

.project-content {
    padding: 60px var(--me-gutter);
}

/* Navegación anterior/siguiente (proyectos y journal) */
.project-nav,
.post-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px var(--me-gutter);
    border-top: 1px solid #e0e0e0;
}

.project-nav a,
.post-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: "Inconsolata", monospace;
    font-size: 14px;
    color: #1a1a1a;
    text-decoration: none;
}

.project-nav a:hover,
.post-nav a:hover {
    color: #E8501A;
}

/* Si solo hay uno de los dos enlaces, que se quede en su lado */
.post-nav .post-nav-next:only-child {
    margin-left: auto;
}

.nav-arrow {
    font-size: 20px;
}

/* ===== PROYECTOS RELACIONADOS ===== */
/* Misma rejilla y mismo margen lateral que la de Work y la de la portada. */
.related-projects {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid #e0e0e0;
    padding: 0 var(--me-gutter);
}

.related-item {
    position: relative;
    display: block;
    text-decoration: none;
    color: #1a1a1a;
    border-right: 1px solid #e0e0e0;
    overflow: hidden;
    min-height: 400px;
}

.related-item:last-child {
    border-right: none;
}

/* Imagen oculta por defecto */
.related-item-curtain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.25s ease;
    z-index: 1;
}

.related-item-curtain img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Al hacer hover aparece la imagen rápido */
.related-item:hover .related-item-curtain {
    opacity: 1;
}

/* Info en la parte superior */
.related-item-info {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 24px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: opacity 0.25s ease;
}

/* Texto desaparece al hacer hover */
.related-item:hover .related-item-info {
    opacity: 0;
}




.related-arrow {
    position: absolute;
    bottom: 24px;
    left: 24px;
    z-index: 3;
    width: 24px;
    height: 24px;
    color: #1a1a1a;
}

.related-arrow svg {
    width: 24px;
    height: 24px;
}

.related-item:hover .related-arrow {
    color: #ffffff;
}

/* ==================================================
   PORTADA (front-page.php)
   Medidas tomadas de la portada de Elementor a 1440px.
   Breakpoints: los mismos que usaba Elementor
   (laptop 1366, tablet 1024, móvil 767).
================================================== */

.home {
    background: var(--me-bg);
    color: var(--me-text);
    font-family: var(--me-font-body);
}

/* Botón compartido por las tres llamadas a la acción */
.me-button {
    display: inline-block;
    font-family: var(--me-font-mono);
    font-size: 20px;
    font-weight: 400;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--me-text);
    background: var(--me-primary);
    padding: 12px 24px;
    border-radius: 3px;
    border: 0;
    transition: background-color 0.2s ease;
}

.me-button:hover {
    background: var(--me-accent-light);
    color: var(--me-text);
}

/* Contenedor de las secciones que lo llevan. Ya no recorta el ancho: el
   margen lateral lo pone --me-gutter en la propia seccion, como en el resto
   del sitio. Antes traia un max-width de 1140px heredado de Hello Elementor
   que sumaba 30px por lado sobre el gutter. */
.home-inner {
    width: 100%;
}

/* Ancho maximo del contenido de estas tres secciones. El limite va en
   .home-inner y no en la <section>, para que los fondos de color de
   .home-about y .home-journal sigan ocupando todo el ancho de la pantalla. */
.home-about .home-inner,
.home-testimonials .home-inner,
.home-journal .home-inner {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.home-section-title {
    font-family: var(--me-font-display);
    font-size: 32px;
    line-height: 32px;
    font-weight: 700;
    color: var(--me-text);
    margin: 0;
}

/* ===== Hero ===== */
.home-hero {
    position: relative;
    background: var(--me-bg);
    overflow: hidden;
    padding: 0 var(--me-gutter);
}

.home-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.home-hero-inner {
    position: relative;
    z-index: 1;
    margin: 10vw 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.home-hero-title {
    font-family: var(--me-font-display);
    font-size: 62px;
    line-height: 62px;
    font-weight: 700;
    color: var(--me-secondary);
    margin: 0;
}

.home-hero-action {
    margin: 0;
}

/* El SVG que gira; la animación vive en VALUE ANIMATION HOME */
.home-hero .value-animation {
    margin-top: 160px;
}

/* ===== Declaración ===== */
.home-statement {
    background: var(--me-bg);
    padding: 160px var(--me-gutter);
}

.home-statement h2 {
    font-family: var(--me-font-display);
    font-size: 40px;
    line-height: 40px;
    font-weight: 700;
    color: var(--me-text);
    margin: 0;
}

/* ===== Proyectos ===== */
.home-work {
    background: var(--me-bg);
    padding: 20px var(--me-gutter);
}

.home-work-cta {
    padding: 80px 0;
    text-align: center;
}

/* El enlace va dentro de un parrafo editable; sin esto arrastraria el margen
   inferior global, igual que .home-hero-action y .home-journal-action. */
.home-work-cta p {
    margin: 0;
}

/* ===== Quiénes somos (fondo oscuro) ===== */
.home-about {
    background: var(--me-text);
    padding: 160px var(--me-gutter);
}

.home-about .home-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
}

.home-about-title {
    font-family: var(--me-font-display);
    font-size: 28px;
    line-height: 28px;
    font-weight: 700;
    color: var(--me-bg);
    margin: 0;
    flex: 1;
}

.home-about-text {
    flex: 1;
    max-width: 512px;
}

.home-about-text p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--me-bg);
    margin: 0;
}

/* ===== Testimonios ===== */
.home-testimonials {
    padding: 0 var(--me-gutter);
}

.home-testimonials .home-inner {
    padding: 80px 0;
    display: flex;
    flex-direction: column;
    gap: 80px;
}

/* El slider ya trae su propio padding desde TESTIMONIALS SLIDER */
.home-testimonials .testimonial-slide {
    padding-left: 0;
    padding-right: 0;
}

.home-testimonials .testimonials-controls {
    padding-left: 0;
    padding-right: 0;
}

/* ===== Journal ===== */
.home-journal {
    background: var(--me-accent-neutral);
    padding: 0 var(--me-gutter);
}

.home-journal .home-inner {
    padding: 100px 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.home-journal-intro {
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
}

.home-journal-action {
    margin: 0;
    text-align: center;
}

/* ===== Partners ===== */
.home-partners {
    background: var(--me-bg);
    padding: 80px var(--me-gutter) 0;
}

.home-partners .home-inner {
    padding: 16px 4px 4px;
    text-align: center;
}

.partners-marquee {
    display: flex;
    gap: 100px;
    margin-top: 80px;
    padding: 0 var(--me-gutter) 40px;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.partners-track {
    display: flex;
    align-items: center;
    gap: 100px;
    flex-shrink: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    animation: partners-scroll 40s linear infinite;
}

.partners-marquee:hover .partners-track {
    animation-play-state: paused;
}

.partners-item {
    flex-shrink: 0;
    margin: 0;
}

/* Los logos son lienzos cuadrados de 550x550 con la marca centrada,
   así que se muestran en cuadrado y no recortados. */
.partners-item img {
    display: block;
    width: 160px;
    height: 160px;
    object-fit: contain;
}

@keyframes partners-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-100% - 100px)); }
}

@media (prefers-reduced-motion: reduce) {
    .partners-track { animation: none; }
    .partners-marquee { overflow-x: auto; mask-image: none; }
}

/* ===== Portada — laptop ===== */
@media (max-width: 1366px) {
    .home-statement { padding: 100px var(--me-gutter) 60px; }
    .home-work      { padding: 20px var(--me-gutter); }
    .home-about     { padding: 80px var(--me-gutter) 80px var(--me-gutter); }
    .home-testimonials { padding: 0 var(--me-gutter); }
}

/* ===== Portada — tablet ===== */
@media (max-width: 1024px) {
    .home-hero-title   { font-size: 44px; line-height: 46px; }
    .home-statement    { padding: 80px var(--me-gutter); }
    .home-statement h2 { font-size: 32px; line-height: 34px; }
    .home-work         { padding: 16px var(--me-gutter); }
    .home-work-cta     { padding: 40px 0 80px; }
    .home-about        { padding: 80px var(--me-gutter); }
    .home-about .home-inner { flex-direction: column; align-items: flex-start; gap: 40px; }
    .home-about-title  { font-size: 60px; line-height: 60px; }
    .home-about-text   { max-width: none; }
    .home-testimonials { padding: 0 var(--me-gutter); }
    .home-journal      { padding: 0 var(--me-gutter); }
}

/* ===== Portada — móvil ===== */
@media (max-width: 767px) {
    .home-hero-title   { font-size: 32px; line-height: 34px; }
    .home-hero-inner   { margin: 12vw 5vw; }
    .home-hero .value-animation { margin-top: 60px; }
    .home-hero .value-animation img { width: 160px !important; height: 160px !important; }
    .home-statement    { padding: 60px var(--me-gutter) 40px; }
    .home-statement h2 { font-size: 26px; line-height: 30px; }
    .home-about        { padding: 60px var(--me-gutter) 40px; }
    .home-about-title  { font-size: 40px; line-height: 42px; }
    .home-section-title { font-size: 26px; line-height: 28px; }
    .home-testimonials { padding: 0 var(--me-gutter); }
    .home-testimonials .home-inner { padding: 40px 0; gap: 40px; }
    .home-journal      { padding: 0 var(--me-gutter); }
    .home-journal .home-inner { padding: 80px 0; }
    .home-partners     { padding: 40px 0 0; }
    .partners-marquee  { gap: 60px; margin-top: 40px; padding: 0 var(--me-gutter) 40px; }
    .partners-track    { gap: 60px; }
    .partners-item img { width: 100px; height: 100px; }
    @keyframes partners-scroll {
        from { transform: translateX(0); }
        to   { transform: translateX(calc(-100% - 60px)); }
    }
    .me-button { font-size: 16px; padding: 10px 20px; }
}

/* ==================================================
   PÁGINA INFO (page-info.php)
   Valores tomados de la página de Elementor a 1440px.
================================================== */

.info-page {
    background: var(--me-bg);
    color: var(--me-text);
    font-family: var(--me-font-body);
}

/* Ancho maximo del contenido de la pagina info. Igual que en la portada, el
   limite va en el contenedor interno y no en la <section>, para que los fondos
   de intro, servicios y proceso sigan ocupando todo el ancho de la pantalla. */
.info-inner {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.info-heading {
    font-family: var(--me-font-display);
    font-size: 32px;
    line-height: 32px;
    font-weight: 700;
    color: var(--me-text);
    margin: 0;
}

.info-text p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--me-text);
    margin: 0 0 20px;
}

.info-text p:last-child {
    margin-bottom: 0;
}

/* ===== Hero en vídeo ===== */
.info-hero {
    position: relative;
    min-height: 450px;
    overflow: hidden;
}

.info-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===== Intro ===== */
.info-intro {
    background: var(--me-bg);
    padding: 80px var(--me-gutter);
}

.info-intro .info-inner {
    display: flex;
    flex-direction: column;
    gap: 80px;
}

.info-intro-hello {
    font-family: var(--me-font-display);
    font-size: 62px;
    line-height: 62px;
    font-weight: 700;
    color: var(--me-text);
    margin: 0;
}

.info-intro-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.info-intro-text {
    max-width: 50%;
}

/* ===== Servicios ===== */
.info-services {
    background: var(--me-white);
    padding: 80px var(--me-gutter);
}

.info-services .info-inner {
    display: flex;
    flex-direction: column;
    gap: 80px;
}

/* ===== Proceso de trabajo ===== */
.info-process {
    background: var(--me-accent-neutral);
    padding: 160px var(--me-gutter);
}

.info-process .info-inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.info-process-header {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.info-process-intro {
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
}

.info-process-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 80px;
    list-style: none;
    margin: 60px 0 0;
    padding: 0;
}

.info-step {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
}

.info-step-number {
    font-family: var(--me-font-display);
    font-size: 62px;
    line-height: 62px;
    font-weight: 700;
    color: var(--me-accent-deep);

    /* Ahora es un <p> editable, no un <span>: sin esto arrastraria el margen
       inferior global de los parrafos y se sumaria al gap del .info-step. */
    margin: 0;
}

.info-step-title {
    font-family: var(--me-font-display);
    font-size: 28px;
    line-height: 28px;
    font-weight: 700;
    color: var(--me-accent-deep);
    margin: 0;
}

.info-step-text {
    font-size: 20px;
    line-height: 24px;
    font-weight: 700;
    color: var(--me-text);
    margin: 0;
}

/* ===== Partners ===== */
.info-partners {
    background: var(--me-white);
    padding: 80px var(--me-gutter) 160px;
    display: flex;
    flex-direction: column;
    gap: 80px;
}

/* Es un h2 por semantica, pero no debe verse como un titulo: se le devuelve la
   tipografia de texto que tenia cuando era un <p><strong>. */
.info-partners-label {
    font-family: var(--me-font-body);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6;
    margin: 0;
}

/* Estos logos son apaisados (550x200), no cuadrados como los de la portada */
.partners-marquee--wide .partners-item img {
    width: auto;
    height: 80px;
}

/* ===== Equipo ===== */
.info-team {
    background: var(--me-primary);
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
}

/* Sin padding lateral: si lo lleva el propio flex item, se suma al reparto y
   este bloque acaba mas ancho que la foto. El margen lateral lo pone .info-team-inner. */
.info-team-body {
    flex: 1;
    padding: 80px 0;
}

/* El bloque sigue ocupando su mitad de la seccion; lo que se limita a 600px y se
   centra es el texto de dentro. Si el tope se pusiera en .info-team-body, la foto
   (flex:1, sin tope) se quedaria con todo el espacio sobrante y el centrado no
   llegaria a aplicarse. */
.info-team-inner {
    /* El gutter va dentro del max-width (box-sizing: border-box), de ahi el calc():
       asi el texto mide 600px exactos y no 600 menos los dos margenes. */
    max-width: calc(600px + var(--me-gutter) * 2);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--me-gutter);
    padding-right: var(--me-gutter);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.info-team-photo {
    flex: 1;
}

.info-team-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==================================================
   BLOQUE DE CONTACTO COMPARTIDO
   (template-parts/contact-cta.php — info y journal)
================================================== */

.me-cta {
    background: var(--me-bg);
    padding: 80px var(--me-gutter);
}

.me-cta-inner {
    padding: 40px 0;
    display: flex;
    flex-direction: column;
    gap: 20px;

    /* Mismo ancho que el resto del contenido. Lo usan info, journal y play, y
       las tres lo quieren igual, asi que se acota aqui una sola vez. */
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.me-cta-title {
    font-family: var(--me-font-display);
    font-size: 28px;
    line-height: 28px;
    font-weight: 700;
    color: var(--me-text);
    margin: 0;
}

.me-cta-email {
    margin: 0;
}

.me-cta-email a {
    font-family: var(--me-font-display);
    font-size: 24px;
    line-height: 24px;
    font-weight: 700;
    color: var(--me-primary);
    text-decoration: none;
}

.me-cta-email a:hover {
    color: var(--me-secondary);
}

@media (max-width: 1024px) {
    .me-cta       { padding: 80px var(--me-gutter); }
    .me-cta-inner { padding: 0; }
}

@media (max-width: 767px) {
    .me-cta         { padding: 80px var(--me-gutter); }
    .me-cta-title   { font-size: 24px; line-height: 26px; }
    .me-cta-email a { font-size: 20px; line-height: 22px; }
}

/* ===== Info — tablet ===== */
@media (max-width: 1024px) {
    .info-intro         { padding: 80px var(--me-gutter); }
    .info-intro-hello   { font-size: 44px; line-height: 46px; }
    .info-intro-text    { max-width: none; }
    .info-process       { padding: 80px var(--me-gutter) 160px; }
    .info-process-steps { grid-template-columns: repeat(2, 1fr); gap: 48px; }
    .info-team          { flex-direction: column; }
    .info-team-photo img { height: auto; }
}

/* ===== Info — móvil ===== */
@media (max-width: 767px) {
    .info-hero          { min-height: 260px; }
    .info-intro         { padding: 40px var(--me-gutter); }
    .info-intro .info-inner { gap: 40px; }
    .info-intro-hello   { font-size: 32px; line-height: 34px; }
    .info-heading       { font-size: 26px; line-height: 28px; }
    .info-services      { padding: 40px var(--me-gutter); }
    .info-services .info-inner { gap: 40px; }
    .info-process       { padding: 80px var(--me-gutter); }
    .info-process-steps { grid-template-columns: 1fr; gap: 40px; margin-top: 40px; }
    .info-step-number   { font-size: 44px; line-height: 44px; }
    .info-step-title    { font-size: 24px; line-height: 26px; }
    .info-step-text     { font-size: 17px; line-height: 22px; }
    .info-partners      { padding: 40px var(--me-gutter) 80px; gap: 40px; }
    .partners-marquee--wide .partners-item img { height: 56px; }
    .info-team-body     { padding: 40px 0; }
}

/* ==================================================
   PÁGINA CONTACT (page-contact.php)
================================================== */

.contact-page,
.work-page,
.journal-page,
.play-page {
    background: var(--me-bg);
    color: var(--me-text);
    font-family: var(--me-font-body);
}

.contact-intro {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

.contact-intro-text {
    flex: 1;
    padding: 40px var(--me-gutter);
    display: flex;
    flex-direction: column;
    gap: 20px;

    /* Este bloque es tan alto como la foto de al lado; sin esto el texto se
       queda pegado arriba y deja un hueco enorme debajo.
       En una columna flex, justify-content centra en vertical y align-items en
       horizontal; text-align hace lo propio con las dos lineas del titulo, que
       van separadas por un <br>. */
    justify-content: center;
    align-items: center;
    text-align: center;
}

.contact-title {
    font-family: var(--me-font-display);
    font-size: 32px;
    line-height: 32px;
    font-weight: 700;
    color: var(--me-text);
    margin: 0;
}

.contact-email {
    margin: 0;
}

.contact-email a {
    font-family: var(--me-font-display);
    font-size: 32px;
    line-height: 32px;
    font-weight: 700;
    color: var(--me-primary);
    text-decoration: none;
}

.contact-email a:hover {
    color: var(--me-secondary);
}

.contact-intro-photo {
    flex: 1;
}

.contact-intro-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contact-where {
    background: var(--me-accent-neutral);
    padding: 200px var(--me-gutter);
}

/* Como en el resto del sitio, el tope va en el contenedor interno y no en la
   <section>, para que la franja azulada siga ocupando todo el ancho. */
.contact-inner {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.contact-where-title {
    font-family: var(--me-font-display);
    font-size: 28px;
    line-height: 28px;
    font-weight: 700;
    color: var(--me-text);
    margin: 0;
}

.contact-photo img {
    display: block;
    width: 100%;
    height: 400px;
    object-fit: cover;
}

@media (max-width: 1024px) {
    .contact-intro { flex-direction: column; }
    .contact-intro-photo img { height: auto; }
}

@media (max-width: 767px) {
    .contact-intro-text { padding: 40px var(--me-gutter); }
    .contact-title      { font-size: 24px; line-height: 26px; }
    .contact-email a    { font-size: 24px; line-height: 26px; }
    .contact-where      { padding: 40px var(--me-gutter); }
    .contact-where-title { font-size: 24px; line-height: 26px; }
    .contact-photo img  { height: 240px; }
}

/* ==================================================
   PÁGINA WORK (page-work.php)
================================================== */

/* Cabecera de las tres páginas de listado: work, journal y play.
   Mismo tratamiento en las tres — título grande y texto debajo, sobre
   blanco, de modo que la cabecera y la rejilla formen una sola banda. */
.work-header,
.journal-header,
.play-header {
    background: var(--me-white);
    padding: 40px var(--me-gutter);
}

/* Ancho maximo del contenido de journal y play. Como en portada e info, el
   limite va en el contenedor interno y no en la <section>, para que el fondo
   siga ocupando todo el ancho. */
.journal-inner,
.play-inner {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.work-title,
.journal-title,
.play-title {
    font-family: var(--me-font-display);
    font-size: 62px;
    line-height: 62px;
    font-weight: 700;
    color: var(--me-primary);
    margin: 0 0 20px;
}

.work-intro,
.journal-intro,
.play-intro {
    font-size: 16px;
    line-height: 1.6;
    color: var(--me-text);
    margin: 0;
    max-width: 800px;
}

/* El original dejaba una banda blanca de 320px entre la rejilla y las
   colaboraciones; aquí es el padding inferior de la propia rejilla. */
.work-grid-section {
    background: var(--me-white);
    padding: 20px var(--me-gutter) 340px;
}

.work-collaborations {
    background: var(--me-primary);
    padding: 80px var(--me-gutter);
}

.work-collaborations-title {
    font-family: var(--me-font-display);
    font-size: 24px;
    line-height: 24px;
    font-weight: 700;
    color: var(--me-text);
    margin: 0 0 40px;
}

.work-collaborations-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.work-collaboration {
    margin: 0 0 8px;
}

.work-collaboration a,
.work-collaboration span {
    font-family: var(--me-font-mono);
    font-size: 16px;
    line-height: 1.6;
    color: var(--me-text);
    text-decoration: none;
}

.work-collaboration a:hover {
    color: var(--me-white);
}

@media (max-width: 767px) {
    .work-header,
    .journal-header,
    .play-header  { padding: 32px var(--me-gutter); }
    .work-title         { font-size: 36px; line-height: 38px; }
    .work-grid-section  { padding: 16px var(--me-gutter) 120px; }
    .work-collaborations { padding: 60px var(--me-gutter); }
}

/* ==================================================
   PÁGINAS JOURNAL Y PLAY
================================================== */

/* Las rejillas van sobre fondo blanco, igual que en work */
.journal-grid-section,
.play-grid-section {
    background: var(--me-white);
    padding: 20px var(--me-gutter);
}

/* Cuando una rejilla se queda sin posts (p. ej. al filtrar por categoría) */
.journal-empty {
    font-family: var(--me-font-mono);
    font-size: 14px;
    color: var(--me-text);
    margin: 0;
}

@media (max-width: 767px) {
    .journal-grid-section,
    .play-grid-section    { padding: 16px var(--me-gutter); }
    .journal-title,
    .play-title           { font-size: 36px; line-height: 38px; }
}

/* ==================================================
   404
================================================== */

.error-page {
    background: var(--me-bg);
    padding: 120px var(--me-gutter) 160px;
}

.error-page-inner {
    max-width: 800px;
    margin: 0 auto;
}

.error-code {
    font-family: var(--me-font-mono);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--me-secondary);
    margin: 0 0 20px;
}

.error-title {
    font-family: var(--me-font-display);
    font-size: 62px;
    line-height: 62px;
    font-weight: 700;
    color: var(--me-text);
    margin: 0 0 20px;
}

.error-text {
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 40px;
}

.error-actions {
    margin: 0;
}

@media (max-width: 767px) {
    .error-page  { padding: 60px var(--me-gutter) 100px; }
    .error-title { font-size: 32px; line-height: 34px; }
}

/* ==================================================
   BÚSQUEDA
================================================== */

.archive-description .search-form {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

.archive-description .search-field {
    flex: 1;
    max-width: 320px;
    padding: 10px 12px;
    border: 1px solid var(--me-text);
    background: var(--me-white);
    font-family: var(--me-font-mono);
    font-size: 14px;
}

.archive-description .search-submit {
    padding: 10px 20px;
    border: 0;
    background: var(--me-primary);
    color: var(--me-text);
    font-family: var(--me-font-mono);
    font-size: 14px;
    text-transform: uppercase;
    cursor: pointer;
}

/* ==================================================
   CONTENIDO DEL EDITOR
   Los posts del journal y los proyectos siguen
   editándose en WordPress. Esto da forma al HTML que
   sale de the_content().
================================================== */

.single-post-content,
.project-content {
    font-family: var(--me-font-body);
    font-size: 16px;
    line-height: 1.7;
    color: var(--me-text);
}

.single-post-content > *,
.project-content > * {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.single-post-content img,
.project-content img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 40px auto;
}

.single-post-content p,
.project-content p {
    margin: 0 0 20px;
}

.single-post-content h2 {
    font-family: var(--me-font-display);
    font-size: 32px;
    line-height: 34px;
    font-weight: 700;
    margin: 48px 0 16px;
}

.single-post-content h3 {
    font-family: var(--me-font-display);
    font-size: 28px;
    line-height: 30px;
    font-weight: 700;
    margin: 40px 0 12px;
}

.single-post-content a,
.project-content a {
    color: var(--me-secondary);
}

/* ==================================================
   FICHA DE PROYECTO: NORMALIZACIÓN
   El cuerpo de cada proyecto viene del editor y no hay dos marcados iguales:
   imágenes sueltas, dentro de <p>, dentro de <figure>, a veces con un <div>
   intermedio, y con max-width inline que va de 1200px a 3841px o directamente
   vacío. De ahí que unos proyectos salieran a 900px y otros a 1200px. Estas
   reglas les dan a los 28 la misma caja, sin tocar el contenido del editor:
   texto en columna de 900px y medios al ancho del contenedor.
================================================== */

/* 1. Los envoltorios del editor dejan de imponer ancho. Cualquier elemento que
      cuelgue de él un medio cuenta como envoltorio: según el proyecto la
      imagen va dentro de <figure>, de <div>, de <p> o incluso de un <h6>
      (Castell, Holabrief, Sorpetaler). El !important pisa el max-width inline
      que traen los <figure> de Webflow. */
.project-content figure,
.project-content figure > div,
.project-content > div,
.project-content *:has(> img),
.project-content *:has(> iframe),
.project-content *:has(> video) {
    max-width: none !important;
    margin-left: 0;
    margin-right: 0;
}

/* 2. Medios: todos al ancho del contenedor y apilados sin hueco. */
.project-content img,
.project-content video {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
}

/* 3. Texto: columna de 900px alineada con el borde izquierdo de las imágenes,
      esté suelto o metido dentro de un <figure> (A Way Through, Quince…). */
.project-content h1,
.project-content h2,
.project-content h3,
.project-content h4,
.project-content h5,
.project-content h6,
.project-content p,
.project-content ul,
.project-content ol,
.project-content blockquote {
    max-width: 900px;
    margin-left: 0;
    margin-right: 0;
}

/* 4. Vídeo. Los de Vimeo llegan de dos formas. Casi todos, envueltos en el
      <div> del truco de padding, que ya les da el ancho del contenedor y el
      alto de su propio ratio: esos se quedan como están. El de Bonpland vino
      suelto, sin ese <div>, pero conservando el position:absolute inline, así
      que se posicionaba contra el viewport y acababa encima del texto. Solo a
      esos los devolvemos al flujo, con ratio 16/9. */
/* 5. Solo dos estilos de texto en la ficha, como en Bonpland: el titulo, al
      tamano del H1 del sitio (el mismo de "journal" o "work"), y el parrafo.
      El editor reparte las lineas del titulo entre h1, h2 y h3, y mete en h4,
      h5 y h6 tanto el cuerpo como la linea de "service"; de ahi que salieran
      parrafos en Space Grotesk 700. Aqui se agrupan en esos dos estilos. Los
      <strong> de dentro siguen en negrita, que es como se lee "service
      branding" en Bonpland. */
.project-content h1,
.project-content h2,
.project-content h3 {
    font-family: var(--me-font-display);
    font-size: 62px;
    line-height: 62px;
    font-weight: 700;
    color: var(--me-text);
    margin: 0 0 16px;
}

.project-content h4,
.project-content h5,
.project-content h6 {
    font-family: var(--me-font-body);
    font-size: 16px;
    line-height: 1.7;
    font-weight: 400;
    color: var(--me-text);
    margin: 0 0 20px;
}

.project-content > iframe,
.project-content figure > iframe,
.project-content p > iframe {
    position: static !important;
    inset: auto !important;
    display: block;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    border: 0;
    margin: 0;
}

@media (max-width: 767px) {
    .project-content { padding: 40px var(--me-gutter); }
    .project-content h1,
    .project-content h2,
    .project-content h3 { font-size: 36px; line-height: 38px; }
}

/* ===== SINGLE JOURNAL ===== */

/* Columna de lectura de la entrada: 900px de texto, centrada.
   El gutter va DENTRO del max-width porque box-sizing es border-box, de ahi
   el calc(): asi el texto mide 900px exactos y no 900 menos los dos paddings.
   Antes .single-post-header solo tenia max-width, sin margenes automaticos,
   y quedaba pegado a la izquierda mientras el cuerpo si salia centrado. */
.single-post-header,
.single-post-content,
.single-post .post-nav {
    max-width: calc(900px + var(--me-gutter) * 2);
    margin-left: auto;
    margin-right: auto;
}

.single-post-header {
    padding: 80px var(--me-gutter) 40px;
}

.single-post-meta {
    display: flex;
    gap: 16px;
    font-family: "Inconsolata", monospace;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #E8501A;
    margin-bottom: 20px;
}

.single-post-title {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.15;
    margin: 0;
    color: #1a1a1a;
}

.single-post-content {
    padding: 0 var(--me-gutter) 60px;
}

.more-journal {
    padding: 60px var(--me-gutter) 80px;
    border-top: 1px solid #e0e0e0;
}

.more-journal-title {
    font-family: "Inconsolata", monospace;
    font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #1a1a1a;
    margin: 0 0 24px;
}

@media (max-width: 768px) {
    .single-post-header {
        padding: 48px var(--me-gutter) 28px;
    }
    .single-post-title {
        font-size: 28px;
    }
    .more-journal {
        padding: 40px var(--me-gutter) 60px;
    }
}

/* ===== ARCHIVOS ===== */
.archive-page {
    padding: 80px var(--me-gutter);
}

.archive-title {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 16px;
    color: #1a1a1a;
}

.archive-description {
    font-size: 16px;
    line-height: 1.7;
    color: #1a1a1a;
    max-width: 700px;
}

.archive-header {
    margin-bottom: 40px;
}

.archive-empty {
    font-family: "Inconsolata", monospace;
    font-size: 14px;
    color: #1a1a1a;
}

.archive-page .pagination {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 48px;
    font-family: "Inconsolata", monospace;
    font-size: 14px;
}

.archive-page .pagination .page-numbers {
    color: #1a1a1a;
    text-decoration: none;
}

.archive-page .pagination .page-numbers.current,
.archive-page .pagination a.page-numbers:hover {
    color: #E8501A;
}

@media (max-width: 768px) {
    .archive-page {
        padding: 48px var(--me-gutter);
    }
    .archive-title {
        font-size: 28px;
    }
}

/* ===== TEXT PAGE ===== */
.text-page {
    padding: 80px var(--me-gutter);
}

/* Misma columna de lectura que los posts del journal y los proyectos. */
.text-page-inner {
    max-width: 900px;
}

.page-template-page-text .elementor-section-wrap,
.page-template-page-text .elementor > .elementor-inner > .elementor-section-wrap {
    max-width: 800px !important;
    margin: 0 auto !important;
    padding: 80px var(--me-gutter) !important;
}

.text-page-title {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 48px;
    color: #1a1a1a;
}

.text-page-content {
    font-size: 16px;
    line-height: 1.8;
    color: #1a1a1a;
}

.text-page-content h2 {
    font-size: 22px;
    font-weight: 700;
    margin: 40px 0 16px;
}

.text-page-content h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 32px 0 12px;
}

.text-page-content p {
    margin: 0 0 20px;
}

.text-page-content a {
    color: #E8501A;
    text-decoration: underline;
}

.text-page-content ul,
.text-page-content ol {
    padding-left: 24px;
    margin-bottom: 20px;
}

.text-page-content li {
    margin-bottom: 8px;
}

@media (max-width: 768px) {
    .text-page {
        padding: 48px var(--me-gutter);
    }
    .text-page-title {
        font-size: 26px;
    }
}

/* ===== TESTIMONIALS SLIDER ===== */
.testimonials-slider {
    position: relative;
    overflow: hidden;
}

.testimonials-track {
    display: flex;
    transition: transform 0.5s ease;
}

.testimonial-slide {
    min-width: 100%;
    padding: 60px 40px;
    box-sizing: border-box;
}

.testimonial-inner {
    display: flex;
    gap: 48px;
    align-items: flex-start;
}

.testimonial-photo {
    flex-shrink: 0;
    width: 180px;
}

.testimonial-photo img {
    width: 100%;
    height: auto;
    display: block;
}

.testimonial-body {
    flex: 1;
}

.testimonial-text {
    font-size: 16px;
    line-height: 1.7;
    color: #1a1a1a;
    margin: 0 0 8px 0;
    border: none;
    padding: 0;
}

.testimonial-text p {
    margin: 0 0 4px 0;
}

.testimonial-author {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.testimonial-name {
    font-family: "Inconsolata", monospace;
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
}

.testimonial-meta {
    font-family: "Inconsolata", monospace;
    font-size: 13px;
    font-weight: 700;
    color: #1a1a1a;
}

.testimonials-controls {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 40px 40px;
}

.testimonial-prev,
.testimonial-next {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #1a1a1a;
    padding: 0;
    line-height: 1;
}

.testimonial-prev:hover,
.testimonial-next:hover {
    color: #E8501A;
}

.testimonials-dots {
    display: flex;
    gap: 8px;
}

.testimonial-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ccc;
    cursor: pointer;
    border: none;
    padding: 0;
}

.testimonial-dot.active {
    background: #E8501A;
}

@media (max-width: 768px) {
    .testimonial-slide {
        padding: 40px 20px;
    }
    .testimonial-inner {
        flex-direction: column;
        gap: 24px;
    }
    .testimonial-photo {
        width: 120px;
    }
    .testimonials-controls {
        padding: 0 20px 30px;
    }
}