/* =========================================================
   VERSIÓN SIN AGENDA · Inicio: hero en carrusel (oct. 2026). Lo maneja fuentes/js/carrusel.js.
   Escenario que sigue el modo de la página (claro: blanco; oscuro: el azul del pie, #163749) con imagen grande a la derecha y el mensaje a la izquierda, como las portadas de
   las plataformas de video, pero con la identidad de UFO IPS. Sus colores van en las variables de .hs-marco (y en su versión oscura): en oscuro, texto #F2F8FB sobre #163749 (11,4:1), secundario al 86 % (≥ 7:1), turquesa como texto.
   Va de borde a borde, sin esquinas redondeadas ni sombra de tarjeta (una portada, no una caja más); el texto y los controles se
   alinean con el contenido de la página (.wrap, 1200 px) y la imagen llega hasta el borde derecho.
   Las diapositivas se apilan en una sola celda de la cuadrícula: el alto es el de la más alta y no salta al cambiar.
   Teléfono: imagen arriba y texto debajo (nunca texto sobre la foto). Desde 900 px: texto a la izquierda, imagen a la derecha y, en
   las fotos, un degradado que funde la foto con el fondo (el texto queda siempre sobre el fondo liso).
   ========================================================= */
.hs{padding:0;position:relative}
.hs-marco{--hs-fondo:#FFFFFF;--hs-fondo-70:rgba(255,255,255,.7);--hs-fondo-0:rgba(255,255,255,0);--hs-texto:#000000;--hs-suave:rgba(0,0,0,.76);--hs-linea:rgba(0,0,0,.16);--hs-tenue:rgba(0,0,0,.06);--hs-tenue-2:rgba(0,0,0,.14);--hs-borde-ctl:rgba(0,0,0,.62);--hs-puntos:rgba(0,0,0,.74);--hs-barra:rgba(0,0,0,.28);--hs-senal:rgba(255,255,255,.8);--hs-flecha:rgba(0,0,0,.07);--hs-flecha-h:rgba(0,0,0,.16);--hs-dur:8000ms;
  /* --hs-lado: sangría que alinea el texto y los controles con .wrap (20 px en el teléfono, 32 px desde 720 px y, en pantallas anchas,
     el borde del contenido centrado de 1200 px). cqw = ancho del carrusel (contenedor), sin la barra de desplazamiento. */
  --hs-lado:20px;container-type:inline-size;
  position:relative;width:100%;margin:0;overflow:hidden;isolation:isolate;background:var(--hs-fondo);color:var(--hs-texto)}
@media (min-width:720px){.hs-marco{--hs-lado:32px}}
@supports (width:1cqw){
  .hs-marco{--hs-lado:max(20px,calc((100cqw - 1200px) / 2 + 20px))}
  @media (min-width:720px){.hs-marco{--hs-lado:max(32px,calc((100cqw - 1200px) / 2 + 32px))}}
}
/* pan-y: el deslizamiento a los lados lo maneja carrusel.js; pinch-zoom: ampliar con dos dedos sigue funcionando sobre el carrusel */
.hs-diapos{display:grid;touch-action:pan-y pinch-zoom}
.hs-diapo{grid-area:1/1;display:grid;grid-template-rows:auto 1fr;min-width:0;opacity:0;visibility:hidden;
  transition:opacity .9s ease,visibility 0s linear .9s}
.hs-diapo.activa{opacity:1;visibility:visible;transition:opacity .9s ease,visibility 0s}
/* La diapositiva que sale apaga su texto enseguida mientras la imagen se funde: los dos titulares nunca se ven encimados */
.hs-diapo:not(.activa) .hs-texto{opacity:0;transition:opacity .25s ease}
/* Sin JavaScript: solo la primera diapositiva (y sin controles: llevan hidden hasta que carrusel.js los activa) */
html:not(.js) .hs-diapo:not(.activa){display:none}
/* Modo oscuro: la página ya es #1D455B; el escenario baja a #163749 (el del pie) y lleva una línea fina arriba y abajo para no fundirse con ella.
   Texto #F2F8FB sobre #163749: 11,4:1. */
/* Modo oscuro: el fondo es el azul del pie (#163749, variable --pie-oscuro) y el texto, claro. */
[data-tema="oscuro"] .hs-marco{--hs-fondo:var(--pie-oscuro);--hs-fondo-70:rgba(22,55,73,.7);--hs-fondo-0:rgba(22,55,73,0);--hs-texto:#F2F8FB;--hs-suave:rgba(242,248,251,.86);--hs-linea:rgba(242,248,251,.22);--hs-tenue:rgba(242,248,251,.08);--hs-tenue-2:rgba(242,248,251,.2);--hs-borde-ctl:rgba(242,248,251,.62);--hs-puntos:rgba(242,248,251,.74);--hs-barra:rgba(242,248,251,.45);--hs-senal:rgba(6,33,48,.55);--hs-flecha:rgba(6,33,48,.55);--hs-flecha-h:rgba(6,33,48,.85);border-block:1px solid rgba(242,248,251,.14)}

/* ---------- Imagen ---------- */
.hs-media{position:relative;min-width:0;aspect-ratio:5/4;overflow:hidden}
.hs-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.hs-foto .hs-media::after{content:"";position:absolute;inset:auto 0 0;height:42%;background:linear-gradient(to top,var(--hs-fondo),var(--hs-fondo-0));pointer-events:none}
#hs-2 .hs-img{object-position:50% 38%}
/* Ambulancia: la foto termina en su borde, sin degradado */
.hs-sin-degradado .hs-media::after{display:none}
#hs-4 .hs-img{object-position:50% 60%}

/* ---------- Texto ---------- */
.hs-texto{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0;padding:16px var(--hs-lado) 22px}
.hs .tag{color:var(--hs-texto)}
.hs-texto h2{color:var(--hs-texto);font-size:clamp(1.5rem,1.1rem + 2vw,2.75rem);line-height:1.12;max-width:17ch}
/* Portada: la palabra destacada va en turquesa, sin la barra de fondo (5,2:1 sobre el fondo, el color de la auditoría de contraste) */
.hs-marco .hs-texto h2 em{color:var(--turquesa);background:none;padding:0}
.hs-lede{color:var(--hs-suave);font-size:1.04rem;line-height:1.55;max-width:46ch}
.hs-lede b{color:var(--hs-texto);white-space:nowrap}
.hs-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:6px}
.hs-marco .btn-outline{background:transparent;color:var(--hs-texto);border-color:var(--hs-borde-ctl)}
.hs-marco .btn-outline:hover{background:var(--hs-tenue-2)}
.hs-marco .link-arrow{color:var(--hs-texto);text-decoration-color:var(--turquesa)}
.hs-marco :focus-visible{outline-color:var(--hs-texto)}
.hs-marco .senal{color:var(--hs-texto);background:var(--hs-senal);border-color:var(--turquesa)}
.hs-marco .senal::before{background:var(--hs-texto);color:#062130}
.hs-senal{margin:-2px 0 0}

/* ---------- 1. Propuesta principal: nombre, logo vigente y mascota en su órbita ---------- */
.hs-marca{background:radial-gradient(48% 62% at 78% 42%,rgba(107,200,198,.34),transparent 70%),radial-gradient(42% 52% at 12% 96%,rgba(0,173,238,.16),transparent 70%)}
/* Portada: sin satélite ni aros; un óvalo turquesa lleno detrás de la mascota (diseño de referencia) */
.hs-marca .orbita{isolation:isolate}
/* Misma forma que la órbita del satélite: elipse de 90 % × 43 % de la caja, inclinada -14° (la trayectoria de la órbita en el SVG: rx 45, ry 21,5 sobre 100) */
.hs-marca .orbita::before{content:"";position:absolute;z-index:0;left:5%;top:28.5%;width:90%;height:43%;background:#6BC8C6;border-radius:50%;transform:rotate(-14deg)}
.hs-marca .hs-media{aspect-ratio:auto;display:flex;align-items:center;justify-content:center;padding:14px 0 0;overflow:visible}
.hs-marca .orbita{width:min(46%,200px)}
.hs-marco .marca-h1{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin:2px 0 0}
.hs-marco .marca-nombre{font-family:var(--display);font-weight:700;font-size:clamp(1.12rem,.95rem + 1vw,1.75rem);line-height:1.15;letter-spacing:-.01em;color:var(--hs-texto)}
/* El logo vigente a todo color, directo sobre el fondo oscuro (el turquesa y el azul se leen bien sobre #1D455B) */
.hs-marco .marca-logo{width:min(82%,300px);height:auto;filter:drop-shadow(0 10px 22px rgba(0,0,0,.35))}

/* ---------- 3. Bienestar: la mascota caminando, con la órbita detrás ---------- */
.hs-ilustra{background:radial-gradient(46% 60% at 76% 55%,rgba(107,200,198,.3),transparent 70%)}
.hs-ilustra .hs-media{display:flex;align-items:flex-end;justify-content:center}
.hs-ilustra .hs-media::before{content:"";position:absolute;left:50%;top:58%;width:min(78%,520px);aspect-ratio:2.1;translate:-50% -50%;rotate:-14deg;
  border:4px solid rgba(107,200,198,.55);border-bottom-color:rgba(0,173,238,.7);border-radius:50%}
.hs-masc{position:relative;height:94%;width:auto;max-width:none;filter:drop-shadow(0 18px 24px rgba(0,0,0,.35))}


/* ---------- 5. Equipo: foto grupal pendiente (cuadro .foto-pendiente de sin-agenda.css) ---------- */
.hs-equipo{background:radial-gradient(50% 60% at 75% 45%,rgba(107,200,198,.26),transparent 70%)}
.hs-equipo .hs-media{aspect-ratio:auto;display:flex;align-items:flex-end;padding:18px var(--hs-lado) 0}
.hs-equipo .foto-pendiente{width:100%;aspect-ratio:4/3}

/* ---------- Controles: avance automático, indicadores (con barra de avance) y anterior / siguiente ----------
   Botones con esquinas redondeadas (12 px). El de avance automático muestra el estado actual: mano abierta mientras avanza solo y
   mano cerrada cuando está detenido; su nombre accesible dice lo que hará («Pausar carrusel» / «Reanudar carrusel», carrusel.js). */
.hs-controles{display:flex;align-items:center;gap:10px 12px;padding:6px var(--hs-lado) 14px;position:relative;z-index:3}
.hs-boton{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;padding:0;cursor:pointer;
  background:var(--hs-tenue);border:1.5px solid var(--hs-borde-ctl);color:var(--hs-texto);transition:background .2s}
.hs-boton:hover{background:var(--hs-tenue-2)}
.hs-boton svg{width:20px;height:20px}
.hs-pausa svg{width:22px;height:22px}
.hs-pausa .i-puno,.hs-marco.detenido .hs-pausa .i-palma{display:none}
.hs-marco.detenido .hs-pausa .i-puno{display:block}
.hs-flechas{display:flex;gap:8px;flex:none}
.hs-puntos{flex:1;min-width:0;display:flex;gap:0;margin:0;padding:0;list-style:none}
.hs-puntos li{flex:1;min-width:0}
.hs-punto{width:100%;min-height:44px;display:flex;flex-direction:column;justify-content:center;gap:7px;padding:4px 0;background:none;border:0;
  color:var(--hs-puntos);font:inherit;font-size:.8rem;font-weight:650;line-height:1.2;text-align:left;cursor:pointer}
.hs-punto:hover,.hs-punto[aria-current="true"]{color:var(--hs-texto)}
.hs-punto-nombre{display:none;padding:0 10px 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Pista de cada indicador al 45 % (3,2:1 sobre #1D455B; en el teléfono es lo único que se ve de cada indicador). La del actual,
   además del color, es más gruesa: el estado no depende solo del color. */
/* Barras pegadas: sin separación; el límite entre una y otra es una línea de 1 px del color del fondo (no se confunde el progreso) */
.hs-barra{display:block;height:4px;background:var(--hs-barra);overflow:hidden;transition:transform .2s}
.hs-puntos li+li .hs-barra{box-shadow:inset 1px 0 0 var(--hs-fondo)}
.hs-barra i{display:block;height:100%;background:linear-gradient(90deg,var(--turquesa),var(--azul));transform-origin:left center;transform:scaleX(0)}
.hs-punto[aria-current="true"] .hs-barra{transform:scaleY(1.75)}
.hs-punto[aria-current="true"] .hs-barra i{transform:scaleX(1)}
.hs-marco.reproduce .hs-punto[aria-current="true"] .hs-barra i{animation:hs-avance var(--hs-dur) linear both}
.hs-marco.retenido .hs-punto[aria-current="true"] .hs-barra i{animation-play-state:paused}
@keyframes hs-avance{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (min-width:600px){
  .hs-punto-nombre{display:block}
  .hs-controles{padding:8px var(--hs-lado) 16px;gap:14px}
}
/* Tableta vertical (600-899 px): imagen más baja (16:9) y los retratos en dos filas de tres, centrados */
@media (min-width:600px) and (max-width:899px){
  .hs-media{aspect-ratio:16/9}
  .hs-marca .orbita{width:min(34%,230px)}
  .hs-equipo .hs-media{aspect-ratio:auto;justify-content:center}
  .hs-texto{padding:18px var(--hs-lado) 24px}
}
/* Teléfono y tableta vertical: el texto queda siempre justo encima de los controles. Las diapositivas se apilan en una celda con el
   alto de la más alta; en las más bajas, el espacio que sobra lo toma la imagen (la foto se recorta un poco más alta; el logo, la
   mascota y los retratos quedan centrados) y no queda como una franja vacía entre el texto y los controles. */
@supports (width:1cqw){
  @media (max-width:899px){
    .hs-diapo{grid-template-rows:1fr auto}
    .hs-media{aspect-ratio:auto;min-height:80cqw}   /* 100cqw = ancho del carrusel: el mismo 5:4 de antes, como mínimo */
    .hs-marca .hs-media,.hs-equipo .hs-media{min-height:0}
    .hs-equipo .hs-media{align-items:center}
    /* la mascota, fuera del flujo: su alto en % (del recuadro) no puede agrandar la diapositiva con su alto natural de 720 px */
    .hs-masc{position:absolute;left:50%;bottom:0;translate:-50% 0}
  }
  @media (min-width:600px) and (max-width:899px){
    .hs-media{min-height:56.25cqw}                 /* 16:9 */
  }
}

/* ---------- Entrada de cada diapositiva: el texto sube apenas y la foto se acerca muy despacio ---------- */
@media (prefers-reduced-motion:no-preference){
  .hs-diapo.activa .hs-texto>*{animation:hs-sube .8s var(--ease-out) both}
  .hs-diapo.activa .hs-texto>:nth-child(2){animation-delay:.08s}
  .hs-diapo.activa .hs-texto>:nth-child(3){animation-delay:.16s}
  .hs-diapo.activa .hs-texto>:nth-child(n+4){animation-delay:.24s}
  .hs-foto.activa .hs-img{animation:hs-acerca 14s ease-out both}
  /* La foto que sale queda quieta donde iba mientras se desvanece (carrusel.js le pone .saliendo durante el fundido): sin esto el
     acercamiento se cortaba de golpe y la foto saltaba a su tamaño normal en pleno fundido */
  .hs-foto.saliendo .hs-img{animation:hs-acerca 14s ease-out both;animation-play-state:paused}
}
@keyframes hs-sube{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes hs-acerca{from{transform:scale(1.07)}to{transform:scale(1)}}
/* Reducir movimiento: cambio de diapositiva sin fundido, sin animaciones y sin avance automático (carrusel.js) */
@media (prefers-reduced-motion:reduce){
  .hs-diapo,.hs-diapo.activa{transition:none}
  .hs-marco.reproduce .hs-punto[aria-current="true"] .hs-barra i{animation:none;transform:scaleX(1)}
  .hs-boton,.hs-barra{transition:none}
}

/* ---------- Computador y tableta horizontal ---------- */
@media (min-width:900px){
  /* Flechas a los costados, de borde a borde y centradas en la diapositiva (como la referencia): cuadradas, oscuras y translúcidas,
     sobre el borde izquierdo (fondo liso) y el derecho (la imagen). La barra de abajo queda con la pausa y los indicadores. El texto
     y los retratos guardan distancia para que las flechas nunca los tapen (--hs-borde). */
  .hs-marco{--hs-barra-alto:56px;--hs-borde:max(var(--hs-lado),84px)}
  .hs-controles{position:static}
  .hs-flechas{position:absolute;z-index:4;left:0;right:0;top:var(--cab-alto);bottom:calc(var(--hs-barra-alto) + 12px);display:flex;justify-content:space-between;align-items:center;pointer-events:none}
  .hs-flechas .hs-boton{pointer-events:auto;width:52px;height:72px;border:0;background:var(--hs-flecha);color:var(--hs-texto);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .hs-flechas .hs-boton:hover{background:var(--hs-flecha-h)}
  .hs-flechas .hs-boton svg{width:24px;height:24px}
  .hs-flechas .hs-boton:focus-visible{outline-offset:-5px}
  /* Pegadas al borde de la pantalla: rectas del lado del borde y redondeadas hacia adentro */
  .hs-flechas [data-paso="-1"]{border-radius:0 16px 16px 0;transform-origin:0 50%}   /* al pulsarlas (pulsar.css) se encogen hacia su borde: */
  .hs-flechas [data-paso="1"]{border-radius:16px 0 0 16px;transform-origin:100% 50%}  /* siguen pegadas a la orilla de la pantalla */
  .hs-controles{padding-left:var(--hs-borde);padding-right:var(--hs-borde);min-height:var(--hs-barra-alto)}
  .hs-diapo{grid-template-columns:minmax(0,46fr) minmax(0,54fr);grid-template-rows:minmax(clamp(400px,calc(100svh - var(--cab-alto) - 200px),560px),auto)}
  .hs-media{grid-column:2;grid-row:1;aspect-ratio:auto}
  .hs-marco .marca-logo{width:clamp(200px,18vw,290px)}
  .hs-texto{grid-column:1;grid-row:1;align-self:center;gap:12px;padding:28px 28px 24px var(--hs-borde);z-index:2}
  .hs-texto h2{font-size:clamp(2rem,1.2rem + 1.9vw,3rem)}
  .hs-lede{font-size:1.1rem}
  /* Fotos: ocupan la columna derecha (desde el 46 %, donde termina el texto) y un degradado funde su borde izquierdo con el fondo.
     El acercamiento crece desde ese borde (transform-origin a la izquierda), así la foto nunca asoma por debajo del texto. */
  .hs-foto .hs-media{grid-column:1/-1}
  .hs-foto .hs-img{left:46%;width:54%;transform-origin:0 50%}
  .hs-foto .hs-media::after{inset:0 auto 0 46%;width:20%;height:auto;background:linear-gradient(90deg,var(--hs-fondo) 0%,var(--hs-fondo-70) 40%,var(--hs-fondo-0) 100%)}
  #hs-2 .hs-img{object-position:50% 45%}
  .hs-marca .hs-media{padding:28px var(--hs-borde) 28px 32px}
  .hs-marca .orbita{width:min(84%,470px)}
  .hs-ilustra .hs-media{padding-top:28px}
  .hs-masc{height:90%;max-height:540px}
  .hs-equipo .hs-media{align-items:center;padding:36px var(--hs-borde) 36px 12px}
}

/* ---------- Vista fija: todas las diapositivas, una debajo de otra, sin controles ----------
   Al imprimir la página y en el entregable de revisión (capturas y PDF para iPhone: herramientas/entregable-revision.js le pone
   .hs-estatico al carrusel), para que se puedan revisar las cinco. */
.hs-estatico .hs-diapos{display:block}
.hs-estatico .hs-diapo{display:grid!important;opacity:1;visibility:visible;transition:none}
.hs-estatico .hs-diapo .hs-texto{opacity:1;transition:none}
.hs-estatico .hs-diapo+.hs-diapo{border-top:1px solid var(--hs-linea)}
.hs-estatico .hs-controles{display:none!important}
@media print{
  .hs-diapos{display:block}
  .hs-diapo{display:grid!important;opacity:1!important;visibility:visible!important;break-inside:avoid}
  .hs-diapo .hs-texto{opacity:1!important}
  .hs-diapo+.hs-diapo{border-top:1px solid var(--hs-linea)}
  .hs-controles{display:none!important}
}