/* ═══════════════════════════════════════════════════════════════════════════
   PERLA · PRESENTACIONES Y LANDINGS (app8) · EL TEMA TEAL — LO QUE LA TRADUCCIÓN NO ALCANZA (2026-09-29)
   ───────────────────────────────────────────────────────────────────────────
   El teal es la hoja oscura traducida entera (app8-lujo-teal.css) y las clases de Tailwind
   generadas (app8-tw-teal.css). Acá sólo va lo que no vive en esas hojas: la barra de arriba,
   que lleva `data-pz-foto` y el generador deja fuera. Sobre la foto no cambia nada; cuando la
   foto se va y la barra se vuelve sólida, es del teal del suelo (lo mismo que ARIA).
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-tema="teal"] header.cab-marca:not(.cab-sobre-foto){
  background-color:#046477 !important;
  border-bottom-color:rgba(234,223,206,.16) !important;
}

/* ── EL FUNDIDO DE LA PORTADA Y EL CIERRE, EN EL SUELO TEAL ───────────────────────────────────
   La foto y lo que va sobre ella no cambian; lo único que cambia es el color en que se funden,
   que es el del suelo del tema (lo mismo que la bandeja de ARIA). */
html[data-tema="teal"] .a8-portada__fundido{
  background:linear-gradient(180deg, rgba(4,100,119,0) 0%, rgba(4,100,119,.62) 42%, rgba(4,100,119,.92) 74%, #046477 100%) !important; }
html[data-tema="teal"] .a8-cierre__foto{
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.30) 8%, rgba(0,0,0,.70) 18%, #000 30%, #000 100%) !important;
          mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.30) 8%, rgba(0,0,0,.70) 18%, #000 30%, #000 100%) !important; }
html[data-tema="teal"] .a8-cierre__tinta{
  background:linear-gradient(180deg, #046477 0%, rgba(4,100,119,.86) 8%, rgba(4,100,119,.52) 17%,
    rgba(4,100,119,.20) 27%, rgba(4,100,119,0) 38%, rgba(4,100,119,0) 100%) !important; }