/* WeWeed (ww_web#408): la guía de estilo de weweed.ooo sobre Source.

   Se sirve tal cual (default.hbs la enlaza después de built/screen.css), sin
   pasar por el gulp de Source: así una actualización de Source no pisa este
   fichero y no hace falta compilar nada para cambiarlo.

   Los valores salen del sistema del rediseño de ww_web
   (app/assets/stylesheets/scss/_ww_tokens.scss). Reglas que se mantienen aquí:
   - El magenta es el único color cálido y solo va en la acción principal
     (aquí, "Ir al comparador"). Nada decorativo.
   - Cian y ámbar están reservados para Full/Broad spectrum en el comparador:
     el blog no los usa.
   - Crema de fondo; blanco solo para superficies elevadas (tarjetas).

   Source trabaja con html { font-size: 62.5% }: 1rem = 10px. */

/* 1. Tokens
/* ---------------------------------------------------------- */

:root {
    --ww-bosque: #09371f;
    --ww-magenta: #ff0099;
    --ww-ciruela: #80004c;
    --ww-crema: #f5f0e8;
    --ww-blanco: #ffffff;

    /* Neutros derivados del bosque sobre crema, como en ww_web */
    --ww-ink: var(--ww-bosque);
    --ww-ink-soft: #3d604b;
    --ww-ink-muted: #4f6b57; /* 5,2:1 sobre crema, 4,7:1 sobre crema profundo (AA) */
    --ww-line: #d4d6cc;
    --ww-line-strong: #b3bcb0;
    --ww-crema-deep: #e7e5dc;
    --ww-verde-claro: #dff0e4;
    --ww-on-dark: var(--ww-crema);
    --ww-on-dark-soft: rgb(245 240 232 / 0.8);

    --ww-font-display: "TAN Nimbus", "Fraunces", Georgia, serif;
    --ww-font-ui: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

    --ww-radius-sm: 6px;
    --ww-radius: 12px;
    --ww-radius-lg: 20px;
    --ww-radius-pill: 999px;

    /* Source: tipografía y colores. --gh-font-heading/--gh-font-body son las
       variables que Ghost rellena si se eligen fuentes en el admin; definirlas
       aquí hace que el tema use las de WeWeed mientras no se elija otra. */
    --gh-font-heading: var(--ww-font-display);
    --gh-font-body: var(--ww-font-ui);
    --font-sans: var(--ww-font-ui);
    --font-serif: var(--ww-font-display);

    --color-darker-gray: var(--ww-ink);
    --color-primary-text: var(--ww-ink);
    --color-secondary-text: var(--ww-ink-soft);
    --color-border: var(--ww-line);
    --color-dark-border: var(--ww-line-strong);
    --color-lighter-gray: var(--ww-crema-deep);
    --color-light-gray: var(--ww-line);
    --color-mid-gray: var(--ww-line-strong);
    --color-dark-gray: var(--ww-ink-soft);

    --container-width: 1240px;
}

body {
    background-color: var(--ww-crema);
    color: var(--ww-ink);
    font-family: var(--ww-font-ui);
}

/* Los titulares, en display. Source usa .is-title y los h2/h3 del contenido. */
:is(.is-title, .gh-content :is(h1, h2, h3), .gh-card-title, .gh-article-title, .gh-header-title, .gh-container-title) {
    font-family: var(--ww-font-display);
    font-weight: 800;
    font-variation-settings: "SOFT" 100, "opsz" 144;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

:focus-visible {
    outline: 2px solid var(--ww-bosque);
    outline-offset: 2px;
}

/* Sobre bosque (portada, pie) el foco va en crema para que se vea. */
:is(.gh-header.is-classic, .ww-footer) :focus-visible {
    outline-color: var(--ww-crema);
}

::selection {
    background: var(--ww-verde-claro);
    color: var(--ww-bosque);
}

/* 2. Botones
/* ---------------------------------------------------------- */

.ww-button,
.gh-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 4.4rem;
    padding: 1rem 2rem;
    border: 1.5px solid transparent;
    border-radius: var(--ww-radius-pill);
    font-family: var(--ww-font-ui);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ww-button--dark,
.gh-button {
    background-color: var(--ww-bosque);
    border-color: var(--ww-bosque);
    color: var(--ww-crema);
}

.ww-button--dark:hover,
.gh-button:hover {
    background-color: #062716;
    border-color: #062716;
    color: var(--ww-crema);
    opacity: 1;
}

/* La acción principal: el único magenta de la página. */
.ww-button--cta {
    background-color: var(--ww-magenta);
    border-color: var(--ww-magenta);
    color: var(--ww-blanco);
}

.ww-button--cta:hover {
    background-color: var(--ww-ciruela);
    border-color: var(--ww-ciruela);
    color: var(--ww-blanco);
}

/* 3. Cabecera
/* ---------------------------------------------------------- */

.ww-header.gh-navigation {
    height: auto;
    min-height: 72px;
    background-color: var(--ww-crema);
    border-bottom: 1px solid var(--ww-line);
    color: var(--ww-ink);
    font-family: var(--ww-font-ui);
    font-size: 1.5rem;
    font-weight: 500;
}

.ww-header .gh-navigation-inner {
    min-height: 72px;
}

.ww-header .gh-navigation-brand {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 1.2rem;
}

.ww-header .ww-header-logo img {
    width: auto;
    height: 30px;
    max-height: none;
}

.ww-header .ww-header-blog {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 1.1rem;
    border-radius: var(--ww-radius-pill);
    background: var(--ww-verde-claro);
    color: var(--ww-bosque);
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.4;
}

.ww-header .ww-header-blog:hover {
    background: var(--ww-bosque);
    color: var(--ww-crema);
    opacity: 1;
}

.ww-header .gh-navigation-menu .nav a,
.ww-header .ww-header-link {
    color: var(--ww-ink);
    font-family: var(--ww-font-ui);
    font-size: 1.5rem;
    font-weight: 500;
}

.ww-header .gh-navigation-menu .nav a:hover,
.ww-header .ww-header-link:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
    opacity: 1;
}

.ww-header .gh-navigation-actions {
    gap: 2rem;
}

.ww-header .gh-navigation-actions .ww-button {
    min-height: 4rem;
    color: var(--ww-crema);
    padding: 0.8rem 1.8rem;
    font-size: 1.4rem;
}

.ww-header .gh-icon-button {
    color: var(--ww-ink);
}

/* Móvil: Source despliega el menú a pantalla completa con .is-open. */
@media (max-width: 767px) {
    .ww-header .ww-header-logo img {
        height: 26px;
    }

    /* Source pone la marca en una rejilla de 3 columnas; aquí hay 4
       (logo, "Blog", búsqueda, hamburguesa). */
    #gh-navigation.ww-header .gh-navigation-brand {
        grid-template-columns: auto 1fr auto auto;
        gap: 1rem;
    }

    #gh-navigation.ww-header .ww-header-blog {
        justify-self: start;
    }

    .ww-header.is-open .gh-navigation-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 1.6rem;
    }

    .ww-header.is-open .gh-navigation-actions .ww-button {
        width: 100%;
        min-height: 4.8rem;
        font-size: 1.6rem;
    }

    .ww-header.is-open .ww-header-link {
        font-size: 2rem;
    }

    .ww-header.is-open,
    .ww-header.is-open .gh-navigation-actions {
        background-color: var(--ww-crema);
    }
}

/* 4. Portada: cabecera
/* ---------------------------------------------------------- */

/* Estilos "Search" y "Landing" de Source: banda bosque como el masthead de
   weweed.ooo, con el titular en display. */
.gh-header.is-classic {
    padding-block: 0;
    background-color: var(--ww-bosque);
    color: var(--ww-on-dark);
}

.gh-header.is-classic .gh-header-inner {
    padding-block: clamp(4.8rem, 8vw, 8.8rem);
    gap: 2.8rem;
}

.gh-header.is-classic .gh-header-title {
    max-width: 18ch;
    color: var(--ww-on-dark);
    font-size: clamp(3.6rem, 5.6vw, 6.4rem);
    line-height: 1.05;
}

.gh-header.is-classic .gh-form {
    max-width: 56rem;
    height: 5.6rem;
    border: 0;
    border-radius: var(--ww-radius-pill);
    background-color: var(--ww-blanco);
    color: var(--ww-ink-muted);
    font-family: var(--ww-font-ui);
    font-size: 1.6rem;
    box-shadow: none;
}

.gh-header.is-classic .gh-form:hover {
    box-shadow: 0 0 0 3px rgb(245 240 232 / 0.35);
}

.gh-header.is-classic .gh-form-input {
    font-family: var(--ww-font-ui);
    font-size: 1.6rem;
    color: var(--ww-ink-muted);
}

/* Con imagen de portada: se oscurece para que el texto crema se lea (AA). */
.gh-header.is-classic.has-image::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(90deg, rgb(9 55 31 / 0.95) 0%, rgb(9 55 31 / 0.82) 45%, rgb(9 55 31 / 0.35) 100%);
}

.gh-header.is-classic.has-image .gh-header-inner {
    position: relative;
    z-index: 1;
}

/* 5. Listados de artículos (portada, tags, "Sigue leyendo")
/* ---------------------------------------------------------- */

.gh-header.is-classic + .gh-container,
.gh-header.is-classic:not(.has-image) + .gh-container {
    margin-top: clamp(4rem, 6vw, 6.4rem);
}

.gh-container-title {
    margin-bottom: 2.4rem;
    padding-bottom: 0;
    border-bottom: 0;
    color: var(--ww-ink);
    font-size: clamp(2.8rem, 3.2vw, 4rem);
    line-height: 1.1;
    text-transform: none;
    letter-spacing: -0.01em;
}

.gh-container.is-grid .gh-feed {
    gap: 2.4rem;
}

/* Tarjeta de artículo: superficie blanca, como las tarjetas del comparador. */
.gh-card {
    border: 1px solid var(--ww-line);
    border-radius: var(--ww-radius-lg);
    background-color: var(--ww-blanco);
    overflow: hidden;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.gh-card:hover {
    border-color: var(--ww-bosque);
}

.gh-card-link,
.gh-card-link:hover {
    opacity: 1;
}

.gh-card-image {
    margin: 0;
    border-radius: 0;
    background-color: var(--ww-crema-deep);
}

.gh-card-image img {
    border-radius: 0;
}

.gh-card-wrapper {
    padding: 1.8rem 2rem 2rem;
}

.gh-card-tag {
    margin-bottom: 0.8rem;
    color: var(--ww-ink-muted);
    font-family: var(--ww-font-ui);
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.gh-card-title {
    color: var(--ww-ink);
    font-size: 2.2rem;
    line-height: 1.15;
}

.gh-card-link:hover .gh-card-title {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.gh-card-excerpt {
    margin-top: 1rem;
    color: var(--ww-ink-soft);
    font-family: var(--ww-font-ui);
    font-size: 1.5rem;
    line-height: 1.55;
}

.gh-card-meta {
    margin-top: 1.4rem;
    color: var(--ww-ink-muted);
    font-family: var(--ww-font-ui);
    font-size: 1.3rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

/* Estilo "List": tarjeta horizontal con imagen a la izquierda. */
.gh-container.is-list .gh-card + .gh-card {
    margin-top: 2rem;
}

.gh-container.is-list .gh-card-link {
    align-items: stretch;
}

.gh-container.is-list .gh-card-wrapper {
    align-self: center;
}

.gh-container.is-list .gh-card-image {
    margin: 0;
}

.gh-container.is-list .gh-feed {
    gap: 0;
}

.gh-container.is-list .gh-card::before,
.gh-container.is-list .gh-card::after {
    display: none;
}

.gh-more a {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 4.4rem;
    padding: 1rem 2rem;
    border: 1.5px solid var(--ww-bosque);
    border-radius: var(--ww-radius-pill);
    color: var(--ww-bosque);
    font-family: var(--ww-font-ui);
    font-size: 1.5rem;
    font-weight: 500;
}

.gh-more a:hover {
    background-color: var(--ww-bosque);
    color: var(--ww-crema);
    opacity: 1;
}

/* Cabecera de una página de tag */
.gh-archive {
    margin-block: clamp(3.2rem, 5vw, 5.6rem) clamp(2.4rem, 3vw, 3.2rem);
    padding-block: 0;
    border-bottom: 0;
}

.gh-archive .gh-archive-inner {
    padding-bottom: clamp(2.4rem, 3vw, 3.2rem);
    border-bottom-color: var(--ww-line);
}

.gh-archive .gh-article-title {
    font-size: clamp(3.2rem, 4.5vw, 5.2rem);
    line-height: 1.05;
}

.gh-archive .gh-article-excerpt {
    max-width: 60rem;
    color: var(--ww-ink-soft);
    font-family: var(--ww-font-ui);
}

/* 6. Artículo
/* ---------------------------------------------------------- */

.gh-article-header {
    margin-top: clamp(3.2rem, 5vw, 5.6rem);
}

.gh-article-tag {
    display: inline-flex;
    width: fit-content;
    padding: 0.3rem 1.1rem;
    border-radius: var(--ww-radius-pill);
    background-color: var(--ww-verde-claro);
    color: var(--ww-bosque) !important;
    font-family: var(--ww-font-ui);
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.gh-article-tag:hover {
    background-color: var(--ww-bosque);
    color: var(--ww-crema) !important;
    opacity: 1;
}

.gh-article-title {
    color: var(--ww-ink);
    font-size: clamp(3.4rem, 5vw, 5.4rem);
    line-height: 1.05;
}

.gh-article-excerpt {
    color: var(--ww-ink-soft);
    font-family: var(--ww-font-ui);
    font-size: clamp(1.8rem, 2vw, 2.1rem);
    line-height: 1.5;
}

.gh-article-meta,
.gh-article-author-name,
.gh-article-meta-content {
    color: var(--ww-ink-soft);
    font-family: var(--ww-font-ui);
}

.gh-article-author-name {
    font-size: 1.5rem;
    font-weight: 500;
}

.gh-article-author-name a {
    color: var(--ww-ink);
}

.gh-button-share {
    background-color: transparent;
    border-color: var(--ww-bosque);
    color: var(--ww-bosque);
    min-height: 4rem;
    padding: 0.8rem 1.6rem;
    font-size: 1.4rem;
}

.gh-button-share:hover {
    background-color: var(--ww-bosque);
    color: var(--ww-crema);
}

.gh-article-image img,
.gh-feature-image {
    border-radius: var(--ww-radius-lg);
}

.gh-article-image figcaption,
.gh-content figcaption {
    color: var(--ww-ink-muted);
    font-family: var(--ww-font-ui);
    font-size: 1.4rem;
}

/* Texto del artículo: DM Sans a 18px y unos 68 caracteres por línea. */
.gh-content {
    --content-width: 680px;
    font-family: var(--ww-font-ui);
    font-size: 1.8rem;
    line-height: 1.72;
    color: var(--ww-ink);
}

.gh-content > * + * {
    margin-top: 2.4rem;
}

.gh-content > :is(h2, h3) {
    color: var(--ww-ink);
    line-height: 1.15;
}

.gh-content > h2 {
    margin-top: 5.6rem;
    font-size: clamp(2.6rem, 3.2vw, 3.2rem);
}

.gh-content > h3 {
    margin-top: 4rem;
    font-size: clamp(2.1rem, 2.4vw, 2.4rem);
}

.gh-content > h4 {
    margin-top: 3.2rem;
    font-family: var(--ww-font-ui);
    font-size: 1.9rem;
    font-weight: 500;
}

.gh-content > :is(h2, h3, h4) + * {
    margin-top: 1.2rem;
}

.gh-content a:not([class]) {
    color: var(--ww-bosque);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.gh-content a:not([class]):hover {
    text-decoration-thickness: 2px;
    opacity: 1;
}

.gh-content strong {
    font-weight: 500;
}

.gh-content :is(ul, ol) li + li {
    margin-top: 0.8rem;
}

.gh-content :is(ul, ol) li::marker {
    color: var(--ww-ink-muted);
}

.gh-content hr {
    border-top-color: var(--ww-line);
}

.gh-content > blockquote:not([class]) {
    padding: 0.4rem 0 0.4rem 2.4rem;
    border-left: 3px solid var(--ww-bosque);
    color: var(--ww-ink);
    font-family: var(--ww-font-display);
    font-size: 2.2rem;
    font-weight: 800;
    font-variation-settings: "SOFT" 100, "opsz" 144;
    line-height: 1.3;
}

.gh-content > blockquote.kg-blockquote-alt {
    color: var(--ww-ink);
    font-family: var(--ww-font-display);
    font-weight: 800;
    font-style: normal;
    font-variation-settings: "SOFT" 100, "opsz" 144;
}

.gh-content :not(pre) > code {
    padding: 0.15em 0.4em;
    border-radius: var(--ww-radius-sm);
    background-color: var(--ww-crema-deep);
    color: var(--ww-ink);
    font-size: 0.88em;
}

.gh-content pre {
    border-radius: var(--ww-radius);
    background-color: var(--ww-bosque);
    color: var(--ww-crema);
}

.gh-content table:not(.gist table) th {
    background-color: var(--ww-crema-deep);
    color: var(--ww-ink);
}

.gh-content table:not(.gist table) :is(td, th) {
    border-color: var(--ww-line);
}

/* 7. Tarjetas del editor de Ghost (kg-*)
/* ----------------------------------------------------------
   Lo que usa el redactor al escribir. Source y los card assets de Ghost
   ya las maquetan; aquí solo se llevan a la paleta y a los radios de
   weweed.ooo. Revisar todas si se toca algo: imagen, galería, embed, vídeo,
   bookmark, callout, toggle, botón, producto, header, archivo, audio. */

.gh-content .kg-image-card img,
.gh-content .kg-gallery-image img,
.gh-content .kg-video-card,
.gh-content .kg-embed-card iframe,
.gh-content .fluid-width-video-container {
    border-radius: var(--ww-radius);
}

.gh-content .kg-gallery-container {
    gap: 1rem;
}

.gh-content .kg-gallery-row {
    gap: 1rem;
}

.gh-content .kg-gallery-image:not(:first-of-type),
.gh-content .kg-gallery-row:not(:first-of-type) {
    margin: 0;
}

/* Bookmark: tarjeta de enlace, superficie blanca */
.gh-content .kg-bookmark-card .kg-bookmark-container {
    border: 1px solid var(--ww-line);
    border-radius: var(--ww-radius);
    background-color: var(--ww-blanco);
    color: var(--ww-ink);
    box-shadow: none;
}

.gh-content .kg-bookmark-card .kg-bookmark-container:hover {
    border-color: var(--ww-bosque);
}

.gh-content .kg-bookmark-title {
    color: var(--ww-ink);
    font-family: var(--ww-font-ui);
    font-weight: 500;
}

.gh-content .kg-bookmark-description,
.gh-content .kg-bookmark-metadata {
    color: var(--ww-ink-soft);
    font-family: var(--ww-font-ui);
}

.gh-content .kg-bookmark-thumbnail img {
    border-radius: 0 var(--ww-radius) var(--ww-radius) 0;
}

/* Callout: verde claro por defecto; los colores que elija el redactor se
   respetan, salvo el acento (que es el bosque) */
.gh-content .kg-callout-card {
    border-radius: var(--ww-radius);
    font-family: var(--ww-font-ui);
}

.gh-content .kg-callout-card-grey,
.gh-content .kg-callout-card-white,
.gh-content .kg-callout-card-green {
    background-color: var(--ww-verde-claro);
    color: var(--ww-ink);
}

.gh-content .kg-callout-card-white {
    background-color: var(--ww-blanco);
    box-shadow: inset 0 0 0 1px var(--ww-line);
}

.gh-content .kg-callout-card-accent {
    background-color: var(--ww-bosque);
    color: var(--ww-crema);
}

.gh-content .kg-callout-card-accent a {
    color: var(--ww-crema);
}

/* Toggle (preguntas desplegables) */
.gh-content .kg-toggle-card {
    border-radius: var(--ww-radius);
    background-color: var(--ww-blanco);
    box-shadow: inset 0 0 0 1px var(--ww-line);
}

.gh-content .kg-toggle-heading-text {
    color: var(--ww-ink);
    font-family: var(--ww-font-ui);
    font-weight: 500;
}

/* Botón: bosque (el magenta queda para la banda del comparador) */
.gh-content .kg-button-card .kg-btn,
.gh-content .kg-product-card .kg-product-card-button,
.gh-content .kg-header-card .kg-header-card-button {
    border-radius: var(--ww-radius-pill);
    font-family: var(--ww-font-ui);
    font-weight: 500;
}

.gh-content .kg-button-card .kg-btn-accent,
.gh-content .kg-product-card .kg-product-card-btn-accent {
    background-color: var(--ww-bosque);
    color: var(--ww-crema);
}

/* Producto */
.gh-content .kg-product-card-container {
    border: 1px solid var(--ww-line);
    border-radius: var(--ww-radius-lg);
    background-color: var(--ww-blanco);
    box-shadow: none;
}

.gh-content .kg-product-card-title {
    color: var(--ww-ink);
}

/* Header card */
.gh-content .kg-header-card {
    border-radius: var(--ww-radius-lg);
}

.gh-content .kg-header-card.kg-style-accent {
    background-color: var(--ww-bosque);
}

/* Archivo y audio */
.gh-content .kg-file-card-container,
.gh-content .kg-audio-card {
    border: 1px solid var(--ww-line);
    border-radius: var(--ww-radius);
    background-color: var(--ww-blanco);
    box-shadow: none;
}

.gh-content .kg-file-card-title,
.gh-content .kg-audio-title {
    color: var(--ww-ink);
    font-family: var(--ww-font-ui);
    font-weight: 500;
}

.gh-content .kg-file-card-icon,
.gh-content .kg-audio-play-icon,
.gh-content .kg-audio-pause-icon {
    color: var(--ww-bosque);
}

/* 8. Banda del comparador y pie
/* ---------------------------------------------------------- */

.ww-compare-cta {
    margin-top: clamp(4.8rem, 8vw, 8rem);
    background-color: var(--ww-crema-deep);
    border-top: 1px solid var(--ww-line);
}

.ww-compare-cta-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem 3.2rem;
    padding-block: 3.2rem;
}

.ww-compare-cta-text {
    max-width: 60rem;
    color: var(--ww-ink-soft);
    font-family: var(--ww-font-ui);
    font-size: 1.7rem;
    line-height: 1.5;
}

.ww-compare-cta-text strong {
    display: block;
    color: var(--ww-ink);
    font-family: var(--ww-font-display);
    font-size: 2.4rem;
    font-weight: 800;
    font-variation-settings: "SOFT" 100, "opsz" 144;
    line-height: 1.2;
}

.ww-footer.gh-footer {
    margin-top: 0;
    padding-block: 0;
    background-color: var(--ww-bosque);
    color: var(--ww-on-dark);
    font-family: var(--ww-font-ui);
}

.ww-footer .gh-footer-inner {
    display: block;
    padding-block: clamp(4rem, 6vw, 5.6rem) 2.4rem;
}

.ww-footer a {
    color: var(--ww-on-dark);
}

.ww-footer a:hover {
    color: var(--ww-on-dark);
    text-decoration: underline;
    opacity: 1;
}

.ww-footer-main {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 3.2rem 4.8rem;
}

.ww-footer-brand img {
    width: auto;
    height: 34px;
}

.ww-footer-brand p {
    max-width: 42rem;
    margin-top: 1.6rem;
    color: var(--ww-on-dark-soft);
    font-size: 1.6rem;
    line-height: 1.6;
}

.ww-footer-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.4rem;
}

.ww-footer-nav ul {
    display: grid;
    align-content: start;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 1.6rem;
}

.ww-footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem 2.4rem;
    margin-top: 3.2rem;
    padding-top: 2rem;
    border-top: 1px solid rgb(245 240 232 / 0.16);
    color: var(--ww-on-dark-soft);
    font-size: 1.3rem;
}

.ww-footer-legal a {
    color: var(--ww-on-dark-soft);
}

/* Alta a la newsletter de Source (solo con miembros activados) */
.ww-footer .gh-footer-signup {
    margin-bottom: 4rem;
    padding-bottom: 4rem;
    border-bottom: 1px solid rgb(245 240 232 / 0.16);
}

.ww-footer .gh-footer-signup-header {
    color: var(--ww-on-dark);
}

.ww-footer .gh-footer-signup-subhead {
    color: var(--ww-on-dark-soft);
}

@media (max-width: 767px) {
    .ww-footer-main {
        grid-template-columns: 1fr;
    }
}

/* 9. Movimiento reducido
/* ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
}