/* ===================================================================
   Ajustes WordPress sobre el CSS del handoff.
   Los <image-slot> del prototipo se sustituyen por imágenes reales
   (.slot-img) o por un placeholder discreto (.slot-empty) cuando el
   cliente aún no ha cargado la foto. Selectores espejo de los del
   prototipo (rediseno.css / rediseno-v3.css).
   =================================================================== */

img.slot-img { object-fit: cover; }

/* Placeholder cuando no hay imagen elegida en WP */
span.slot-empty {
  display: block;
  background:
    radial-gradient(120% 90% at 20% 10%, rgba(0, 163, 140, .16), transparent 55%),
    linear-gradient(145deg, var(--surface2, #eef4f2), var(--surface1, #f7faf9));
}

/* Hero de subpáginas */
.page-hero .ph-bg .slot-img { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Avatares de testimonios (home) */
.cmap-cards.v3 .avatar .slot-img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; }

/* Equipo (Nosotros) */
.member .shot .slot-img { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Foto recortada de las tarjetas del carrusel. El diseño la fijaba en
   bottom:96px / height:122%, medidas afinadas para el recorte que traía el tema;
   con recortes propios del cliente el sujeto queda demasiado alto, así que se
   baja el punto de partida y se hace ajustable desde el Personalizador
   (Apariencia → Personalizar → Carrusel de servicios). */
.s3-photo {
  bottom: var(--s3-photo-bottom, 72px);
  height: var(--s3-photo-height, 112%);
  left: var(--s3-photo-left, -46px);
  /* El tope del diseño (max-width:calc(100% + 46px)) volvía inerte la mitad alta
     del control de tamaño —la foto dejaba de crecer— y además estaba cableado al
     -46px original, así que no acompañaba a --s3-photo-left. El encuadre
     horizontal lo gobierna ese control. */
  max-width: none;
}

/* El título vive en la banda inferior de la tarjeta, así que si la foto baja
   demasiado (título a dos líneas, otro recorte, o el slider al mínimo) el texto
   quedaría sobre la parte oscura de la imagen. Velo del propio color de la
   tarjeta detrás del texto: donde no hay foto es invisible. */
.s3-card:has(.s3-photo) b { position: relative; }
.s3-card:has(.s3-photo) b::before {
  content: "";
  position: absolute;
  inset: -16px -30px -30px -30px; /* dentro del padding-box: no sale de las esquinas redondeadas */
  z-index: -1;
  background: linear-gradient(to top, var(--card) 72%, transparent);
  pointer-events: none;
}

/* Desplazamiento horizontal del mazo dentro de su columna. Va compuesto en el
   propio transform: el tilt del puntero solo escribe --dry/--drx, nunca la
   propiedad transform, así que no hay conflicto. Con margin-left el centrado
   flex del stage se comía la mitad del valor pedido. */
.s3-deck {
  transform: translateX(var(--s3-deck-x, 0px))
             rotateY(calc(-17deg + var(--dry, 0deg)))
             rotateX(calc(5deg + var(--drx, 0deg)));
}

/* Carrusel del home: el diseño fijaba .s3-texts en 250px con los textos
   superpuestos (position:absolute), pensado para los textos cortos del
   prototipo. Con descripciones del CMS más largas el texto podía pisar el
   botón "Ver todos los servicios", así que los apilamos en una celda de grid:
   el contenedor crece con el texto más largo y la transición de opacidad
   sigue igual. En modo plano (móvil / sin JS) manda la regla del diseño. */
.svc3d-sec:not(.flat) .s3-texts { display: grid; }
.svc3d-sec:not(.flat) .s3-texts > .s3-text { position: relative; inset: auto; grid-area: 1 / 1; }

/* Acordeón de Servicios: la imagen destacada del servicio ya no es una columna,
   va como textura tenue bajo el degradado oscuro del panel. El texto pasa a una
   sola columna, con ancho de lectura acotado. */
.sidx-panel { grid-template-columns: 1fr; position: relative; overflow: hidden; }
.sidx-panel > div { position: relative; z-index: 1; max-width: 62ch; }
.sidx-panel.has-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--sidx-bg);
  background-size: cover;
  background-position: center;
  /* mismo duotono teal que el resto de las fotos del sitio, muy atenuado */
  filter: grayscale(1) sepia(.42) hue-rotate(128deg) saturate(1.6) brightness(.9);
  opacity: .16;
  pointer-events: none;
}

/* Detalle de servicio */
.svc-hero-grid .slot-img { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 24px; overflow: hidden; }

/* Noticias: destacado, tarjetas y portada del artículo */
.feat-hero .slot-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.post .thumb { position: relative; overflow: hidden; }
.post .thumb .slot-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.post .thumb:has(.slot-img:not(.slot-empty))::after { display: none; }
.article-cover .slot-img { display: block; width: 100%; aspect-ratio: 16 / 8; border-radius: 24px; overflow: hidden; }

/* Recursos: portada en la tarjeta de descarga */
.res-card .slot-img { display: block; width: 100%; aspect-ratio: 16 / 10; max-height: 280px; border-radius: 16px; overflow: hidden; }

/* Duotono teal del prototipo sobre fotos reales */
.page-hero .ph-bg .slot-img:not(.slot-empty),
.duo .slot-img:not(.slot-empty),
.feat-hero .slot-img:not(.slot-empty),
.sidx-panel .slot-img:not(.slot-empty) {
  filter: grayscale(1) sepia(.42) hue-rotate(128deg) saturate(1.9) brightness(.92);
}

/* ---------------------------------------------------------------
   Controles del video de Nosotros. Van como hermano del <video> para
   que no los recorte su máscara lateral (que solo afecta al video).
   El video no tiene audio: no hay control de volumen.
   --------------------------------------------------------------- */
.hist-video { position: relative; }
.hist-video video { cursor: pointer; }

/* Sin JS los botones no harían nada: se ocultan (el tema añade .js en <html>). */
.vidctl { display: none; }
.js .vidctl {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, #0C2126 62%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 24px rgba(10, 30, 34, .28);
  max-width: calc(100% - 32px);
  /* Solo aparecen con el cursor encima (o con el foco del teclado dentro).
     Si el video está pausado se quedan visibles, para poder reanudarlo. */
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.hist-video:hover .vidctl,
.hist-video:focus-within .vidctl,
.js .vidctl.is-paused {
  opacity: 1;
  visibility: visible;
}
/* En pantallas sin cursor (táctiles) no hay hover: siempre visibles. */
@media (hover: none) {
  .js .vidctl { opacity: 1; visibility: visible; }
}
@media (prefers-reduced-motion: reduce) {
  .js .vidctl { transition: none; }
}
.vc-btn {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #F7F4EE;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.vc-btn:hover { background: rgba(247, 244, 238, .14); }
.vc-btn:active { transform: scale(.94); }
.vc-btn:focus-visible { outline: 2px solid #14C6A6; outline-offset: 2px; }
.vc-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.vc-toggle { background: #00A38C; }
.vc-toggle:hover { background: #14C6A6; }
.vc-toggle .vc-i-play { fill: currentColor; stroke: none; }
/* Se muestra pausa mientras corre y play cuando está detenido */
.vc-toggle .vc-i-play { display: none; }
.vidctl.is-paused .vc-toggle .vc-i-pause { display: none; }
.vidctl.is-paused .vc-toggle .vc-i-play { display: block; }

/* Sonido: altavoz tachado cuando está silenciado (estado inicial, porque el
   autoplay solo funciona en silencio) y altavoz con ondas al activarlo. */
.vc-sound .vc-i-muted { display: none; }
.vidctl.is-muted .vc-sound .vc-i-muted { display: block; }
.vidctl.is-muted .vc-sound .vc-i-loud { display: none; }

/* Texto solo para lectores de pantalla (el toggle ES/EN lo traduce) */
.vc-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Riel de 4 px visible, pero 24 px de alto real para cumplir el tamaño
   mínimo de objetivo táctil (WCAG 2.5.8). */
.vc-seek {
  -webkit-appearance: none;
  appearance: none;
  width: clamp(90px, 22vw, 260px);
  height: 24px;
  background: linear-gradient(to bottom, transparent 0 10px, rgba(247, 244, 238, .32) 10px 14px, transparent 14px 100%);
  cursor: pointer;
  margin: 0;
}
.vc-seek::-webkit-slider-runnable-track { height: 24px; background: transparent; }
.vc-seek::-moz-range-track { height: 24px; background: transparent; }
.vc-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: #F7F4EE;
  box-shadow: 0 1px 4px rgba(10, 30, 34, .4);
}
.vc-seek::-moz-range-thumb {
  width: 13px; height: 13px;
  border: 0;
  border-radius: 50%;
  background: #F7F4EE;
  box-shadow: 0 1px 4px rgba(10, 30, 34, .4);
}
.vc-seek:focus-visible { outline: 2px solid #14C6A6; outline-offset: 3px; }

.vc-time {
  font-family: "Poppins", sans-serif;
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
  color: rgba(247, 244, 238, .82);
  white-space: nowrap;
}

@media (max-width: 560px) {
  .vidctl { gap: 6px; padding: 6px 10px; bottom: 10px; }
  .vc-time { display: none; }
  .vc-seek { width: clamp(70px, 34vw, 140px); }
}

/* ---------------------------------------------------------------
   Línea de tiempo de Nosotros: el número de columnas sale del número
   de hitos publicados y del ancho disponible. El diseño fijaba 4 y solo
   definía retardos de aparición para 4 nodos.
   --------------------------------------------------------------- */
/* Con auto-fit la rejilla envuelve en filas en vez de desbordar el .wrap: con 4,
   5 o 6 hitos el resultado es idéntico al diseño (una fila), y con más se parte
   en filas sin provocar scroll horizontal. */
.tline .tl-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
@media (max-width: 860px) {
  .tline .tl-grid { grid-template-columns: 1fr 1fr; }
}
.js .tline.v2 .tl-node:nth-child(5), .js .tline.v2 .tl-node:nth-child(5) .dot { transition-delay: 2.7s; }
.js .tline.v2 .tl-node:nth-child(6), .js .tline.v2 .tl-node:nth-child(6) .dot { transition-delay: 3.35s; }
.js .tline.v2 .tl-node:nth-child(7), .js .tline.v2 .tl-node:nth-child(7) .dot { transition-delay: 4s; }
.js .tline.v2 .tl-node:nth-child(8), .js .tline.v2 .tl-node:nth-child(8) .dot { transition-delay: 4.65s; }
/* Del 9º en adelante entran juntos, para no dejarlos sin retardo. */
.js .tline.v2 .tl-node:nth-child(n+9), .js .tline.v2 .tl-node:nth-child(n+9) .dot { transition-delay: 5.3s; }
/* Con más de una fila, la línea horizontal superior dejaría de tener sentido. */
.tline.v2:has(.tl-node:nth-child(7)) .tl-track { display: none; }

/* Cuerpo de páginas legales (estilo inline de Politica-de-Datos.html,
   aplicado también a Términos para consistencia) */
.legal-body h2 { font-size: 1.25rem; margin: 34px 0 10px; }
.legal-body p { color: var(--dim); line-height: 1.7; margin: 0 0 6px; }
.legal-note { margin-top: 36px; font-size: .85rem; font-style: italic; }

/* Barra de administración de WP (usuarios logueados) */
body.admin-bar header { top: 32px; }
@media (max-width: 782px) { body.admin-bar header { top: 46px; } }