/* Sobre nosotros, Contacto y Soporte en la piel B (08-10): el equipo con fotos, el «a quién llamar», los formularios y
   la filosofía. Va después de piel-b.css. Siempre claro.
   El fondo «conectores en movimiento» (conectores.js) ya no va aquí: es el .b-con con data-conectores de piel-b.css.
   .cx-banda se queda solo como marca de la banda del equipo o del contacto (la usa comprobar-equipo.mjs). */

/* ── Cabeceras ── (27-10, David: menos hueco arriba; antes clamp(80px,9vw,128px)) */
.eb-cab{--b-pt:clamp(48px,6vw,80px)}
.eb-cab h1{margin:0}
/* 28-10: una cabecera sin antetítulo (Soporte) lleva la firma junto al titular; en el móvil el titular no deja sitio a los
   lados y la firma va encima, así que necesita algo más de aire arriba para no quedar pegada al menú */
@media (max-width:699px){.eb-cab:not(:has(.b-ojo)){--b-pt:76px}}

/* ── Filosofía: el kanji grande, Monodzukuri como entrada y el resto a dos columnas ── */
.eb-kanji{margin:0 0 18px;font:600 clamp(56px,7vw,96px)/1 "Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;letter-spacing:.04em;color:var(--azul)}
.eb-filosofia .b-sub{margin-top:22px;max-width:30em}

/* ── Qué hacemos: las tres tarjetas, con su enlace abajo ── */
.eb-pilares .b-tarjeta p{font-size:16px}
/* Asistente de incidencias (20-10): a lo ancho, debajo de las tres; el título a la izquierda y el texto a la derecha */
.eb-pilares .eb-incidencias{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:10px 40px;align-items:baseline}
.eb-incidencias p{margin:0}
.eb-incidencias a{color:var(--azul);text-decoration:none}.eb-incidencias a:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:760px){.eb-pilares .eb-incidencias{grid-template-columns:1fr}}

/* ── Tarjetas del equipo: foto 4:5 arriba y datos debajo, en tarjeta B ── */
.cx-banda .b-ancho{margin-top:clamp(36px,5vw,56px)}
.cx-ayuda{margin:0 0 24px;font-size:15px;color:var(--gris)}
.cx-ayuda .tacto{display:none}
@media (hover:none){.cx-ayuda .raton{display:none}.cx-ayuda .tacto{display:inline}}
.cx-oficina{margin-top:32px;font-size:15px;color:var(--gris)}.cx-oficina a{color:var(--azul);text-decoration:none}.cx-oficina a:hover{text-decoration:underline}

.lv-equipo.cx-equipo{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;grid-template-columns:none}
.cx-equipo>.cx-persona{flex:0 1 calc((100% - 60px)/4);min-width:0}
html[data-piel=b] .lv-persona.cx-persona{display:flex;flex-direction:column;padding:0;overflow:hidden;border:0;border-radius:24px;background:var(--b-gris);text-align:left;scroll-margin-top:72px}
.cx-persona:target{box-shadow:0 0 0 3px var(--amarillo)}
.cx-datos{padding:18px 22px 22px}
html[data-piel=b] .cx-persona h3{margin:0;font-size:21px;line-height:1.2;font-weight:600;letter-spacing:-.02em}
html[data-piel=b] .cx-persona .lv-cargo{min-height:0;margin-top:3px;font-size:14.5px;font-weight:400;color:var(--gris)}
html[data-piel=b] .cx-persona dl{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--b-filete);text-align:left}
html[data-piel=b] .cx-persona dt{font-size:12px;color:var(--gris)}   /* 21-10: el gris clarito daba 3:1 (AA pide 4,5:1) */
html[data-piel=b] .cx-persona dd{font-size:14px;font-weight:400}
html[data-piel=b] .cx-persona dd a{color:var(--azul);text-decoration:none}

/* Hueco de la foto: silueta clara con iniciales hasta que haya foto */
.cx-foto{position:relative;aspect-ratio:4/5;overflow:hidden;background:linear-gradient(165deg,#EEF2F7 0%,#DFE7F0 100%)}
.cx-silueta{position:absolute;inset:0;width:100%;height:100%}
.cx-silueta path,.cx-silueta circle{fill:#CFDAE7}
.cx-silueta text{fill:var(--azul);font:600 34px var(--b-letra,Inter),system-ui,sans-serif;letter-spacing:.02em}
.cx-foto[data-fotos="1"] .cx-silueta,.cx-foto[data-fotos="2"] .cx-silueta{visibility:hidden}
.cx-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cx-img.accion{opacity:0;transition:opacity .45s ease}
.cx-chip{position:absolute;left:12px;bottom:12px;display:none;align-items:center;gap:7px;padding:5px 11px 5px 9px;border-radius:999px;background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--tinta);font-size:12px;font-weight:500;opacity:0;transform:translateY(4px);transition:opacity .35s ease,transform .35s ease}
.cx-chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--amarillo)}
.cx-foto[data-fotos="2"]{cursor:pointer}
.cx-foto[data-fotos="2"] .cx-chip{display:inline-flex}
.cx-foto[data-fotos="2"]:focus-visible{outline:3px solid var(--azul);outline-offset:-3px}
.cx-foto.ver-accion .accion,.cx-foto.ver-accion .cx-chip{opacity:1;transform:none}
@media (hover:hover){.cx-persona:hover .accion,.cx-persona:hover .cx-chip{opacity:1;transform:none}}
.cx-foto:focus-visible .accion,.cx-foto:focus-visible .cx-chip{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.cx-img.accion,.cx-chip{transition:none}}

/* ── Contacto y Soporte: tarjetas B para «a quién llamar», el formulario y la información ── */
html[data-piel=b] .lv-contacto{gap:20px;margin-top:clamp(36px,5vw,56px);text-align:left}
html[data-piel=b] .eb-soporte .lv-contacto{margin-top:0}
.cx-contacto{align-items:start}
.cx-derecha{display:grid;gap:20px}
html[data-piel=b] :is(.cx-quien,.lv-form,.lv-info){border:0;border-radius:28px;background:var(--b-gris);box-shadow:none;padding:clamp(26px,3vw,40px)}
html[data-piel=b] :is(.cx-quien,.lv-form,.lv-info) h2{margin:0;font-size:clamp(24px,2.2vw,30px);line-height:1.12;font-weight:600;letter-spacing:-.025em}
.cx-quien-sub{margin:6px 0 0;color:var(--gris);font-size:17px}
.cx-area{margin-top:24px;padding:22px 0 0;border-top:1px solid var(--b-filete);scroll-margin-top:72px}
.cx-area header h3{margin:0;font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--tinta)}
.cx-area header p{margin:4px 0 0;font-size:15px;line-height:1.5;color:var(--gris)}
.cx-area ul{display:grid;gap:12px;margin:14px 0 0;padding:0;list-style:none}
.cx-area li{display:grid;grid-template-columns:52px 1fr;gap:14px;align-items:center}
.cx-area .cx-foto{border-radius:12px}
.cx-area .cx-silueta text{font-size:44px}
.cx-nombre{display:block;font-weight:600;color:var(--tinta);font-size:16px;text-decoration:none}.cx-nombre:hover{color:var(--azul)}
.cx-cargo{display:block;font-size:13px;color:var(--gris);margin-top:1px}   /* 21-10: el gris clarito daba 3:1 (AA pide 4,5:1) */
.cx-vias{display:flex;flex-wrap:wrap;gap:2px 14px;margin-top:3px;font-size:14px}.cx-vias a{color:var(--azul);text-decoration:none}
.cx-vias a:hover,.cx-oficina a:hover{text-decoration:underline}

html[data-piel=b] .lv-form{gap:12px}
html[data-piel=b] .lv-form p{margin:0;font-size:16px;color:var(--gris)}
html[data-piel=b] .lv-form :is(input:not([type=checkbox]),textarea){width:100%;box-sizing:border-box;padding:13px 16px;border:1px solid var(--b-filete);border-radius:12px;background:#fff;font:inherit;font-size:16px;color:var(--tinta)}
html[data-piel=b] .lv-form :is(input,textarea):focus{outline:2px solid var(--azul);outline-offset:1px;border-color:transparent}
html[data-piel=b] .lv-form .boton{justify-self:start;min-height:46px;padding:0 26px;background:var(--azul);color:#fff;font:500 17px/1.2 var(--b-letra)}
html[data-piel=b] .lv-form .boton:hover{background:var(--azul-hover)}
html[data-piel=b] .lv-info ul{margin:20px 0 0;padding:0;list-style:none}
html[data-piel=b] .lv-info li{font-size:16px}
html[data-piel=b] .lv-info li a{font-weight:400;font-size:15px;color:var(--azul);text-decoration:none}
html[data-piel=b] .lv-info li a.plano{font-size:16px}
html[data-piel=b] .lv-ico{border-radius:999px;background:#fff;font-weight:600}
html[data-piel=b] .lv-info .lv-mapa{border:0;border-radius:20px;background:#E6EDF5}

/* ── Soporte: las cifras y el texto de siempre debajo ── */
.eb-nota{max-width:760px;margin:clamp(36px,5vw,56px) auto 0;font-size:17px;line-height:1.6;color:var(--gris);text-align:left}
.eb-nota b{color:var(--tinta);font-weight:600}

@media (max-width:980px){
  .cx-equipo>.cx-persona{flex-basis:calc((100% - 40px)/3)}
}
@media (max-width:760px){
  .lv-equipo.cx-equipo{gap:12px}
  .cx-equipo>.cx-persona{flex-basis:calc((100% - 12px)/2)}
  html[data-piel=b] .lv-contacto{gap:12px}
  .cx-derecha{gap:12px}
  html[data-piel=b] :is(.cx-quien,.lv-form,.lv-info){border-radius:24px;padding:26px 22px}
}
/* En el móvil, la tarjeta se tumba: foto a la izquierda y datos a la derecha */
@media (max-width:540px){
  .cx-equipo>.cx-persona{flex-basis:100%}
  html[data-piel=b] .lv-persona.cx-persona{flex-direction:row;border-radius:20px}
  .cx-persona .cx-foto{flex:0 0 38%;aspect-ratio:auto;min-height:100%}
  .cx-persona .cx-foto::before{content:"";display:block;padding-top:125%}
  .cx-datos{padding:14px 14px 14px 16px;min-width:0}
  html[data-piel=b] .cx-persona h3{font-size:17px}
  html[data-piel=b] .cx-persona .lv-cargo{font-size:13.5px}
  html[data-piel=b] .cx-persona dl{margin-top:10px;padding-top:10px}
  .cx-chip{left:8px;bottom:8px;font-size:11px}
}
/* La casilla de privacidad: texto y enlace en el mismo renglón también en el móvil */
html[data-piel=b] .lv-form .lv-check{display:block;font-size:14px;line-height:1.5}
html[data-piel=b] .lv-form .lv-check input{vertical-align:-4px;margin:0 8px 0 0}