/* ══════════════════════════════════════════
   CONTACT — PAGE HERO (versión unificada)
   ══════════════════════════════════════════ */
.page-hero {
    position: relative;
    overflow: hidden;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Imagen de fondo responsive (picture + img) */
.page-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

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

/* Overlay oscuro */
.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

/* Contenido interno */
.page-hero-inner {
    position: relative;
    z-index: 2;
    padding: 40px 20px;
}

/* Label (FAQ style) */
.hero-label {
    display: inline-flex;
    align-items: center;
    gap: var(--mtt-space-2);
    color: var(--mtt-color-yellow);
    border-radius: var(--mtt-radius-pill);
    padding: 5px 18px;
    font-size: var(--mtt-font-size-xs);
    font-weight: var(--mtt-font-weight-bold);
    letter-spacing: var(--mtt-letter-spacing-label);
    text-transform: uppercase;
    margin-bottom: 20px;
    animation: fadeUp .5s ease both;
}

/* Título */
.page-hero-heading {
    font-family: var(--mtt-font-body);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: var(--mtt-font-weight-bold);
    line-height: 1.08;
    color: var(--mtt-color-white);
    text-align: center;
    margin-bottom: 16px;
    animation: fadeUp .5s .09s ease both;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* Subtítulo */
.page-hero-sub {
    font-size: clamp(1rem, 3vw, 1.25rem);
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    margin: 0 auto;
    line-height: var(--mtt-line-height-loose);
    animation: fadeUp .5s .17s ease both;
}

/* Animación */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════
   RESPONSIVE: TABLET
   ══════════════════════════════════════════ */
@media (max-width: 1024px) {
    .page-hero {
        min-height: 350px;
    }
    .page-hero-img {
        object-position: center 40%;
    }
    .page-hero-heading {
        font-size: clamp(1.75rem, 4vw, 2.8rem);
    }
}

/* ══════════════════════════════════════════
   RESPONSIVE: MOBILE
   ══════════════════════════════════════════ */
@media (max-width: 640px) {
    .page-hero {
        min-height: 280px;
    }
    .page-hero-img {
        object-position: center 35%;
    }
    .page-hero-heading {
        font-size: 1.75rem;
    }
    .page-hero-sub {
        font-size: 1rem;
        padding: 0 16px;
    }
    .hero-label {
        font-size: 0.7rem;
        padding: 4px 12px;
    }
}

/* ══════════════════════════════════════════
   CONTACT SECTION  —  patrón whca
══════════════════════════════════════════ */
.ctc-section {
    background: var(--mtt-color-gray-soft);
    padding: var(--mtt-section-py) 0;
}

.ctc-container {
    max-width: var(--mtt-container-max);
    margin: 0 auto;
    padding: 0 var(--mtt-container-px);
}

/* Card blanca con borde dashed — clon exacto de .whca-card */
.ctc-card {
    background: var(--mtt-color-white);
    border: 1px dashed var(--mtt-color-border);
    border-radius: var(--mtt-radius-md);
    padding: var(--mtt-space-10);
    display: flex;
    flex-direction: column;
    gap: var(--mtt-gap-xl);
}

/* Header */
.ctc-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--mtt-gap-lg);
}
.ctc-header-text {
    display: flex;
    flex-direction: column;
}
.ctc-title {
    font-family: var(--mtt-font-title);
    font-size: clamp(1.75rem, 2.8vw, 2.4rem);
    font-weight: var(--mtt-font-weight-medium);
    color: var(--mtt-color-accent);
    line-height: var(--mtt-line-height-tight);
    max-width: 1050px;
}

/* Body: mapa izq + grid der — clon de .whca-body */
.ctc-body {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: var(--mtt-gap-xl);
    align-items: start;
}

/* Mapa */
.ctc-map {
    border-radius: var(--mtt-radius-md);
    overflow: hidden;
    width: 100%;
    aspect-ratio: 3/4;
    border: 1px solid var(--mtt-color-border);
}
.ctc-map iframe {
    width: 100%;
    height: 100%;
    display: block;
}

/* Grid 2×2 — clon de .whca-stops-grid */
.ctc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--mtt-space-4);
}

/* Cada stop — clon de .whca-stop */
.ctc-stop {
    padding: var(--mtt-space-4) var(--mtt-space-4) var(--mtt-space-4) 0;
    display: flex;
    flex-direction: column;
    gap: var(--mtt-space-2);
    transition: opacity var(--mtt-transition);
}
a.ctc-stop:hover { opacity: 0.85; }

/* Ícono — clon de .whca-stop-icon */
.ctc-stop-icon {
    width: 44px;
    height: 44px;
    background: var(--mtt-color-blue-light);
    border-radius: var(--mtt-radius-sm);
    margin-bottom: var(--mtt-space-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--mtt-font-size-lg);
    color: var(--mtt-color-blue);
    flex-shrink: 0;
}
.ctc-stop-icon i { display: flex; }

/* Variantes de color del ícono */
.ctc-stop-icon--wa       { background: rgba(37,211,102,0.12); color: var(--mtt-color-whatsapp); }
.ctc-stop-icon--email    { background: var(--mtt-color-blue-light);   color: var(--mtt-color-blue); }
.ctc-stop-icon--location { background: var(--mtt-color-yellow-light); color: #b89900; }
.ctc-stop-icon--social   { background: var(--mtt-color-blue-light);   color: var(--mtt-color-blue); }

/* Título — clon de .whca-stop h3 */
.ctc-stop h3 {
    font-size: var(--mtt-font-size-xl);
    font-weight: var(--mtt-font-weight-bold);
    color: var(--mtt-color-blue);
    text-transform: uppercase;
    letter-spacing: var(--mtt-letter-spacing-label);
    margin-bottom: var(--mtt-space-1);
}

/* Párrafo — clon de .whca-stop p */
.ctc-stop p {
    font-size: var(--mtt-font-size-xl);
    line-height: var(--mtt-line-height-loose);
    color: var(--mtt-color-muted);
    flex: 1;
}

/* Valor (número / email) */
.ctc-stop-value {
    font-size: var(--mtt-font-size-md);
    font-weight: var(--mtt-font-weight-semibold);
    color: var(--mtt-color-blue);
    margin-bottom: 12px;
}

/* CTA arrow link */
.ctc-stop-cta {
    padding: 15px 34px;
    display: inline-flex;
    align-items: center;
    gap: var(--mtt-space-2);
    border-radius: var(--mtt-radius-pill);
    font-size: var(--mtt-font-size-md);
    font-weight: var(--mtt-font-weight-bold);
    letter-spacing: var(--mtt-letter-spacing-btn);
    text-transform: uppercase;
    background: var(--mtt-color-blue);
    color: var(--mtt-color-white);
    margin-top: var(--mtt-space-1);
    transition: gap var(--mtt-transition-fast);
    width: fit-content;
}
.ctc-stop--wa .ctc-stop-cta    { background: var(--mtt-color-whatsapp); }
.ctc-stop-cta i { display: flex; font-size: var(--mtt-font-size-sm); }

/* Social icons dentro del stop */
.ctc-social-icons {
    display: flex;
    gap: var(--mtt-space-3);
    flex-wrap: wrap;
    margin-top: var(--mtt-space-2);
}
.ctc-social-link {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--mtt-color-gray-soft);
    border: 1px solid var(--mtt-color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--mtt-color-muted);
    transition: background var(--mtt-transition), color var(--mtt-transition), transform var(--mtt-transition-fast);
}
.ctc-social-link:hover {
    background: var(--mtt-color-blue);
    color: var(--mtt-color-white);
    border-color: var(--mtt-color-blue);
}
.ctc-social-link--wa:hover {
    background: var(--mtt-color-whatsapp);
    border-color: var(--mtt-color-whatsapp);
}
.ctc-social-link i { display: flex; }

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 1024px) {
    .ctc-body {
        grid-template-columns: 1fr;
    }
    .ctc-map {
        aspect-ratio: 16/9;
    }
}
@media (max-width: 768px) {
    .ctc-section { padding: var(--mtt-section-py-sm) 0; }
    .ctc-container { padding: 0 var(--mtt-container-px-sm); }
    .ctc-card {
        padding: var(--mtt-space-6);
        gap: var(--mtt-gap-lg);
    }
    .ctc-header { flex-direction: column; gap: var(--mtt-gap-md); }
    .ctc-grid   { grid-template-columns: 1fr; }
    .ctc-map    { aspect-ratio: 4/3; }
}


/* ══════════════════════════════════════════
   CONTACT — CLOSING MANIFESTO
   ══════════════════════════════════════════ */
.ctc-closing {
    padding: var(--mtt-section-py) 0;
    text-align: center;
}

.ctc-closing-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--mtt-container-px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--mtt-gap-lg);
}

/* Label — misma estética que .hero-label pero en amarillo sobre azul oscuro */
.ctc-closing-label {
    display: inline-flex;
    align-items: center;
    gap: var(--mtt-space-2);
    color: var(--mtt-color-blue);
    font-size: var(--mtt-font-size-xs);
    font-weight: var(--mtt-font-weight-bold);
    letter-spacing: var(--mtt-letter-spacing-label);
    text-transform: uppercase;
}
.ctc-closing-label::before,
.ctc-closing-label::after {
    content: '';
    display: inline-block;
    width: 24px;
    height: 2px;
    background: var(--mtt-color-yellow);
    border-radius: var(--mtt-radius-pill);
    flex-shrink: 0;
}

/* Las tres líneas del manifesto */
.ctc-closing-lines {
    display: flex;
    flex-direction: column;
    gap: var(--mtt-space-3);
}

.ctc-closing-lines p {
    font-family: var(--mtt-font-body);
    font-size: clamp(1.5rem, 3.2vw, 2rem);
    font-weight: var(--mtt-font-weight-medium);
    line-height: 1.2;
    color: var(--mtt-color-muted);
    margin: 0;
}

/* Las palabras en itálica son el "contraste suave" */
.ctc-closing-lines p em {
    font-style: italic;
    color: var(--mtt-color-muted);
}

/* Las palabras en bold son el "golpe de énfasis" */
.ctc-closing-lines p strong {
    font-style: normal;
    font-weight: var(--mtt-font-weight-bold);
    color: var(--mtt-color-muted);
}

/* Tagline final — más pequeña, separada visualmente */
.ctc-closing-tagline {
    font-family: var(--mtt-font-body);
    font-size: var(--mtt-font-size-2xl);
    color: var(--mtt-color-blue);
    letter-spacing: 0.03em;
    margin: 0;
    padding-top: var(--mtt-space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    width: 100%;
    text-align: center;
}

/* ══════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════ */
@media (max-width: 768px) {
    .ctc-closing {
        padding: var(--mtt-section-py-sm) 0;
    }
    .ctc-closing-inner {
        padding: 0 var(--mtt-container-px-sm);
        gap: var(--mtt-gap-md);
    }
    .ctc-closing-lines p {
        font-size: clamp(1.25rem, 5vw, 1.75rem);
    }
    .ctc-closing-tagline {
        font-size: var(--mtt-font-size-sm);
    }
}