﻿/* Contact public view: a clear invitation and a focused enquiry form. */
.app-view[data-view="contacto"]{background:radial-gradient(ellipse at 0 0,#cde3ff80,transparent 50%),#f3f6fb}
#contacto.section{max-width:1360px;margin:auto;padding:56px 40px 80px}
#contacto .contact-grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:30px;align-items:start}
#contacto .contact-col--lead{position:relative;isolation:isolate;overflow:hidden;padding:45px 38px 35px;border-radius:28px;background:#102550;color:#fff;box-shadow:0 20px 60px #14265012}
#contacto .contact-col--lead:before{content:'';position:absolute;z-index:-1;inset:0;background:radial-gradient(ellipse at 110% 10%,#2d8ff55c,transparent 58%),radial-gradient(ellipse at 0 100%,#2d8ff52e,transparent 70%);pointer-events:none}
#contacto .contact-col--lead:after{content:'';position:absolute;z-index:-1;width:430px;height:430px;border:1px solid #77baff26;border-radius:50%;right:-230px;top:100px;box-shadow:0 0 0 42px #77baff09,0 0 0 84px #77baff06;pointer-events:none}
#contacto .sec-tag{background:#ffffff0c;border:1px solid #c5dcff2e;border-radius:50px;padding:8px 13px;color:#dfecff;font-size:10px;letter-spacing:.08em;margin-bottom:28px;display:inline-flex;gap:9px}
#contacto .sec-tag svg{stroke:#8bc4ff}
#contacto .contact-col--lead .sec-title{font-size:clamp(42px,4.2vw,62px);letter-spacing:-.055em;line-height:1.05;color:#fff;margin-bottom:23px;max-width:420px}
#contacto .sec-title .blue{color:#2d8ff5;display:block}
#contacto .contact-col--lead .sec-sub{font-size:14px;color:#c5d4ea;line-height:1.8;max-width:350px;margin-bottom:37px}
#contacto .ci-list{gap:0;margin-bottom:25px}
#contacto .ci{padding:18px 0;border-top:1px solid #ffffff1c;align-items:center}
#contacto .ci-ico{background:#ffffff09;border:1px solid #ffffff20;border-radius:50%;width:38px;height:38px}
#contacto .ci-ico svg{stroke:#92c8ff;width:17px;height:17px}
#contacto .ci-lbl{font-size:9px;letter-spacing:.09em;color:#9fb6d7;margin-bottom:5px}
#contacto .ci-val{font-size:14px;color:#fff;overflow-wrap:anywhere}
#contacto .contact-cta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0}
#contacto .contact-cta a{min-height:55px;border-radius:12px;padding:12px;justify-content:center;transition:transform .2s,background .2s}
#contacto .contact-cta-wa{background:#fff;color:#102550;border:1px solid #fff;box-shadow:none}
#contacto .contact-cta-wa:hover{background:#e4efff}
#contacto .contact-cta-tel{background:#ffffff0b;color:#fff;border:1px solid #ffffff40}
#contacto .contact-cta-tel:hover{background:#ffffff18}
#contacto .contact-cta-num{font-size:13px}
#contacto .contact-cta-subl{font-size:10px;color:#bfd1ec}
#contacto .fcard{padding:38px;border-radius:28px;background:#fff;border:1px solid #dfe7f2;box-shadow:0 22px 65px #14265008}
#contacto .fcard-title{font-size:26px;color:#102550;letter-spacing:-.035em;margin-bottom:9px}
#contacto .fcard-sub{font-size:12px;line-height:1.7;color:#61718a;margin-bottom:30px}
#contacto .frow{gap:16px}
#contacto .field{margin-bottom:23px}
#contacto .field label{font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:#263953;margin-bottom:9px}
#contacto .field input,#contacto .field textarea{background:#f7f9fc;border:1px solid #dce4ee;border-radius:10px;padding:13px 14px;font-size:14px;color:#102550;box-shadow:none;transition:border-color .2s,box-shadow .2s}
#contacto .field input:focus,#contacto .field textarea:focus{outline:none;border-color:#2d8ff5;box-shadow:0 0 0 3px #2d8ff519;background:#fff}
#contacto .field input::placeholder,#contacto .field textarea::placeholder{color:#78869b;opacity:1}
#contacto .field textarea{min-height:110px;line-height:1.6}
#contacto .field-hint{font-size:11px;color:#61718a;margin-bottom:12px}
#contacto .contact-stock-chips{display:flex;flex-wrap:wrap;gap:8px}
#contacto .contact-stock-chips .stock-chip{flex:1 1 100px;border-radius:10px;min-height:46px;padding:10px 12px;border:1px solid #dce4ee;background:#fff;color:#455875;font-size:12px;line-height:1.35;white-space:normal;transition:background .18s,border-color .18s}
#contacto .contact-stock-chips .stock-chip:hover{background:#f0f6ff;border-color:#8dbbef}
#contacto .contact-stock-chips .stock-chip[aria-pressed="true"]{color:#124f96;background:#eaf3ff;border-color:#2d8ff5;box-shadow:inset 0 0 0 1px #2d8ff5;font-weight:700}
#contacto .sbtn{min-height:52px;background:#1568bd;color:#fff;border-radius:11px;box-shadow:0 6px 18px #1568bd20;font-size:14px;gap:12px}
#contacto .sbtn:hover{background:#102550}
#contacto .fnote{font-size:11px;line-height:1.6;color:#61718a;margin:16px 0 0;text-align:center}
#contacto a:focus-visible,#contacto button:focus-visible{outline:3px solid #2d8ff5;outline-offset:4px}
@media(prefers-reduced-motion:no-preference){.app-view[data-view="contacto"]:not([hidden]) .contact-col{animation:contact-arrive .65s cubic-bezier(.16,1,.3,1) both}.app-view[data-view="contacto"]:not([hidden]) .contact-col--form{animation-delay:.1s}}
@keyframes contact-arrive{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media(max-width:1000px){#contacto.section{padding:35px 25px 60px}#contacto .contact-grid{gap:22px}#contacto .contact-col--lead,#contacto .fcard{padding:28px}#contacto .contact-cta{grid-template-columns:1fr}}
@media(max-width:800px){#contacto .contact-grid{grid-template-columns:1fr}#contacto .contact-col--lead{order:0}#contacto .contact-col--form{order:1}#contacto .contact-cta{grid-template-columns:1fr 1fr}#contacto .contact-col--lead .sec-title{font-size:48px}#contacto .ci-list{display:grid;grid-template-columns:1fr 1fr;column-gap:20px}#contacto .ci:first-child{grid-column:1/-1}#contacto .ci-val{font-size:12px}#contacto .ci{gap:9px}}
@media(max-width:480px){#contacto.section{padding:22px 16px 45px}#contacto .contact-col--lead,#contacto .fcard{padding:26px 22px;border-radius:22px}#contacto .sec-tag{margin-bottom:22px;font-size:9px}#contacto .contact-col--lead .sec-title{font-size:43px}#contacto .contact-col--lead .sec-sub{font-size:12px;margin-bottom:24px}#contacto .ci-lbl{font-size:8px}#contacto .ci-list{column-gap:10px}#contacto .ci-ico{width:30px;height:30px}#contacto .ci-val{font-size:11px}#contacto .contact-cta a{font-size:12px}#contacto .contact-cta-num{font-size:12px}#contacto .fcard-title{font-size:24px}#contacto .field input,#contacto .field textarea{font-size:16px}#contacto .frow{grid-template-columns:1fr}#contacto .contact-stock-chips .stock-chip{font-size:11px;flex-basis:80px}#contacto .field{margin-bottom:20px}}
@media(prefers-reduced-motion:reduce){#contacto *,#contacto *:before,#contacto *:after{animation:none!important;transition:none!important}}
