/* =========================================================
   VERSIÓN SIN AGENDA: contacto por WhatsApp, correo y el formulario «Te llamamos».
   Complementa comun/css/ufo.css (mismos tokens y componentes); solo agrega lo que esta versión necesita.
   ========================================================= */

/* Contacto: una tarjeta por canal */
.canales{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.canal{background:var(--blanco);border-radius:var(--r-lg);padding:28px 26px;border:1px solid var(--linea);box-shadow:var(--sombra-alta);display:flex;flex-direction:column;gap:12px;min-width:0}
.canal h3{font-size:1.35rem}
.canal p{color:var(--texto-suave)}
.canal .icon-wrap svg{width:28px;height:28px}
.canal-dato{color:var(--negro)!important;font-weight:750;font-size:1.12rem;overflow-wrap:anywhere}
.canal .btn{margin-top:auto;align-self:flex-start}
.canal-guia{margin-top:26px}
.canal-guia h3{font-family:var(--sans);font-size:1rem;font-weight:750;margin-bottom:6px}
.canal-guia .ticks li{border-bottom-color:rgba(0,0,0,.12)}

/* Alternativa al botón de correo (que en el computador abre Gmail): la aplicación de correo del equipo */
.canal-alt{margin:14px 0 0;font-size:.88rem;color:var(--texto-suave)}
.canal-alt a{color:var(--negro);font-weight:650;text-decoration:underline;text-decoration-color:var(--azul);text-decoration-thickness:2px;text-underline-offset:3px}

/* Atención domiciliaria (Servicios): WhatsApp y correo apilados en la columna del botón */
.acciones-col{display:flex;flex-direction:column;gap:10px}

/* Tarjeta lateral de artículos y páginas legales: dos botones (WhatsApp y correo) */
.aside-card .btn+.btn{margin-top:10px}

/* Servicios: en qué sede se presta cada servicio */
.svc-sede{display:flex;align-items:center;gap:8px;margin:-4px 0 14px;font-size:.95rem;color:var(--texto-suave)}
.svc-sede svg{width:18px;height:18px;flex:none;color:var(--negro)}
.svc-sede b{color:var(--negro)}

/* Sedes (Contacto y Nosotros): horario y servicios de cada una */
.sede .sede-horario{color:var(--negro);font-weight:650}
.sede .sede-servicios{font-size:.92rem}

/* Contacto: «Te llamamos» (la persona deja su número y admisión la llama) */
.llamada-grid{display:grid;gap:32px;align-items:start}
@media (min-width:960px){.llamada-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px}}
.llamada-titulo{font-size:clamp(1.5rem,1.1rem + 1.4vw,2.2rem);margin:12px 0 18px}
.llamada-pasos{margin:0 0 22px 1.2em;display:grid;gap:12px;color:var(--texto-suave)}
.llamada-pasos b{color:var(--negro)}
.llamada-urgencia{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:var(--r);background:var(--blanco);border:1.5px solid var(--negro);font-size:.95rem}
.llamada-urgencia svg{width:26px;height:26px;flex:none}
.llamada-urgencia a{color:var(--negro);font-weight:700;text-decoration:underline;text-decoration-color:var(--azul);text-decoration-thickness:2px;text-underline-offset:3px}
#llamadaForm fieldset{border:0;margin:0 0 18px;padding:0}
#llamadaForm .hint{margin-top:6px;font-size:.88rem;color:var(--texto-suave)}
#llamadaForm .opcional{font-weight:500;color:var(--texto-suave)}
.ll-enviar{width:100%;justify-content:center}
.ll-planb{margin-top:12px}
.ll-listo{text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;padding:8px 0}
.ll-listo .masc{width:140px;height:auto}
.ll-listo h3{font-size:1.5rem;outline:none}
.canales-titulo{font-size:clamp(1.3rem,1rem + 1vw,1.7rem);margin-bottom:18px}

/* ---------- Inicio: el logo es el protagonista del hero ----------
   Donde iba la frase grande va el logo (ya trae el lema «Restaura tu ser»), con el nombre de la IPS encima; la mascota sigue en su órbita a la derecha.
   Teléfono: primero el nombre y el logo (grande, sin recortes), luego la mascota y después el lema, el texto y los botones. */
.hero-titulo{grid-area:titulo;min-width:0}
.hero .marca-h1{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:16px;max-width:none;font-size:inherit}
.marca-nombre{font-size:clamp(1.3rem,1rem + 1.4vw,2.05rem);line-height:1.15;letter-spacing:-.01em}
.marca-logo{width:min(100%,470px);height:auto;max-width:100%}
@media (max-width:959px){
  .marca-logo{width:min(94%,420px)}
}
@media (min-width:960px){
}
/* Ficha bajo el hero: las dos sedes en bloques equivalentes */
/* Cifras en columna: horarios, teléfonos y fechas (tabular-nums) */
.post-meta,.article-meta,.amb-linea,.canal p,.foot-contact li{font-variant-numeric:tabular-nums}

/* ---------- Nosotros: misión y visión sobre la página (sin tarjetas) ---------- */
.mv{padding-top:64px;padding-bottom:64px}
.mv-grid{display:grid;gap:40px}
@media (min-width:900px){.mv-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:64px}}
.mv-titulo{display:flex;align-items:center;gap:12px;font-family:var(--display);font-size:clamp(1.35rem,1.1rem + .9vw,1.75rem);font-weight:700;letter-spacing:-.02em;color:var(--negro);
  padding-bottom:12px;margin-bottom:16px;border-bottom:3px solid var(--turquesa)}
.mv-titulo svg{width:28px;height:28px;flex-shrink:0}
.mv-texto{font-size:clamp(1.08rem,1rem + .35vw,1.25rem);line-height:1.7;color:var(--texto-suave);max-width:60ch}
.mv-texto b{color:var(--negro)}

/* Historia */
/* Distintivo «+20 años» (comun/img/sello-20-anios.svg, pegado en el título con {{svg:…}}): metal gris con relieve leve.
   El título conserva «Más de 20 años» como texto para lectores de pantalla y buscadores. translate: el «+» queda alineado con la etiqueta. */
/* Brillo del metal: una franja de luz cruza el distintivo una sola vez, ligada al desplazamiento (se detiene si la página se detiene y
   retrocede si se sube), mientras el título pasa por la mitad de la pantalla. Chrome, Edge y Safari lo hacen con CSS (animation-timeline);
   en los demás lo mueve fuentes/js/sello.js con el mismo tramo. Con «reducir movimiento» el brillo queda quieto sobre el 2.
   Las medidas de translateX son unidades del dibujo (viewBox de 491 de ancho). */
.sello20 .s20-franja{transform:translateX(170px)}
.sello20 .s20-destello{opacity:0;fill:#B8862A;transform-box:fill-box;transform-origin:50% 50%}
@media (prefers-reduced-motion:no-preference){
  .sello20 .s20-franja{transform:translateX(-170px)}
  @supports (animation-timeline:view()){
    .sello20 .s20-franja{animation:s20-brillo linear both;animation-timeline:--s20;animation-range:cover 25% cover 65%}
    .sello20 .s20-d1{animation:s20-destello linear both;animation-timeline:--s20;animation-range:cover 30% cover 40%}
    .sello20 .s20-d2{animation:s20-destello linear both;animation-timeline:--s20;animation-range:cover 38% cover 48%}
    .sello20 .s20-d3{animation:s20-destello linear both;animation-timeline:--s20;animation-range:cover 46% cover 56%}
    .sello20 .s20-d4{animation:s20-destello linear both;animation-timeline:--s20;animation-range:cover 54% cover 64%}
  }
}
@keyframes s20-brillo{from{transform:translateX(-170px)}to{transform:translateX(640px)}}
@keyframes s20-destello{0%{opacity:0;transform:scale(.2) rotate(0deg)}50%{opacity:1;transform:scale(1.15) rotate(45deg)}100%{opacity:0;transform:scale(.2) rotate(90deg)}}


/* ---------- Organigrama (borrador): árbol en columnas en pantallas anchas; lista sangrada en el teléfono ---------- */
.org{display:grid;gap:26px}
.svc-sede a{color:var(--negro);font-weight:650;text-decoration:underline;text-decoration-color:var(--azul);text-decoration-thickness:2px;text-underline-offset:3px}

/* ---------- Servicios: detalle de cada servicio del portafolio ---------- */
.portafolio{align-items:start}
.pf-det[open]>summary{margin-bottom:6px}
.pf-det .senal{margin:2px 0 8px}
.pf-detalle{display:grid;gap:4px;margin:8px 0 6px}
.pf-detalle dt{font-size:.8rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--negro);margin-top:8px}
.pf-detalle dt:first-child{margin-top:0}
.pf-detalle dd{margin:0;font-size:.95rem;line-height:1.55;color:var(--texto-suave)}
.pf-detalle dd .senal{margin-top:6px}
.pf .ticks li .senal{margin-left:6px;vertical-align:1px}

/* Botones principales y opciones elegidas: degradé sutil turquesa → azul (#6BC8C6 → #00ADEE) en vez del azul pleno, que se veía muy saturado.
   Texto e íconos en negro sobre todo el degradé (10,7:1 sobre el turquesa y 8,2:1 sobre el azul; en modo oscuro la tinta oscura del tema).
   Al pasar el cursor quedan en turquesa pleno con borde negro, como antes; el foco sigue siendo el anillo de :focus-visible. */
:root{--degrade:linear-gradient(120deg,var(--turquesa) 0%,var(--azul) 100%)}
.btn-solid,.btn-teal,.cta,.chip[aria-pressed="true"]{background-color:var(--azul);background-image:var(--degrade)}   /* el azul queda de respaldo */
.btn-solid:hover,.btn-teal:hover,.cta:hover{background:var(--turquesa)}

/* Inicio: los cuatro grupos de servicios (dos columnas en tableta, cuatro en el computador) */
.cards-cuatro{grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.cards-cuatro{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.cards-cuatro{grid-template-columns:repeat(4,minmax(0,1fr))}.cards-cuatro .card{padding:28px 22px}}

/* Servicios: servicios por grupo (documento de servicios de la IPS) */
.cat-indice{display:flex;flex-wrap:wrap;gap:4px 22px;margin:0 0 34px}
.cat-indice a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 0;border:0;border-bottom:2px solid transparent;border-radius:0;background:none;font-weight:650;font-size:.95rem;color:var(--negro);text-decoration:underline;text-decoration-color:var(--azul);text-decoration-thickness:2px;text-underline-offset:5px}
.cat-indice a:hover{background:none;text-decoration-color:var(--negro)}
.cat-indice svg{width:18px;height:18px;flex-shrink:0}
.cat-cab{display:flex;align-items:center;gap:14px;margin:0 0 18px}
.cat-cab h2{margin:0;font-size:clamp(1.45rem,1.1rem + 1.3vw,2.1rem)}
.cat-item{border-top:1px solid var(--linea);padding:14px 0 12px;scroll-margin-top:calc(var(--hh) + 20px)}
.cat-item h3{font-size:1.06rem;line-height:1.3;margin:0}
.cat-item .ticks{margin:10px 0 0}
.cat-item .ticks li{font-size:.95rem}
.cat-item .ticks li .senal{margin-left:6px;vertical-align:1px}
.cat-item p{margin:10px 0 0}

/* Información institucional: un bloque por tema */
.inst-intro{max-width:70ch;margin:0 0 12px}
.inst-grid{display:grid;gap:8px 48px;margin:24px 0 64px;grid-template-columns:minmax(0,1fr)}
@media (min-width:860px){.inst-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.inst-tema{border-top:1px solid var(--linea);padding:24px 0 8px;display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0;scroll-margin-top:calc(var(--hh) + 20px)}
.inst-tema h2{font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem);margin:0}
.inst-tema p{color:var(--texto-suave);margin:0}
.inst-enlaces{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.inst-enlaces .senal{margin-left:6px}
.inst-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:4px}

/* Tablas dentro de los textos legales (aviso de cookies): con desplazamiento horizontal en el celular */
.tabla-scroll{overflow-x:auto;margin:14px 0 18px;-webkit-overflow-scrolling:touch}
.prose table{width:100%;min-width:520px;border-collapse:collapse;font-size:.95rem}
.prose th,.prose td{border:1px solid var(--linea);padding:10px 12px;text-align:left;vertical-align:top}
.prose th{background:var(--tinte);font-weight:750}
.prose td code{font-size:.88rem;white-space:nowrap}

/* =========================================================
   Menos cajones (oct. 2026): el cajón queda solo donde agrupa una acción (el formulario «Te llamamos», las tarjetas que llevan
   a otra página, el bloque de la ambulancia con su foto, los canales de WhatsApp y correo, el organigrama y la franja final).
   Lo que es lectura o lista va como texto con separadores finos. Se sobrescriben aquí componentes de comun/css/ufo.css,
   así que las otras versiones no cambian.
   ========================================================= */
/* Selectores «¿Qué necesitas hoy?» (Inicio) y «¿Dónde sientes la molestia?» (Servicios): las opciones ya son botones */
.selector-card{background:none;border:0;border-radius:0;box-shadow:none;padding:0}
/* Pasos del proceso (Inicio, Nosotros y Servicios): quedan los anillos 1/3, 2/3 y completo, sin el marco */
.steps .step{background:none;border:0;border-radius:0;padding:0 8px 0 0}
/* El número va centrado en su anillo: ufo.css lo ubica a 26 px, el relleno que tenía el marco */
.steps .step::before{left:0;top:0}
/* Sedes (Nosotros y Contacto): columnas o filas con una línea a la izquierda; la elegida en el mapa, en azul */
.sedes .sede{background:none;border:0;border-left:3px solid var(--linea);border-radius:0;box-shadow:none;padding:6px 0 6px 18px}
.sedes .sede.active{border-left-color:var(--azul);box-shadow:none}
#sedesList.sedes{gap:22px}
/* Servicios: un solo listado por grupo (#portafolio). Una fila por servicio: nombre y sede arriba, «Ver detalle» debajo, que se abre en la
   misma fila y trae el enlace de WhatsApp de ese servicio. El filtro por sede (filtro-sedes.js) se queda fijo arriba al bajar. */
.portafolio{display:block}
.portafolio .pf{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"titulo sede" "detalle detalle";column-gap:24px;row-gap:0;align-items:center;
  background:none;border:0;border-bottom:1px solid var(--linea);border-radius:0;box-shadow:none;padding:12px 0;scroll-margin-top:calc(var(--hh) + 120px)}
.portafolio .pf h4{grid-area:titulo}
.portafolio .pf .pf-det{grid-area:detalle;min-width:0}
.pf-sedes{grid-area:sede;justify-self:end;display:flex;flex-wrap:wrap;gap:6px;margin:0}
.pf-sedes .senal{margin:0}
.pf-preguntar{margin:4px 0 6px}
.pf[hidden],.svc-grupo[hidden],.filtro-sedes[hidden]{display:none}
@media (max-width:599px){
  .portafolio .pf{grid-template-columns:minmax(0,1fr);grid-template-areas:"titulo" "sede" "detalle"}
  .pf-sedes{justify-self:start;margin-top:6px}
}
.svc-sedes{display:grid;gap:10px;margin:6px 0 0}
@media (min-width:860px){.svc-sedes{grid-template-columns:1fr 1fr;gap:24px}}
.svc-sede{display:flex;gap:10px;align-items:flex-start;margin:0;color:var(--texto-suave);font-size:.95rem;line-height:1.5;scroll-margin-top:calc(var(--hh) + 120px)}
.svc-sede svg{width:18px;height:18px;flex-shrink:0;margin-top:3px}
.svc-sede b{color:var(--negro)}
#portafolio[data-filtro="machangara"] #sede-santa-clara,#portafolio[data-filtro="santa-clara"] #sede-machangara{display:none}
.filtro-sedes{position:sticky;top:calc(var(--hh) + 6px);z-index:30;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:18px 0 0;padding:10px 0;
  background:var(--blanco);border-bottom:1px solid var(--linea)}
[data-tema="oscuro"] .filtro-sedes{background:var(--fondo)}
.filtro-sedes .chips{margin:0;gap:8px}
.filtro-sedes .chip{min-height:44px;padding:8px 16px}
.filtro-t{margin:0;font-weight:700;font-size:.95rem}
.filtro-estado{flex-basis:100%;margin:0;font-size:.9rem;color:var(--texto-suave)}
.filtro-estado:empty{display:none}
.svc-grupo{margin:34px 0 0;scroll-margin-top:calc(var(--hh) + 120px)}
.svc-grupo .cat-cab{margin-bottom:6px}
.svc-grupo .cat-cab h3{margin:0;font-size:clamp(1.3rem,1.05rem + 1vw,1.8rem)}
.svc-sec .pf-cierre{margin-top:40px}
/* Atención en casa (Servicios): sección normal; el bloque destacado de la página es el de la ambulancia */
#domicilio .home-card{background:none;border:0;border-radius:0;padding:0;color:inherit}
#domicilio .home-card .icon-wrap{background:var(--tinte)}
#domicilio .home-card .icon-wrap::after{border-color:var(--blanco)}
/* Organigrama: las personas mencionadas, como lista */

/* =========================================================
   Ajustes de la auditoría (oct. 2026)
   ========================================================= */
   de la fila mostraba el fondo gris de las líneas (tableta y teléfono horizontal). */
/* El dato de Google es un enlace: subrayado siempre (en el teléfono no hay cursor que lo descubra) */
.ficha a b{text-decoration:underline;text-decoration-color:var(--azul);text-decoration-thickness:2px;text-underline-offset:3px}
/* Números de teléfono y WhatsApp: no se parten entre dos líneas */
.foot-contact a[data-ufo-href^="tel"],.foot-contact a[data-ufo-href^="wa"],.info-row a[data-ufo-href^="tel"],.info-row a[data-ufo-href^="wa"]{white-space:nowrap}
.foot-contact a[data-ufo-href="wa-amb"],.info-row a[data-ufo-href="wa-amb"]{white-space:normal}
/* Contacto, tarjeta del mapa: las filas no se salen de la tarjeta (el correo quedaba cortado en el teléfono) */
.map-info{grid-template-columns:minmax(0,1fr)}
.info-row{min-width:0}
.info-row>span,.info-row>a{min-width:0;overflow-wrap:anywhere}
/* Artículos y páginas legales: la columna no se ensancha con su contenido. La tabla del aviso de cookies (mín. 520 px) ensanchaba
   toda la página en el teléfono y el texto quedaba cortado a la derecha; así la tabla se desplaza dentro de .tabla-scroll. */
.article-grid>*{min-width:0}
/* Lista de chequeo (primera sesión): la casilla va dentro de su etiqueta y el texto en un solo bloque (antes la casilla quedaba en
   una línea aparte, el texto se partía en dos columnas y en el teléfono la lista se salía 2 px por la izquierda). La casilla queda
   alineada con el texto del artículo; el fondo al pasar el cursor sobresale un poco. */
.checklist li{margin-left:-12px}
.checklist label span{min-width:0}
/* Enlace dentro de una nota (Información financiera): se distingue del texto */
.svc-note a{color:var(--negro);font-weight:650;text-decoration:underline;text-decoration-color:var(--azul);text-decoration-thickness:2px;text-underline-offset:3px}
/* Franja final: los botones de borde llevan el fondo de la franja, así su aro decorativo no tacha el texto del botón */
.band .btn-borde-claro{background:var(--azul)}
.band .btn-borde-claro:hover{background:var(--blanco)}
[data-tema="oscuro"] .band .btn-borde-claro{background:var(--blanco)}
/* Botón flotante de WhatsApp: se aparta mientras tapa un botón, una opción o un campo (lo decide fuentes/js/cabecera.js).
   Misma salida que .off de ufo.css (franjas de llamado a la acción y pie). */
.wa-float.aparte{opacity:0;transform:translateY(16px);pointer-events:none;visibility:hidden;transition:transform .2s var(--ease-out),opacity .2s,visibility 0s .2s}
@media (prefers-reduced-motion:reduce){.wa-float.aparte{transform:none}}

/* =========================================================
   Nosotros: «Nuestro equipo» (oct. 2026). Retratos recortados (herramientas/recortar-equipo.js, fondo transparente) sobre un marco claro
   con la órbita del logo y el logo vigente en una esquina (estilo del carné «Organic Wave» de la agencia). El mismo marco (.retrato) lo
   usa la diapositiva «Equipo» del carrusel de Inicio. El marco es claro también en modo oscuro: los retratos se ven mejor así.
   Teléfono: una fila por persona (retrato a la izquierda); desde 640 px, tarjetas en columnas. Sin esquinas redondeadas: los retratos
   van en un recorte recto, como fotos de credencial (los redondeos en las secciones importantes hacían ver la página genérica).
   ========================================================= */
.retrato{position:relative;aspect-ratio:4/5;overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 78% at 50% 16%,#FFFFFF 0%,#E7F6F6 46%,rgba(107,200,198,.62) 100%) #FFFFFF;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.retrato::before{content:"";position:absolute;z-index:-1;left:-22%;right:-22%;top:24%;height:50%;border-radius:50%;
  border:3px solid rgba(0,173,238,.38);border-top-color:rgba(107,200,198,.25);rotate:-14deg}
.retrato img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.retrato-logo::after{content:"";position:absolute;right:0;bottom:0;width:62px;height:32px;
  background:#FFFFFF url("../img/logo-ufo-ips.svg") center/44px auto no-repeat}
.eq-grupo{margin-top:44px}
.eq-grupo:first-of-type{margin-top:0}
.eq-grupo-t{display:flex;align-items:center;gap:12px;font-family:var(--display);font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem);font-weight:700;
  letter-spacing:-.01em;padding-bottom:10px;margin-bottom:18px;border-bottom:3px solid var(--turquesa)}
.eq-grupo-t svg{width:26px;height:26px;flex-shrink:0}
.equipo-grupo{margin:0 0 28px}
.equipo-grupo img{display:block;width:100%;height:auto;border-radius:14px}
.eq-lista{display:grid;gap:18px;grid-template-columns:minmax(0,1fr);align-items:start}   /* abrir «Formación» en una tarjeta no mueve a las vecinas */
.eq-persona{display:grid;grid-template-columns:112px minmax(0,1fr);gap:16px;align-items:start;align-content:start}
.eq-persona .retrato.retrato-logo::after{width:42px;height:22px;background-size:30px auto}
.eq-datos{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.eq-datos h4{font-size:1.08rem;line-height:1.25;margin:2px 0 0;overflow-wrap:anywhere}
.eq-rol{color:var(--texto-suave);font-size:.95rem;line-height:1.45}
.eq-form{width:100%}
.eq-form summary{display:inline-flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;font-weight:700;color:var(--negro);list-style:none;
  text-decoration:underline;text-decoration-color:var(--azul);text-decoration-thickness:2px;text-underline-offset:4px}
.eq-form summary::-webkit-details-marker{display:none}
.eq-form summary::after{content:"";width:8px;height:8px;margin-top:-4px;border-right:2px solid var(--negro);border-bottom:2px solid var(--negro);rotate:45deg;transition:rotate .2s var(--ease-out)}
.eq-form[open] summary::after{rotate:-135deg;margin-top:4px}
.eq-form .ticks li{font-size:.9rem;line-height:1.45;padding-top:6px;padding-bottom:6px}
.eq-form .ticks li::before{top:9px}
@media (min-width:640px){
  .eq-lista{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:28px 24px}
  .eq-persona{grid-template-columns:minmax(0,1fr);gap:14px}
  .eq-persona .retrato.retrato-logo::after{width:62px;height:32px;background-size:44px auto}
}
@media (prefers-reduced-motion:reduce){.eq-form summary::after{transition:none}}
/* Ajustes de revisión: espacio del pie frente al botón flotante, modo oscuro del video, pistas y detalles */
@media (max-width:719px){footer.site{padding-bottom:calc(100px + env(safe-area-inset-bottom,0px))}}
[data-tema="oscuro"] .video-caja{background:#163749}
[data-tema="oscuro"] .video-caja video{filter:brightness(.82)}
.disclaimer,.svc-note{max-width:70ch}
.bn-seg{display:block;margin-top:2px}
.crumbs a{display:inline-block;padding-block:3px}

/* ---------- Ajustes de la revisión de diseño (oct. 2026) ---------- */
/* 1. Anillos decorativos: fuera del teléfono (cruzaban el texto); en escritorio, a un lado donde no hay texto */
@media (max-width:859px){.band::before,footer.site::before{display:none}}
@media (min-width:860px){.band::before{right:-18%;top:-80%;width:40%;height:260%}footer.site::before{left:-30%;width:60%}}
/* 17. Menos esquinas redondeadas: un solo radio para tarjetas y rectas en las secciones importantes */
:root{--r:14px;--r-lg:14px}
.band,.form-card,.home-card,.cot-card,.canal,.map-card,.amb-bloque,.amb-franja .video-caja{border-radius:0}
/* 19. La flecha de «Ver más» sigue a la última palabra aunque el texto pase a dos líneas */
.link-arrow{display:inline-block;min-height:0;padding-block:11px}
.link-arrow svg{display:inline-block;vertical-align:-3px;margin-left:6px}
/* 3. Botón de pausa del video de la ambulancia (mano abierta = se mueve; cerrada = detenido), como el del carrusel */
.video-pausa{position:absolute;right:14px;bottom:14px;z-index:2;width:44px;height:44px;display:grid;place-items:center;padding:0;border-radius:12px;cursor:pointer;border:1.5px solid rgba(242,248,251,.8);background:rgba(6,33,48,.62);color:#F2F8FB;transition:background .2s}
.video-pausa[hidden]{display:none}
.video-pausa:hover{background:rgba(6,33,48,.88)}
.video-pausa:focus-visible{outline:3px solid #F2F8FB;outline-offset:3px}
.video-pausa svg{width:22px;height:22px}
.video-pausa .i-puno,.video-caja.detenido .video-pausa .i-palma{display:none}
.video-caja.detenido .video-pausa .i-puno{display:block}
@media (prefers-reduced-motion:reduce){.video-pausa{transition:none}}

/* Documentos legales (Nosotros): enlaces a los documentos publicados; los borradores van señalados con «?» (ver .senal en ufo.css). */
.docs{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:720px){.docs{grid-template-columns:1fr 1fr}}
.doc{display:flex;gap:16px;align-items:flex-start;padding:22px;border:1.5px solid var(--linea);background:var(--blanco)}
.doc[hidden]{display:none}
.doc h3{margin:0 0 6px;font-size:1.08rem}
.doc h3 a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.doc p{margin:0 0 10px}

/* Bloque final antes del pie (.band): el mismo degradado del proyecto (--degrade, turquesa a azul) en lugar del azul plano. El azul queda de respaldo. */
.band{background-color:var(--azul);background-image:var(--degrade)}

/* Pie de página: siempre oscuro (azul del pie, #163749), en modo claro y en oscuro; el texto va claro. */
body footer.site{background:var(--pie-oscuro);color:#F2F8FB;border-top:3px solid var(--turquesa)}
body footer.site h2{color:#F2F8FB}
body footer.site :is(a,p,li,span,b,strong,small,div,address){color:#F2F8FB}
body footer.site a:hover{color:#FFFFFF}
/* Pie: el logo es transparente, así que sin recuadro blanco; los íconos de redes van en negro sobre su círculo blanco (y el anillo, claro). */
body footer.site .foot-brand img{background:none;padding:0;border-radius:0}
body footer.site .social-row a{background:#FFFFFF;color:#062130;border-color:#F2F8FB}
body footer.site .social-row a:hover{background:var(--azul);color:#062130;border-color:#F2F8FB}
/* Altura de la cabecera: una sola variable para la cabecera, el relleno superior del hero y la posición de las flechas.
   Inicio: 60 px (la cabecera se aprieta para que el recorrido del hero quede en pantalla). Demás páginas: 68 px. */
:root{--cab-alto:68px}
:root:has(#destacados){--cab-alto:60px}
body header.cab{height:var(--cab-alto);padding-top:calc(6px + env(safe-area-inset-top,0px))}
body header.cab .cab-in{min-height:calc(var(--cab-alto) - 8px)}
/* Hero desde el borde superior de la página: la cabecera (sticky) se apoya sobre el hero y no queda una franja blanca arriba.
   El relleno del marco reserva ese alto para que el texto no quede bajo la cabecera. */
.hs{margin-top:calc(-1 * var(--cab-alto))}
.hs-marco{padding-top:var(--cab-alto)}
/* Anclas: el desplazamiento se detiene justo debajo de la cabecera de esta página (su alto real, no el de 84 px de la base). */
html:root{scroll-padding-top:calc(var(--cab-alto) + 16px)}
/* Lema del pie: texto turquesa sobre el azul del pie (6,7:1). El negro de la base quedaba casi invisible sobre el fondo oscuro. */
body footer.site .lema{color:var(--turquesa)}

/* Inicio: sedes con mapa (el mapa y la lista los llena fuentes/js/mapa.js). En escritorio, mapa a la izquierda y las dos sedes a la derecha. */
.sedes-inicio-grid{display:grid;gap:28px;align-items:start}
@media (min-width:900px){.sedes-inicio-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:40px}}

/* Coberturas: lista en cuadrícula, cuadrada (sin esquinas redondeadas), y pegada a la cinta que sigue */
.cobertura{padding-bottom:44px}
@media (min-width:960px){.cobertura{padding-bottom:56px}}
.cobertura-lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.cobertura-lista li{padding:16px 18px;border:1.5px solid var(--linea);background:var(--blanco);font-weight:650;line-height:1.35}

/* Cinta de aliados: menos aire antes y después, para que los bloques vecinos no queden separados */
.entidades + .sec{padding-top:12px}
/* Selector «¿Qué necesitas hoy?»: la mascota se reduce para que la fila no deje aire arriba y abajo del título */
@media (min-width:860px){.masc-izq .masc{height:clamp(200px,17vw,240px)}}

/* Sedes de Inicio: cada una con su mapa de referencia (imagen clara u oscura según el modo); el clic lleva a Google Maps. */
.sedes-inicio-grid{display:grid;gap:28px}
@media (min-width:900px){.sedes-inicio-grid{grid-template-columns:1fr 1fr;gap:32px}}
.sede-tarjeta{display:flex;flex-direction:column;background:var(--blanco);border:1px solid var(--linea)}
.sede-mapa{position:relative;display:block;overflow:hidden;line-height:0;border-bottom:1px solid var(--linea)}
.sede-mapa:focus-visible{outline:3px solid var(--azul);outline-offset:-3px}
.sede-mapa img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;transition:filter .2s}
.sede-mapa:hover img{filter:brightness(1.06)}
.sede-mapa .mapa-oscuro{display:none}
[data-tema="oscuro"] .sede-mapa .mapa-claro{display:none}
[data-tema="oscuro"] .sede-mapa .mapa-oscuro{display:block}
.sede-datos{display:grid;align-content:start;gap:8px;flex:1;padding:20px 22px 24px}
.sede-datos h3{margin:0;font-size:1.25rem}
.sede-datos p{margin:0}
.sede-datos .sede-horario{font-weight:650}
.sede-datos .link-arrow{justify-self:start;margin-top:6px}
.sedes-inicio-grid{align-items:stretch}
/* Contacto: el mapa de cada sede va dentro de su tarjeta (claro u oscuro según el modo) */
.sedes .sede.sede-con-mapa{padding:0 0 6px 18px}
.sede-con-mapa .sede-mapa{margin-top:6px;border:1px solid var(--linea);border-radius:var(--r)}
.sede-con-mapa .sede-mapa + b{display:block;margin-top:14px}
/* «¿Qué necesitas hoy?»: el texto arranca arriba, junto a la cinta, en lugar de centrarse frente a la mascota */
@media (min-width:860px){section[aria-labelledby="selQ"] .split{align-items:start}}

/* Presentación de Nosotros: distintivo +20 años en metal gris (ver sello-20-anios.svg); brillo y destellos ligados al desplazamiento. */
.sello-presentacion{margin-top:24px;max-width:300px;view-timeline:--s20 block}
.sello-presentacion .sello20{display:block;width:100%;height:auto}

/* Servicios: enlace «En qué consiste» hacia el Blog, y validación de cobertura por municipio (Atención en casa) */
.pf-blog{margin:10px 0 0}
.validar-cobertura{margin-top:14px;max-width:62ch}
.validar-cobertura>summary{display:inline-flex;align-items:center;min-height:44px;cursor:pointer;font-weight:700;color:var(--negro);text-decoration:underline;text-decoration-color:var(--azul);text-decoration-thickness:2px;text-underline-offset:4px;list-style:none}
.validar-cobertura>summary::-webkit-details-marker{display:none}
.validar-cobertura>summary:focus-visible{outline:3px solid var(--azul);outline-offset:3px}
.validar-lista{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.validar-lista a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border:1.5px solid var(--borde);color:var(--negro);font-weight:650}
.validar-lista a:hover{background:var(--tinte)}
.validar-lista a:focus-visible{outline:3px solid var(--azul);outline-offset:3px}

/* Cuadros grises de la foto grupal pendiente (Nosotros y diapositiva «Equipo» de Inicio) */
.fotos-pendientes{display:grid;grid-template-columns:1fr;gap:20px;margin-top:28px}
@media (min-width:640px){.fotos-pendientes{grid-template-columns:repeat(2,minmax(0,1fr))}}
.foto-pendiente{margin:0;display:flex;flex-direction:column;gap:10px}
.foto-pendiente-icono{flex:1;display:grid;place-items:center;min-height:120px;background:#E3E6E9;color:#7A848C}
.foto-pendiente-icono svg{width:44px;height:44px}
.foto-pendiente figcaption{font-size:.95rem;line-height:1.4}
.foto-pendiente figcaption b{display:block}

/* Servicios, ambulancia: la foto de los dos integrantes del equipo va completa (cuadrada, sin recortes) y su pie queda debajo, sin degradado */
.amb-bloque .amb-foto-equipo{display:grid;gap:10px;align-content:center;min-height:0;margin:0;padding:0;background:none}
.amb-bloque .amb-foto-equipo img{position:static;inset:auto;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;object-position:50% 50%;background:none}
.amb-bloque .amb-foto-equipo figcaption{position:static;max-width:none;padding:0 16px 16px;background:none;color:var(--texto-suave);font-size:.9rem;font-weight:600;line-height:1.35;border-radius:0}

/* Tableta (600 a 1099 px): la foto de la ambulancia va contenida y centrada, como en el resto de la tarjeta */
@media (min-width:600px) and (max-width:1099.98px){
  .amb-bloque .amb-foto-equipo{width:calc(100% - 56px);max-width:640px;margin:0 auto 28px;border-radius:var(--r);overflow:hidden}
}

/* Blog: artículos creados desde el CRM (portada, relacionados y tarjeta lateral con imagen opcional) */
.articulo-portada{margin:0 0 28px}
.articulo-portada img{display:block;width:100%;height:auto;aspect-ratio:5/3;object-fit:cover;border-radius:var(--r)}
.relacionados{margin-top:40px;padding-top:24px;border-top:1px solid var(--linea)}
.relacionados h2{font-size:1.25rem;margin:0 0 12px}
.relacionados ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.tarjeta-icono{display:block;width:120px;height:auto;margin:0 0 12px}
/* Ocultar de verdad: sin esta regla, un elemento con display propio (botón, fila, párrafo) seguiría visible con el atributo hidden. */
[hidden]{display:none!important}
/* Visor de documentos en Normativo: el PDF se ve dentro de la página y el enlace para abrirlo queda debajo. */
.doc-visor{margin:10px 0 4px}
.doc-visor summary{cursor:pointer;font-weight:650}
.doc-visor iframe{display:block;width:100%;height:min(70vh,640px);min-height:320px;border:1px solid var(--borde);border-radius:12px;margin:10px 0;background:#fff}