/* ════════════════════════════════════════════════════════════
   COMPONENTS.CSS
   Base global + componentes atómicos reutilizables (botones,
   badges, marco de esquinas, reset, tipografía, paleta).

   Este archivo se carga SIEMPRE, en TODAS las plantillas
   (home, producto, etc.) ANTES del CSS específico de cada
   página. Las páginas de producto (kioscos-plegables.css,
   hangares.css...) ya NO redefinen .btn / .badge /
   .frame-corner: confían en este archivo.

   Nota de migración: estas mismas reglas existen hoy duplicadas
   dentro de home.css (reset, .btn*, .badge*, .frame-corner*).
   Cuando puedas, bórralas de home.css para que vivan en un solo
   lugar. No es urgente (no rompe nada que sigan ahí), pero evita
   que si cambias el naranja de marca tengas que tocar 7 archivos.

   ── ACTUALIZACIÓN (creación de la vista Hangares) ──
   Se agregaron aquí 5 componentes que antes vivían SOLO dentro
   de kioscos-plegables.css (.breadcrumb, .faq*, .trust-bar*,
   .site-footer*) y que hangares.css ya necesitaba sin
   redefinirlos. Quedan también aquí .img-placeholder (nuevo,
   nace con la vista Hangares pero es 100% reutilizable) y
   .ciudad-card__icono svg (helper de tamaño para íconos SVG
   envueltos en un div).

   kioscos-plegables.css y hangares.css siguen teniendo sus
   propias copias/variantes de .breadcrumb y .site-footer
   (marcadas ahí como "duplicado temporal"). No rompen nada
   estando duplicadas, pero ya puedes borrarlas de ambos archivos
   cuando tengas tiempo — la fuente de verdad es esta de aquí.
   ════════════════════════════════════════════════════════════ */

:root {
    /* Paleta de marca — única fuente de verdad */
    --color-bg: #0D0D0D;
    --color-bg-card: #141414;
    --color-bg-cream: #F5F5F0;
    --color-accent: #F5A623;
    --color-accent-dark: #D48B0F;
    --color-white: #FFFFFF;
    --color-text-dark: #1A1A1A;
    --color-text-muted: #AAAAAA;
    --color-text-muted-2: #666666;
    --color-text-muted-3: #444444;
    --color-border-dark: #2A2A2A;
    --color-border-light: #E0E0E0;
    --color-border-light-2: #CCCCCC;
    --color-green: #52B788;
    --color-green-bg: #1B4332;

    /* Tipografía */
    --font-display: 'Barlow Condensed', sans-serif;
    --font-body: 'Inter', sans-serif;
}

/* ── RESET BÁSICO ── */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    background-color: var(--color-bg) !important;
    color: var(--color-white) !important;
    font-family: var(--font-body);
}

/* ── BOTONES ── */
.btn {
    display: inline-flex;
    align-items: center;
    padding: 14px 28px;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.05em;
    transition: all 0.25s ease;
    position: relative;
    z-index: 0;
    border: none;
    cursor: pointer;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}

.btn__arrow {
    display: inline-flex;
    margin-left: 8px;
    transition: transform 0.2s ease;
}

.btn--primario {
    background-color: var(--color-accent);
    color: #000000;
}

.btn--primario:hover {
    box-shadow: 0 10px 28px rgba(245, 166, 35, 0.32);
    transform: translateY(-2px);
}

.btn--primario::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--color-accent-dark);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
    z-index: -1;
}

.btn--primario:hover::before {
    transform: scaleX(1);
}

.btn--primario:hover .btn__arrow {
    transform: translateX(4px);
}

.btn--secundario {
    position: relative;
    background-color: var(--color-white);
    color: var(--color-white);
}

.btn--secundario:hover {
    color: #000000;
    box-shadow: 0 10px 24px rgba(245, 166, 35, 0.12);
    transform: translateY(-2px);
}

.btn--secundario::after {
    content: '';
    position: absolute;
    inset: 1px;
    background-color: var(--color-bg);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%);
    z-index: -2;
}

.btn--secundario::before {
    content: '';
    position: absolute;
    inset: 1px;
    background-color: var(--color-accent);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
    z-index: -1;
}

.btn--secundario:hover::before {
    transform: scaleX(1);
}

.btn--secundario:hover .btn__arrow {
    transform: translateX(4px);
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── ESQUINAS DE MARCO (firma visual del hero, reutilizada en fichas de producto) ── */
.frame-corner {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-accent);
    z-index: 4;
    pointer-events: none;
}

.frame-corner--tl {
    top: -9px;
    left: -9px;
    border-right: none;
    border-bottom: none;
}

.frame-corner--tr {
    top: -9px;
    right: -9px;
    border-left: none;
    border-bottom: none;
}

.frame-corner--bl {
    bottom: -9px;
    left: -9px;
    border-right: none;
    border-top: none;
}

.frame-corner--br {
    bottom: -9px;
    right: -9px;
    border-left: none;
    border-top: none;
}

/* ── BADGES ── */
.badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 4px 10px;
    border-radius: 4px;
    white-space: nowrap;
    text-transform: uppercase;
}

.badge--gris {
    background-color: var(--color-border-dark);
    color: var(--color-text-muted);
}

.badge--naranja {
    background-color: var(--color-accent);
    color: #000000;
}

.badge--verde {
    background-color: var(--color-green-bg);
    color: var(--color-green);
}

/* ── UTILIDAD: visualmente oculto pero accesible a lectores de pantalla ── */
.u-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── FOCO VISIBLE (accesibilidad, válido para todo el sitio) ── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* ════════════════════════════════════════════════════════════
   MIGRADO DESDE kioscos-plegables.css
   (idéntico al original — sin cambios de valores, solo de lugar)
   ════════════════════════════════════════════════════════════ */

/* ── BREADCRUMB ── */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 18px 80px;
    background-color: #FFFFFF;
    border-bottom: 1px solid var(--color-border-light);
    font-size: 0.82rem;
}

.breadcrumb__item {
    color: var(--color-text-muted-2);
    text-decoration: none;
}

.breadcrumb__item:hover {
    color: var(--color-accent);
}

.breadcrumb__item--actual {
    color: var(--color-text-dark);
    font-weight: 600;
}

.breadcrumb__separador {
    color: var(--color-border-light-2);
}

/* ── FAQ (acordeón) ── */
.faq {
    display: flex;
    flex-direction: column;
}

.faq__item {
    border-bottom: 1px solid var(--color-border-light);
}

.faq__item:first-child {
    border-top: 1px solid var(--color-border-light);
}

.faq__pregunta {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
    background: none;
    border: none;
    text-align: left;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-dark);
    cursor: pointer;
}

.faq__icono {
    flex-shrink: 0;
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--color-accent);
    transition: transform 0.2s ease;
}

.faq__item--abierto .faq__icono {
    transform: rotate(45deg);
}

.faq__respuesta {
    padding: 0 0 16px;
    font-size: 0.82rem;
    color: var(--color-text-muted-2);
    line-height: 1.6;
}

/* ── TRUST BAR ── */
.trust-bar {
    background-color: var(--color-bg);
    display: flex;
}

.trust-bar__item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 28px 32px;
    border-right: 1px solid var(--color-border-dark);
    color: var(--color-text-muted);
    font-size: 0.85rem;
    line-height: 1.35;
}

.trust-bar__item:last-child {
    border-right: none;
}

.trust-bar__item svg {
    color: var(--color-accent);
    flex-shrink: 0;
}

/* ── FOOTER ── */
.site-footer {
    background-color: var(--color-bg);
}

.site-footer__top {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 32px;
    padding: 56px 80px 40px;
    border-top: 1px solid var(--color-border-dark);
}

.site-footer__logo {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 900;
    text-transform: uppercase;
}

.site-footer__logo-sub {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-bottom: 14px;
}

.site-footer__desc {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    line-height: 1.6;
    max-width: 280px;
    margin-bottom: 16px;
}

.site-footer__social {
    display: flex;
    gap: 10px;
}

.site-footer__social-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border-dark);
    color: var(--color-text-muted);
    transition: border-color 0.2s ease, color 0.2s ease;
}

.site-footer__social-icon:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.site-footer__titulo {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #FFFFFF;
    margin-bottom: 16px;
}

.site-footer__lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
    font-size: 0.85rem;
}

.site-footer__lista a {
    color: var(--color-text-muted);
    text-decoration: none;
}

.site-footer__lista a:hover {
    color: var(--color-accent);
}

.site-footer__lista--contacto li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--color-text-muted);
}

.site-footer__lista--contacto svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--color-accent);
}

.site-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 80px;
    border-top: 1px solid var(--color-border-dark);
    font-size: 0.78rem;
    color: var(--color-text-muted-3);
}

.site-footer__bottom-links {
    display: flex;
    gap: 20px;
}

.site-footer__bottom-links a {
    color: var(--color-text-muted-3);
    text-decoration: none;
}

.site-footer__bottom-links a:hover {
    color: var(--color-accent);
}

/* ════════════════════════════════════════════════════════════
   NUEVO — nace con la vista Hangares, queda aquí porque es
   100% reutilizable para cualquier vista futura que aún no
   tenga el asset final.
   ════════════════════════════════════════════════════════════ */

/* ── PLACEHOLDER DE IMAGEN ── */
.img-placeholder {
    width: 100%;
    height: 100%;
    background-color: var(--color-bg-card);
    border: 1px dashed var(--color-border-dark);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--color-text-muted);
    font-size: 0.76rem;
    text-align: center;
    padding: 20px;
    min-height: 200px;
}

.img-placeholder svg {
    opacity: 0.4;
}

/* ── CIUDADES ── */
.ciudades {
    background-color: #F5F5F0;
    padding: 48px 80px 0 80px;
}

.ciudades__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.ciudad-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background-color: #FFFFFF;
    border: 1px solid #E0E0E0;
    text-decoration: none;
    color: #1A1A1A;
    transition: border-color 0.2s ease;
}

.ciudad-card:hover {
    border-color: #F5A623;
}

.ciudad-card--destacada {
    border-color: #F5A623;
}

.ciudad-card__icono {
    width: 160px;
    height: 160px;
    flex-shrink: 0;
}

.ciudad-card__icono img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ciudad-card__info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ciudad-card__header {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ciudad-card__nombre {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.5rem;
    font-weight: 900;
    text-transform: uppercase;
    color: #1A1A1A;
}

.ciudad-card__desc {
    font-size: 0.875rem;
    color: #666666;
    line-height: 1.5;
}

.ciudad-card__equipo {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #444444;
    margin-top: 4px;
}

.badge--ciudad {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background-color: #F5A623;
    color: #000000;
    padding: 3px 8px;
    border-radius: 3px;
    vertical-align: middle;
    position: relative;
    top: -2px;
}