/* =========================================================================
   Contacto — /contacto/
   El H1 del tema queda suprimido (filtro hello_elementor_page_title) y el
   titulo se pinta dentro del hero: suelto bajo el header azul quedaba a 8 px
   y se leia como cortado.
   ========================================================================= */

.sc {
    --sc-ink:     #0B1220;
    --sc-body:    #48566E;
    --sc-accent:  #0B5ED7;
    --sc-panel:   #EEF4FC;
    --sc-surface: #FFFFFF;
    --sc-line:    #E3EBF6;
    --sc-wa:      #12703A;
    --sc-dark:    #1F2937;
    --sc-r:       16px;
    --sc-shadow:  0 1px 2px rgba(16, 42, 82, .04), 0 6px 18px rgba(16, 42, 82, .05);
    --sc-lift:    0 2px 4px rgba(16, 42, 82, .06), 0 16px 32px rgba(16, 42, 82, .11);

    max-width: 1140px;
    margin: 0 auto;
    padding: 0 0 48px;
    color: var(--sc-body);
    line-height: 1.6;
}

/* El tema subraya todo enlace dentro de .page-content (0,1,1). Hace falta
   una clase mas para ganarle sin recurrir a !important. */
.synnet-contacto-page .sc a { text-decoration: none; }

.synnet-contacto-page .sc a:hover,
.synnet-contacto-page .sc a:focus-visible { text-decoration: none; }

/* ── Hero ────────────────────────────────────────────────────────────────── */

.sc-hero {
    padding: clamp(28px, 4vw, 46px) clamp(20px, 3.4vw, 40px) clamp(26px, 3.4vw, 38px);
    background: var(--sc-panel);
    border-radius: 24px;
}

/* `.elementor-kit-16 h1` fija 40px con especificidad (0,1,1): hace falta
   una clase mas para que el clamp llegue a aplicarse. */
.sc .sc-hero__title {
    margin: 0 0 12px;
    font-size: clamp(2.1rem, 4.2vw, 3rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--sc-ink);
    text-wrap: balance;
}

.sc-hero__deck {
    margin: 0 0 12px;
    max-width: 58ch;
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    line-height: 1.5;
    color: #35455F;
    text-wrap: pretty;
}

.sc-hero__meta {
    margin: 0 0 24px;
    font-size: .88rem;
    color: #5A6B85;
}

.sc-hero__nota {
    margin: 24px 0 0;
    max-width: 72ch;
    font-size: .95rem;
    color: var(--sc-body);
    text-wrap: pretty;
}

/* ── Tres acciones directas ──────────────────────────────────────────────── */

.sc-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
    gap: 13px;
}

.sc-action {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px 18px;
    border-radius: var(--sc-r);
    color: #fff;
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

.sc-action--tel  { background: var(--sc-accent); }
.sc-action--wa   { background: var(--sc-wa); }
.sc-action--mail { background: var(--sc-dark); }

.sc-action:hover,
.sc-action:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--sc-lift);
    filter: brightness(1.07);
}

.sc-action__ico {
    display: grid;
    place-items: center;
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .17);
}

.sc-action__ico svg { width: 22px; height: 22px; }

.sc-action__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sc-action__label {
    font-size: .78rem;
    font-weight: 500;
    line-height: 1.25;
    color: #E8F0FF;
}

.sc-action__value {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
    overflow-wrap: anywhere;
}

/* ── Secciones ───────────────────────────────────────────────────────────── */

.sc-section { margin-top: clamp(34px, 4.5vw, 52px); }

.sc-section__title {
    margin: 0 0 10px;
    font-size: clamp(1.35rem, 2.2vw, 1.75rem);
    font-weight: 700;
    line-height: 1.22;
    color: var(--sc-ink);
    text-wrap: balance;
}

.sc-section__deck {
    margin: 0 0 20px;
    max-width: 74ch;
    font-size: .97rem;
    color: var(--sc-body);
    text-wrap: pretty;
}

.sc-grid { display: grid; gap: 14px; }

.sc-grid--datos     { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-top: 20px; }
.sc-grid--servicios { grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); margin-top: 20px; }

/* ── Tarjetas de datos ───────────────────────────────────────────────────── */

.sc-dato {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 18px;
    background: var(--sc-surface);
    border: 1px solid var(--sc-line);
    border-radius: var(--sc-r);
    box-shadow: var(--sc-shadow);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.sc-dato--link:hover,
.sc-dato--link:focus-visible {
    transform: translateY(-3px);
    border-color: #CFE0F7;
    box-shadow: var(--sc-lift);
}

.sc-dato__ico {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-bottom: 3px;
    border-radius: 11px;
    background: var(--sc-panel);
    color: var(--sc-accent);
}

.sc-dato__ico svg { width: 20px; height: 20px; }

.sc-dato__label {
    font-size: .78rem;
    font-weight: 600;
    color: #5A6B85;
}

.sc-dato__valor {
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--sc-ink);
    overflow-wrap: anywhere;
}

.sc-dato--link .sc-dato__valor { color: #0B4FB5; }

/* ── Mapa ────────────────────────────────────────────────────────────────── */

.sc-mapa {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
}

.sc-mapa__marco {
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid var(--sc-line);
    box-shadow: var(--sc-shadow);
    line-height: 0;
}

.sc-mapa__marco iframe { display: block; width: 100%; height: 100%; min-height: 420px; }

.sc-mapa__panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    padding: 24px 22px;
    background: var(--sc-panel);
    border-radius: 18px;
}

.sc-mapa__ico {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 4px;
    border-radius: 13px;
    background: var(--sc-surface);
    color: var(--sc-accent);
}

.sc-mapa__ico svg { width: 24px; height: 24px; }

.sc-mapa__titulo {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--sc-ink);
}

.sc-mapa__dir {
    margin: 0;
    font-size: .95rem;
    line-height: 1.5;
    color: #35455F;
}

.sc-mapa__horario {
    margin: 0;
    font-size: .87rem;
    line-height: 1.5;
    color: #5A6B85;
}

/* ── Servicios ───────────────────────────────────────────────────────────── */

.sc-servicio {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 20px 18px;
    background: var(--sc-surface);
    border: 1px solid var(--sc-line);
    border-radius: var(--sc-r);
    box-shadow: var(--sc-shadow);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.sc-servicio:hover {
    transform: translateY(-3px);
    border-color: #CFE0F7;
    box-shadow: var(--sc-lift);
}

.sc-servicio__ico {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--sc-panel);
    color: var(--sc-accent);
}

.sc-servicio__ico svg { width: 22px; height: 22px; }

.sc-servicio__titulo {
    margin: 0;
    font-size: .98rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--sc-ink);
    text-wrap: balance;
}

.sc-servicio__texto {
    margin: 0;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--sc-body);
    text-wrap: pretty;
}

/* ── Cierre ──────────────────────────────────────────────────────────────── */

.sc-cierre {
    margin-top: clamp(34px, 4.5vw, 52px);
    padding: clamp(32px, 4vw, 46px) clamp(20px, 3vw, 36px);
    background: linear-gradient(135deg, #062B63 0%, #0A4491 52%, #0B5ED7 100%);
    border-radius: 20px;
    text-align: center;
}

.sc-cierre__titulo {
    margin: 0 0 10px;
    font-size: clamp(1.35rem, 2.4vw, 1.85rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.015em;
    color: #fff;
    text-wrap: balance;
}

.sc-cierre__texto {
    margin: 0 auto 22px;
    max-width: 52ch;
    font-size: 1rem;
    line-height: 1.5;
    color: #DCEAFF;
    text-wrap: pretty;
}

.sc-cierre__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    justify-content: center;
}

/* ── Botones ─────────────────────────────────────────────────────────────── */

.sc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 12px;
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.2;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}

.sc-btn svg { width: 17px; height: 17px; flex: none; }

.sc-btn--solid { background: var(--sc-accent); color: #fff; }
.sc-btn--solid:hover, .sc-btn--solid:focus-visible { background: #0A4FB5; transform: translateY(-2px); }

.sc-btn--claro { background: #fff; color: #0A3B84; }
.sc-btn--claro:hover, .sc-btn--claro:focus-visible { background: #DCEAFF; transform: translateY(-2px); }

.sc-btn--linea { border: 1.5px solid rgba(255, 255, 255, .55); color: #fff; }
.sc-btn--linea:hover, .sc-btn--linea:focus-visible { background: rgba(255, 255, 255, .16); border-color: #fff; transform: translateY(-2px); }

/* ── Foco propio ─────────────────────────────────────────────────────────── */

.sc a:focus-visible {
    outline: 3px solid var(--sc-accent);
    outline-offset: 3px;
}

.sc-cierre a:focus-visible,
.sc-action:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 880px) {
    .sc-mapa { grid-template-columns: minmax(0, 1fr); }
    .sc-mapa__marco iframe { min-height: 320px; }
}

@media (max-width: 600px) {
    .sc { padding-bottom: 34px; }
    .sc-hero { border-radius: 18px; }
    .sc-actions { grid-template-columns: minmax(0, 1fr); }
    .sc-cierre { border-radius: 18px; }
    .sc-cierre__acciones { flex-direction: column; }
    .sc-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .sc-action,
    .sc-dato,
    .sc-servicio,
    .sc-btn { transition: none; }

    .sc-action:hover,
    .sc-dato--link:hover,
    .sc-servicio:hover,
    .sc-btn:hover { transform: none; }
}