/* ==========================================================================
   REDISEÑO CONTACTO 28/10 · Estilos solo de /contacto/ (se cargan desde la vista).
   Misma línea que el resto de la web: grafito + dorado, esquinas casi rectas
   (.25rem), líneas finas, IBM Plex Sans en títulos y Source Serif 4 en texto.
   Anula los radios/sombras redondeados antiguos de .page-contacto en style.css.
   Sin JS: los campos extra por servicio se filtran con :has() (si no hay soporte,
   se ven todos y el formulario sigue funcionando igual).
   ========================================================================== */
.page-contacto{--radius-lg:.25rem;--radius-md:.25rem;--shadow-soft:none}
.page-contacto .btn{border-radius:.25rem}

/* Cabecera */
.cf-hero{padding:3.4rem 0 3rem}
.cf-hero .crumbs{margin:0 0 1.6rem}
.cf-eyebrow{font-family:var(--font-head);font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 .55rem}
.cf-hero h1{margin:0}
.cf-hero-alt{margin:1.4rem 0 0;font-family:var(--font-head);font-size:.9rem;color:#C9CDD3;display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;align-items:center}
.cf-hero-alt a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(184,147,90,.6);padding-bottom:1px}
.cf-hero-alt a:hover{color:var(--gold);border-color:var(--gold)}
.cf-hero-alt .icon{color:var(--gold)}

/* Hoja del formulario */
.cf-main{padding-top:3rem}
.cf-sheet{background:var(--sheet);border:1px solid var(--line);border-top:3px solid var(--gold);padding:2rem 2.2rem 1.8rem}
.cf-form{margin:0}
.cf-block{border:0;margin:0 0 1.9rem;padding:0 0 1.7rem;border-bottom:1px solid var(--line-soft);min-width:0}
.cf-block legend{float:none;width:100%;font-family:var(--font-head);font-size:1.12rem;font-weight:700;color:var(--ink);margin:0 0 1rem;padding:0;display:flex;align-items:baseline;gap:.7rem}
.cf-num{font-family:var(--font-head);font-weight:700;font-size:.82rem;color:var(--gold-deep);letter-spacing:.06em;border:1px solid var(--gold);padding:.05rem .4rem;line-height:1.4}
.cf-req{color:var(--gold-deep);font-weight:700}
.cf-opt{font-weight:400;color:#6B6F74;font-size:.82rem}
.cf-help{font-family:var(--font-body);font-size:.93rem;color:#55595E;margin:-.3rem 0 .9rem}
.cf-form .form-label{font-family:var(--font-head);font-size:.86rem;font-weight:600;color:var(--ink);margin-bottom:.35rem}
.cf-form .form-control,.cf-form .form-select{border-radius:.25rem;border-color:var(--line);font-family:var(--font-body);padding:.62rem .8rem;background-color:#FCFCFB}
.cf-form .form-control:focus,.cf-form .form-select:focus{border-color:var(--gold);background-color:#fff;box-shadow:0 0 0 .2rem rgba(184,147,90,.2)}
.cf-form .form-control.is-invalid,.cf-form .form-select.is-invalid{border-color:#A3342B;background-image:none;padding-right:.8rem}
.cf-note{font-family:var(--font-body);font-size:.84rem;color:#5E6267;margin:.5rem 0 0;display:flex;gap:.45rem;align-items:flex-start}
.cf-note .icon{color:var(--gold-deep);margin-top:.15rem;flex:none}
.cf-error{font-family:var(--font-head);font-size:.84rem;color:#A3342B;margin-top:.35rem;display:flex;gap:.35rem;align-items:center}
.cf-alert{display:flex;gap:.8rem;align-items:flex-start;border:1px solid #E2B9B4;border-left:3px solid #A3342B;background:#FBF1EF;padding:.9rem 1.1rem;margin-bottom:1.6rem;font-family:var(--font-body);font-size:.94rem}
.cf-alert .icon{color:#A3342B;font-size:1.2rem;margin-top:.1rem;flex:none}

/* Selector de servicio en tarjetas (radios accesibles) */
.cf-svc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
.cf-svc li{position:relative;margin:0}
.cf-svc-check{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.cf-svc-card{display:flex;align-items:center;gap:.7rem;height:100%;min-height:3.6rem;margin:0;padding:.75rem .9rem;border:1px solid var(--line);border-radius:.25rem;background:#FCFCFB;cursor:pointer;font-family:var(--font-head);font-size:.9rem;font-weight:600;line-height:1.25;color:var(--ink);transition:border-color .15s,background-color .15s}
.cf-svc-card .icon{font-size:1.2rem;color:#6B6F74;flex:none}
.cf-svc-card:hover{border-color:var(--gold)}
.cf-svc-check:checked+.cf-svc-card{border-color:var(--gold-deep);background:var(--gold-wash);box-shadow:inset 3px 0 0 var(--gold)}
.cf-svc-check:checked+.cf-svc-card .icon{color:var(--gold-deep)}
.cf-svc-check:focus-visible+.cf-svc-card{outline:2px solid var(--gold-deep);outline-offset:2px}

/* Campos extra según servicio: visibles por defecto; con :has() solo los del servicio elegido */
@supports selector(:has(*)){
  .cf-form .cf-extra{display:none}
  .cf-form:has(#svc-planes-autoproteccion:checked,option[value="planes-autoproteccion"]:checked) .cf-para-planes-autoproteccion,
  .cf-form:has(#svc-seguridad-eventos:checked,option[value="seguridad-eventos"]:checked) .cf-para-seguridad-eventos,
  .cf-form:has(#svc-analisis-riesgos:checked,option[value="analisis-riesgos"]:checked) .cf-para-analisis-riesgos,
  .cf-form:has(#svc-seguridad-empresas:checked,option[value="seguridad-empresas"]:checked) .cf-para-seguridad-empresas,
  .cf-form:has(#svc-control-accesos:checked,option[value="control-accesos"]:checked) .cf-para-control-accesos,
  .cf-form:has(#svc-otro:checked,option[value="otro"]:checked) .cf-para-otro{display:block}
}

/* Consentimiento y envío */
.cf-consent{background:var(--paper);border:1px solid var(--line-soft);padding:1rem 1.1rem;margin-bottom:1.3rem}
.cf-consent.has-error{border-color:#E2B9B4;background:#FBF1EF}
.cf-consent .form-check{margin:0;padding-left:1.9rem}
.cf-consent .form-check-input{margin-left:-1.9rem;width:1.15rem;height:1.15rem;margin-top:.2rem;border-color:#8E9196;border-radius:.2rem}
.cf-consent .form-check-input:checked{background-color:var(--gold-deep);border-color:var(--gold-deep)}
.cf-consent .form-check-input:focus{box-shadow:0 0 0 .2rem rgba(184,147,90,.25);border-color:var(--gold)}
.cf-consent .form-check-label{font-family:var(--font-body);font-size:.92rem;line-height:1.5}
.cf-consent a,.cf-legal a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:2px}
.cf-submit{display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;align-items:center}
.cf-submit .btn{padding:.8rem 1.8rem;font-weight:600}
.cf-submit-note{font-family:var(--font-head);font-size:.85rem;color:#55595E;display:flex;gap:.4rem;align-items:center}
.cf-submit-note .icon{color:var(--gold-deep)}
.cf-legal{font-family:var(--font-body);font-size:.8rem;color:#6B6F74;margin:1.2rem 0 0;padding-top:1rem;border-top:1px solid var(--line-soft)}

/* Columna lateral (A) */
.cf-side{position:sticky;top:6rem;display:flex;flex-direction:column;gap:1rem}
.cf-card{background:var(--sheet);border:1px solid var(--line);padding:1.4rem 1.5rem}
.cf-card-tit{font-family:var(--font-head);font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin:0 0 1rem;padding-bottom:.7rem;border-bottom:1px solid var(--line-soft);position:relative}
.cf-card-tit::after{content:"";position:absolute;left:0;bottom:-1px;width:2.2rem;height:2px;background:var(--gold)}
.cf-side-zone{font-family:var(--font-body);font-size:.86rem;color:#55595E;margin:0;display:flex;gap:.45rem}
.cf-side-zone .icon{color:var(--gold-deep);margin-top:.2rem;flex:none}

/* Datos de contacto directos */
.cf-direct{list-style:none;margin:0;padding:0}
.cf-direct li{display:flex;gap:.8rem;align-items:flex-start;padding:.6rem 0}
.cf-direct li+li{border-top:1px solid var(--line-soft)}
.cf-direct-ico{flex:none;width:2.1rem;height:2.1rem;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);color:var(--gold-deep);font-size:1rem}
.cf-direct-txt{display:flex;flex-direction:column;min-width:0}
.cf-direct-lbl{font-family:var(--font-head);font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#6B6F74}
.cf-direct-txt a,.cf-direct-val{font-family:var(--font-head);font-weight:600;font-size:.95rem;color:var(--ink);text-decoration:none;overflow-wrap:anywhere}
/* MEJORAS VISUALES 28/10: el correo no se parte dentro del dominio; solo puede saltar tras la «@» (<wbr>) y el tamaño se ajusta en móvil */
.cf-direct-txt a[href^="mailto:"]{overflow-wrap:normal;word-break:normal;font-size:clamp(.8rem,3.55vw,.95rem)}
.cf-direct-txt a:hover{color:var(--gold-deep)}
.cf-direct-oscuro li+li{border-color:rgba(255,255,255,.12)}
.cf-direct-oscuro .cf-direct-ico{border-color:rgba(184,147,90,.55);color:var(--gold)}
.cf-direct-oscuro .cf-direct-lbl{color:#9FA5AD}
.cf-direct-oscuro .cf-direct-txt a,.cf-direct-oscuro .cf-direct-val{color:#fff}
.cf-direct-oscuro .cf-direct-txt a:hover{color:var(--gold)}
.cf-direct-franja{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border:1px solid var(--line);background:var(--sheet);margin-bottom:1.2rem}
.cf-direct-franja li{padding:.8rem 1rem;border-top:0}
.cf-direct-franja li+li{border-top:0}
.cf-direct-franja li:nth-child(n+3){border-top:1px solid var(--line-soft)}
.cf-direct-franja li:nth-child(even){border-left:1px solid var(--line-soft)}

/* Por qué confiar */
.cf-why{list-style:none;margin:0;padding:0}
.cf-why li{display:flex;gap:.75rem;margin:0 0 .95rem;font-family:var(--font-body);font-size:.92rem;color:#3A3D41}
.cf-why li:last-child{margin-bottom:0}
.cf-why li strong{display:block;font-family:var(--font-head);font-size:.9rem;color:var(--ink)}
.cf-why .icon{color:var(--gold-deep);font-size:1.15rem;margin-top:.15rem;flex:none}
.cf-why-inline{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;margin-top:1.6rem}
.cf-why-inline li{margin:0}

/* Acceso al asistente (solo si su página está activa) */
.cf-asistente{display:flex;gap:.9rem;align-items:flex-start;background:var(--gold-wash);border:1px solid #E7D6B8;padding:1rem 1.2rem;margin-bottom:1.6rem}
.cf-asistente-ico{color:var(--gold-deep);font-size:1.4rem;flex:none}
.cf-asistente p{margin:0}
.cf-asistente-tit{font-family:var(--font-head);font-weight:700;font-size:.98rem;color:var(--ink)}
.cf-asistente-txt{font-family:var(--font-body);font-size:.9rem;color:#4A4E53}
.cf-asistente-link{display:inline-flex;gap:.35rem;align-items:center;margin-top:.35rem;font-family:var(--font-head);font-weight:600;font-size:.88rem;color:var(--gold-deep);text-decoration:none;border-bottom:1px solid currentColor}

/* Variante B */
.cf-v-b .cf-hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:3rem;align-items:center}
.cf-hero-points{list-style:none;margin:1.5rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;font-family:var(--font-head);font-size:.88rem;color:#D7DCE6}
.cf-hero-points .icon{color:var(--gold);margin-right:.25rem}
.cf-hero-card{border:1px solid rgba(255,255,255,.16);border-top:3px solid var(--gold);background:rgba(255,255,255,.035);padding:1.3rem 1.5rem}
.cf-hero-card-tit{font-family:var(--font-head);font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 .5rem}
.cf-wide{max-width:60rem;margin:0 auto}
.cf-wide-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:1.2rem}
.cf-wide-head h2{font-family:var(--font-head);font-size:1.45rem;margin:0}
.cf-wide-head p{font-family:var(--font-body);color:#55595E;margin:0}
@media(min-width:992px){
  .cf-v-b .cf-block{display:grid;grid-template-columns:13rem minmax(0,1fr);column-gap:2rem}
  .cf-v-b .cf-block legend{grid-column:1;flex-direction:column;gap:.5rem;margin:0}
  .cf-v-b .cf-block>*:not(legend){grid-column:2}
  .cf-v-b .cf-svc{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Variante C */
.cf-narrow{max-width:46rem;margin:0 auto}
.cf-v-c.cf-hero{padding:2.6rem 0 2.4rem}
.cf-v-c .cf-sheet{padding:1.8rem 2rem 1.6rem}

/* Responsive */
@media(max-width:991.98px){
  .cf-side{position:static}
  .cf-svc{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cf-v-b .cf-hero-grid{grid-template-columns:1fr;gap:1.8rem}
}
@media(max-width:575.98px){
  .cf-hero{padding:2.2rem 0 2rem}
  .cf-hero .crumbs{margin-bottom:1.1rem}
  .cf-hero-alt{flex-direction:column;align-items:flex-start;gap:.5rem}
  .cf-main{padding-top:1.6rem}
  .cf-main>.container{padding-left:.75rem;padding-right:.75rem}
  .cf-sheet,.cf-v-c .cf-sheet{padding:1.3rem 1.1rem 1.2rem;border-left:0;border-right:0;margin-left:-.75rem;margin-right:-.75rem}
  .cf-svc{grid-template-columns:1fr;gap:.45rem}
  .cf-svc-card{min-height:3rem;padding:.65rem .8rem}
  .cf-block{margin-bottom:1.5rem;padding-bottom:1.3rem}
  .cf-submit .btn{width:100%}
  .cf-submit{justify-content:center}
  .cf-direct-franja{grid-template-columns:1fr}
  .cf-direct-franja li:nth-child(even){border-left:0}
  .cf-direct-franja li+li{border-top:1px solid var(--line-soft)}
  .cf-why-inline{grid-template-columns:1fr;gap:.9rem}
  .cf-form .form-control,.cf-form .form-select{font-size:16px}
}
/* En /contacto/ el botón dorado de la barra móvil enlazaría a esta misma página: se deja solo «Llamar». */
.page-contacto .mobile-cta a[href^="/contacto/"]{display:none}
.page-contacto .mobile-cta a{flex:1}
/* Migas dentro de la cabecera oscura (anula .page-contacto .crumbs de style.css, pensado para fondo claro) */
.page-contacto .cf-hero .crumbs{color:#B9C4D8}
.page-contacto .cf-hero .crumbs a{color:#B9C4D8}
.page-contacto .cf-hero .crumbs .breadcrumb-item.active{color:#E4E7EB}
.cf-hero .lead-hero{color:#D7DCE6}
@media(min-width:992px){
  .cf-v-b .cf-block legend{display:block;line-height:1.35}
  .cf-v-b .cf-block legend .cf-num{display:table;margin-bottom:.55rem}
}