.elementor-399 .elementor-element.elementor-element-04cfe6c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS for html, class: .elementor-element-bc3285f *//* ======================================
   CONTACTO · Sección única (CSS)
   Respeta .ce-wrap (1120px) y la línea visual del sitio
   ====================================== */

:root{
  --clr-ink:#0F1216;
  --clr-muted:#5A6473;
  --clr-line:#E8EDF3;
  --clr-primary:#9B1C1C;
  --clr-primary-600:#7E1515;
  --shadow-sm:0 6px 16px rgba(15,18,22,.08);
  --shadow-md:0 12px 32px rgba(15,18,22,.16);
}
.ce-wrap{max-width:1120px; margin-inline:auto; padding-inline:16px}

/* Utilidad accesible */
.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ===== Lienzo ===== */
.contact-hero{
  position:relative; isolation:isolate;
  background:
    radial-gradient(1200px 520px at 12% -10%, rgba(155,28,28,.05) 0%, transparent 60%),
    linear-gradient(#fff, #fbfbfb);
  padding-block: clamp(36px, 7vh, 72px);
}

/* ===== Títulos ===== */
.contact-hero__head{ text-align:center; margin-bottom: clamp(18px, 3vh, 28px) }
.contact-title{
  margin:0 0 8px; font-weight:800; color:var(--clr-ink);
  font-size: clamp(26px, 5vw, 40px); line-height:1.15;
}
.contact-lead{
  margin:0; color:var(--clr-muted); font-size:16.5px; line-height:1.6;
}

/* ===== Grid principal (datos + formulario) ===== */
.contact-grid{
  display:grid; gap:16px; align-items:start;
  grid-template-columns: 1fr;                     /* móvil */
  margin-top: clamp(12px, 2vh, 20px);
}
@media (min-width:980px){
  .contact-grid{ grid-template-columns: .9fr 1.1fr }
}

/* ===== Tarjeta de contacto ===== */
.contact-card{
  display:grid; gap:12px;
  background:#fff; border:1px solid var(--clr-line); border-radius:16px;
  overflow:hidden; box-shadow: var(--shadow-sm);
}
.contact-card__media img{
  display:block; width:100%; height:100%; object-fit:cover; aspect-ratio: 16/11;
}
.contact-card__body{ padding: clamp(14px, 2.4vw, 20px) }

.contact-card__name{
  margin:0 0 2px; font-weight:800; color:var(--clr-ink);
  font-size: clamp(20px, 3.6vw, 28px);
}
.contact-card__role{ margin:0 0 8px; color:var(--clr-muted); font-size:14px }

.contact-card__list{
  list-style:none; padding:0; margin:0 0 10px; display:grid; gap:4px;
}
.contact-link{
  color:var(--clr-primary); text-decoration:none; font-weight:700;
}
.contact-link:hover{ text-decoration:underline }

.contact-quote{
  margin:6px 0 12px; padding-left:12px; border-left:3px solid var(--clr-primary);
  color:var(--clr-ink); font-size:16px; line-height:1.6;
}
.contact-actions{ display:flex; gap:10px; flex-wrap:wrap }

/* ===== Formulario ===== */
.contact-form{
  background:#fff; border:1px solid var(--clr-line); border-radius:16px;
  padding: clamp(14px, 2.4vw, 20px);
  box-shadow: var(--shadow-sm);
}
.contact-form__fs{ display:grid; gap:10px; border:0; padding:0; margin:0 }

.contact-label{
  display:grid; gap:6px; color:var(--clr-ink); font-weight:700; font-size:14px;
}
.contact-inline{ display:grid; gap:10px }
@media (min-width:620px){
  .contact-inline{ grid-template-columns: 1fr 1fr }
}

.contact-input{
  width:100%; padding:12px 14px; font:inherit; color:var(--clr-ink);
  border:1px solid var(--clr-line); border-radius:12px; background:#fff;
  box-shadow: inset 0 1px 0 rgba(15,18,22,.02);
}
.contact-input:focus{
  outline:2px solid color-mix(in srgb, var(--clr-primary) 30%, #fff);
  outline-offset:2px;
  border-color: color-mix(in srgb, var(--clr-primary) 28%, var(--clr-line));
}

.contact-submit{ margin-top:6px }
.contact-note{
  margin:6px 0 0; color:var(--clr-muted); font-size:12.5px; line-height:1.5;
}

/* ===== Mapa ===== */
.contact-map{ margin: clamp(18px, 4vh, 28px) 0 }
.contact-map iframe{
  display:block; width:100%; height:min(56vh, 480px);
  border:0; border-radius:16px; box-shadow: var(--shadow-md);
}

/* ===== CTA final ===== */
.contact-cta{
  margin-top: clamp(12px, 3vh, 20px);
  border:1px solid var(--clr-line); border-radius:16px;
  padding: clamp(14px, 2.2vw, 18px);
  background:
    radial-gradient(1100px 480px at 85% -10%, rgba(155,28,28,.08) 0%, transparent 60%),
    linear-gradient(#fff, #fdfdfd);
  box-shadow: var(--shadow-sm);
  display:flex; gap:12px; align-items:center; justify-content:center; flex-wrap:wrap;
}
.contact-cta__text{
  margin:0; color:var(--clr-ink); font-weight:700; text-align:center;
}

/* ===== Botones base (si aún no existen) ===== */
.ce-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 18px; border-radius:999px; font-weight:800;
  border:1px solid var(--clr-line);
  transition: transform .16s ease, box-shadow .22s ease, background .2s ease, color .2s ease, border-color .2s;
  box-shadow: var(--shadow-sm);
}
.ce-btn--primary{ background:var(--clr-primary); color:#fff; border-color:transparent }
.ce-btn--primary:hover{ background:var(--clr-primary-600); transform:translateY(-1px); box-shadow:var(--shadow-md) }
.ce-btn--ghost{ background:transparent; color:var(--clr-ink); border-color:var(--clr-line) }
.ce-btn--ghost:hover{ background:rgba(15,18,22,.04) }

/* ===== Responsive fino ===== */
@media (max-width:520px){
  .contact-actions .ce-btn,
  .contact-cta .ce-btn{ width:100%; max-width:360px }
}

/* ===== Reduce motion ===== */
@media (prefers-reduced-motion:reduce){
  .ce-btn{ transition:none }
}/* End custom CSS */