/* ==========================================================
   PÁGINA CONTÁCTENOS - EMAPASR-EP
   Archivo exclusivo: assets/css/contacto.css
   ========================================================== */

.pagina-contacto {
    overflow: hidden;
    background: #f4f8fb;
    color: #143653;
    font-family: "Open Sans", Arial, sans-serif;
}

.pagina-contacto *,
.pagina-contacto *::before,
.pagina-contacto *::after {
    box-sizing: border-box;
}


/* ==========================================================
   MARQUESINA
   ========================================================== */

.contacto-hero {
    position: relative;
    width: calc(100% - 30px);
    max-width: 1180px;
    min-height: 335px;
    margin: 42px auto 0;
    overflow: hidden;
    border-radius: 18px;
    background:
        linear-gradient(115deg, #003f83 0%, #006eb4 55%, #10bcc7 100%);
    color: #ffffff;
    box-shadow: 0 17px 42px rgba(0, 65, 110, .16);
}

.contacto-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .18;
    background-image:
        radial-gradient(rgba(255,255,255,.78) 1px, transparent 1px);
    background-position: 72% 34%;
    background-size: 12px 12px;
    -webkit-mask-image:
        linear-gradient(to right, transparent 48%, #000 67%, transparent 91%);
    mask-image:
        linear-gradient(to right, transparent 48%, #000 67%, transparent 91%);
}

.contacto-hero::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    height: 145px;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% 145px;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 145' preserveAspectRatio='none'%3E%3Cpath d='M0 70 C150 120 285 18 452 52 C620 87 718 127 880 74 C1035 23 1160 25 1280 73 C1350 101 1400 94 1440 80 L1440 145 L0 145 Z' fill='%23005ead' fill-opacity='.46'/%3E%3Cpath d='M0 94 C180 42 314 132 490 96 C660 61 760 45 930 91 C1090 135 1205 57 1325 79 C1380 89 1414 103 1440 104 L1440 145 L0 145 Z' fill='%23003f92' fill-opacity='.65'/%3E%3Cpath d='M0 116 C172 82 330 136 510 116 C700 95 838 89 1015 118 C1180 145 1318 96 1440 117 L1440 145 L0 145 Z' fill='%23002268' fill-opacity='.77'/%3E%3Cpath d='M0 84 C160 38 310 119 480 88 C650 57 760 37 930 83 C1092 126 1210 49 1330 73 C1382 83 1417 94 1440 95' fill='none' stroke='%2368edf2' stroke-opacity='.38' stroke-width='2'/%3E%3C/svg%3E");
    pointer-events: none;
}

.contacto-hero .container {
    width: 100%;
    max-width: 1170px;
}

.contacto-hero-contenido {
    position: relative;
    z-index: 3;
}

.contacto-hero-texto {
    padding-top: 66px;
    padding-bottom: 90px;
}

.contacto-etiqueta {
    display: inline-block;
    margin-bottom: 18px;
    color: #67eef2;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.65px;
}

.contacto-etiqueta::after {
    content: "";
    display: block;
    width: 45px;
    height: 2px;
    margin-top: 8px;
    background: #79eff3;
}

.contacto-hero h1 {
    max-width: 660px;
    margin: 0 0 16px;
    color: #ffffff;
    font-size: 44px;
    font-weight: 700;
    line-height: 1.13;
    letter-spacing: -.7px;
}

.contacto-hero p {
    max-width: 650px;
    margin: 0;
    color: rgba(255,255,255,.94);
    font-size: 17px;
    line-height: 1.65;
}

.contacto-hero-mascota {
    position: relative;
    height: 335px;
}

.contacto-hero-mascota img {
    position: absolute;
    right: 34px;
    bottom: -252px;
    width: 430px;
    max-width: none;
    filter: drop-shadow(0 18px 24px rgba(0, 28, 70, .28));
}


/* ==========================================================
   TÍTULOS
   ========================================================== */

.contacto-titulo-seccion {
    max-width: 760px;
    margin: 0 auto 30px;
    text-align: center;
}

.contacto-titulo-seccion > span {
    display: block;
    margin-bottom: 6px;
    color: #009fc1;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.contacto-titulo-seccion h2 {
    position: relative;
    margin: 0 0 13px;
    padding-bottom: 14px;
    color: #063f79;
    font-size: 31px;
    font-weight: 700;
}

.contacto-titulo-seccion h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 48px;
    height: 3px;
    border-radius: 3px;
    background: #16bfd0;
    transform: translateX(-50%);
}

.contacto-titulo-seccion p {
    margin: 0;
    color: #697f8e;
    font-size: 15px;
    line-height: 1.65;
}


/* ==========================================================
   CANALES
   ========================================================== */

.contacto-canales {
    padding: 54px 0 24px;
}

.contacto-tarjetas {
    display: flex;
    flex-wrap: wrap;
}

.contacto-tarjetas > [class*="col-"] {
    display: flex;
    margin-bottom: 25px;
}

.contacto-tarjeta {
    position: relative;
    display: grid;
    flex: 1;
    grid-template-columns: 70px minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    column-gap: 16px;
    row-gap: 7px;
    min-height: 190px;
    padding: 21px 18px 18px;
    overflow: hidden;
    border: 1px solid #e0ebf1;
    border-radius: 15px;
    background: #ffffff;
    box-shadow: 0 10px 27px rgba(13, 65, 98, .08);
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.contacto-tarjeta::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    background: linear-gradient(90deg, #006aad, #16c1cb);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
}

.contacto-tarjeta:hover {
    border-color: #c7e5ed;
    transform: translateY(-5px);
    box-shadow: 0 16px 35px rgba(13, 65, 98, .13);
}

.contacto-tarjeta:hover::before {
    transform: scaleX(1);
}

.contacto-icono {
    grid-column: 1;
    grid-row: 1 / span 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0;
    border-radius: 50%;
    font-size: 28px;
}

.contacto-icono img {
    display: block;
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.contacto-icono-tecnico {
    background: #e4f7fb;
    color: #008fb7;
}

.contacto-icono-comercial {
    background: #e8f2ff;
    color: #1768b1;
}

.contacto-icono-catastro {
    background: #e8f9f4;
    color: #0b9e82;
}

.contacto-icono-secretaria {
    background: #f0edff;
    color: #7254c8;
}

.contacto-tarjeta h3 {
    grid-column: 2;
    grid-row: 1;
    margin: 2px 0 0;
    color: #073f78;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
}

.contacto-tarjeta p {
    grid-column: 2;
    grid-row: 2;
    margin: 0 0 8px;
    color: #5e7381;
    font-size: 13px;
    line-height: 1.55;
}

.contacto-boton {
    grid-column: 1 / -1;
    grid-row: 3;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: none;
    min-height: 42px;
    margin-top: 7px;
    padding: 11px 20px;
    border-radius: 999px;
    background: linear-gradient(90deg, #0063ad, #008ac2);
    color: #ffffff !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .4px;
    white-space: nowrap;
    text-decoration: none !important;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 6px 14px rgba(0, 102, 174, .19);
    transition:
        transform .22s ease,
        box-shadow .22s ease,
        background .22s ease;
}

/* FORMULARIO GUIADO DE CONTACTO */
body.contacto-modal-abierto { overflow: hidden; }
.contacto-modal { position: fixed; z-index: 100000; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; visibility: hidden; opacity: 0; transition: opacity .25s ease, visibility .25s ease; }
.contacto-modal.activo { visibility: visible; opacity: 1; }
.contacto-modal-fondo { position: absolute; inset: 0; background: rgba(0,28,62,.82); }
.contacto-modal-panel { position: relative; z-index: 1; width: 100%; max-width: 720px; max-height: 92vh; overflow-y: auto; border-radius: 20px; background: #fff; box-shadow: 0 24px 70px rgba(0,28,62,.38); transform: translateY(18px) scale(.98); transition: transform .25s ease; }
.contacto-modal.activo .contacto-modal-panel { transform: none; }
.contacto-modal-cerrar { position: absolute; top: 14px; right: 16px; z-index: 2; width: 38px; height: 38px; padding: 0; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; background: rgba(255,255,255,.18); color: #fff; font-size: 28px; line-height: 34px; cursor: pointer; }
.contacto-modal-encabezado { display: flex; align-items: center; gap: 17px; padding: 25px 65px 23px 27px; background: linear-gradient(135deg,#064f98,#079fc3); color: #fff; }
.contacto-modal-icono { display: flex; flex: 0 0 58px; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 16px; background: rgba(255,255,255,.16); font-size: 27px; }
.contacto-modal-encabezado small { color: #6ff0ff; font-weight: 700; letter-spacing: 1.4px; }
.contacto-modal-encabezado h2 { margin: 3px 0 4px; color: #fff; font-size: 25px; }
.contacto-modal-encabezado p { margin: 0; color: rgba(255,255,255,.88); font-size: 13px; }
.contacto-modal-destino { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding: 17px 27px; border-bottom: 1px solid #dce8ef; background: #f2f9fc; }
.contacto-modal-destino small { display: block; margin-bottom: 3px; color: #71828c; font-size: 10px; font-weight: 700; letter-spacing: 1px; }
.contacto-modal-destino strong, .contacto-modal-destino span { color: #06467e; overflow-wrap: anywhere; }
.contacto-formulario { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 17px; padding: 23px 27px 27px; }
.contacto-campo-completo { grid-column: 1 / -1; }
.contacto-campo label { display: block; margin-bottom: 6px; color: #123f69; font-size: 13px; font-weight: 700; }
.contacto-campo input, .contacto-campo textarea { width: 100%; padding: 11px 13px; border: 1px solid #cbdbe4; border-radius: 9px; outline: 0; background: #fff; color: #263e50; font: inherit; transition: border-color .2s ease, box-shadow .2s ease; }
.contacto-campo textarea { resize: vertical; min-height: 112px; }
.contacto-campo input:focus, .contacto-campo textarea:focus { border-color: #079bc2; box-shadow: 0 0 0 3px rgba(7,155,194,.12); }
.contacto-formulario-ayuda { margin: 0; padding: 11px 13px; border-left: 4px solid #0aa4c6; border-radius: 7px; background: #eff9fc; color: #526b7a; font-size: 12px; line-height: 1.5; }
.contacto-formulario-ayuda i { margin-right: 6px; color: #078cb4; }
.contacto-formulario-acciones { display: flex; justify-content: flex-end; gap: 11px; }
.contacto-modal-boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 43px; padding: 11px 20px; border-radius: 999px; font-size: 12px; font-weight: 700; cursor: pointer; }
.contacto-modal-boton.principal { border: 0; background: linear-gradient(90deg,#075cbb,#05a3c8); color: #fff; box-shadow: 0 6px 16px rgba(5,111,184,.22); }
.contacto-modal-boton.secundario { border: 1px solid #aacbdc; background: #fff; color: #075a91; }
.contacto-formulario-estado { display: none; padding: 10px 13px; border-radius: 8px; background: #edf9f3; color: #18744b; font-size: 12px; }
.contacto-formulario-estado.visible { display: block; }
@media (max-width: 600px) {
    .contacto-modal { padding: 10px; }
    .contacto-modal-panel { border-radius: 15px; }
    .contacto-modal-encabezado { padding: 22px 52px 20px 20px; }
    .contacto-modal-icono { display: none; }
    .contacto-modal-destino, .contacto-formulario { grid-template-columns: 1fr; padding-right: 19px; padding-left: 19px; }
    .contacto-campo-completo { grid-column: auto; }
    .contacto-formulario-acciones { flex-direction: column-reverse; }
    .contacto-modal-boton { width: 100%; }
}

.contacto-boton i {
    margin-right: 0;
    margin-left: 10px;
}

.contacto-boton:hover,
.contacto-boton:focus {
    background: linear-gradient(90deg, #004f8c, #0077a9);
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 9px 19px rgba(0, 79, 140, .25);
}

/* ==========================================================
   INFORMACIÓN DE CONTACTO
   ========================================================== */

.contacto-informacion {
    padding: 14px 0 64px;
}

.contacto-informacion-row {
    display: flex;
    flex-wrap: wrap;
}

.contacto-informacion-row > [class*="col-"] {
    display: flex;
    margin-bottom: 24px;
}

.contacto-panel {
    width: 100%;
    overflow: hidden;
    border: 1px solid #dce8ef;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 11px 28px rgba(13, 65, 98, .08);
}

.contacto-panel-datos {
    padding: 28px 31px 15px;
}

.contacto-panel-titulo {
    display: flex;
    align-items: center;
    padding-bottom: 18px;
    border-bottom: 1px solid #e7eff3;
}

.contacto-panel-titulo span,
.contacto-ubicacion-contenido > span {
    display: block;
    margin-bottom: 2px;
    color: #7b909c;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.contacto-panel-titulo h2,
.contacto-ubicacion-contenido h2 {
    margin: 0;
    color: #073f78;
    font-size: 21px;
    font-weight: 700;
}

.contacto-datos-grid {
    padding-top: 15px;
}

.contacto-dato {
    display: flex;
    min-height: 92px;
    padding-top: 13px;
    padding-bottom: 13px;
}

.contacto-dato > i {
    flex-shrink: 0;
    width: 35px;
    margin-top: 2px;
    color: #0877ba;
    font-size: 22px;
    text-align: center;
}

.contacto-dato > div {
    padding-left: 9px;
}

.contacto-dato strong {
    display: block;
    margin-bottom: 5px;
    color: #17486f;
    font-size: 13px;
}

.contacto-dato p {
    margin: 0;
    color: #627784;
    font-size: 13px;
    line-height: 1.55;
}

.contacto-dato a {
    color: #0874af;
    text-decoration: none;
}

.contacto-dato a:hover,
.contacto-dato a:focus {
    color: #004d7c;
    text-decoration: underline;
}


/* MAPA GRÁFICO */

.contacto-ubicacion {
    position: relative;
    min-height: 318px;
    background:
        linear-gradient(135deg, rgba(247,251,253,.94), rgba(225,243,249,.92));
}

.contacto-mapa-grafico {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: .9;
    background:
        linear-gradient(105deg, transparent 58%, rgba(25,177,205,.18) 58% 68%, transparent 68%),
        linear-gradient(25deg, transparent 43%, rgba(255,255,255,.9) 43% 48%, transparent 48%),
        linear-gradient(150deg, transparent 31%, rgba(255,255,255,.8) 31% 36%, transparent 36%),
        #eaf3f5;
}

.contacto-calle {
    position: absolute;
    display: block;
    height: 8px;
    border-radius: 8px;
    background: rgba(255,255,255,.9);
    transform-origin: center;
}

.calle-1 {
    top: 28%;
    left: -7%;
    width: 118%;
    transform: rotate(-12deg);
}

.calle-2 {
    top: 62%;
    left: -8%;
    width: 115%;
    transform: rotate(10deg);
}

.calle-3 {
    top: 48%;
    left: 10%;
    width: 85%;
    transform: rotate(56deg);
}

.calle-4 {
    top: 46%;
    left: 12%;
    width: 76%;
    transform: rotate(-55deg);
}

.contacto-marcador {
    position: absolute;
    top: 31%;
    left: 50%;
    color: #0472b6;
    font-size: 48px;
    filter: drop-shadow(0 6px 6px rgba(0, 70, 120, .2));
    transform: translate(-50%, -50%);
}

.contacto-ubicacion-contenido {
    position: absolute;
    right: 25px;
    bottom: 24px;
    left: 25px;
    z-index: 2;
    padding: 20px;
    border: 1px solid rgba(255,255,255,.82);
    border-radius: 12px;
    background: rgba(255,255,255,.91);
    text-align: center;
    box-shadow: 0 9px 24px rgba(11, 73, 108, .12);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.contacto-ubicacion-contenido h2 {
    margin-bottom: 14px;
}

.contacto-boton-mapa i {
    margin-right: 0;
    margin-left: 8px;
}


/* AVISO */

.contacto-aviso {
    display: flex;
    align-items: flex-start;
    padding: 20px 24px;
    border: 1px solid #bcddeb;
    border-left: 5px solid #099fc0;
    border-radius: 11px;
    background: #eef8fc;
}

.contacto-aviso > i {
    flex-shrink: 0;
    margin: 2px 16px 0 0;
    color: #057baa;
    font-size: 29px;
}

.contacto-aviso strong {
    display: block;
    margin-bottom: 4px;
    color: #07487a;
    font-size: 14px;
}

.contacto-aviso p {
    margin: 0;
    color: #546e7b;
    font-size: 13px;
    line-height: 1.6;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1199px) {

    .contacto-tarjeta {
        min-height: 190px;
    }

    .contacto-hero-mascota img {
        right: 5px;
    }
}

@media (max-width: 991px) {

    .contacto-hero h1 {
        font-size: 37px;
    }

    .contacto-hero-mascota img {
        right: -12px;
        bottom: -218px;
        width: 390px;
    }

    .contacto-tarjeta {
        min-height: 190px;
    }

    .contacto-informacion-row {
        display: block;
    }

    .contacto-informacion-row > [class*="col-"] {
        display: block;
    }

    .contacto-ubicacion {
        min-height: 330px;
    }
}

@media (max-width: 767px) {

    .contacto-hero {
        width: calc(100% - 24px);
        min-height: 520px;
        margin-top: 24px;
        border-radius: 14px;
        text-align: center;
    }

    .contacto-hero-texto {
        padding: 46px 20px 230px;
    }

    .contacto-etiqueta::after {
        margin-right: auto;
        margin-left: auto;
    }

    .contacto-hero h1 {
        margin-right: auto;
        margin-left: auto;
        font-size: 31px;
    }

    .contacto-hero p {
        margin-right: auto;
        margin-left: auto;
        font-size: 15px;
    }

    .contacto-hero-mascota {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 235px;
    }

    .contacto-hero-mascota img {
        right: 50%;
        bottom: -158px;
        width: 340px;
        transform: translateX(50%);
    }

    .contacto-canales {
        padding-top: 44px;
    }

    .contacto-titulo-seccion {
        padding-right: 16px;
        padding-left: 16px;
    }

    .contacto-titulo-seccion h2 {
        font-size: 27px;
    }

    .contacto-tarjetas {
        display: block;
    }

    .contacto-tarjetas > [class*="col-"] {
        display: block;
    }

    .contacto-tarjeta {
        grid-template-columns: 64px minmax(0, 1fr);
        min-height: 0;
        padding: 21px 18px 19px;
    }

    .contacto-icono {
        width: 58px;
        height: 58px;
        font-size: 24px;
    }

    .contacto-icono img {
        width: 39px;
        height: 39px;
    }

    .contacto-tarjeta h3 {
        font-size: 17px;
    }

    .contacto-tarjeta p {
        font-size: 13px;
    }

    .contacto-tarjeta .contacto-boton {
        max-width: none;
    }

    .contacto-panel-datos {
        padding: 24px 20px 10px;
    }

    .contacto-dato {
        min-height: 0;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    .contacto-aviso {
        padding: 17px;
    }

    .contacto-aviso > i {
        margin-right: 12px;
        font-size: 25px;
    }
}

@media (max-width: 430px) {

    .contacto-hero {
        min-height: 535px;
    }

    .contacto-hero h1 {
        font-size: 28px;
    }

    .contacto-hero-mascota img {
        bottom: -140px;
        width: 310px;
    }

    .contacto-panel-titulo h2,
    .contacto-ubicacion-contenido h2 {
        font-size: 19px;
    }

    .contacto-ubicacion-contenido {
        right: 15px;
        bottom: 15px;
        left: 15px;
    }
}