@import url('../fuentes/fuentes.css');

/* ═══════════════════════════════════════════════════════════════════
   DULCE MÍA PV · EVENTS DESIGNER
   Paleta tomada del logo: rosa #DE7F97 sobre crema #FFEFD6.
   Sin bandas de color planas: el fondo fluye en degradado de crema a
   rosa, las fotos van en marcos redondeados y en arco (el arco de flor
   es la firma de Dulce Mía) y los textos sobre foto van en vidrio.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* color */
  --rosa-nube:   #FBEEF1;   /* rosa pastel claro */
  --rosa-pie:    #F8E5EB;   /* fondo del pie: rosa pastel muy suave */
  --rosa-velo:   #F6DEE4;   /* fondo de las fotos mientras cargan */
  --rosa-suave:  #EFC4D0;   /* filetes y detalles */
  --rosa:        #DE7F97;   /* rosa del logo */
  --rosa-hondo:  #A84E67;   /* énfasis y hover: más oscuro que el del logo
                               para que los rótulos chicos se lean bien */
  --crema:       #FFF7EA;   /* crema del logo */
  --durazno:     #FFE7CF;   /* brillo cálido de los degradados */
  --blanco:      #FFFCFA;
  --tinta:       #45292F;   /* texto principal, ciruela cálido */
  --tinta-media: #6E4C55;
  --tinta-suave: #7A5A63;
  --noche:       #2E181D;   /* detrás de fotos y videos */

  /* tipografía */
  --display: 'Prata', 'Times New Roman', serif;
  --texto:   'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* medidas */
  --ancho:    1260px;
  --angosto:  660px;
  --gutter:   clamp(20px, 5vw, 64px);
  --seccion:  clamp(76px, 9vw, 136px);
  --nav-alto: 88px;

  /* forma */
  --radio-l:    clamp(20px, 2.2vw, 30px);
  --radio-m:    clamp(14px, 1.5vw, 20px);
  --radio-arco: 999px 999px var(--radio-l) var(--radio-l);

  /* profundidad */
  --sombra:       0 30px 60px -34px rgba(69, 41, 47, 0.42);
  --sombra-rosa:  0 40px 80px -40px rgba(168, 78, 103, 0.6);
  --vidrio:       rgba(255, 249, 244, 0.74);
  --vidrio-borde: rgba(255, 255, 255, 0.62);

  --suave:      cubic-bezier(.22, .61, .36, 1);
  --transicion: 420ms var(--suave);
}

/* ─── reset ──────────────────────────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  -webkit-text-size-adjust: 100%;
}

html.sin-scroll { overflow: hidden; }

body {
  margin: 0;
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--rosa-suave); color: var(--tinta); }

:focus-visible {
  outline: 2px solid var(--rosa-hondo);
  outline-offset: 3px;
  border-radius: 4px;
}

.saltar { position: absolute; left: 12px; top: -90px; z-index: 400; }
.saltar:focus { top: 12px; }

/* ─── escalas tipográficas ───────────────────────────────────────── */

.display-xl, .display-l, .display-m, .display-s {
  display: block;
  font-family: var(--display);
  line-height: 1.14;
  letter-spacing: -0.012em;
}

.display-xl { font-size: clamp(2.3rem, 4.8vw, 4.1rem); line-height: 1.08; }
.display-l  { font-size: clamp(2rem, 3.9vw, 3.2rem); }
.display-m  { font-size: clamp(1.6rem, 2.7vw, 2.3rem); }
.display-s  { font-size: clamp(1.28rem, 1.9vw, 1.6rem); }

.rotulo {
  display: block;
  font-family: var(--texto);
  font-size: 0.705rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--rosa-hondo);
  margin-bottom: 1.4rem;
}

.rotulo--claro { color: var(--rosa-suave); }

.entrada {
  font-size: clamp(1.06rem, 1.5vw, 1.2rem);
  line-height: 1.68;
  color: var(--tinta-media);
}

.filete {
  width: 54px;
  height: 1px;
  background: var(--rosa);
  border: 0;
  margin: 0 0 1.9rem;
}
.filete--centro { margin-left: auto; margin-right: auto; }

/* ─── contenedores ───────────────────────────────────────────────── */

.envoltura {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.envoltura--angosta { max-width: calc(var(--angosto) + var(--gutter) * 2); }

.seccion { position: relative; padding-block: var(--seccion); }

/* El fondo de todo lo que va después de la portada: un solo degradado
   que pasa de crema a rosa con manchas de luz, sin cortes entre secciones. */
.flujo {
  position: relative;
  background:
    radial-gradient(52% 24% at 92% 6%,  rgba(239, 196, 208, 0.62), rgba(239, 196, 208, 0) 70%),
    radial-gradient(46% 20% at 4% 26%,  rgba(255, 231, 207, 0.85), rgba(255, 231, 207, 0) 70%),
    radial-gradient(58% 22% at 96% 50%, rgba(246, 222, 228, 0.95), rgba(246, 222, 228, 0) 70%),
    radial-gradient(50% 20% at 2% 72%,  rgba(239, 196, 208, 0.5),  rgba(239, 196, 208, 0) 70%),
    radial-gradient(60% 18% at 80% 94%, rgba(255, 231, 207, 0.8),  rgba(255, 231, 207, 0) 70%),
    linear-gradient(180deg, var(--crema) 0%, var(--rosa-nube) 30%, var(--crema) 55%, var(--rosa-nube) 80%, var(--crema) 100%);
}

.flujo > .seccion + .seccion { padding-top: 0; }

/* ─── botones ────────────────────────────────────────────────────── */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 1.02em 2.1em;
  font-size: 0.775rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  background: var(--tinta);
  color: var(--crema);
  border: 1px solid var(--tinta);
  border-radius: 999px;
  transition: background var(--transicion), border-color var(--transicion),
              color var(--transicion), transform var(--transicion);
}

.boton:hover {
  background: var(--rosa-hondo);
  border-color: var(--rosa-hondo);
  transform: translateY(-2px);
}

.boton--linea {
  background: transparent;
  color: var(--tinta);
  border-color: rgba(69, 41, 47, 0.28);
}

.boton--linea:hover {
  background: transparent;
  color: var(--rosa-hondo);
  border-color: var(--rosa-hondo);
}

.boton--claro {
  background: var(--crema);
  color: var(--tinta);
  border-color: var(--crema);
}

.boton--claro:hover {
  background: var(--rosa-suave);
  border-color: var(--rosa-suave);
  color: var(--tinta);
}

/* sobre foto o video */
.boton--vidrio {
  background: rgba(255, 247, 234, 0.12);
  color: var(--crema);
  border-color: rgba(255, 247, 234, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.boton--vidrio:hover {
  background: var(--crema);
  color: var(--tinta);
  border-color: var(--crema);
}

.botonera {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

/* enlace con flecha */
.enlace {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-size: 0.775rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--tinta);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--rosa-suave);
  transition: color var(--transicion), border-color var(--transicion);
}

.enlace::after {
  content: '→';
  font-size: 1.05em;
  letter-spacing: 0;
  transition: transform var(--transicion);
}

.enlace:hover { color: var(--rosa-hondo); border-color: var(--rosa-hondo); }
.enlace:hover::after { transform: translateX(5px); }

/* botón redondo de play con texto */
.reproducir {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 0.775rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.reproducir__icono {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid currentColor;
  transition: background var(--transicion), color var(--transicion), transform var(--transicion);
}

.reproducir__icono svg { width: 14px; height: 14px; margin-left: 3px; fill: currentColor; }

.reproducir:hover .reproducir__icono,
.cine:hover .reproducir__icono { background: var(--crema); color: var(--tinta); transform: scale(1.07); }

/* ═══════════════════════════════════════════════════════════════════
   NAVEGACIÓN
   ═══════════════════════════════════════════════════════════════════ */

.barra {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--nav-alto);
  display: flex;
  align-items: center;
  color: var(--tinta);
  transition: background-color var(--transicion), box-shadow var(--transicion),
              height var(--transicion), color var(--transicion);
}

.barra.es-solida {
  height: 68px;
  color: var(--tinta);
  background-color: rgba(255, 247, 234, 0.88);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 1px 0 rgba(69, 41, 47, 0.08), 0 16px 34px -28px rgba(69, 41, 47, 0.5);
}

.barra.menu-abierto {
  color: var(--tinta);
  background-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

.barra__interior {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.barra__marca { display: flex; align-items: center; gap: 0.75rem; }

.barra__mono { height: 42px; width: auto; transition: height var(--transicion); }
.barra.es-solida .barra__mono { height: 34px; }

.barra__nombre {
  display: block;
  font-family: var(--display);
  font-size: 0.95rem;
  line-height: 1.25;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.barra__nombre small {
  display: block;
  font-family: var(--texto);
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--rosa-hondo);
}

.menu { display: flex; align-items: center; gap: clamp(1.3rem, 2.4vw, 2.4rem); }

.menu__enlace {
  position: relative;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  padding-block: 0.4rem;
  transition: color var(--transicion);
}

.menu__enlace::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transicion);
}

.menu__enlace:hover,
.menu__enlace[aria-current='page'] { color: var(--rosa-hondo); }
.menu__enlace:hover::after,
.menu__enlace[aria-current='page']::after { transform: scaleX(1); }

.barra__cta { display: inline-flex; }
.barra__cta .boton { padding: 0.82em 1.65em; font-size: 0.72rem; }

/* hamburguesa */
.hamburguesa {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
}

.hamburguesa span {
  display: block;
  width: 26px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--transicion), opacity 180ms linear;
}
.hamburguesa span + span { margin-top: 6px; }

.hamburguesa[aria-expanded='true'] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.hamburguesa[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded='true'] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* panel móvil */
.panel {
  position: fixed;
  inset: 0;
  z-index: 99;
  background:
    radial-gradient(80% 50% at 100% 0%, rgba(239, 196, 208, 0.7), rgba(239, 196, 208, 0) 70%),
    radial-gradient(70% 40% at 0% 100%, rgba(255, 231, 207, 0.9), rgba(255, 231, 207, 0) 70%),
    var(--crema);
  padding: calc(var(--nav-alto) + 2rem) var(--gutter) 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 340ms ease, transform 340ms ease, visibility 340ms;
}

.panel.es-visible { opacity: 1; visibility: visible; transform: none; }

.panel__enlace {
  font-family: var(--display);
  font-size: clamp(2rem, 9vw, 2.8rem);
  line-height: 1.45;
  color: var(--tinta);
  border-bottom: 1px solid rgba(69, 41, 47, 0.1);
  padding-block: 0.3rem;
}
.panel__enlace[aria-current='page'] { color: var(--rosa-hondo); }

.panel__pie { margin-top: 2.4rem; }

/* ═══════════════════════════════════════════════════════════════════
   PORTADA DE INICIO: el video solo, a todo lo ancho, y el texto debajo
   ═══════════════════════════════════════════════════════════════════ */

.portada { padding-top: var(--nav-alto); }

.portada__medio {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: var(--portada-proporcion, 16 / 9);
  max-height: calc(100svh - var(--nav-alto));
  background: var(--rosa-velo);
  border-radius: 0 0 var(--radio-l) var(--radio-l);
}

.portada__medio img,
.portada__medio video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portada__medio img { animation: acercar 10s var(--suave) both; }

.portada__medio video { opacity: 0; transition: opacity 1.2s ease; }
.portada__medio video.es-lista { opacity: 1; }

@keyframes acercar {
  from { scale: 1.1; }
  to   { scale: 1; }
}

.portada__contenido {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding: clamp(2.6rem, 6vw, 4.6rem) var(--gutter) clamp(2.4rem, 5vw, 4rem);
}

.portada__titulo {
  font-size: clamp(2.5rem, 6.2vw, 5.6rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 2rem;
}

.portada__titulo span {
  display: block;
  max-width: 44ch;
  margin-top: 0.55em;
  font-size: clamp(1.18rem, 2.1vw, 1.95rem);
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--rosa-hondo);
  text-wrap: pretty;
}

.portada__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.8rem;
}

.portada__acciones .botonera { gap: 0.8rem; }

.portada__pie {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(2rem, 6vh, 3.4rem);
  padding-top: 1.1rem;
  border-top: 1px solid rgba(69, 41, 47, 0.14);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--tinta-media);
}

.portada__bajar { display: inline-flex; align-items: center; gap: 0.8rem; }

.portada__bajar::after {
  content: '';
  width: 1px;
  height: 30px;
  background: linear-gradient(currentColor, transparent);
  transform-origin: top;
  animation: bajar 2.4s var(--suave) infinite;
}

@keyframes bajar {
  0%   { transform: scaleY(0); opacity: 1; }
  60%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   CABECERA DE SUBPÁGINA: texto y ventana en arco
   ═══════════════════════════════════════════════════════════════════ */

.cabecera {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60% 70% at 88% 36%, rgba(239, 196, 208, 0.75), rgba(239, 196, 208, 0) 70%),
    radial-gradient(55% 60% at 0% 100%, rgba(255, 231, 207, 0.9), rgba(255, 231, 207, 0) 70%),
    var(--crema);
}

.cabecera__interior {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  align-items: center;
  gap: clamp(2.4rem, 6vw, 6rem);
  max-width: var(--ancho);
  min-height: min(100svh, 940px);
  margin-inline: auto;
  padding: calc(var(--nav-alto) + clamp(2rem, 4vw, 3rem)) var(--gutter) clamp(3.5rem, 7vw, 5.5rem);
}

.cabecera__texto h1 { margin-bottom: 1.5rem; }
.cabecera__texto .entrada { max-width: 44ch; margin-bottom: 2.2rem; }

/* los cuatro servicios en la cabecera de Servicios */
.pilares {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 2rem;
  max-width: 34rem;
  margin: 0 0 2.4rem;
}

.pilar { padding-top: 0.95rem; border-top: 1px solid var(--rosa-suave); }
.pilar dt { font-family: var(--display); font-size: 1.3rem; line-height: 1.2; margin-bottom: 0.4rem; }
.pilar dd { margin: 0; font-size: 0.93rem; line-height: 1.6; color: var(--tinta-media); }

.cabecera__visual {
  position: relative;
  justify-self: center;
  width: min(100%, 430px);
}

/* segundo arco, solo contorno, desplazado detrás del primero */
.cabecera__visual::before {
  content: '';
  position: absolute;
  inset: -16px 16px 16px -16px;
  border: 1px solid var(--rosa);
  border-radius: var(--radio-arco);
  opacity: 0.6;
  pointer-events: none;
}

.cabecera__arco {
  position: relative;
  isolation: isolate;
  aspect-ratio: 5 / 7;
  border-radius: var(--radio-arco);
  overflow: hidden;
  background: var(--rosa-velo);
  box-shadow: var(--sombra-rosa);
}

.cabecera__arco img,
.cabecera__arco video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cabecera__arco video { opacity: 0; transition: opacity 1.2s ease; }
.cabecera__arco video.es-lista { opacity: 1; }

/* pase de fotos en el arco del portafolio */
.cabecera__arco--pase img { opacity: 0; animation: pase 20s infinite; }
.cabecera__arco--pase img:nth-child(1) { animation-delay: -1s; }
.cabecera__arco--pase img:nth-child(2) { animation-delay: 4s; }
.cabecera__arco--pase img:nth-child(3) { animation-delay: 9s; }
.cabecera__arco--pase img:nth-child(4) { animation-delay: 14s; }

@keyframes pase {
  0%   { opacity: 0; scale: 1.08; }
  6%   { opacity: 1; }
  25%  { opacity: 1; }
  31%  { opacity: 0; scale: 1; }
  100% { opacity: 0; scale: 1; }
}

/* sello giratorio con el monograma */
.sello {
  position: absolute;
  left: -13%;
  bottom: 9%;
  width: clamp(104px, 10.5vw, 138px);
  aspect-ratio: 1;
  filter: drop-shadow(0 16px 26px rgba(69, 41, 47, 0.22));
}

.sello svg { width: 100%; height: 100%; animation: girar 32s linear infinite; }

.sello text {
  font-family: var(--texto);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  fill: var(--rosa-hondo);
}

.sello img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 38%;
  translate: -50% -50%;
}

@keyframes girar { to { rotate: 360deg; } }

/* ═══════════════════════════════════════════════════════════════════
   BLOQUES
   ═══════════════════════════════════════════════════════════════════ */

.intro { text-align: center; }
.intro h2 { margin-bottom: 1.5rem; }
.intro .entrada { max-width: 54ch; margin-inline: auto; }
.intro .enlace { margin-top: 2.3rem; }
.intro--separada { margin-bottom: clamp(2.6rem, 5vw, 4rem); }

/* cabeza de sección con controles a la derecha */
.cabeza {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(1.8rem, 3.5vw, 2.8rem);
}

.cabeza h2 { margin-bottom: 1rem; }
.cabeza .entrada { max-width: 48ch; }

.flechas { display: flex; gap: 0.7rem; flex-shrink: 0; }

.flecha {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(69, 41, 47, 0.22);
  background: rgba(255, 255, 255, 0.45);
  color: var(--tinta);
  transition: background var(--transicion), color var(--transicion),
              border-color var(--transicion), transform var(--transicion);
}

.flecha:hover { background: var(--tinta); color: var(--crema); border-color: var(--tinta); }
.flecha:active { transform: scale(0.94); }

.flecha svg,
.visor__boton svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ─── dos maneras: tarjetas de foto con panel de vidrio ─────────── */

.maneras {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.6rem, 3.4vw, 3rem);
}

.manera {
  position: relative;
  display: grid;
  isolation: isolate;
  border-radius: var(--radio-l);
}

/* marco de luz difuminado alrededor de la tarjeta (sombra, no desenfoque:
   se ve igual y el navegador la dibuja mucho más rápido) */
.manera__halo {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--radio-l);
  box-shadow: 0 0 70px 8px rgba(222, 127, 151, 0.34), 0 0 22px 2px rgba(255, 231, 207, 0.9);
  opacity: 0.75;
  transition: opacity var(--transicion), transform var(--transicion);
}

.manera__marco {
  grid-area: 1 / 1;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: var(--radio-l);
  overflow: hidden;
  background: var(--rosa-velo);
  box-shadow: var(--sombra-rosa);
}

.manera__marco img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.3s var(--suave);
}

.manera__vidrio {
  grid-area: 1 / 1;
  align-self: end;
  margin: clamp(0.75rem, 1.4vw, 1.1rem);
  padding: clamp(1.3rem, 2.4vw, 2rem);
  border-radius: calc(var(--radio-l) - 6px);
  background: var(--vidrio);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--vidrio-borde);
  box-shadow: 0 18px 40px -24px rgba(69, 41, 47, 0.45);
  transition: transform var(--transicion);
}

.manera__vidrio .rotulo { margin-bottom: 0.7rem; }
.manera__vidrio h3 { margin-bottom: 0.7rem; }
.manera__vidrio p { font-size: 0.97rem; color: var(--tinta-media); margin-bottom: 1.1rem; }

.manera__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 1.3rem;
  padding: 0;
  list-style: none;
}

.manera__lista li,
.etiquetas li {
  padding: 0.42em 0.95em;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid var(--rosa-suave);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--rosa-hondo);
}

.manera:hover .manera__marco img { transform: scale(1.06); }
.manera:hover .manera__vidrio { transform: translateY(-6px); }
.manera:hover .manera__halo { opacity: 1; transform: scale(1.015); }

/* ─── carrusel ───────────────────────────────────────────────────── */

.carrusel {
  --hueco: clamp(12px, 1.4vw, 20px);
  --borde: max(var(--gutter), calc((100% - var(--ancho)) / 2 + var(--gutter)));
  position: relative;
}

.carrusel__pista {
  display: flex;
  gap: var(--hueco);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--borde);
  padding: 14px var(--borde) 72px;
  margin-bottom: -38px;
  scrollbar-width: none;
  cursor: grab;
}

.carrusel__pista::-webkit-scrollbar { display: none; }
.carrusel__pista.es-arrastrando { cursor: grabbing; scroll-snap-type: none; }

.carrusel__item {
  position: relative;
  flex: 0 0 calc((100% - 3 * var(--hueco)) / 4);
  aspect-ratio: 4 / 5;
  border-radius: var(--radio-m);
  overflow: hidden;
  isolation: isolate;
  background: var(--rosa-velo);
  box-shadow: var(--sombra);
  scroll-snap-align: start;
  -webkit-user-drag: none;
  user-select: none;
}

.carrusel__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transition: transform 1.3s var(--suave);
}

.carrusel__item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(46, 24, 29, 0.62), rgba(46, 24, 29, 0) 48%);
}

.carrusel__etiqueta {
  position: absolute;
  z-index: 1;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.6rem;
  color: var(--crema);
}

.carrusel__etiqueta small {
  display: block;
  margin-bottom: 0.15rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rosa-suave);
}

.carrusel__etiqueta strong {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.25;
}

.carrusel__lupa {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 247, 234, 0.6);
  background: rgba(255, 247, 234, 0.16);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 1.2rem;
  line-height: 1;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity var(--transicion), transform var(--transicion);
}

.carrusel__item:hover img { transform: scale(1.06); }
.carrusel__item:hover .carrusel__lupa,
.carrusel__item:focus-visible .carrusel__lupa { opacity: 1; transform: none; }

/* ─── video destacado (se abre solo si la persona quiere) ──────── */

.cine {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(360px, 42vw, 560px);
  border-radius: var(--radio-l);
  overflow: hidden;
  isolation: isolate;
  color: var(--crema);
  background: var(--noche);
  box-shadow: var(--sombra-rosa);
}

.cine__foto {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--suave);
}

.cine::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(40, 18, 25, 0.78) 0%, rgba(40, 18, 25, 0.25) 60%, rgba(40, 18, 25, 0.05) 100%),
    linear-gradient(0deg, rgba(40, 18, 25, 0.5), rgba(40, 18, 25, 0) 55%);
}

.cine:hover .cine__foto { transform: scale(1.04); }

.cine__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  max-width: 34rem;
  padding: clamp(2rem, 4.4vw, 3.6rem);
}

.cine__texto .rotulo { margin-bottom: 0.9rem; }
.cine__nota { margin: 0.9rem 0 1.8rem; color: rgba(255, 247, 234, 0.8); }
.cine__mas { text-align: center; margin-top: 2.2rem; }

/* ─── despedida: llamada final sobre foto ───────────────────────── */

.despedida {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: calc(100% - 2 * var(--gutter));
  max-width: 1320px;
  margin: 0 auto var(--seccion);
  padding: clamp(4.5rem, 10vw, 8rem) var(--gutter);
  border-radius: var(--radio-l);
  color: var(--crema);
  text-align: center;
  box-shadow: var(--sombra-rosa);
}

.despedida__foto {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.despedida::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(90% 100% at 50% 50%, rgba(46, 22, 29, 0.5), rgba(46, 22, 29, 0.8));
}

.despedida__contenido { max-width: 640px; margin-inline: auto; }
.despedida .rotulo { color: var(--rosa-suave); }
.despedida h2 { margin-bottom: 1.2rem; }
.despedida .cita { color: var(--crema); }
.despedida .entrada { color: rgba(255, 247, 234, 0.86); max-width: 46ch; margin: 1.6rem auto 2.4rem; }
.despedida .botonera { justify-content: center; }

.cita {
  text-align: center;
  font-family: var(--display);
  font-size: clamp(1.55rem, 3.2vw, 2.55rem);
  line-height: 1.32;
  max-width: 22ch;
  margin-inline: auto;
}

/* si la cita trae dos frases, cada una va en su renglón y se reparte pareja */
.cita > span { display: block; text-wrap: balance; }

/* cita con el monograma de marca de agua, centrado detrás de la frase */
.cita-bloque .envoltura { position: relative; isolation: isolate; }

.cita-bloque .envoltura::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: min(420px, 76vw);
  aspect-ratio: 642 / 520;
  translate: -50% -50%;
  background: url('../img/monograma-rosa.png') center / contain no-repeat;
  opacity: 0.08;
  pointer-events: none;
}

/* ─── nosotros: perfil con arco ─────────────────────────────────── */

.perfil {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(3rem, 7vw, 6.5rem);
  align-items: center;
}

.perfil__fotos { position: relative; width: min(88%, 470px); margin-inline: auto; }

/* segundo arco, solo contorno, igual que en las cabeceras */
.perfil__fotos::before {
  content: '';
  position: absolute;
  inset: -16px 16px 16px -16px;
  border: 1px solid var(--rosa);
  border-radius: var(--radio-arco);
  opacity: 0.6;
  pointer-events: none;
}

.perfil__arco {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radio-arco);
  overflow: hidden;
  background: var(--rosa-velo);
  box-shadow: var(--sombra-rosa);
}

.perfil__arco img { width: 100%; height: 100%; object-fit: cover; }

.perfil__texto h2 { margin-bottom: 1.4rem; }
.perfil__texto .enlace { margin-top: 2rem; }

/* ─── nosotros: línea de tiempo ─────────────────────────────────── */

.linea {
  --hueco: clamp(1.4rem, 2.6vw, 2.4rem);
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--hueco);
  margin: clamp(3rem, 5vw, 4.4rem) 0 0;
  padding: 0;
  list-style: none;
}

/* hilo que une los números */
.linea::before {
  content: '';
  position: absolute;
  top: 26px;
  left: calc(12.5% - var(--hueco) * 3 / 8);
  right: calc(12.5% - var(--hueco) * 3 / 8);
  height: 1px;
  background: linear-gradient(90deg, var(--rosa-suave), var(--rosa) 20%, var(--rosa) 80%, var(--rosa-suave));
}

.linea__paso { position: relative; text-align: center; }

.linea__numero {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 1.6rem;
  border-radius: 50%;
  border: 1px solid var(--rosa);
  background: var(--crema);
  box-shadow: 0 0 0 7px rgba(255, 247, 234, 0.85);
  font-family: var(--display);
  font-size: 0.95rem;
  color: var(--rosa-hondo);
}

.linea__foto {
  aspect-ratio: 3 / 4;
  margin-bottom: 1.4rem;
  border-radius: var(--radio-arco);
  overflow: hidden;
  background: var(--rosa-velo);
  box-shadow: var(--sombra);
}

.linea__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--suave);
}

.linea__paso:hover .linea__foto img { transform: scale(1.05); }

.linea h3 { font-size: 1.3rem; margin-bottom: 0.6rem; }
.linea p { font-size: 0.95rem; color: var(--tinta-media); }

/* ─── zonas ──────────────────────────────────────────────────────── */

.zonas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
  margin: 2.2rem 0 0;
  padding: 0;
  list-style: none;
}

.zonas li {
  padding: 0.55em 1.2em;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--rosa-suave);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-media);
}

/* ─── servicios: vitrina con foto fija que cambia al bajar ─────── */

.vitrina {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

.vitrina--invertida .vitrina__figuras { order: 2; }

.vitrina__figuras {
  position: sticky;
  top: calc(var(--nav-alto) + 3vh);
  height: min(76vh, 720px);
  border-radius: var(--radio-arco);
  overflow: hidden;
  background: var(--rosa-velo);
  box-shadow: var(--sombra-rosa);
}

.vitrina__figura {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  scale: 1.06;
  transition: opacity 900ms var(--suave), scale 1.8s var(--suave);
}

.vitrina__figura.es-activa { opacity: 1; scale: 1; }

.vitrina__paso {
  min-height: min(76vh, 720px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 2rem;
  opacity: 0.32;
  transition: opacity 600ms var(--suave);
}

.vitrina__paso.es-activo { opacity: 1; }

.vitrina__numero {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--display);
  font-size: clamp(3.4rem, 6.5vw, 5.8rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--rosa);
}

.vitrina__paso h3 { margin-bottom: 1.1rem; }
.vitrina__paso p { color: var(--tinta-media); max-width: 46ch; }

.vitrina__movil { display: none; }

.etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

/* ─── portafolio: evento principal con mosaico ─────────────────── */

.destacado {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.destacado__texto h2 { margin-bottom: 1.4rem; }
.destacado__texto .boton { margin-top: 1.8rem; }

.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(118px, 11.5vw, 172px);
  gap: clamp(8px, 1vw, 14px);
}

.bento__item {
  position: relative;
  display: block;
  border-radius: var(--radio-m);
  overflow: hidden;
  background: var(--rosa-velo);
  box-shadow: 0 20px 40px -30px rgba(69, 41, 47, 0.5);
}

.bento__item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.bento__item:nth-child(6) { grid-column: span 2; }

.bento__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--suave);
}

.bento__item:hover img { transform: scale(1.06); }

.bento__mas {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  background: rgba(69, 41, 47, 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  color: var(--crema);
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  line-height: 1.1;
  text-align: center;
}

.bento__mas small {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--texto);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ─── portafolio: filtros y tarjetas de evento ─────────────────── */

.filtros {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.filtro {
  padding: 0.7em 1.4em;
  border-radius: 999px;
  border: 1px solid rgba(69, 41, 47, 0.2);
  background: rgba(255, 255, 255, 0.5);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--tinta-media);
  transition: background var(--transicion), color var(--transicion), border-color var(--transicion);
}

.filtro:hover { border-color: var(--rosa-hondo); color: var(--rosa-hondo); }
.filtro[aria-pressed='true'] { background: var(--tinta); border-color: var(--tinta); color: var(--crema); }

.eventos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.1rem, 2.4vw, 2rem);
}

.evento {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: var(--radio-l);
  overflow: hidden;
  isolation: isolate;
  background: var(--rosa-velo);
  box-shadow: var(--sombra);
}

.evento.es-oculto { display: none; }

.evento img {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--suave);
}

.evento__info {
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.75rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 1rem 1.15rem;
  border-radius: calc(var(--radio-l) - 8px);
  background: var(--vidrio);
  -webkit-backdrop-filter: blur(16px) saturate(115%);
  backdrop-filter: blur(16px) saturate(115%);
  border: 1px solid var(--vidrio-borde);
  transition: transform var(--transicion);
}

.evento__tipo {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rosa-hondo);
}

.evento__nombre {
  display: block;
  font-family: var(--display);
  font-size: 1.22rem;
  line-height: 1.2;
  color: var(--tinta);
}

.evento__fotos {
  flex-shrink: 0;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  white-space: nowrap;
}

.evento__fotos::after { content: ' ↗'; }

.evento:hover img { transform: scale(1.06); }
.evento:hover .evento__info { transform: translateY(-4px); }

/* ─── portafolio: videos ────────────────────────────────────────── */

.videos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.1rem, 2.4vw, 2rem);
}

.video-tarjeta {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: var(--radio-l);
  overflow: hidden;
  isolation: isolate;
  color: var(--crema);
  background: var(--noche);
  box-shadow: var(--sombra);
}

.video-tarjeta img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--suave);
}

.video-tarjeta::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(40, 18, 25, 0.8), rgba(40, 18, 25, 0) 58%);
}

.video-tarjeta__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  translate: -50% -50%;
  border-radius: 50%;
  border: 1px solid rgba(255, 247, 234, 0.65);
  background: rgba(255, 247, 234, 0.16);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: transform var(--transicion), background var(--transicion);
}

.video-tarjeta__play svg { width: 20px; height: 20px; margin-left: 4px; fill: var(--crema); }

.video-tarjeta__info { position: absolute; left: 1.3rem; right: 1.3rem; bottom: 1.2rem; }

.video-tarjeta__dur {
  display: inline-block;
  margin-bottom: 0.5rem;
  padding: 0.3em 0.75em;
  border-radius: 999px;
  background: rgba(255, 247, 234, 0.16);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.video-tarjeta__titulo { display: block; font-family: var(--display); font-size: 1.3rem; line-height: 1.2; }
.video-tarjeta__nota { display: block; margin-top: 0.2rem; font-size: 0.9rem; color: rgba(255, 247, 234, 0.8); }

.video-tarjeta:hover img { transform: scale(1.06); }
.video-tarjeta:hover .video-tarjeta__play { transform: scale(1.08); background: rgba(255, 247, 234, 0.3); }

/* ═══════════════════════════════════════════════════════════════════
   VISOR DE FOTOS Y VIDEOS
   ═══════════════════════════════════════════════════════════════════ */

.visor {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  background: rgba(30, 14, 19, 0.93);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 320ms ease, visibility 320ms;
}

.visor.es-visible { opacity: 1; visibility: visible; }

.visor__escena {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  place-items: center;
  height: 100svh;
  margin: 0;
  padding: 4.6rem 0 5.6rem;
  touch-action: pan-y;
}

.visor__escena img,
.visor__escena video {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100svh - 10.2rem);
  border-radius: 14px;
  object-fit: contain;
  background: var(--noche);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.65);
  opacity: 0;
  scale: 0.985;
  transition: opacity 380ms ease, scale 380ms var(--suave);
}

.visor__escena .es-lista { opacity: 1; scale: 1; }

.visor__boton {
  z-index: 1;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--crema);
  background: rgba(255, 247, 234, 0.1);
  border: 1px solid rgba(255, 247, 234, 0.3);
  transition: background var(--transicion), transform var(--transicion);
}

.visor__boton:hover { background: rgba(255, 247, 234, 0.24); }
.visor__boton[hidden] { display: none; }

.visor__cerrar { position: absolute; top: 1.1rem; right: 1.1rem; }
.visor__prev { grid-column: 1; grid-row: 1; margin: 0 1.2rem; }
.visor__next { grid-column: 3; grid-row: 1; margin: 0 1.2rem; }

.visor__pie {
  position: absolute;
  left: 50%;
  bottom: 1.4rem;
  width: min(92vw, 760px);
  translate: -50% 0;
  display: flex;
  justify-content: center;
  gap: 1.2rem;
  color: rgba(255, 247, 234, 0.86);
  font-size: 0.9rem;
  text-align: center;
}

.visor__contador { color: var(--rosa-suave); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ═══════════════════════════════════════════════════════════════════
   PIE, WHATSAPP Y MÚSICA
   ═══════════════════════════════════════════════════════════════════ */

.pie {
  background: var(--rosa-pie);
  color: var(--tinta);
  /* abajo queda aire para que los botones flotantes no tapen el texto */
  padding-block: clamp(3.4rem, 6vw, 5rem) 6.5rem;
  border-radius: clamp(28px, 4vw, 48px) clamp(28px, 4vw, 48px) 0 0;
}

.pie a { transition: color var(--transicion); }
.pie a:hover { color: var(--rosa-hondo); }

.pie__rejilla {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(2.2rem, 5vw, 4rem);
  padding-bottom: clamp(2.6rem, 4vw, 3.4rem);
  border-bottom: 1px solid rgba(168, 78, 103, 0.18);
}

.pie__marca img { height: 78px; width: auto; margin-bottom: 1.4rem; }
.pie__marca p { font-size: 0.94rem; color: var(--tinta-media); max-width: 34ch; }

.pie h4 {
  font-family: var(--texto);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rosa-hondo);
  margin-bottom: 1.2rem;
}

.pie ul { margin: 0; padding: 0; list-style: none; font-size: 0.95rem; }
.pie li { padding-block: 0.3rem; }
.pie .pie__direccion { padding-top: 0.8rem; font-size: 0.8rem; line-height: 1.55; color: var(--tinta-suave); }

.pie__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6rem 1.5rem;
  padding-top: 1.9rem;
  font-size: 0.8rem;
  color: var(--tinta-suave);
}

/* botón flotante de WhatsApp */
.flotante {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 90;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--tinta);
  color: var(--crema);
  box-shadow: 0 12px 30px -10px rgba(69, 41, 47, 0.5);
  transition: background var(--transicion), transform var(--transicion);
}

.flotante:hover { background: var(--rosa-hondo); transform: translateY(-3px); }
.flotante svg { width: 26px; height: 26px; fill: currentColor; }

/* botón de música */
.musica {
  position: fixed;
  left: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 90;
  height: 50px;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0 1.15rem 0 1rem;
  border-radius: 999px;
  background: rgba(255, 247, 234, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.75);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 12px 30px -14px rgba(69, 41, 47, 0.5);
  color: var(--tinta);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background var(--transicion), transform var(--transicion);
}

.musica:hover { background: var(--crema); transform: translateY(-2px); }

.musica__barras {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  width: 19px;
  height: 16px;
}

.musica__barras i {
  display: block;
  width: 3px;
  height: 45%;
  border-radius: 2px;
  background: var(--rosa-hondo);
  transition: height 300ms ease, opacity 300ms ease;
}

/* en pausa las barras se quedan quietas a distintas alturas, para que
   se lea como ecualizador; al sonar se animan */
.musica__barras i:nth-child(2) { height: 80%; }
.musica__barras i:nth-child(3) { height: 60%; }
.musica__barras i:nth-child(4) { height: 95%; }
.musica:not(.es-sonando) .musica__barras i { opacity: 0.55; }

.musica.es-sonando .musica__barras i { animation: onda 1.1s ease-in-out infinite; }
.musica.es-sonando .musica__barras i:nth-child(2) { animation-delay: -0.35s; }
.musica.es-sonando .musica__barras i:nth-child(3) { animation-delay: -0.7s; }
.musica.es-sonando .musica__barras i:nth-child(4) { animation-delay: -0.2s; }

@keyframes onda {
  0%, 100% { height: 24%; }
  50%      { height: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════
   ANIMACIÓN DE ENTRADA
   ═══════════════════════════════════════════════════════════════════ */

.revelar {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 900ms var(--suave), transform 900ms var(--suave);
}

.revelar.es-visible { opacity: 1; transform: none; }

/* sin JS todo se ve igual */
.no-js .revelar { opacity: 1; transform: none; }

/* ═══════════════════════════════════════════════════════════════════
   TABLET Y MÓVIL
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .menu { gap: 1.2rem; }
  .menu__enlace { font-size: 0.7rem; letter-spacing: 0.14em; }
}

@media (max-width: 1000px) {
  .menu, .barra__cta { display: none; }
  .hamburguesa { display: flex; }

  .cabecera__interior {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 3.2rem;
    padding-top: calc(var(--nav-alto) + 2.4rem);
  }

  .cabecera__visual { width: min(76vw, 380px); }

  .perfil,
  .destacado { grid-template-columns: 1fr; }

  .vitrina { grid-template-columns: 1fr; gap: 0; }
  .vitrina__figuras { display: none; }
  .vitrina__paso { min-height: 0; opacity: 1; padding-block: 0; }
  .vitrina__paso + .vitrina__paso { margin-top: 3.6rem; }
  .vitrina__movil {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    margin-bottom: 1.6rem;
    border-radius: var(--radio-l);
    box-shadow: var(--sombra);
  }
  .vitrina__numero { font-size: 3.2rem; }

  .carrusel__item { flex-basis: calc((100% - 2 * var(--hueco)) / 2.35); }

  .linea { grid-template-columns: repeat(2, 1fr); row-gap: 3rem; }
  .linea::before { display: none; }

  .eventos,
  .videos { grid-template-columns: repeat(2, 1fr); }

  .pie__rejilla { grid-template-columns: 1fr 1fr; }
  .pie__marca { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .maneras { grid-template-columns: 1fr; gap: 3rem; }
  .manera__marco { aspect-ratio: 4 / 3.6; }
  .manera__vidrio { grid-area: auto; margin: -4.5rem 0.9rem 0; background: rgba(255, 249, 244, 0.93); }

  .cabeza { flex-direction: column; align-items: stretch; }
  .flechas { display: none; }

  .cine { min-height: 480px; }
  .cine::after {
    background: linear-gradient(0deg, rgba(40, 18, 25, 0.86) 0%, rgba(40, 18, 25, 0.4) 55%, rgba(40, 18, 25, 0.1) 100%);
  }
}

@media (max-width: 620px) {
  body { font-size: 16px; }

  :root { --nav-alto: 74px; }

  .barra__nombre { font-size: 0.88rem; }

  .portada__titulo { margin-bottom: 1.6rem; }
  .portada__acciones { gap: 1rem; }
  .portada__acciones .botonera { width: 100%; }
  .portada__acciones .boton { flex: 1 1 auto; }
  .portada__pie { font-size: 0.64rem; }
  .portada__bajar { display: none; }

  .botonera .boton { flex: 1 1 100%; }

  .pilares { grid-template-columns: 1fr; gap: 1.1rem; }

  .carrusel__item { flex-basis: calc((100% - var(--hueco)) / 1.28); }

  .linea { grid-template-columns: 1fr; row-gap: 2.2rem; }
  .linea__paso {
    display: grid;
    grid-template-columns: 104px 1fr;
    column-gap: 1.2rem;
    text-align: left;
    align-items: start;
  }
  .linea__foto { grid-column: 1; grid-row: 1 / span 3; margin: 0; }
  .linea__numero,
  .linea__paso h3,
  .linea__paso p { grid-column: 2; }
  .linea__numero { width: 40px; height: 40px; margin: 0 0 0.7rem; font-size: 0.85rem; }

  .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 38vw; }
  .bento__item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .bento__item:nth-child(6) { grid-column: span 2; }

  .eventos,
  .videos { grid-template-columns: 1fr; }
  .evento { aspect-ratio: 4 / 4.4; }
  .video-tarjeta { aspect-ratio: 4 / 4.6; }

  .sello { left: -6%; width: 96px; }

  .despedida { padding-inline: 1.4rem; }

  .visor__escena { padding: 4.4rem 0 6.4rem; }
  .visor__escena img,
  .visor__escena video { max-height: calc(100svh - 11rem); border-radius: 10px; }
  .visor__prev,
  .visor__next { position: absolute; bottom: 1rem; margin: 0; width: 50px; height: 50px; }
  .visor__prev { left: 1rem; }
  .visor__next { right: 1rem; }
  .visor__pie { bottom: 1.6rem; width: calc(100vw - 9.5rem); flex-direction: column; gap: 0.2rem; font-size: 0.8rem; }

  .musica { height: 48px; width: 48px; padding: 0; justify-content: center; }
  .musica__texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

  .pie__rejilla { grid-template-columns: 1fr; }
  .pie__legal { flex-direction: column; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .manera__vidrio,
  .evento__info { background: rgba(255, 249, 244, 0.94); }
  .barra.es-solida { background-color: rgba(255, 247, 234, 0.97); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .revelar { opacity: 1; transform: none; transition: none; }
  .cabecera__arco--pase img { animation: none; }
  .cabecera__arco--pase img:first-child { opacity: 1; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .barra, .panel, .flotante, .musica, .visor, .hamburguesa { display: none !important; }
  body, .flujo { background: #fff; }
  .revelar { opacity: 1; transform: none; }
}