/* ============================================================================
   Kroovify — secciones del landing (/kroovify/)
   ----------------------------------------------------------------------------
   Sólo la carga kroovify/index.html, después de css/styles.css (base) y de
   kroovify.css (tokens de marca y tonos). Las páginas legales no la necesitan.

   Mismas reglas que la hoja base: mobile first, sólo `min-width`, breakpoints
   en 48em y 64em, colores por token y ni un style="" (la CSP lo prohíbe).

   Orden: primitivas compartidas por las secciones (.section, .icon-badge,
   .media-card, .device) y luego cada sección en el orden en que aparece.
   ============================================================================ */

/* ============================================
   BOTONES
   ============================================ */

/* Contorno neutro en pastilla: acción secundaria sobre cualquier superficie. */
.btn-outline {
    background: transparent;
    color: var(--text-dark);
    border: 1.5px solid currentColor;
    border-radius: var(--radius-full);
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-sm);
    font-weight: 700;
}

.btn-outline:hover {
    background: var(--text-dark);
    color: var(--bg-white);
}

/* ============================================
   VÍDEO — fachada (modules/video.js)
   ============================================ */

/* Póster propio + enlace a YouTube. Sin JS ya funciona (abre YouTube); con JS
   el mismo marco se sustituye por el <iframe> al pulsar. Ver video.js para el
   porqué de no cargar el iframe de entrada. */
.video-facade {
    margin: 0;
}

.video-facade__frame {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: var(--shadow-2xl);
    background: var(--bg-light);
}

.video-facade__frame picture,
.video-facade__frame img,
.video-facade__embed {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
}

/* Todo el marco es el objetivo táctil; el botón visible es sólo la señal. */
.video-facade__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #ffffff;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0) 55%);
}

.video-facade__play:focus-visible {
    outline-offset: -6px;
    border-radius: var(--radius-2xl);
}

.video-facade__button {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    min-height: 48px;
    padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-full);
    background: var(--gradient-fill);
    box-shadow: var(--shadow-xl);
    font-weight: 700;
    transition: transform var(--transition-fast);
}

.video-facade__button .icon {
    width: 1.5rem;
    height: 1.5rem;
    fill: currentColor;
}

.video-facade__play:hover .video-facade__button {
    transform: scale(1.06);
}

/* El reproductor hereda el marco 16:9. `contain` y fondo negro: si el vídeo
   no fuera exactamente 16:9 se ven bandas, no un recorte. */
video.video-facade__embed {
    object-fit: contain;
    background: #000000;
}

/* ============================================
   BADGES DE TIENDA
   ============================================ */

/* Store Badges - Google Play & App Store */
.store-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.store-badge-image {
    display: inline-block;
    position: relative;
    text-decoration: none;
    transition: transform var(--transition-fast), opacity var(--transition-fast);
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
}

.store-badge-image[aria-disabled="true"] {
    cursor: default;
}

/* Alto fijo y ancho automático: cada badge oficial tiene su propia relación
   de aspecto (entre 2.89 y 3.26), así que forzar 180x54 los deformaba —
   Lighthouse lo señalaba como `image-aspect-ratio`. Con el alto igualado, la
   fila queda alineada y cada imagen conserva su proporción. */
.store-badge-image img {
    display: block;
    height: 54px;
    width: auto;
    border-radius: var(--radius-md);
}

/* Dos variantes de arte, una por tema. Nombres explícitos: `badge-for-dark`
   es la que se muestra CON el tema oscuro (antes se llamaba `badge-light`,
   por el color del arte, y se leía justo al revés de lo que hacía). */
.badge-for-dark {
    display: none;
}

.badge-for-light {
    display: block;
}

[data-theme="dark"] .badge-for-dark {
    display: block;
}

[data-theme="dark"] .badge-for-light {
    display: none;
}

.store-badge-image:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

.store-badge-image:active {
    transform: translateY(0);
}

.store-badge-image:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 4px;
    border-radius: var(--radius-md);
}

/* --text-medium y no --text-light: la nota va sobre el velo del hero, donde
   el gris claro se quedaba por debajo de 4.5:1. */
.store-badges-note {
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--text-medium);
}

/* ============================================
   PRIMITIVAS DE SECCIÓN
   ============================================ */

/* Toda sección del landing de Kroovify es `.section` > `.section__inner`, con
   un `.section__header` opcional. El ritmo vertical, el ancho y la jerarquía
   de títulos se definen aquí una vez; cada sección sólo añade su rejilla. */
.section {
    padding: var(--spacing-3xl) var(--content-pad);
    background: var(--bg-white);
}

.section__inner {
    max-width: var(--content-inner);
    margin: 0 auto;
}

.section__header {
    margin-bottom: var(--spacing-xl);
}

.section__title {
    font-size: clamp(1.5rem, 4.2vw, var(--font-size-3xl));
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-wrap: balance;
    color: var(--text-dark);
}

.section__lead {
    max-width: 60ch;
    margin-top: var(--spacing-sm);
    color: var(--text-medium);
}

/* Insignia de icono: círculo de color con un icono del sprite. El color lo
   aporta una clase `tone-*` (hoja de la marca) en ella o en un antecesor, vía
   --tone-bg / --tone-ink. La usan los pilares del hero, las tarjetas de pilar,
   los pies de «Descubre», el diagrama y las preguntas del FAQ. Nada de
   style="": la CSP (style-src 'self') lo bloquearía. */
.icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-full);
    background: var(--tone-bg, var(--bg-light));
    color: var(--tone-ink, var(--primary-on-surface));
    flex-shrink: 0;
}

.icon-badge--sm {
    width: 1.75rem;
    height: 1.75rem;
}

.icon-badge--sm .icon {
    width: 1rem;
    height: 1rem;
}

.icon-badge--lg {
    width: 2.75rem;
    height: 2.75rem;
}

.icon-badge--lg .icon {
    width: 1.4rem;
    height: 1.4rem;
}

/* Tarjeta con medio arriba y texto debajo. Una primitiva, tres usos: capturas
   de la app (`--tinted` + .app-card), tipos de encuentro (`--raised`) y
   categorías del market. */
.media-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: var(--bg-light);
    color: var(--text-dark);
}

.media-card--tinted,
.pillar-card {
    background: var(--tone-soft, var(--bg-light));
}

/* Sobre una banda --bg-light la tarjeta necesita su propia superficie. */
.media-card--raised {
    background: var(--bg-white);
    box-shadow: var(--shadow-sm);
}

.media-card__media img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.media-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xs);
    padding: var(--spacing-md);
}

.media-card__title {
    font-size: var(--font-size-base);
    font-weight: 700;
    line-height: 1.3;
}

.media-card__text {
    font-size: var(--font-size-sm);
    line-height: 1.5;
    color: var(--text-medium);
}

.media-card__tag {
    margin-top: var(--spacing-xs);
    padding: 0.125rem var(--spacing-sm);
    border-radius: var(--radius-full);
    background: var(--tone-soft, var(--bg-light));
    font-size: var(--font-size-xs);
    font-weight: 700;
}

/* Marco de teléfono. Es CSS, una sola vez: las capturas se sirven sin marco
   (más ligeras, y el marco no se duplica en cada PNG). */
.device {
    position: relative;
    padding: 5px;
    border-radius: 1.4rem;
    background: #0b0b10;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

.device::before {
    content: '';
    position: absolute;
    top: 9px;
    left: 50%;
    width: 28%;
    height: 8px;
    border-radius: var(--radius-full);
    background: #0b0b10;
    transform: translateX(-50%);
}

.device img {
    display: block;
    width: 100%;
    aspect-ratio: 9 / 20;
    object-fit: cover;
    border-radius: 1.05rem;
}

/* ============================================
   HERO CON FOTO (Kroovify)
   ============================================ */

/* La foto es un <picture> real, no un background-image: es el LCP y como fondo
   CSS el navegador no la descubre hasta haber descargado y procesado la hoja de
   estilos. El velo es un pseudo-elemento encima; en móvil cae de arriba abajo
   (el texto va arriba) y desde 48em de izquierda a derecha.

   En móvil el velo sólo se abre en los últimos 340px, que es el alto máximo
   de .hero-photo__devices: mida lo que mida el texto (a 320px ocupa más
   líneas), queda siempre sobre la parte opaca. Contraste medido del texto
   contra los píxeles reales de foto + velo, de 320 a 1920px y en los dos
   temas: mínimo 4.57:1 en texto normal y 6.2:1 en «apasiona». */
.hero-photo {
    position: relative;
    isolation: isolate;
    margin-top: var(--header-h);
    overflow: hidden;
    background: var(--bg-light);
}

.hero-photo__media {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.hero-photo__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 100%;
}

.hero-photo__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(var(--wash-rgb), 0.97) 0%,
        rgba(var(--wash-rgb), 0.94) calc(100% - 340px),
        rgba(var(--wash-rgb), 0.2) 100%
    );
}

/* La foto es un amanecer muy claro: en oscuro se atenúa para que la mitad sin
   velo no deslumbre junto a una interfaz oscura. */
[data-theme="dark"] .hero-photo__media img {
    filter: brightness(0.7);
}

.hero-photo__inner {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--spacing-3xl) var(--content-pad) 0;
    display: grid;
    gap: var(--spacing-xl);
}

.hero-photo h1 {
    font-size: clamp(2rem, 9vw, 3.25rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
    text-wrap: balance;
    color: var(--text-dark);
}

.hero-photo h1 em {
    font-style: normal;
    color: var(--primary-on-surface);
}

/* Texto blanco: --gradient-fill garantiza 4.5:1 en sus dos extremos, cosa que
   el --gradient decorativo del badge compartido no hace. */
.hero-photo .hero-badge {
    background: var(--gradient-fill);
}

.hero-photo__lead {
    max-width: 46ch;
    margin-top: var(--spacing-md);
    color: var(--text-medium);
}

/* Los cinco pilares del producto. Son una lista, no botones: no llevan a
   ninguna parte y por eso no tienen aspecto ni cursor de control. */
.pillar-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.pillar-list li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    min-width: 3.25rem;
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--text-dark);
}

.step-list {
    list-style: none;
    counter-reset: step;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm) var(--spacing-lg);
    margin-top: var(--spacing-lg);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-medium);
}

.step-list li {
    counter-increment: step;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.step-list li::before {
    content: counter(step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    background: var(--bg-white);
    color: var(--text-dark);
    font-weight: 700;
}

/* Dos teléfonos inclinados que asoman por el borde inferior. El contenedor
   tiene alto fijo y el hero recorta lo que sobra, así que nunca provocan
   scroll horizontal ni tapan el texto. */
.hero-photo__devices {
    position: relative;
    height: clamp(250px, 78vw, 340px);
}

.hero-photo__devices .device {
    position: absolute;
    top: 0;
    width: min(42%, 190px);
}

.hero-photo__devices .device--back {
    right: 44%;
    transform: rotate(-5deg);
}

.hero-photo__devices .device--front {
    top: 12%;
    right: 6%;
    transform: rotate(6deg);
}

/* ============================================
   INTERESES (Kroovify)
   ============================================ */

.interests__top {
    display: grid;
    gap: var(--spacing-xl);
}

.interests__copy .btn {
    margin-top: var(--spacing-lg);
}

.interests__caption {
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-align: center;
}

.bubble-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-md) var(--spacing-sm);
}

.bubble-list li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-xs);
    font-weight: 700;
}

.bubble-list img,
.bubble-list__more {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-full);
    box-shadow: 0 0 0 3px var(--bg-white), 0 0 0 4px var(--border-color);
}

.bubble-list img {
    display: block;
    object-fit: cover;
}

/* «Y muchos más»: decorativo (aria-hidden). No es un botón y no lo parece. */
.bubble-list__more {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-light);
    color: var(--primary-on-surface);
}

/* El margen superior deja sitio a la insignia, que monta sobre el borde. */
.pillar-cards {
    position: relative;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--spacing-md) + 1.375rem) var(--spacing-md);
    margin-top: calc(var(--spacing-xl) + 1.375rem);
}

.pillar-card {
    padding: 0 var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-lg);
    text-align: center;
}

.pillar-card .icon-badge {
    margin-top: -1.375rem;
    margin-bottom: var(--spacing-sm);
    box-shadow: 0 0 0 3px var(--bg-white);
}

.pillar-card h3 {
    font-size: var(--font-size-lg);
    font-weight: 700;
}

.pillar-card p {
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-sm);
    line-height: 1.5;
    color: var(--text-medium);
}

.interests__video {
    max-width: 760px;
    margin: var(--spacing-2xl) auto 0;
}

/* ============================================
   DESCUBRE — capturas de la app (Kroovify)
   ============================================ */

.app-cards {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

/* La captura asoma por arriba y el pie la corta: se ve la parte que importa
   de la pantalla y la tarjeta no mide lo que un teléfono entero. */
.app-card__screen {
    aspect-ratio: 1 / 1.15;
    padding: var(--spacing-md) var(--spacing-md) 0;
    overflow: hidden;
}

.app-card__screen .device {
    width: 82%;
    margin: 0 auto;
}

.app-card__title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* ============================================
   ENCUENTROS (Kroovify)
   ============================================ */

/* En móvil la banda va a sangre; desde 48em es un panel redondeado. */
.events {
    padding-left: 0;
    padding-right: 0;
}

.events__panel {
    display: grid;
    gap: var(--spacing-lg);
    padding: var(--spacing-xl) var(--content-pad);
    background: var(--bg-light);
}

/* Carrusel sin JavaScript: scroll horizontal nativo con anclaje. Funciona con
   el dedo, la rueda y el teclado (la pista es enfocable). El botón de flecha
   es una mejora de modules/carousel.js y nace oculto (`hidden`): sin el módulo
   no se pinta un control que no haría nada. */
.carousel {
    position: relative;
    min-width: 0;
}

.carousel__track {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    padding-bottom: var(--spacing-sm);
}

.carousel__list {
    list-style: none;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(210px, 72%);
    gap: var(--spacing-md);
}

.carousel__list > * {
    scroll-snap-align: start;
}

.carousel__next {
    position: absolute;
    top: 3.5rem;
    right: var(--spacing-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    background: var(--bg-white);
    color: var(--text-dark);
    box-shadow: var(--shadow-md);
    cursor: pointer;
}

.carousel__next[hidden] {
    display: none;
}

/* ============================================
   MARKET Y ECOSISTEMA (Kroovify)
   ============================================ */

.market__layout {
    display: grid;
    gap: var(--spacing-md);
}

.market__grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

.ecosystem {
    display: grid;
    gap: var(--spacing-lg);
    align-items: center;
    padding: var(--spacing-lg);
    border-radius: var(--radius-xl);
    background: var(--bg-light);
}

.ecosystem__title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    line-height: 1.25;
    text-wrap: balance;
}

.ecosystem__text {
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--text-medium);
}

/* Diagrama: el núcleo y una lista de verdad colocada en órbita. Los anillos
   son bordes punteados en pseudo-elementos; sin CSS queda una lista legible. */
.ecosystem__diagram {
    position: relative;
    display: grid;
    place-items: center;
    width: min(100%, 240px);
    aspect-ratio: 1;
    margin: 0 auto;
}

.ecosystem__diagram::before,
.ecosystem__diagram::after {
    content: '';
    position: absolute;
    border: 1px dashed var(--text-light);
    border-radius: 50%;
    opacity: 0.5;
}

.ecosystem__diagram::before {
    inset: 10%;
}

.ecosystem__diagram::after {
    inset: 26%;
}

.ecosystem__core {
    display: grid;
    place-items: center;
    width: 36%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--gradient-fill);
    color: #ffffff;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: var(--shadow-lg);
}

.ecosystem__orbit {
    list-style: none;
    position: absolute;
    inset: 0;
}

.ecosystem__orbit li {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    font-size: var(--font-size-xs);
    font-weight: 700;
    transform: translate(-50%, -50%);
}

.ecosystem__orbit li:nth-child(1) { top: 12%; left: 50%; }

.ecosystem__orbit li:nth-child(2) { top: 54%; left: 90%; }

.ecosystem__orbit li:nth-child(3) { top: 94%; left: 50%; }

.ecosystem__orbit li:nth-child(4) { top: 54%; left: 10%; }

/* ============================================
   BANDA DE DESCARGA (Kroovify)
   ============================================ */

/* Reutiliza la foto del hero (misma URL: sale de caché) bajo un velo oscuro.
   El velo no baja de 0.6: sobre el cielo, que es lo más claro de la foto, el
   texto blanco queda en ~6:1. */
.download-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: var(--spacing-3xl) var(--content-pad);
    background: var(--surface-inverse);
    color: #ffffff;
}

.download-cta__media {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.download-cta__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 60%;
}

.download-cta__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(var(--veil-rgb), 0.9) 0%, rgba(var(--veil-rgb), 0.6) 100%);
}

.download-cta__inner {
    max-width: var(--content-inner);
    margin: 0 auto;
    display: grid;
    gap: var(--spacing-xl);
    align-items: center;
}

.download-cta .section__title {
    color: inherit;
}

.download-cta__lead {
    margin-top: var(--spacing-sm);
}

.download-cta .store-badges-note {
    color: inherit;
}

/* Rótulo «Más que una app, una comunidad.» Es texto, no imagen: escala con el
   zoom y no pesa nada. */
.sticker {
    justify-self: center;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: var(--font-size-2xl);
    font-style: italic;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-wrap: balance;
    transform: rotate(-4deg);
}

/* ============================================
   FAQ SECTION
   ============================================ */

/* Dos columnas independientes (no una rejilla de 20 celdas): abrir una
   pregunta no estira la fila de la columna vecina. En móvil se apilan y el
   orden de lectura sigue siendo 1 → 20. */
.faq-container {
    display: grid;
    gap: 0 var(--spacing-xl);
    align-items: start;
}

.faq-item {
    margin-bottom: var(--spacing-md);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: border-color var(--transition-base);
}

.faq-item:hover {
    border-color: var(--primary-color);
}

.faq-item details {
    background: var(--bg-white);
}

.faq-item summary {
    padding: var(--spacing-sm) var(--spacing-md);
    font-weight: 600;
    font-size: var(--font-size-base);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: var(--spacing-md);
    color: var(--text-dark);
    transition: background-color var(--transition-fast);
    min-height: 44px;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: '+';
    font-size: var(--font-size-2xl);
    font-weight: 300;
    color: var(--primary-color);
    transition: transform var(--transition-base);
    flex-shrink: 0;
}

.faq-item details[open] summary::after {
    transform: rotate(45deg);
}

.faq-item summary:hover {
    background: var(--bg-light);
}

.faq-question {
    flex: 1;
}

.faq-answer {
    padding: 0 var(--spacing-lg) var(--spacing-lg);
    color: var(--text-medium);
    line-height: 1.7;
}

.faq-answer p + p {
    margin-top: var(--spacing-sm);
}

.faq-answer a {
    color: var(--primary-on-surface);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
}

/* ============================================
   PIE
   ============================================ */

/* Marca del pie: isotipo + nombre, como en la cabecera. */
.footer-brand {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-xl);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.footer-brand .footer-logo {
    margin-bottom: 0;
}

/* El pie se alinea con las secciones del landing (.section__inner), que quedan
   a la altura del contenido del header. */
.footer-content,
.footer-bottom {
    max-width: var(--content-inner);
    margin-left: auto;
    margin-right: auto;
}

/* ============================================================================
   >= 48em (768px) — tablet y desktop pequeño
   ============================================================================ */

@media (min-width: 48em) {
    /* ── Hero con foto: texto a la izquierda, teléfonos a la derecha ── */
    .hero-photo__media img {
        object-position: 50% 50%;
    }

    .hero-photo__media::after {
        background: linear-gradient(
            90deg,
            rgba(var(--wash-rgb), 0.98) 0%,
            rgba(var(--wash-rgb), 0.95) 50%,
            rgba(var(--wash-rgb), 0.55) 66%,
            rgba(var(--wash-rgb), 0) 88%
        );
    }

    .hero-photo__inner {
        grid-template-columns: 1.25fr 0.75fr;
        align-items: center;
        padding-top: var(--spacing-2xl);
        padding-bottom: var(--spacing-2xl);
    }

    .hero-photo__devices {
        height: 440px;
    }

    .hero-photo__devices .device {
        width: min(58%, 210px);
    }

    .hero-photo__devices .device--back {
        right: auto;
        left: 0;
    }

    .hero-photo__devices .device--front {
        right: 0;
    }

    .pillar-list {
        gap: var(--spacing-md) var(--spacing-lg);
    }

    .bubble-list {
        gap: var(--spacing-md);
    }

    .bubble-list img,
    .bubble-list__more {
        width: 3.5rem;
        height: 3.5rem;
    }

    /* ── Rejillas del landing de Kroovify ── */
    .interests__top {
        grid-template-columns: 1fr 1fr;
        align-items: center;
    }

    .pillar-cards {
        grid-template-columns: repeat(4, 1fr);
    }

    .app-cards {
        grid-template-columns: repeat(3, 1fr);
    }

    .events {
        padding-left: var(--content-pad);
        padding-right: var(--content-pad);
    }

    .events__panel {
        padding: var(--spacing-xl);
        border-radius: var(--radius-xl);
    }

    .carousel__list {
        grid-auto-columns: minmax(210px, 1fr);
    }

    .market__grid {
        grid-template-columns: repeat(4, 1fr);
    }

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

    .download-cta__inner {
        grid-template-columns: 1fr 1fr;
    }

    .faq-container {
        grid-template-columns: 1fr 1fr;
    }

    .faq-answer {
        padding: 0 var(--spacing-xl) var(--spacing-lg);
    }
}

/* ============================================================================
   >= 64em (1024px) — desktop
   ============================================================================ */

@media (min-width: 64em) {
    /* ── Hero con foto ── */
    .hero-photo__inner {
        min-height: 560px;
    }

    .hero-photo__devices {
        height: 500px;
    }

    .hero-photo__devices .device {
        width: min(56%, 240px);
    }

    /* ── Intereses: una línea une las burbujas con las cuatro tarjetas ── */
    .pillar-cards::before {
        content: '';
        position: absolute;
        top: calc(-1.375rem - var(--spacing-md));
        left: 12.5%;
        right: 12.5%;
        height: var(--spacing-md);
        border: 1px solid var(--border-color);
        border-bottom: 0;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    }

    /* ── Descubre: las seis capturas en una fila ── */
    .app-cards {
        grid-template-columns: repeat(6, 1fr);
    }

    .app-card .media-card__body {
        padding: var(--spacing-md) var(--spacing-sm);
    }

    /* ── Encuentros: texto a la izquierda y las cuatro tarjetas a la vista ── */
    .events__panel {
        grid-template-columns: 280px 1fr;
        align-items: center;
    }

    .carousel__list {
        grid-auto-columns: minmax(0, 1fr);
    }

    /* ── Market: categorías + panel del ecosistema ── */
    .market__layout {
        grid-template-columns: 1.7fr 1fr;
    }

    /* El panel ocupa el alto de las tarjetas: texto y diagrama en fila. */
    .ecosystem {
        grid-template-columns: 1fr 1.2fr;
    }

    .ecosystem__diagram {
        width: min(100%, 200px);
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .video-facade__play {
        display: none;
    }

    .hero-photo {
        margin-top: 0;
    }
}