/* =====================================================
   PEQUEÑOS CORAZONES · Tigalma
   Estilos principales
   ===================================================== */


/* ─────────────────────────────────────────────
   VARIABLES
───────────────────────────────────────────── */

:root {

    --fondo:          #F4EAE3;
    --fondo-claro:    #FFF9F5;

    --marron:         #5D4A45;
    --marron-suave:   #9B7A6B;

    --radio:          20px;

    --sombra:
        0 4px 20px rgba(93, 74, 69, 0.10);

    --sombra-alt:
        0 10px 32px rgba(93, 74, 69, 0.18);

    --dur:            0.35s;
}


/* ─────────────────────────────────────────────
   RESET
───────────────────────────────────────────── */

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

html {
    scroll-behavior: smooth;
}

body {

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        Arial,
        sans-serif;

    background: var(--fondo);

    color: var(--marron);

    line-height: 1.6;

    transition:
        background-color 0.6s ease;

    /* Evita scroll horizontal en cualquier dispositivo */
    overflow-x: hidden;
}

img {
    display: block;
}


/* ─────────────────────────────────────────────
   CABECERA
───────────────────────────────────────────── */

.cabecera {

    position: sticky;
    top: 0;
    z-index: 50;

    background:
        rgba(255, 249, 245, 0.95);

    border-bottom:
        1px solid rgba(155, 122, 107, 0.15);

    padding: 12px 20px;
}

@supports (backdrop-filter: blur(8px)) {

    .cabecera {

        background:
            rgba(255, 249, 245, 0.85);

        backdrop-filter: blur(8px);
    }
}

.cabecera-contenido {

    max-width: 960px;

    margin: 0 auto;

    display: flex;
    align-items: center;
    gap: 14px;
}

.cabecera-logo {

    height: 52px;
    width: auto;
}

.cabecera-nombre {

    font-size: 1.05rem;
    font-weight: 700;

    color: var(--marron);
}

.cabecera-lema {

    font-size: 0.70rem;

    letter-spacing: 0.09em;

    text-transform: uppercase;

    color: var(--marron-suave);
}


/* ─────────────────────────────────────────────
   HERO
───────────────────────────────────────────── */

.hero {

    text-align: center;

    padding: 56px 20px 36px;

    max-width: 640px;

    margin: 0 auto;
}

.hero h1 {

    font-size:
        clamp(1.7rem, 5vw, 2.8rem);

    font-weight: 800;

    letter-spacing: -0.03em;

    line-height: 1.2;

    margin-bottom: 14px;

    color: var(--marron);
}

.hero p {

    font-size:
        clamp(1rem, 2.5vw, 1.15rem);

    color: var(--marron-suave);
}


/* ─────────────────────────────────────────────
   TARJETAS
───────────────────────────────────────────── */

.tarjetas-seccion {

    padding: 0 16px 64px;
}

.tarjetas-grid {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 14px;

    max-width: 900px;

    margin: 0 auto;
}


/* TABLET */

@media (min-width: 580px) {

    .tarjetas-grid {

        grid-template-columns:
            repeat(3, 1fr);

        gap: 22px;
    }

    .tarjetas-seccion {

        padding: 0 24px 80px;
    }
}


/* DESKTOP */

@media (min-width: 900px) {

    .tarjetas-grid {
        gap: 28px;
    }
}


/* TARJETA */

.tarjeta {

    background: white;

    border-radius: var(--radio);

    overflow: hidden;

    cursor: pointer;

    box-shadow: var(--sombra);

    border: none;

    text-align: left;

    display: flex;

    flex-direction: column;

    transition:
        transform var(--dur) ease,
        box-shadow var(--dur) ease;
}

.tarjeta:hover {

    transform:
        translateY(-6px)
        scale(1.01);

    box-shadow: var(--sombra-alt);
}

.tarjeta:focus-visible {

    outline:
        3px solid var(--marron-suave);

    outline-offset: 3px;
}


/* IMAGEN */

.tarjeta-img-wrap {

    aspect-ratio: 3 / 4;

    overflow: hidden;
}

.tarjeta-img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center top;

    transition:
        transform 0.6s ease;
}

.tarjeta:hover .tarjeta-img {

    transform: scale(1.05);
}


/* PIE */

.tarjeta-pie {

    padding: 12px 14px 16px;

    display: flex;

    flex-direction: column;

    gap: 3px;
}

.tarjeta-emoji {

    font-size: 1.4rem;

    line-height: 1;

    margin-bottom: 4px;
}

.tarjeta-nombre {

    font-size: 0.95rem;

    font-weight: 700;

    color: var(--marron);
}

.tarjeta-frase {

    font-size: 0.78rem;

    color: var(--marron-suave);

    line-height: 1.3;
}


/* ─────────────────────────────────────────────
   DETALLE
───────────────────────────────────────────── */

.detalle {

    padding: 32px 16px 64px;

    transition:
        background-color 0.5s ease;

    animation:
        aparecer 0.4s ease both;
}


/* ANIMACIÓN */

@keyframes aparecer {

    from {

        opacity: 0;

        transform:
            translateY(18px);
    }

    to {

        opacity: 1;

        transform:
            translateY(0);
    }
}

.detalle-cuerpo {

    max-width: 900px;

    margin: 0 auto;
}


/* BOTÓN VOLVER */

.btn-volver {

    background: none;

    border:
        2px solid var(--marron-suave);

    color: var(--marron-suave);

    border-radius: 30px;

    padding: 8px 20px;

    font-size: 0.88rem;

    cursor: pointer;

    transition: all var(--dur) ease;

    margin-bottom: 28px;

    display: inline-block;

    font-family: inherit;
}

.btn-volver:hover {

    background: var(--marron-suave);

    color: white;
}


/* CABECERA DETALLE */

.detalle-top {

    display: flex;

    align-items: flex-start;

    gap: 28px;

    margin-bottom: 32px;

    flex-wrap: wrap;
}

.detalle-imagen-marco {

    width: 200px;

    min-width: 150px;

    border-radius: var(--radio);

    overflow: hidden;

    box-shadow: var(--sombra-alt);

    flex-shrink: 0;
}

.detalle-img {

    width: 100%;

    height: auto;
}

.detalle-mensaje-wrap {

    flex: 1;

    min-width: 180px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 10px;

    padding: 8px 0;
}

.detalle-emocion-nombre {

    font-size: 0.78rem;

    letter-spacing: 0.09em;

    text-transform: uppercase;

    color: var(--marron-suave);
}

.detalle-mensaje {

    font-size:
        clamp(1.4rem, 4vw, 2.2rem);

    font-weight: 800;

    color: var(--marron);

    line-height: 1.25;

    letter-spacing: -0.02em;
}


/* GRID */

.detalle-grid {

    display: grid;

    grid-template-columns: 1fr;

    gap: 14px;

    margin-bottom: 32px;
}

@media (min-width: 580px) {

    .detalle-grid {

        grid-template-columns:
            1fr 1fr;
    }
}


/* BLOQUES */

.bloque {

    background: white;

    border-radius: var(--radio);

    padding: 20px;

    box-shadow: var(--sombra);

    display: flex;

    gap: 14px;

    align-items: flex-start;
}

.bloque-padres {

    grid-column: 1 / -1;

    background: var(--fondo);
}

.bloque-emoji {

    font-size: 1.8rem;

    flex-shrink: 0;

    line-height: 1;

    margin-top: 2px;
}

.bloque-texto h3 {

    font-size: 0.72rem;

    text-transform: uppercase;

    letter-spacing: 0.08em;

    color: var(--marron-suave);

    margin-bottom: 6px;
}

.bloque-texto p {

    font-size: 0.96rem;

    color: var(--marron);

    line-height: 1.55;
}


/* BOTONES */

.detalle-botones {

    display: flex;

    gap: 12px;

    flex-wrap: wrap;
}

.btn {

    padding: 11px 24px;

    border-radius: 30px;

    font-size: 0.92rem;

    font-weight: 600;

    text-decoration: none;

    cursor: pointer;

    border: none;

    transition: all var(--dur) ease;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    font-family: inherit;
}

.btn-oscuro {

    background: var(--marron);

    color: white;
}

.btn-oscuro:hover {

    background: #3d2e2a;

    transform: translateY(-2px);
}

.btn-claro {

    background: white;

    color: var(--marron);

    border:
        2px solid rgba(93, 74, 69, 0.28);
}

.btn-claro:hover {

    background: var(--fondo);

    transform: translateY(-2px);
}


/* ─────────────────────────────────────────────
   EXPLORA MÁS
───────────────────────────────────────────── */

.extra {

    background: var(--fondo-claro);

    padding: 60px 20px 70px;

    text-align: center;

    /* Contiene cualquier desbordamiento interno */
    overflow: hidden;
}

.extra h2 {

    font-size:
        clamp(1.3rem, 3vw, 1.9rem);

    font-weight: 700;

    letter-spacing: -0.02em;

    margin-bottom: 36px;

    color: var(--marron);
}

.extra-grid {

    display: grid;

    /* Móvil pequeño: 1 columna — las tarjetas tienen espacio para el badge */
    grid-template-columns: 1fr;

    gap: 14px;

    max-width: 900px;

    margin: 0 auto;
}

/* Móvil grande: 2 columnas */
@media (min-width: 480px) {

    .extra-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }
}

/* Tablet: 3 columnas */
@media (min-width: 640px) {

    .extra-grid {

        grid-template-columns:
            repeat(3, 1fr);

        gap: 16px;
    }
}

/* Escritorio: 5 columnas */
@media (min-width: 900px) {

    .extra-grid {

        grid-template-columns:
            repeat(5, 1fr);

        gap: 16px;
    }
}


/* TARJETAS EXTRA */

.extra-tarjeta {

    display: block;

    background: var(--col, #F8DFA8);

    border-radius: var(--radio);

    padding: 24px 16px;

    text-align: center;

    transition:
        transform var(--dur) ease,
        box-shadow var(--dur) ease;

    cursor: pointer;

    text-decoration: none;

    color: inherit;
}

.extra-tarjeta:hover {

    transform: translateY(-4px);

    box-shadow: var(--sombra);
}

.extra-tarjeta > span {

    font-size: 2.2rem;

    display: block;

    margin-bottom: 10px;

    line-height: 1;
}

.extra-tarjeta h3 {

    font-size: 0.88rem;

    font-weight: 700;

    color: var(--marron);

    margin-bottom: 6px;

    line-height: 1.3;
}

.extra-tarjeta p {

    font-size: 0.78rem;

    color: var(--marron-suave);

    line-height: 1.4;
}


/* ─────────────────────────────────────────────
   FRASE FINAL
───────────────────────────────────────────── */

.frase-final {

    background: var(--fondo-claro);

    padding: 20px 20px 60px;
}

.frase-final p {

    max-width: 760px;

    margin: 0 auto;

    background: white;

    border-radius: 999px;

    padding: 18px 32px;

    text-align: center;

    color: var(--marron-suave);

    box-shadow: var(--sombra);

    line-height: 1.5;

    font-size: 0.95rem;

    /* Borde asimétrico: más grueso abajo e izquierda */
    border-top:    1.5px solid rgba(155, 122, 107, 0.18);
    border-right:  1.5px solid rgba(155, 122, 107, 0.18);
    border-bottom: 4px   solid #F7B7C6;
    border-left:   4px   solid #F8DFA8;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;

    cursor: default;
}

.frase-final p:hover {

    transform: translateY(-3px);

    box-shadow:
        0 8px 28px rgba(93, 74, 69, 0.15);
}


/* ─────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────── */

.pie {

    background: var(--marron);

    color:
        rgba(255, 255, 255, 0.75);

    text-align: center;

    padding: 36px 20px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 12px;
}

.pie-logo {

    height: 80px;

    width: auto;

    /* Sin filtro: el icono conserva sus colores originales */
    opacity: 0.92;
}

.pie p {

    font-size: 0.82rem;

    letter-spacing: 0.05em;
}


/* ─────────────────────────────────────────────
   ANIMACIONES GENERALES
───────────────────────────────────────────── */

/* Flotación suave para elementos "próximamente" */
@keyframes flotar {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-6px); }
}

/* Aparición suave con desplazamiento */
@keyframes aparecerSuave {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ─────────────────────────────────────────────
   BADGE "PRÓXIMAMENTE"
───────────────────────────────────────────── */

.badge-proximo {

    /*
     * display:table es la forma más fiable en todos los navegadores
     * de hacer que un elemento se encoja a su contenido y se centre.
     * Funciona desde CSS2, sin necesidad de fit-content ni flex.
     */
    display: table;
    margin: 14px auto 0;

    padding: 6px 18px;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.68);

    border: 1.5px solid rgba(155, 122, 107, 0.25);

    font-size: 0.73rem;

    font-weight: 700;

    color: var(--marron-suave);

    letter-spacing: 0.04em;

    text-align: center;

    /* Flotación suave */
    animation: flotar 3.2s ease-in-out infinite;
}

/* Detener la flotación si el usuario prefiere movimiento reducido */
@media (prefers-reduced-motion: reduce) {

    .badge-proximo {
        animation: none;
    }
}


/* ─────────────────────────────────────────────
   TARJETAS "PRÓXIMAMENTE"
   (añade clase .proximo a .extra-tarjeta)
───────────────────────────────────────────── */

/* Las tarjetas próximamente son bloques normales.
   El badge es inline-block y se centra solo con
   el text-align: center que hereda del padre .extra */

.extra-tarjeta.proximo:hover .badge-proximo {

    /* Al hacer hover en la tarjeta, el badge flota más rápido */
    animation-duration: 1.8s;
}


/* ─────────────────────────────────────────────
   SECCIÓN "CRECIENDO"
───────────────────────────────────────────── */

.creciendo {

    background: var(--fondo);

    padding: 56px 20px 64px;

    text-align: center;

    /* Aparece con fade-in al cargar la página */
    animation: aparecerSuave 1s ease both;
}

.creciendo-tarjeta {

    max-width: 580px;

    margin: 0 auto;

    background: white;

    border-radius: 28px;

    padding: 48px 36px;

    box-shadow: var(--sombra-alt);

    /* Borde asimétrico igual que la frase-final, para coherencia visual */
    border-top:    1.5px solid rgba(155, 122, 107, 0.12);
    border-right:  1.5px solid rgba(155, 122, 107, 0.12);
    border-bottom: 4px   solid #BFE3D0;
    border-left:   4px   solid #D8C7F2;
}

.creciendo-icono {

    font-size: 3rem;

    line-height: 1;

    margin-bottom: 20px;

    /* El icono flota suavemente */
    display: block;

    animation: flotar 4s ease-in-out infinite;
}

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

    .creciendo-icono {
        animation: none;
    }
}

.creciendo-titulo {

    font-size: clamp(1.2rem, 3vw, 1.65rem);

    font-weight: 800;

    color: var(--marron);

    line-height: 1.45;

    margin-bottom: 16px;

    letter-spacing: -0.02em;
}

.creciendo-sub {

    font-size: 0.96rem;

    color: var(--marron-suave);

    line-height: 1.65;
}