/* ════════════════════════════════════════════════════════════════════════════
   home-contacto.css — Transotel.Web
   Ubicación: wwwroot/css/home-contacto.css
   LOTE F16 · Franja #contacto-directo de la portada (los 3 teléfonos)

   Se carga solo desde Views/Home/Index.cshtml (@section Styles).
   Prefijo .cd- propio para no chocar con home.css (.hm-), site.css ni
   contacto-faq.css (.contacto-dato-*), que no se cargan en la portada.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Variables locales ────────────────────────────────────────────────────── */
:root {
    --cd-navy:        #0b1f3a;
    --cd-gold:        #dfbb3e;
    --cd-teal:        #008572;
    --cd-teal-a12:    rgba(0, 133, 114, 0.12);
    --cd-wa:          #25d366;
    --cd-wa-dark:     #128c7e;
    --cd-wa-a12:      rgba(37, 211, 102, 0.12);
    --cd-white:       #ffffff;
    --cd-text-mid:    #4b5563;
    --cd-border:      rgba(11, 31, 58, 0.09);
    --cd-shadow:      0 2px 18px rgba(11, 31, 58, 0.07);
    --cd-shadow-hov:  0 10px 34px rgba(11, 31, 58, 0.15);
    --cd-radius:      14px;
    --cd-dur:         0.25s;
    --cd-ease:        cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Rejilla ──────────────────────────────────────────────────────────────── */
/* <address> viene en cursiva por defecto: se anula. */
.cd-grid {
    font-style:            normal;
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   1rem;
    max-width:             1040px;
    margin:                2rem auto 0;
}

@media (min-width: 600px) {
    .cd-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
    .cd-grid {
        grid-template-columns: repeat(3, 1fr);
        gap:                   1.25rem;
    }
}

/* ── Tarjeta ──────────────────────────────────────────────────────────────── */
.cd-card {
    display:         flex;
    align-items:     center;
    gap:             1rem;
    min-height:      88px;
    padding:         1.1rem 1.25rem;
    background:      var(--cd-white);
    border:          1px solid var(--cd-border);
    border-radius:   var(--cd-radius);
    box-shadow:      var(--cd-shadow);
    text-decoration: none;
    color:           var(--cd-navy);
    transition:      transform var(--cd-dur) var(--cd-ease),
                     box-shadow var(--cd-dur) var(--cd-ease),
                     border-color var(--cd-dur) var(--cd-ease);
}

.cd-card:hover,
.cd-card:focus-visible {
    transform:       translateY(-3px);
    box-shadow:      var(--cd-shadow-hov);
    border-color:    var(--cd-teal);
    text-decoration: none;
    color:           var(--cd-navy);
}

.cd-card-wa:hover,
.cd-card-wa:focus-visible { border-color: var(--cd-wa); }

.cd-card:focus-visible {
    outline:        3px solid var(--cd-gold);
    outline-offset: 2px;
}

/* ── Icono ────────────────────────────────────────────────────────────────── */
.cd-icon {
    flex-shrink:     0;
    width:           50px;
    height:          50px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    border-radius:   50%;
    font-size:       1.25rem;
    line-height:     1;
}

.cd-icon-tel {
    background: var(--cd-teal-a12);
    color:      var(--cd-teal);
}

.cd-icon-wa {
    background: var(--cd-wa-a12);
    color:      var(--cd-wa-dark);
    font-size:  1.45rem;
}

/* ── Textos ───────────────────────────────────────────────────────────────── */
.cd-body {
    display:        flex;
    flex-direction: column;
    gap:            2px;
    min-width:      0;
}

.cd-label {
    font-size:      0.72rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color:          var(--cd-text-mid);
}

.cd-num {
    font-size:     clamp(1rem, 2.4vw, 1.15rem);
    font-weight:   700;
    color:         var(--cd-navy);
    letter-spacing: 0.01em;
    word-break:    break-word;
    overflow-wrap: anywhere;
}

.cd-card-wa .cd-num { color: var(--cd-wa-dark); }

.cd-nota {
    font-size:   0.7rem;
    line-height: 1.3;
    color:       var(--cd-text-mid);
}

.cd-nota i { margin-right: 2px; }

/* ── Móvil: la tarjeta ocupa todo el ancho y el número manda ──────────────── */
@media (max-width: 380px) {
    .cd-card {
        gap:     0.8rem;
        padding: 1rem;
    }
    .cd-icon {
        width:     44px;
        height:    44px;
        font-size: 1.1rem;
    }
}

/* ── Accesibilidad: sin animación si el usuario la ha desactivado ─────────── */
@media (prefers-reduced-motion: reduce) {
    .cd-card {
        transition: none;
    }
    .cd-card:hover,
    .cd-card:focus-visible {
        transform: none;
    }
}

/* ── Impresión: que los números se lean en papel ──────────────────────────── */
@media print {
    .cd-card {
        box-shadow: none;
        border:     1px solid #999999;
    }
}