/* ==========================================================================
   Reactiva Colombia — componentes de la zona pública
   Se carga después de app.css. Depende de sus tokens.
   ========================================================================== */

.hide-mobile { display: none; }

/* --- Aviso de versión de prueba -------------------------------------------
   Solo aparece mientras APP_STAGE = construccion. Ser explícitos sobre que
   el sitio está a medias es parte de la promesa de transparencia: nadie
   debería creer que ya puede comprarle a alguien aquí.                       */

.stage-banner {
    margin: 0;
    padding: var(--s2) var(--s4);
    background: var(--accent-soft);
    border-bottom: 1px solid #f0dc9a;
    color: #6b4d00;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
}

/* --- Hero -----------------------------------------------------------------
   La foto es de una persona trabajando y produciendo, nunca de destrucción.
   Mientras no exista, el degradado sostiene el mensaje igual de bien.        */

.hero {
    position: relative;
    isolation: isolate;
    padding-block: var(--s12) var(--s20);
    color: var(--white);
    background: linear-gradient(150deg, #123774 0%, #1f4fa3 55%, #2d63bd 100%);
    overflow: hidden;
}

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

.hero__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center center;
}

/* El velo oscurece donde va el texto y deja respirar la parte de la
   ilustración donde está la comerciante. En móvil el texto ocupa todo el
   ancho, así que ahí el degradado es vertical y más cerrado. */
.hero__media::after {
    content: '';
    position: absolute; inset: 0;
    /* En móvil el texto y los botones ocupan todo el ancho, así que el velo
       cierra más: la ilustración se intuye de fondo, pero los CTA mandan. */
    background: linear-gradient(180deg,
        rgba(9,28,64,.90) 0%,
        rgba(9,28,64,.80) 55%,
        rgba(9,28,64,.58) 100%);
}

.hero__inner { position: relative; }

.hero h1 { color: var(--white); }

.hero__text {
    max-width: 46ch;
    margin-top: var(--s5);
    font-size: 17px;
    color: rgba(255,255,255,.92);
}

.hero__actions {
    display: grid;
    gap: var(--s3);
    margin-top: var(--s8);
    max-width: 420px;
}

.hero .btn--primary { background: var(--white); color: var(--primary-dark); }
.hero .btn--primary:hover { background: var(--sand); color: var(--primary-dark); }

.hero__secondary {
    background: transparent;
    color: var(--white);
    border-color: rgba(255,255,255,.5);
}
.hero__secondary:hover { background: rgba(255,255,255,.12); border-color: var(--white); color: var(--white); }

/* --- Buscador -------------------------------------------------------------
   Se superpone al hero: es lo primero que la mano alcanza en móvil.          */

.searchbar {
    display: flex;
    align-items: center;
    gap: var(--s2);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: var(--s2);
    box-shadow: var(--shadow-lg);
}

.searchbar--floating { margin-top: calc(var(--s8) * -1); position: relative; z-index: 2; }

.searchbar__icon { margin-left: var(--s3); color: var(--ink-faint); }

.searchbar__input {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    border: 0;
    background: transparent;
    font-size: 16px;
    padding-inline: var(--s2);
}
.searchbar__input:focus { outline: none; }
.searchbar__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.searchbar__btn { min-height: 44px; padding-inline: var(--s5); flex: none; }

/* --- Encabezado de sección ------------------------------------------------ */

.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s4);
    flex-wrap: wrap;
}

.section-head__link {
    display: inline-flex; align-items: center; gap: var(--s1);
    font-weight: 600; font-size: 15px; text-decoration: none;
    white-space: nowrap;
}
.section-head__link:hover { text-decoration: underline; }

/* --- Pasos "Cómo funciona" ------------------------------------------------ */

.step {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: var(--s6);
}

.step__num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border-radius: var(--radius-pill);
    background: var(--primary-soft); color: var(--primary-dark);
    font-family: var(--font-display); font-weight: 700; font-size: 18px;
    margin-bottom: var(--s4);
}

.step h3 { margin-bottom: var(--s2); }
.step p { color: var(--ink-soft); }

/* --- Métricas de impacto --------------------------------------------------
   Sobrias a propósito. Las cifras de una tragedia no se presentan como un
   marcador deportivo.                                                        */

.metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s8) var(--s5);
    text-align: center;
}

.metric__value {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 36px;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.metric__label {
    display: block;
    margin-top: var(--s2);
    font-size: 14px;
    color: rgba(255,255,255,.85);
}

/* --- Tarjeta de negocio --------------------------------------------------- */

.b-card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}

.b-card:hover {
    border-color: #cfd8d5;
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.b-card__media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    background: var(--sand-deep);
}

.b-card__media img { width: 100%; height: 100%; object-fit: cover; }

.b-card__badge {
    position: absolute;
    left: var(--s3);
    top: var(--s3);
    background: var(--white);
    box-shadow: var(--shadow-sm);
}

.b-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--s4);
}

.b-card__title { font-size: 17px; line-height: 1.3; }
.b-card__title a { color: var(--ink); text-decoration: none; }
.b-card__title a:hover { color: var(--primary-dark); }

.b-card__meta { margin-top: var(--s1); font-size: 14px; color: var(--ink-soft); }

.b-card__desc {
    margin-top: var(--s2);
    font-size: 14px;
    color: var(--ink-soft);
    line-height: 1.5;
}

.b-card__tags { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s3); }

/* auto empuja el CTA al fondo: todas las tarjetas de una fila lo alinean
   aunque las descripciones tengan distinta longitud. */
.b-card__cta { margin-top: auto; padding-top: var(--s4); }

.chip__count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; padding-inline: 6px;
    border-radius: var(--radius-pill);
    background: var(--sand-deep); color: var(--ink-soft);
    font-size: 12px; font-weight: 600;
}
.chip.is-active .chip__count { background: rgba(255,255,255,.22); color: var(--white); }

/* --- Formularios de cuenta ------------------------------------------------ */

.auth { background: var(--sand); min-height: 70vh; }

.auth-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: var(--s6);
    box-shadow: var(--shadow-sm);
}

.auth-card h1 { font-size: 26px; }

/* Nombre y apellidos en una línea desde tablet: en móvil apilados, que es
   como se rellena un formulario con una sola mano. */
.field-pair { display: grid; gap: 0; }

@media (min-width: 560px) {
    .auth-card { padding: var(--s10); }
    .field-pair { grid-template-columns: 1fr 1fr; gap: var(--s5); }
}

/* --- Banda de captación --------------------------------------------------- */

.cta-band {
    background: var(--sand);
    border-top: 1px solid var(--line);
    padding-block: var(--s16);
}

/* --- Escritorio ----------------------------------------------------------- */

@media (min-width: 640px) {
    .hero__actions { grid-template-columns: repeat(2, auto); justify-content: start; }
    .hero__actions .btn { width: auto; padding-inline: var(--s8); }
    .metrics { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 768px) {
    .hide-mobile { display: inline-flex; }

    .hero { padding-block: var(--s20) calc(var(--s24) + var(--s10)); min-height: 560px; }
    .hero__text { font-size: 19px; }

    /* En escritorio el texto va a la izquierda, así que el velo se abre hacia
       la derecha y deja ver el barrio y el puesto. */
    .hero__media::after {
        background: linear-gradient(96deg,
            rgba(9,28,64,.93) 0%,
            rgba(9,28,64,.86) 26%,
            rgba(9,28,64,.42) 52%,
            rgba(9,28,64,.10) 78%,
            rgba(9,28,64,0)   100%);
    }

    /* El contenedor sigue centrado; solo se limita el ancho del texto para que
       la mitad derecha de la ilustración quede a la vista. */
    .hero h1 { max-width: 15ch; }
    .hero__text { max-width: 42ch; }

    .metrics { grid-template-columns: repeat(5, 1fr); }
    .metric__value { font-size: 44px; }

    .searchbar--floating { margin-top: calc(var(--s10) * -1); max-width: 720px; }
}

/* --- Video del hero --------------------------------------------------------
   Cubre el hero; el velo de .hero__media::after sigue encima del video.     */
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; background: #123774; }
.hero--video { cursor: ew-resize; }
.hero--video .hero__inner, .hero--video .hero__inner a { cursor: auto; }

/* --- Pase de fotos del hero ------------------------------------------------
   Tres imágenes que se funden una en otra. CSS puro: sin JS, sin librería.
   Cada slide está 6 s visible y tarda 1,5 s en fundirse. Con 3 slides el
   ciclo dura 18 s. Si el usuario pidió menos movimiento, se queda la primera. */
.hero__slide { position: absolute; inset: 0; opacity: 0; animation: hero-fade 18s infinite; animation-delay: calc(var(--i) * 6s); }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; object-position: center center; transform: scale(1.04); animation: hero-zoom 18s infinite; animation-delay: calc(var(--i) * 6s); }
/* La primera foto arranca visible: nada de un hero azul liso mientras carga. */
.hero__slide[style="--i:0"] { animation-name: hero-fade-first; }
.hero--slides-1 .hero__slide { opacity: 1; animation: none; }
.hero--slides-1 .hero__slide img { animation: none; transform: none; }
.hero--slides-2 .hero__slide { animation-duration: 12s; }
.hero--slides-2 .hero__slide img { animation-duration: 12s; }
@keyframes hero-fade {
    0%   { opacity: 0; }
    8%   { opacity: 1; }
    33%  { opacity: 1; }
    41%  { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes hero-fade-first {
    0%   { opacity: 1; }
    33%  { opacity: 1; }
    41%  { opacity: 0; }
    92%  { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes hero-zoom {
    0%   { transform: scale(1.04); }
    41%  { transform: scale(1.10); }
    100% { transform: scale(1.10); }
}
@media (prefers-reduced-motion: reduce) {
    .hero__slide { animation: none; opacity: 0; }
    .hero__slide[style="--i:0"] { opacity: 1; }
    .hero__slide img { animation: none; transform: none; }
}

/* --- CTA del hero: que pidan el clic ---------------------------------------
   Pulso suave permanente en el principal y respuesta clara al pasar el
   cursor en los dos. Con "reducir movimiento" no hay pulso.               */
.hero__actions .btn { transition: transform .18s ease, box-shadow .18s ease, background-color .18s, color .18s, border-color .18s; will-change: transform; }
.hero__actions .btn--primary { animation: cta-pulse 2.8s ease-out infinite; }
.hero__actions .btn--primary:hover,
.hero__actions .btn--primary:focus-visible { transform: translateY(-3px) scale(1.03); box-shadow: 0 14px 34px rgba(0,0,0,.35); animation-play-state: paused; }
.hero__actions .btn .icon { transition: transform .18s ease; }
.hero__actions .btn:hover .icon { transform: translateX(5px); }
.hero__secondary:hover,
.hero__secondary:focus-visible { background: var(--white); border-color: var(--white); color: var(--primary-dark); transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,.28); }
@keyframes cta-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.55); }
    70%  { box-shadow: 0 0 0 16px rgba(255,255,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

/* --- Titular del hero rotatorio -------------------------------------------- */
#hero-title { transition: opacity .45s ease, transform .45s ease; }
#hero-title.is-swapping { opacity: 0; transform: translateY(10px); }

/* --- Difunde el mensaje ----------------------------------------------------- */
.posters { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s5); }
.poster { margin: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.poster img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.poster__actions { display: flex; flex-wrap: wrap; gap: var(--s2); padding: var(--s3); }
.poster__actions .btn { flex: 1 1 auto; }

/* --- Apoyo reciente (actividad real) ---------------------------------------
   Toast pequeño abajo a la izquierda. En móvil deja libre la esquina del
   WhatsApp flotante (que va a la derecha).                                  */
.support-ticker { position: fixed; left: var(--s4); bottom: calc(var(--s4) + env(safe-area-inset-bottom)); z-index: 85; display: flex; align-items: center; gap: var(--s2); max-width: min(340px, 78vw); padding: var(--s2) var(--s3); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-pill); box-shadow: var(--shadow-lg); font-size: 13px; color: var(--ink-soft); opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease; pointer-events: none; }
.support-ticker.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.support-ticker__dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #25d366; box-shadow: 0 0 0 3px rgba(37,211,102,.2); }
.support-ticker__text strong { color: var(--ink); }
.support-ticker__close { border: 0; background: none; color: var(--ink-faint); font-size: 16px; line-height: 1; cursor: pointer; padding: 2px 4px; }
@media (prefers-reduced-motion: reduce) {
    .hero__actions .btn--primary { animation: none; }
    #hero-title { transition: none; }
}