/* ZENZIA - carta
   Movil primero. Fondo marfil, la bebida es lo unico que grita.
   Los colores salen de la base de datos: la plantilla los escribe en
   :root despues de esta hoja, no se ponen aqui. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* Montserrat para todo lo que se lee. Bodoni solo en grande: sus trazos
   finos desaparecen en un celular a pleno sol, y un precio ilegible
   no lo salva ninguna elegancia. */
:root {
  --display: "Bodoni Moda", "Bauer Bodoni", Didot, Georgia, serif;
  --texto-fuente: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 16px/1.5 var(--texto-fuente);
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
}

a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }

/* ---------- Encabezado ---------- */
.encabezado { padding: 26px 18px 10px; text-align: center; }
.encabezado .logo { max-height: 92px; width: auto; margin: 0 auto; }
.marca {
  margin: 0;
  color: var(--titulo);
  font-family: var(--display);
  font-size: 1.9rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.bajada {
  margin: 8px 0 0;
  font-size: .7rem; font-weight: 500;
  letter-spacing: .28em; text-transform: uppercase;
  opacity: .75;
}
.domicilio {
  margin: 4px 0 0;
  font-size: .78rem;
  line-height: 1.35;
  opacity: .55;
}
.entrada .domicilio { display: block; }

.horario { margin: 8px 0 0; font-size: .82rem; opacity: .6; }

/* ---------- Sucursal ---------- */
.sucursales { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.sucursales a {
  min-height: 40px;
  display: inline-flex; align-items: center;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--linea);
  font-size: .85rem;
}
.sucursales a.actual { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); font-weight: 600; }

/* ---------- Precios estandar ----------
   Los blends no tienen precio propio: lo pone la presentacion.
   Por eso va una sola vez arriba y no repetido en cada tarjeta. */
.precios {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 6px 18px;
  margin: 18px 14px 0;
  padding: 12px 16px;
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  font-size: 1.06rem;
}
.precios span { white-space: nowrap; }
.precios b { color: var(--numero); font-weight: 700; }
.precios .tamano { opacity: .55; }

/* ---------- Categorias ---------- */
.categorias {
  position: sticky; top: 0; z-index: 10;
  display: flex; gap: 6px; overflow-x: auto;
  padding: 12px 18px;
  background: var(--fondo);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.categorias::-webkit-scrollbar { display: none; }
.categorias a {
  flex: 0 0 auto; min-height: 44px;
  display: inline-flex; align-items: center;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--linea);
  font-size: .85rem; white-space: nowrap;
}

/* ---------- Rejilla ---------- */
main { padding: 0 14px 40px; }

.categoria { scroll-margin-top: 68px; }
.categoria h2 {
  margin: 30px 4px 14px;
  color: var(--titulo);
  font-family: var(--display);
  font-size: 1.25rem; font-weight: 500;
  letter-spacing: .06em;
}

.rejilla {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 18px 14px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 700px)  { .rejilla { grid-template-columns: repeat(3, 1fr); gap: 24px 18px; } }
@media (min-width: 1000px) { .rejilla { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { main, .precios, .categorias { max-width: 1180px; margin-left: auto; margin-right: auto; } }

/* ---------- Tarjeta ---------- */
.tarjeta { background: none; }
.tarjeta a { display: block; }

.medio {
  position: relative; margin: 0;
  aspect-ratio: 1 / 1;
  background: var(--foto-fondo);
  border-radius: 14px;
  overflow: hidden;
}
.medio img, .medio .clip {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.medio .clip { opacity: 0; transition: opacity .45s ease; }
.medio .clip.visible { opacity: 1; }

.etiqueta {
  position: absolute; top: 8px; left: 8px;
  padding: 4px 9px; border-radius: 999px;
  background: var(--acento); color: var(--sobre-acento);
  font-size: .66rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
}

.sello {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: var(--velo);
  color: var(--texto);
  font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
}
.tarjeta.agotado .medio img { filter: grayscale(.85); }

.datos { padding: 10px 2px 0; }
.datos h3 { margin: 0; color: var(--titulo); font-size: .95rem; font-weight: 500; line-height: 1.3; }
.datos .precio { display: inline-block; margin-top: 4px; color: var(--numero); font-weight: 600; font-size: .9rem; }
/* No es un precio, es el renglon de la tabla al que pertenece. Va con el
   contorno del acento para que se lea como etiqueta y no como cantidad. */
.datos .precio.especial {
  padding: 2px 9px;
  border: 1px solid var(--acento);
  border-radius: 999px;
  color: var(--acento);
  font-size: .74rem;
  letter-spacing: .04em;
}
.datos p {
  margin: 5px 0 0;
  font-size: .78rem; line-height: 1.45;
  opacity: .62;
}

.vacio { padding: 40px 10px; text-align: center; opacity: .5; }

/* ---------- Detalle ---------- */
.detalle { max-width: 620px; margin: 0 auto; padding: 0 0 48px; }
.detalle .medio { aspect-ratio: 1 / 1; border-radius: 0; }
@media (min-width: 620px) { .detalle .medio { border-radius: 18px; margin-top: 12px; } }

.detalle .cuerpo { padding: 22px 18px 0; }
.detalle h1 { margin: 0; color: var(--titulo); font-family: var(--display); font-size: 1.75rem; font-weight: 500; }
.detalle .texto { margin-top: 14px; font-size: .95rem; line-height: 1.65; opacity: .8; }

/* Los ingredientes van del color de los numeros, no del texto general: el
   cliente los lee junto con los precios y pidio que fueran del mismo color.
   Solo en la ficha del blend; el texto de eventos sigue con el color comun. */
body.ficha .detalle .texto { color: var(--numero); }

/* Presentaciones en la ficha */
.presentaciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.presentaciones div {
  flex: 1 1 90px;
  padding: 10px 12px;
  border: 1px solid var(--linea);
  border-radius: 12px;
  text-align: center;
}
.presentaciones span { display: block; font-size: .75rem; opacity: .6; }
.presentaciones b { display: block; margin-top: 2px; color: var(--numero); font-size: 1.05rem; }

.volver {
  display: inline-flex; align-items: center;
  min-height: 44px; margin: 12px 0 0 14px; padding: 0 14px;
  border: 1px solid var(--linea); border-radius: 999px;
  font-size: .85rem;
}

/* ---------- Pie ---------- */
.pie { padding: 12px 18px 34px; text-align: center; }
.boton-eventos {
  display: inline-flex; align-items: center;
  min-height: 46px; padding: 0 28px;
  border: 1px solid var(--acento); border-radius: 999px;
  color: var(--acento);
  font-size: .88rem; letter-spacing: .05em;
}

/* ---------- Bloques de eventos ---------- */
.bloque { margin-top: 30px; }
.bloque .medio { aspect-ratio: 16 / 10; border-radius: 14px; }
.bloque h2 { margin: 0; color: var(--titulo); font-family: var(--display); font-size: 1.3rem; font-weight: 500; }
.eventos .cuerpo { padding: 18px 18px 0; }

@media (prefers-reduced-motion: reduce) {
  .medio .clip { transition: none; }
}

/* ---------- Portada ----------
   No es una pantalla aparte que haya que pasar: es el arranque de la
   misma pagina. Se ve la marca y con un scroll ya esta la carta. */
.encabezado { padding-top: 40px; padding-bottom: 4px; }
.encabezado .logo { max-height: 118px; }
.lema {
  margin: 14px auto 0;
  max-width: 20ch;
  font-family: var(--display);
  font-size: 1.02rem;
  line-height: 1.5;
  opacity: .78;
}

/* Con video, la marca va encima del clip. Sin video queda exactamente
   como estaba: el clip no es un requisito de la portada. */
.encabezado.con-clip {
  position: relative;
  display: grid;
  align-items: end;
  min-height: 74vh;
  min-height: 74svh;   /* svh cuenta sin la barra del navegador; vh es el respaldo */
  padding: 0 18px 30px;
  overflow: hidden;
  background: var(--acento);
}
@media (min-width: 700px) {
  .encabezado.con-clip { min-height: 64vh; min-height: 64svh; }
}

.encabezado.con-clip .fondo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .9s ease;
}
.encabezado.con-clip .fondo.visible { opacity: 1; }

/* El velo va siempre, cargue o no el clip: es lo que garantiza que el
   nombre se lea sin depender de como sea el cuadro que toque. */
.encabezado.con-clip::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .34) 46%, rgba(0, 0, 0, .12) 100%);
}
.encabezado.con-clip .marca-bloque {
  position: relative; z-index: 1;
  color: #F4F2E4;
}
/* Sobre el video manda el claro, no el color de titulos: si el cliente
   pone los titulos en verde oscuro, el nombre se perderia contra el velo.
   Es el unico lugar donde el color no lo decide el panel, y es a proposito. */
.encabezado.con-clip .marca { color: inherit; }
.encabezado.con-clip .logo { filter: brightness(0) invert(1); opacity: .95; }
.encabezado.con-clip .bajada,
.encabezado.con-clip .lema { opacity: .9; }

.bajo-portada { padding: 16px 18px 0; text-align: center; }
.bajo-portada:empty { padding: 0; }

/* ---------- Entrada al hacer scroll ----------
   Solo una aparicion corta. Una carta no es un sitio para lucirse con
   animaciones: si el movimiento distrae de la foto, sobra. */
.aparece { transition: opacity .5s ease, transform .5s ease; }

/* Ocultar es lo excepcional y lo pone el JavaScript, solo en lo que
   todavia no se alcanza a ver. Si el JavaScript no corre o falla, la
   carta se ve completa: una animacion no puede ser el motivo de que
   alguien no pueda leer el menu. */
.aparece.oculto { opacity: 0; transform: translateY(14px); }

@media (prefers-reduced-motion: reduce) {
  .aparece, .aparece.oculto { opacity: 1; transform: none; transition: none; }
  .encabezado.con-clip .fondo { transition: none; }
}

/* ---------- Destacados ----------
   Cuatro grandes al frente: es lo que da color arriba y evita que la
   carta abra como una lista. El cliente los elige desde el panel. */
.destacados {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 44vw;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 22px 14px 4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.destacados::-webkit-scrollbar { display: none; }
.destacado { scroll-snap-align: center; }
.destacado .medio { aspect-ratio: 4 / 5; border-radius: 16px; }
.destacado h3 {
  margin: 10px 2px 0;
  color: var(--titulo);
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 500;
}
@media (min-width: 700px) {
  .destacados {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-columns: auto;
    overflow: visible;
    gap: 18px;
    padding: 26px 14px 6px;
    max-width: 1180px;
    margin: 0 auto;
  }
}

/* Una linea de ingredientes en la tarjeta; el resto vive en la ficha.
   Foto grande, texto corto: si la tarjeta se lee, la foto no se ve. */
.datos p {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Entradas de la portada ----------
   La portada no repite la carta: la presenta y deja a la mano las tres
   puertas. Los botones de ubicacion salen de la base, no de aqui: cuando
   abra otra unidad, aparece sola. */
.entradas {
  max-width: 520px;
  margin: 0 auto;
  padding: 26px 18px 40px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.entradas .rotulo {
  margin: 14px 0 2px;
  font-size: .7rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  opacity: .5;
}
.entrada {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 58px;
  padding: 10px 20px;
  border: 1px solid var(--linea);
  border-radius: 14px;
  font-size: .96rem;
}
.entrada small { margin-top: 2px; font-size: .76rem; opacity: .6; }

/* Eventos no es una sucursal mas. Va abajo de la raya, separado de la
   lista de ubicaciones, porque es la otra puerta del negocio. */
.entradas.aparte {
  margin-top: -14px;
  padding-top: 0;
  padding-bottom: 46px;
}
.entradas.aparte::before {
  content: '';
  display: block;
  height: 1px;
  margin: 0 0 22px;
  background: var(--linea);
}
.entrada.mayor {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--sobre-acento);
  font-family: var(--display);
  font-size: 1.1rem;
  letter-spacing: .04em;
  text-align: center;
  align-items: center;
}

/* ---------- Cabecera de la carta ----------
   Ya no hace falta la portada entera aqui: basta la marca en chico,
   que ademas es el camino de regreso. */
.cabecera-carta { padding: 18px 18px 4px; text-align: center; }
.marca-chica {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px;
}
.marca-chica img { height: 34px; width: auto; }

/* El logo completo trae la marca y la bajada dentro de la propia imagen, y
   va en sus dos tintas. Por eso no se pinta ni se le pone el nombre al lado:
   se muestra tal cual y mas alto, que para eso es el logo entero. */
.marca-chica img.logo-full { height: 120px; }

/* El isotipo viene blanco, para fondo oscuro. Sobre el marfil no se veria,
   asi que se usa su propia silueta como recorte y se rellena con el color
   de los titulos. Asi sigue al panel: si cambian los titulos, cambia el
   logo con ellos, y funciona con cualquier logo que suban despues. */
.marca-chica img.isotipo {
  background: var(--titulo);
  -webkit-mask: var(--icono) center / contain no-repeat;
  mask: var(--icono) center / contain no-repeat;
}
.marca-chica span {
  color: var(--titulo);
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.cabecera-carta .sucursales { margin-top: 12px; }

/* ---------- Elegir categoria ----------
   Una carta de mesa se lee de un vistazo. Primero el tipo de te, y de
   ahi se entra a sus blends; cuarenta tarjetas seguidas se abandonan. */
.titulo-menu {
  margin: 26px 4px 14px;
  color: var(--titulo);
  font-family: var(--display);
  font-size: 1.2rem; font-weight: 500;
  letter-spacing: .04em;
  text-align: center;
}
.categorias-tarjetas { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 10px; }
@media (min-width: 700px) { .categorias-tarjetas { grid-template-columns: repeat(2, 1fr); gap: 14px; } }

.tarjeta-categoria {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 14px 8px 8px;
  background: var(--suave);
  border-radius: 16px;
  min-height: 84px;
}
.tarjeta-categoria .medio {
  flex: 0 0 76px; width: 76px; height: 76px;
  border-radius: 12px; overflow: hidden; background: var(--fondo);
}
.tarjeta-categoria .medio img { width: 100%; height: 100%; object-fit: cover; }
.tarjeta-categoria .txt { flex: 1 1 auto; min-width: 0; }
.tarjeta-categoria strong {
  display: block;
  color: var(--titulo);
  font-family: var(--display);
  font-size: 1.08rem; font-weight: 500;
  letter-spacing: .04em;
}
.tarjeta-categoria small { display: block; margin-top: 2px; font-size: .78rem; opacity: .6; }
.tarjeta-categoria .flecha {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border: 1px solid var(--linea); border-radius: 999px;
  color: var(--acento); font-size: .9rem;
}

/* ---------- Cabecera de una categoria ---------- */
.cabecera-categoria { padding: 6px 18px 0; text-align: center; }
.cabecera-categoria h1 {
  margin: 0;
  color: var(--titulo);
  font-family: var(--display);
  font-size: 1.6rem; font-weight: 500;
}
.cabecera-categoria .bajada {
  margin-top: 4px;
  font-size: .8rem; letter-spacing: .1em;
  text-transform: none; opacity: .6;
}

/* ---------- Leches y extras ---------- */
.extras { margin: 14px 14px 0; text-align: center; }
.extras .rotulo {
  margin: 0 0 6px;
  font-size: .68rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; opacity: .5;
}
.lista-extras {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 4px 16px;
  font-size: .82rem;
}
.lista-extras b { color: var(--numero); font-weight: 600; }

/* ---------- Contacto de eventos ----------
   Los eventos se cotizan, no se compran: lo que hace falta aqui no es un
   precio sino una forma facil de preguntar. */
/* Los dos contactos van uno al lado del otro y del mismo tamano. Son la
   misma accion, preguntar, y en columna se leian como una lista de datos
   en vez de como dos botones. El correo va debajo, chico: quien quiera
   copiarlo lo tiene, y el boton no se deforma con una direccion larga. */
.contacto { margin: 22px 18px 0; }
.contacto-botones {
  display: flex; flex-direction: row; gap: 10px;
}
.contacto .entrada {
  flex: 1 1 0; min-width: 0;
  min-height: 56px;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 10px 14px;
  border-width: 2px;
  border-radius: 999px;
  font-family: var(--display);
  font-size: 1.05rem;
  letter-spacing: .04em;
}
/* El que no va relleno se dibuja con el mismo trazo grueso, para que los
   dos pesen igual y ninguno parezca el de repuesto. */
.contacto .entrada:not(.mayor) {
  border-color: var(--acento);
  color: var(--acento);
}
.correo-pie {
  margin: 10px 18px 0;
  text-align: center;
  font-size: .8rem;
  opacity: .55;
  word-break: break-all;
}

/* ---------- Foto a pantalla completa ----------
   Tocar la bebida y verla en grande es lo que se espera de una carta con
   fotos. Si hay clip, es aqui donde corre. */
/* La marca la pone el propio script al enganchar la foto: asi el cursor
   no promete algo que no va a pasar si el JavaScript no cargo. */
.ampliable.con-visor { cursor: zoom-in; }

.visor {
  position: fixed; inset: 0; z-index: 100;
  /* place-content ademas de place-items: sin el, la fila del grid se
     estira a toda la pantalla y el boton de play se iria hasta abajo
     del todo en vez de a la esquina de la foto. */
  display: grid; place-content: center; place-items: center;
  padding: 20px;
  background: rgba(20, 16, 12, .94);
  opacity: 0;
  transition: opacity .25s ease;
}
.visor.abierto { opacity: 1; }
.visor img, .visor video {
  grid-area: 1 / 1;
  max-width: 100%; max-height: 86vh;
  width: auto; height: auto;
  border-radius: 14px;
}
/* El video no flota: se ve tal cual se grabo. */
.visor video { transform: scale(.94); transition: transform .25s ease; }
.visor.abierto video { transform: none; }
.visor .pie-visor {
  position: absolute; left: 0; right: 0; bottom: 22px;
  text-align: center;
  color: #F4F2E4;
  font-family: var(--display);
  font-size: 1.05rem;
  letter-spacing: .04em;
}
.visor .cerrar {
  position: absolute; top: 14px; right: 14px;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border: 0; border-radius: 999px;
  background: rgba(244, 242, 228, .22);
  color: #F4F2E4; font-size: 1.5rem; line-height: 1;
  cursor: pointer;
}

/* Boton para pasar de la foto al video. El video no se baja hasta que lo
   piden, asi nadie espera una descarga que a lo mejor ni queria.
   Va en la esquina y no al centro: estas fotos son producto, una lata o
   una mesa montada, y un circulo en medio tapa justo lo que se vino a
   ver. Se cuelga de la esquina de la foto, no de la pantalla: asi no
   queda flotando en el vacio ni se encima con el nombre de abajo. */
.visor .play-visor {
  grid-area: 1 / 1;
  place-self: end end;
  /* La foto lleva animacion, y un elemento con transform se pinta por
     encima de los que no estan posicionados. Sin esto el boton quedaba
     debajo de la foto: se veia (si la foto era recorte) pero el clic lo
     recibia la foto y el visor se cerraba. */
  position: relative;
  z-index: 2;
  margin: 0 14px 14px 0;
  width: 64px; height: 64px;
  display: grid; place-items: center;
  border: 0; border-radius: 999px;
  background: rgba(20, 16, 12, .58);
  cursor: pointer;
}
.visor .play-visor span {
  width: 0; height: 0; margin-left: 6px;
  border-left: 19px solid #F4F2E4;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
}

body.sin-scroll { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .visor, .visor img, .visor video { transition: none; }
  .visor img, .visor video { transform: none; }
}

/* ---------- Eventos: la tira de bloques ----------
   Uno abajo del otro y a todo el ancho de la columna. Antes los bloques
   sin texto se acomodaban de a dos, y eso traia tres problemas: la foto
   quedaba de 171 px, el tercero se quedaba solo en su renglon, y escribirle
   un titulo a uno le cambiaba el tamano al de al lado. Un evento se muestra
   para que se vea, no para que se acomode.

   Las fotos van enteras, nunca recortadas: son latas, mesas montadas,
   barras. Un recorte a lo ancho de una lata deja ver la etiqueta nada mas
   y no se entiende que es. Por eso la foto pone su propia altura. */
.collage {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  padding: 14px 18px 0;
}
.collage .bloque { margin: 0; }
/* El contacto tampoco es un bloque: va pegado a los bordes de la columna
   para que los dos botones tengan el ancho entero. */
.collage .contacto { margin-left: 0; margin-right: 0; }

.collage .bloque .medio {
  aspect-ratio: auto;
  background: var(--suave);
}
.collage .bloque .medio img {
  position: static;
  width: 100%;
  height: auto;
  object-fit: contain;
}
/* Un bloque que trae video y no trae foto: el video ocupa el lugar de la
   foto y necesita una altura de arranque, porque hasta que no carga no
   tiene medidas propias y la pagina daria un brinco. */
.collage .bloque .medio.solo-clip { aspect-ratio: 16 / 9; }
.collage .bloque .medio.solo-clip .clip { object-fit: contain; }
.collage .bloque .cuerpo { padding: 12px 2px 0; }

/* La senal de que ahi hay video. Sin esto la foto se ve igual que
   cualquier otra y nadie sabe que tocandola se reproduce. */
.insignia-play {
  position: absolute;
  right: 10px; bottom: 10px;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: rgba(20, 18, 16, .55);
  backdrop-filter: blur(2px);
  pointer-events: none;
}
.insignia-play span {
  width: 0; height: 0;
  margin-left: 4px;
  border-style: solid;
  border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent #fff;
}
/* Cuando el bloque no trae foto, la insignia deja de ser una marca en la
   esquina y se pone al centro: es lo unico que hay en ese recuadro y tiene
   que leerse como el boton que es, no como una caja vacia. */
.medio.solo-clip .insignia-play {
  top: 50%; left: 50%;
  right: auto; bottom: auto;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px;
}
.medio.solo-clip .insignia-play span {
  margin-left: 5px;
  border-width: 11px 0 11px 18px;
}

/* ---------- Volumen en la foto abierta ----------
   La foto recortada flota y gira apenas sobre su sombra. No es 3D de
   verdad, es una foto plana: lo que da la sensacion de volumen es que se
   mueva despacio y que la sombra la acompañe.

   Sirve para los 30 blends sin grabar un solo video. Cuando un blend si
   tenga clip, ahi manda el clip y esto no se usa. */
.visor { perspective: 1400px; }

/* Una foto recortada flota: se ve como un objeto suelto en el aire.
   Una foto normal, con su marco rectangular, no puede flotar sin que
   parezca una tarjeta deslizandose; esa crece despacio y ya. */
.visor img { will-change: transform; }

.visor img.recorte {
  animation: flotar 7s ease-in-out infinite;
  filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .55));
  transform-style: preserve-3d;
}

.visor img.foto {
  animation: acercar 12s ease-in-out infinite alternate;
}

@keyframes acercar {
  from { transform: scale(1); }
  to   { transform: scale(1.09); }
}

@keyframes flotar {
  0%   { transform: rotateY(-9deg) rotateX(1.5deg) translateY(6px)  scale(.99); }
  50%  { transform: rotateY( 9deg) rotateX(-1.5deg) translateY(-8px) scale(1.01); }
  100% { transform: rotateY(-9deg) rotateX(1.5deg) translateY(6px)  scale(.99); }
}

@media (prefers-reduced-motion: reduce) {
  .visor img.recorte, .visor img.foto { animation: none; }
}

/* ---------- Texto de presentacion de la portada ---------- */
.presentacion {
  max-width: 520px;
  margin: 22px auto 0;
  padding: 0 22px;
  text-align: center;
  font-size: .92rem;
  line-height: 1.65;
  opacity: .8;
}

/* ---------- Franja de promociones ----------
   Va arriba del menu y solo existe si el cliente escribio algo. */
.franja-aviso {
  /* Sin relleno ni esquinas redondeadas a proposito: con fondo se leia como
     un boton y la gente esperaba que llevara a alguna parte. Es un aviso. */
  margin: 2px 14px 0;
  padding: 9px 16px 11px;
  color: var(--acento);
  text-align: center;
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .02em;
}

.volver-inicio { margin: 10px 0 0; }

/* ---------- La marca sobre el video ----------
   El velo ayuda, pero un cuadro claro del clip puede tragarse el isotipo,
   que es blanco. La sombra lo despega del fondo sea cual sea el cuadro que
   toque, sin tener que oscurecer el video entero. */
/* El isotipo es un trazo fino. Una sombra suave no le alcanza: sobre un
   cuadro claro del video las lineas se pierden. Tres sombras encimadas,
   pegadas y opacas, le hacen un contorno oscuro que lo despega de
   cualquier fondo sin que se note que lleva sombra. */
.encabezado.con-clip .logo {
  max-height: 104px;
  opacity: 1;
  filter: brightness(0) invert(1)
          drop-shadow(0 0 3px rgba(0, 0, 0, 1))
          drop-shadow(0 0 7px rgba(0, 0, 0, .95))
          drop-shadow(0 0 14px rgba(0, 0, 0, .7));
}
.encabezado.con-clip .marca,
.encabezado.con-clip .bajada,
.encabezado.con-clip .lema {
  text-shadow: 0 2px 12px rgba(0, 0, 0, .8), 0 1px 3px rgba(0, 0, 0, .6);
}
/* Y el velo de abajo, un poco mas firme donde vive el texto. */
.encabezado.con-clip::after {
  background: linear-gradient(to top,
    rgba(0, 0, 0, .82) 0%,
    rgba(0, 0, 0, .55) 30%,
    rgba(0, 0, 0, .28) 60%,
    rgba(0, 0, 0, .10) 100%);
}