/* ==========================================================================
   Paula Lage Hair Salon & Beauty · Estilos base
   Mobile first. Puntos de corte: 768 px y 1024 px (menú en línea desde 1280 px).
   ========================================================================== */

/* ---------- Fuentes (Montserrat, subconjunto latin) ---------- */

@font-face {
  font-family: "Montserrat";
  src: url("../assets/fuentes/montserrat-latin-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Montserrat";
  src: url("../assets/fuentes/montserrat-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Montserrat";
  src: url("../assets/fuentes/montserrat-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Variables ---------- */

:root {
  /* Paleta de marca */
  --marfil: #CDB89B;
  --gris: #2C2C2C;
  --gris-logo: #3A3A3A;
  --fondo: #FAF8F5;
  --fondo-alt: #F2EDE6;
  --blanco: #FFFFFF;
  --texto-suave: #5E5A55;
  /* Marfil para TEXTO pequeño. Contraste ≥ 4,5:1 sobre --fondo, --fondo-alt y --blanco.
     #CDB89B (--marfil) no vale para texto sobre fondo claro: solo líneas, detalles y fondos. */
  --marfil-oscuro: #7C684D;

  /* Derivados (texto claro y sombras sobre el gris) */
  --texto-claro: rgb(250 248 245 / 0.78);
  --sombra-suave: 0 6px 20px rgb(44 44 44 / 0.16), 0 1px 3px rgb(44 44 44 / 0.12);
  --velo: rgb(44 44 44 / 0.08);
  --velo-claro: rgb(250 248 245 / 0.08);
  --linea-pie: rgb(205 184 155 / 0.3);

  /* Tipografía */
  --fuente: "Montserrat", "Helvetica Neue", Arial, system-ui, sans-serif;
  --texto-base: 1rem;
  --titulo-seccion: clamp(1.4rem, 1rem + 1.6vw, 2rem);

  /* Espacios. En escritorio el tope deja ~100–200 px entre el fin de una
     sección y la etiqueta de la siguiente (padding inferior + superior, curva incluida). */
  --margen: max(20px, env(safe-area-inset-left), env(safe-area-inset-right));
  --ancho-max: 1200px;
  --ancho-estrecho: 760px;
  --espacio-s: clamp(3rem, 6vw, 4.5rem);
  --espacio-m: clamp(4rem, 8vw, 5rem);
  --espacio-l: clamp(5rem, 12vw, 5.75rem);
  --espacio-seccion: var(--espacio-l);
  --altura-cabecera: 72px;
  --altura-cabecera-compacta: 56px;
  --onda: 40px;
  --radio-foto: 14px;
  /* Esquina grande de fotos orgánicas (móvil la reduce; ver media queries) */
  --radio-organico: 120px;

  /* Movimiento */
  --curva: cubic-bezier(0.22, 1, 0.36, 1);
  --duracion: 0.8s;

  /* Botón flotante */
  --flotante-tam: 56px;
  --flotante-margen: 16px;
}

/* Móvil: curva orgánica más contenida; fotos < ~200 px de ancho → 40 px */
@media (max-width: 767.98px) {
  :root {
    --radio-organico: 56px;
  }
}

/* Galería en 2 columnas: celdas por debajo de ~200 px hasta ~450 px de viewport */
@media (max-width: 449.98px) {
  .galeria__item {
    --radio-organico: 40px;
  }
}

/* Contacto: foto al 55 %; en pantallas muy estrechas queda < 200 px */
@media (max-width: 359.98px) {
  .contacto__foto {
    --radio-organico: 40px;
  }
}

/* Móviles muy estrechos: margen lateral de 16 px */
@media (max-width: 359.98px) {
  :root {
    --margen: max(16px, env(safe-area-inset-left), env(safe-area-inset-right));
  }
}

@media (min-width: 768px) {
  :root {
    --margen: max(40px, env(safe-area-inset-left), env(safe-area-inset-right));
    --onda: 80px;
  }
}

@media (min-width: 1024px) {
  :root {
    --texto-base: 1.0625rem;
  }
}

/* ---------- Base ---------- */

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

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

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--gris);
  font-family: var(--fuente);
  font-size: var(--texto-base);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
p,
ul,
ol,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

p {
  max-width: 65ch;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
}

address {
  font-style: normal;
}

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--marfil-oscuro);
  outline-offset: 3px;
}

.sin-scroll,
.sin-scroll body {
  overflow: hidden;
}

/* ---------- Utilidades ---------- */

.contenedor {
  width: min(100% - 2 * var(--margen), var(--ancho-max));
  margin-inline: auto;
}

.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.saltar {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 300;
  padding: 0.75rem 1.25rem;
  background: var(--gris);
  color: var(--fondo);
  font-size: 0.875rem;
  text-decoration: none;
  border-radius: 2px;
  transform: translateY(-200%);
}

.saltar:focus {
  transform: none;
}

.saltar:focus-visible {
  outline-color: var(--marfil);
}

.pendiente {
  display: inline-block;
  padding: 0.75rem 1rem;
  border: 1px dashed var(--marfil-oscuro);
  background: var(--blanco);
  color: var(--texto-suave);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* ---------- Tipografía de marca ---------- */

.etiqueta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
  color: var(--marfil-oscuro);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

.etiqueta__trazo {
  flex-shrink: 0;
  width: 64px;
  height: 16px;
  overflow: visible;
  color: var(--marfil);
}

/* Sin JS o con movimiento reducido el trazo se queda completo (no hay .trazo--pendiente). */
@media (prefers-reduced-motion: no-preference) {
  .js .trazo--pendiente > path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }

  .js .trazo--pendiente.trazo--dibujado > path {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.8s var(--curva);
    transition-delay: var(--retraso-trazo, 0ms);
  }
}

.etiqueta__num {
  letter-spacing: 0.25em;
}

.titulo-seccion {
  font-size: var(--titulo-seccion);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ---------- Selección de texto ---------- */

::selection {
  background: var(--marfil);
  color: var(--gris);
}

/* ---------- Botones ---------- */

.boton {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.75rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 2px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  transition: color 0.35s ease, background-color 0.35s ease, border-color 0.35s ease;
}

.boton::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--velo);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: opacity 0.3s ease, transform 0.35s ease;
  pointer-events: none;
}

.boton--cita {
  background: var(--marfil);
  color: var(--gris);
}

.boton--borde {
  border-color: var(--marfil);
  color: var(--fondo);
}

.boton--borde::after,
.boton--secundario::after,
.inicio__boton--secundario::after {
  background: var(--marfil);
  opacity: 1;
}

.boton--secundario {
  border-color: var(--gris);
  color: var(--gris);
}

@media (hover: hover) {
  .boton--cita:hover {
    background: color-mix(in srgb, var(--marfil-oscuro) 15%, var(--marfil));
  }

  .boton--cita:hover::after {
    opacity: 0;
    transform: none;
  }

  .boton--secundario:hover,
  .boton--borde:hover,
  .inicio__boton--secundario:hover {
    color: var(--gris);
  }

  .boton--secundario:hover::after,
  .boton--borde:hover::after,
  .inicio__boton--secundario:hover::after {
    transform: scaleX(1);
  }
}

/* ---------- Cabecera ---------- */

.cabecera {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--altura-cabecera);
}

/* Estados unificados vía data-estado (transparente | cristal | claro).
   transparente→cristal solo cambia opacidad (el fondo ya es oscuro): sin flash blanco. */
.cabecera:not(.sin-transicion) {
  transition: height 0.3s ease;
}

.cabecera[data-estado="cristal"],
.cabecera[data-estado="claro"] {
  height: var(--altura-cabecera-compacta);
}

.cabecera::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--fondo);
  border-bottom: 1px solid var(--marfil);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  opacity: 1;
}

.cabecera:not(.sin-transicion)::before {
  transition: opacity 0.3s ease, background-color 0.3s ease, border-bottom-color 0.3s ease, -webkit-backdrop-filter 0.3s ease, backdrop-filter 0.3s ease;
}

/* En transparente el fondo ya es el del cristal (invisible por opacity 0) */
.cabecera[data-estado="transparente"]::before {
  opacity: 0;
  background: rgb(44 44 44 / 0.35);
  border-bottom-color: rgb(255 255 255 / 0.15);
}

.cabecera[data-estado="cristal"]::before {
  opacity: 1;
  background: rgb(44 44 44 / 0.35);
  border-bottom-color: rgb(255 255 255 / 0.15);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
}

.cabecera[data-estado="claro"]::before {
  opacity: 1;
  background: var(--fondo);
  border-bottom-color: var(--marfil);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

@supports not ((-webkit-backdrop-filter: blur(14px)) or (backdrop-filter: blur(14px))) {
  .cabecera[data-estado="transparente"]::before,
  .cabecera[data-estado="cristal"]::before {
    background: rgb(44 44 44 / 0.75);
  }
}

.cabecera__progreso {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  height: 2px;
  background: rgb(255 255 255 / 0.7);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
  will-change: transform;
}

.cabecera[data-estado="claro"] .cabecera__progreso {
  background: var(--marfil-oscuro);
}

.cabecera__interior {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 100%;
}

.cabecera__logo {
  position: relative;
  z-index: 3;
  display: block;
  flex-shrink: 0;
  margin-right: auto;
  padding: 4px;
  margin-left: -4px;
  opacity: 1;
  visibility: visible;
}

.cabecera__logo img {
  width: 20px;
  height: 32px;
}

.cabecera[data-estado="transparente"] .cabecera__logo,
.cabecera[data-estado="cristal"] .cabecera__logo {
  opacity: 0;
  visibility: hidden;
}

.cabecera:not(.sin-transicion) .cabecera__logo {
  transition: opacity 0.5s ease, visibility 0s linear 0s;
}

.cabecera:not(.sin-transicion)[data-estado="transparente"] .cabecera__logo,
.cabecera:not(.sin-transicion)[data-estado="cristal"] .cabecera__logo {
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}

/* Portada oscura: hamburguesa y enlaces en blanco en transparente/cristal */
.cabecera--portada-oscura:not(.sin-transicion) .menu__boton {
  transition: color 0.3s ease;
}

.cabecera--portada-oscura[data-estado="transparente"] .menu:not(.menu--abierto) .menu__boton,
.cabecera--portada-oscura[data-estado="cristal"] .menu:not(.menu--abierto) .menu__boton {
  color: var(--blanco);
}

.cabecera--portada-oscura[data-estado="transparente"] .cabecera__cita:focus-visible,
.cabecera--portada-oscura[data-estado="transparente"] .menu:not(.menu--abierto) :focus-visible,
.cabecera--portada-oscura[data-estado="cristal"] .cabecera__cita:focus-visible,
.cabecera--portada-oscura[data-estado="cristal"] .menu:not(.menu--abierto) :focus-visible {
  outline-color: var(--blanco);
}

.cabecera__cita {
  position: relative;
  z-index: 3;
  display: none;
}

.cabecera__volver {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  padding-block: 0.75rem;
}

.cabecera__volver:hover {
  text-decoration: underline;
  text-decoration-color: var(--marfil);
  text-underline-offset: 0.4em;
}

/* ---------- Menú (móvil y tablet: panel a pantalla completa) ---------- */

.menu__boton {
  position: relative;
  z-index: 3;
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.js .menu__boton {
  display: inline-flex;
}

.menu__lineas {
  position: relative;
  display: block;
  width: 26px;
  height: 8px;
}

.menu__lineas::before,
.menu__lineas::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: transform 0.4s var(--curva);
}

.menu__lineas::before {
  top: 0;
}

.menu__lineas::after {
  bottom: 0;
}

.menu__boton[aria-expanded="true"] .menu__lineas::before {
  transform: translateY(3.5px) rotate(45deg);
}

.menu__boton[aria-expanded="true"] .menu__lineas::after {
  transform: translateY(-3.5px) rotate(-45deg);
}

.menu__panel {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  padding: calc(var(--altura-cabecera) + 2rem) var(--margen) calc(2rem + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--fondo);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--curva), visibility 0s linear 0.4s;
}

.menu--abierto .menu__panel {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s var(--curva), visibility 0s linear 0s;
}

.menu__lista {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  margin-block: auto;
  text-align: center;
}

.menu__lista li {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s var(--curva), transform 0.5s var(--curva);
}

.menu--abierto .menu__lista li {
  opacity: 1;
  transform: none;
}

.menu--abierto .menu__lista li:nth-child(2) { transition-delay: 0.03s; }
.menu--abierto .menu__lista li:nth-child(3) { transition-delay: 0.06s; }
.menu--abierto .menu__lista li:nth-child(4) { transition-delay: 0.09s; }
.menu--abierto .menu__lista li:nth-child(5) { transition-delay: 0.12s; }
.menu--abierto .menu__lista li:nth-child(6) { transition-delay: 0.15s; }
.menu--abierto .menu__lista li:nth-child(7) { transition-delay: 0.18s; }
.menu--abierto .menu__lista li:nth-child(8) { transition-delay: 0.21s; }

.menu__lista a {
  position: relative;
  display: inline-block;
  padding: 0.5rem 0.25rem;
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
}

.menu__lista a::after {
  content: "";
  position: absolute;
  left: 0.25rem;
  right: calc(0.25rem + 0.15em);
  bottom: 0.35rem;
  height: 1px;
  background: var(--marfil);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s var(--curva);
}

.menu__lista a:hover::after,
.menu__lista a:focus-visible::after,
.menu__lista a[aria-current="true"]::after {
  transform: scaleX(1);
}

.menu__cita {
  flex-shrink: 0;
  align-self: center;
  box-sizing: border-box;
  width: min(100%, 320px);
  max-width: 320px;
  margin-inline: auto;
}

.menu__cita svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.menu__pie {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.menu__telefono {
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-decoration: none;
  padding-block: 0.5rem;
}

/* ---------- Iconos de redes ---------- */

.redes {
  display: flex;
  gap: 0.5rem;
}

.redes a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  transition: opacity 0.3s ease;
}

.redes a:hover {
  opacity: 0.7;
}

.redes svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* ---------- Botón flotante de WhatsApp (solo móvil) ---------- */

.flotante {
  position: fixed;
  right: max(var(--flotante-margen), env(safe-area-inset-right));
  bottom: calc(var(--flotante-margen) + env(safe-area-inset-bottom));
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--flotante-tam);
  height: var(--flotante-tam);
  border-radius: 50%;
  background: var(--gris);
  color: var(--blanco);
  box-shadow: var(--sombra-suave);
}

.flotante svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}

.flotante:focus-visible {
  outline-color: var(--marfil);
}

.js .flotante {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.5s var(--curva), transform 0.5s var(--curva), visibility 0s linear 0.5s;
}

.js .flotante.flotante--visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition: opacity 0.5s var(--curva), transform 0.5s var(--curva), visibility 0s linear 0s;
}

/* Oculto por IntersectionObserver (carta, otro WhatsApp o pie a la vista) */
.js .flotante.flotante--tapado,
.js .flotante.flotante--visible.flotante--tapado {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.5s var(--curva), transform 0.5s var(--curva), visibility 0s linear 0.5s;
}

@media (prefers-reduced-motion: reduce) {
  .js .flotante,
  .js .flotante.flotante--visible,
  .js .flotante.flotante--tapado,
  .js .flotante.flotante--visible.flotante--tapado {
    transition: none;
  }
}

/* ---------- Secciones ---------- */

main:focus {
  outline: none;
}

section[id] {
  scroll-margin-top: var(--altura-cabecera);
}

.seccion {
  --espacio: var(--espacio-l);
  position: relative;
  background: var(--fondo);
  padding-block: var(--espacio);
}

.seccion--s { --espacio: var(--espacio-s); }
.seccion--m { --espacio: var(--espacio-m); }
.seccion--l { --espacio: var(--espacio-l); }

.seccion--alt {
  background: var(--fondo-alt);
}

/* El marcador de las secciones va sin caja. En las páginas legales se queda el recuadro. */
.seccion .pendiente {
  display: block;
  padding: 0;
  border: 0;
  background: none;
}

.seccion__encabezado {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
  margin-bottom: clamp(2.75rem, 5vw, 4.5rem);
  text-align: left;
}

.seccion__encabezado .titulo-seccion {
  max-width: 100%;
}

.seccion__cuerpo {
  text-align: left;
}

/* ---------- Servicios y precios (#servicios) ---------- */

#servicios {
  position: relative;
  /* Solo eje X: el monograma con parallax no debe recortarse arriba/abajo */
  overflow-x: clip;
  overflow-y: visible;
}

#servicios > .contenedor {
  position: relative;
  z-index: 1;
}

/* Curva de la portada: absoluta, por encima del vídeo; el solape de 2 px tapa la junta de Safari */
#servicios > .onda--portada {
  z-index: 4;
}

.servicios__intro {
  max-width: 36rem;
  margin: 0.85rem 0 0;
  color: var(--texto-suave);
  font-size: 1.15rem;
  font-weight: 300;
  line-height: 1.55;
}

/* Monograma completo arriba a la derecha (solo escritorio), sin tapar precios.
   top deja margen ≥ ±30 px de parallax bajo la curva y la cabecera. */
.servicios__monograma {
  display: none;
  pointer-events: none;
  user-select: none;
}

.servicios__monograma img {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
}

@media (min-width: 1024px) {
  .servicios__monograma {
    position: absolute;
    /* Pie de la L ≥ 40 px sobre la 1.ª fila de precios (parallax +30 incluido) */
    top: calc(var(--espacio-l) + var(--onda) + 12px);
    right: max(var(--margen), calc((100% - var(--ancho-max)) / 2));
    z-index: 0;
    display: block;
    height: 200px;
    width: auto;
    opacity: 0.06;
    transform: translate3d(0, 0, 0);
  }

  .servicios__monograma[data-parallax-servicios] {
    will-change: transform;
  }
}

.carta {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  max-width: 100%;
}

.carta__col {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  min-width: 0;
}

.carta__categoria {
  min-width: 0;
}

.carta__titulo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1.5rem;
  color: var(--marfil-oscuro);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.carta__categoria--destacada .carta__titulo {
  font-size: 1rem;
  color: var(--gris);
}

.carta__categoria--destacada .carta__trazo {
  color: var(--marfil);
}

.carta__categoria--destacada .carta__trazo path {
  stroke-width: 1.5px;
}

.carta__trazo {
  flex-shrink: 0;
  width: 64px;
  height: 16px;
  overflow: visible;
  color: var(--marfil);
}

.carta__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.carta__servicio {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.25rem;
  padding: 14px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--marfil) 22%, var(--fondo));
}

.carta__nombre {
  min-width: 0;
  color: var(--gris);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.45;
}

.carta__precio {
  flex-shrink: 0;
  color: var(--gris);
  font-weight: 500;
  line-height: 1.45;
  white-space: nowrap;
}

.carta__desde {
  font-weight: 400;
  color: var(--texto-suave);
  text-transform: none;
}

.carta__precio--consultar {
  font-style: italic;
  font-weight: 400;
  color: var(--texto-suave);
}

.carta__iva {
  margin: 2.5rem 0 1.5rem;
  color: var(--texto-suave);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.carta__cita svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: currentColor;
}

.carta__noscript {
  margin-top: 1.5rem;
  color: var(--texto-suave);
  font-size: 0.9375rem;
}

.carta__noscript a {
  color: var(--gris);
}

/* Onda entre dos fondos. El color es el de la sección que empieza. */
.onda {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  height: var(--onda);
  color: var(--fondo);
  line-height: 0;
  pointer-events: none;
  transform: translateY(calc(-100% + 2px));
  box-shadow: 0 2px 0 currentColor;
}

.seccion--alt .onda {
  color: var(--fondo-alt);
}

.pie .onda {
  color: var(--gris);
}

/* Safari deja 1 px de la sección anterior bajo el borde del SVG.
   El gráfico baja 2 px; la sección que empieza sube 1 px y tapa la junta. */
.onda__svg {
  position: absolute;
  left: 0;
  bottom: -2px;
  display: block;
  width: 100%;
  height: calc(100% + 2px);
  max-width: none;
}

.seccion:has(> .onda),
.pie:has(> .onda) {
  margin-top: -1px;
}

.onda--voltear .onda__svg {
  transform: scaleX(-1);
  transform-origin: center;
}

/* Patrón del mechón, solo en Quiénes somos y solo en una esquina. */
#nosotros {
  isolation: isolate;
  overflow-x: clip;
}

#nosotros::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 12%;
  width: min(52%, 240px);
  height: 42%;
  background: url("../assets/logo/logo-patron-textura.svg") right bottom / contain no-repeat;
  opacity: 0.07;
  pointer-events: none;
}

/* ---------- Quiénes somos (#nosotros) ---------- */

.nosotros__composicion {
  display: grid;
  grid-template-columns: minmax(0, 55%) minmax(0, 40%);
  grid-template-areas:
    "texto texto"
    "recogido boda";
  column-gap: 5%;
  row-gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: start;
  width: 100%;
  max-width: 100%;
}

.nosotros__texto {
  grid-area: texto;
  max-width: 32rem;
  margin-inline: auto;
  text-align: left;
}

.nosotros__destacada {
  margin: 0 0 1.5rem;
  color: var(--gris);
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.5;
  text-align: center;
}

.nosotros__parrafo {
  margin: 0 0 1.15rem;
  color: var(--gris);
  font-weight: 400;
  line-height: 1.65;
  text-align: left;
}

.nosotros__cierre {
  margin: 1.75rem 0 1.25rem;
  color: var(--marfil-oscuro);
  font-style: italic;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
}

.nosotros__firma {
  display: block;
  width: auto;
  height: 28px;
  margin-inline: auto;
  opacity: 0.8;
}

/* Marco exterior: radius + overflow. Sombra con filter para no recortarla.
   clip-path round asegura el recorte aunque el parallax use transform. */
.nosotros__foto {
  margin: 0;
  padding: 0;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
  background: var(--fondo-alt);
  filter: drop-shadow(0 8px 16px rgb(44 44 44 / 0.08));
}

.nosotros__foto--recogido {
  grid-area: recogido;
  border-radius: var(--radio-foto) var(--radio-foto) var(--radio-foto) var(--radio-organico);
  clip-path: inset(0 round var(--radio-foto) var(--radio-foto) var(--radio-foto) var(--radio-organico));
}

.nosotros__foto--boda {
  grid-area: boda;
  margin-top: 40px;
  border-radius: var(--radio-foto) var(--radio-foto) var(--radio-organico) var(--radio-foto);
  clip-path: inset(0 round var(--radio-foto) var(--radio-foto) var(--radio-organico) var(--radio-foto));
}

.nosotros__foto .foto {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.nosotros__parallax {
  display: block;
  width: 100%;
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  .nosotros__composicion {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "texto texto"
      "recogido boda";
    column-gap: clamp(1.25rem, 3vw, 2rem);
  }

  .nosotros__foto--boda {
    margin-top: 48px;
  }
}

@media (min-width: 1024px) {
  .nosotros__composicion {
    grid-template-columns: minmax(0, 26%) minmax(0, 32rem) minmax(0, 22%);
    grid-template-areas: "recogido texto boda";
    justify-content: space-between;
    column-gap: clamp(2rem, 4vw, 3.5rem);
    row-gap: 0.65rem;
  }

  .nosotros__texto {
    margin-inline: 0;
    width: 100%;
  }

  .nosotros__foto--boda {
    margin-top: 160px;
  }

  .nosotros__destacada {
    font-size: 1.5rem;
  }
}

/* ---------- Opiniones (#opiniones) — layout editorial ---------- */

#opiniones {
  overflow-x: clip;
}

.opiniones {
  --opiniones-autoplay: 8s;
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 5vw, 3rem);
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.opiniones__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.opiniones__encabezado {
  width: 100%;
  margin-bottom: 0;
}

.opiniones__nota {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1.25rem;
  margin: 2rem 0 0;
}

.opiniones__nota-cifra {
  margin: 0;
  color: var(--marfil-oscuro);
  font-size: clamp(4rem, 18vw, 5.5rem);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.02em;
}

.opiniones__nota-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}

.opiniones__nota-meta .opiniones__estrellas {
  gap: 0.2rem;
}

.opiniones__nota-meta .opiniones__estrellas > svg {
  width: 14px;
  height: 14px;
}

.opiniones__nota-total {
  margin: 0;
  color: var(--texto-suave);
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.35;
}

.opiniones__estrellas {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin: 0;
  color: var(--marfil);
}

.opiniones__estrellas svg {
  display: block;
  width: 12px;
  height: 12px;
  fill: currentColor;
}

/* Estrella parcial (p. ej. 80 % para 4,8): base suave + recorte del relleno */
.opiniones__estrella-parcial {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  vertical-align: middle;
  color: color-mix(in srgb, var(--marfil) 32%, var(--fondo));
}

.opiniones__estrella-parcial > svg {
  display: block;
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.opiniones__estrella-relleno {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--relleno, 80%);
  overflow: hidden;
  color: var(--marfil);
  pointer-events: none;
}

.opiniones__estrella-relleno svg {
  display: block;
  width: 14px;
  height: 14px;
  max-width: none;
  fill: currentColor;
}

.opiniones__google {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  max-width: 360px;
  margin: 1.75rem 0 0;
  padding-bottom: calc(var(--flotante-tam) + var(--flotante-margen));
}

.opiniones__google .boton {
  width: 100%;
  justify-content: center;
  text-align: center;
}

.opiniones__panel {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  min-width: 0;
}

.opiniones__visor {
  touch-action: pan-y;
  min-width: 0;
}

.opiniones__escena {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* Con JS: todas las opiniones apiladas en la misma celda (altura = la más larga) */
.js .opiniones--visor .opiniones__escena {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.js .opiniones--visor .opiniones__figura {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  pointer-events: none;
  transition: none;
}

/* Sale solo con opacidad. La siguiente no entra hasta que esta termina (lo encadena el JS). */
.js .opiniones--visor .opiniones__figura--saliendo {
  opacity: 0;
  visibility: hidden;
  transform: none;
  pointer-events: none;
}

.js .opiniones--visor .opiniones__figura--activa {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

@media (prefers-reduced-motion: no-preference) {
  .js .opiniones--visor .opiniones__figura--saliendo {
    transition: opacity 0.3s var(--curva), visibility 0s linear 0.3s;
  }

  .js .opiniones--visor .opiniones__figura--activa {
    transition: opacity 0.35s var(--curva), transform 0.35s var(--curva), visibility 0s linear 0s;
  }
}

.opiniones__figura {
  margin: 0;
  padding: 0;
  min-width: 0;
}

.opiniones__comillas {
  display: block;
  margin: 0 0 8px;
  color: var(--marfil);
  font-size: 4rem;
  font-weight: 300;
  line-height: 0.7;
  pointer-events: none;
}

.opiniones__figura blockquote {
  margin: 0;
  color: var(--gris);
  font-weight: 300;
  line-height: 1.45;
}

.opiniones__figura--corta blockquote {
  font-size: clamp(1.4rem, 2.6vw, 2rem);
}

.opiniones__figura--larga blockquote {
  font-size: clamp(1.15rem, 2vw, 1.5rem);
}

.opiniones__figura figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.75rem;
  margin-top: 1.5rem;
}

.opiniones__nombre {
  margin: 0;
  color: var(--gris);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.opiniones__servicio {
  color: var(--marfil-oscuro);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.opiniones__selector {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Tablet y escritorio: nombres → 40 px → comillas pegadas a la cita */
@media (min-width: 768px) {
  .opiniones__panel {
    gap: 0;
  }

  .opiniones__selector {
    margin: 0 0 40px;
  }
}

.opiniones__selector-item {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

.opiniones__selector-item:not(:last-child)::after {
  content: "·";
  margin-inline: 0.65rem;
  color: color-mix(in srgb, var(--texto-suave) 45%, var(--fondo));
  font-size: 0.8125rem;
  line-height: 1;
  pointer-events: none;
}

.opiniones__tab {
  position: relative;
  margin: 0;
  padding: 0.35rem 0 0.45rem;
  border: 0;
  background: none;
  color: var(--texto-suave);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1.2;
  text-transform: uppercase;
  cursor: pointer;
}

.opiniones__tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--marfil);
  transform: scaleX(0);
  transform-origin: left center;
}

.opiniones__tab[aria-pressed="true"] {
  color: var(--gris);
}

.opiniones__tab:focus-visible {
  outline: 2px solid var(--marfil-oscuro);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
  .opiniones__tab[aria-pressed="true"]::after {
    animation: opiniones-progreso var(--opiniones-autoplay) linear forwards;
  }

  .opiniones--pausado .opiniones__tab[aria-pressed="true"]::after {
    animation-play-state: paused;
  }
}

@media (prefers-reduced-motion: reduce) {
  .opiniones__tab[aria-pressed="true"]::after {
    transform: scaleX(1);
  }
}

@keyframes opiniones-progreso {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Móvil: el selector de nombres pasa a puntos táctiles */
.opiniones__puntos {
  display: none;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.opiniones__punto {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.opiniones__punto::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--marfil) 45%, var(--fondo));
}

.opiniones__punto[aria-pressed="true"]::before {
  background: var(--marfil-oscuro);
}

.opiniones__punto:focus-visible {
  outline: 2px solid var(--marfil-oscuro);
  outline-offset: 3px;
}

.opiniones__sin-js {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  margin-top: 2rem;
}

.opiniones__sin-js .opiniones__figura blockquote {
  font-size: 1.15rem;
}

@media (max-width: 767.98px) {
  .js .opiniones--visor .opiniones__selector {
    display: none;
  }

  /* Puntos encima de la cita (debajo de la nota), hueco de opiniones cortas al final */
  .js .opiniones--visor {
    gap: 0;
  }

  .js .opiniones--visor .opiniones__panel {
    display: contents;
  }

  .js .opiniones--visor .opiniones__intro {
    order: 1;
  }

  .js .opiniones--visor .opiniones__puntos {
    display: flex;
    order: 2;
    margin-top: 20px;
  }

  .js .opiniones--visor .opiniones__visor {
    order: 3;
    margin-top: 1.75rem;
  }

  .js .opiniones--visor .opiniones__google {
    order: 4;
    margin-top: clamp(2rem, 5vw, 3rem);
  }
}

@media (min-width: 768px) {
  .js .opiniones--visor .opiniones__puntos {
    display: none;
  }
}

@media (min-width: 768px) {
  .opiniones__google {
    max-width: none;
    width: auto;
    padding-bottom: 0;
  }

  .opiniones__google .boton {
    width: auto;
  }
}

@media (min-width: 1024px) {
  .opiniones {
    display: grid;
    grid-template-columns: minmax(0, 0.34fr) minmax(0, 0.66fr);
    grid-template-areas:
      "intro panel"
      "google panel";
    column-gap: clamp(2.5rem, 5vw, 5rem);
    row-gap: 0;
    align-items: start;
  }

  .opiniones__intro {
    grid-area: intro;
  }

  .opiniones__panel {
    grid-area: panel;
  }

  .opiniones__google {
    grid-area: google;
    margin-top: 2rem;
    padding-bottom: 0;
  }

  /* Nombres a la altura del h2 (bajo la etiqueta 05 + su margen) */
  .opiniones__selector {
    margin-top: calc(16px + 0.85rem);
  }

  /* Cifra 4,8 ≈ a la altura del texto: 40 px + comillas (line-height 0.7 × 4rem) + 8 px */
  .opiniones__nota {
    flex-direction: column;
    align-items: flex-start;
    margin-top: calc(40px + 2.8rem + 8px);
  }

  .opiniones__nota-cifra {
    font-size: clamp(4.5rem, 9vw, 7.5rem);
  }
}

/* ---------- Dónde estamos (#ubicacion) ---------- */

/* Mismo fondo que #opiniones y sin onda entre medias: la suma de paddings
   no debe duplicar un --espacio-m entero, pero en escritorio se queda en ~140 px. */
#opiniones.seccion--m {
  padding-bottom: calc(var(--espacio-m) / 2);
}

#ubicacion {
  overflow-x: clip;
  padding-top: calc(var(--espacio-m) / 2);
}

#ubicacion .seccion__encabezado {
  margin-bottom: 48px;
}

.ubicacion {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 5vw, 3rem);
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.ubicacion__info {
  min-width: 0;
}

.ubicacion__direccion {
  display: block;
  margin: 0 0 1.25rem;
  font-style: normal;
}

.ubicacion__calle {
  display: block;
  color: var(--gris);
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1.35;
}

.ubicacion__ciudad {
  display: block;
  margin-top: 0.25rem;
  color: var(--texto-suave);
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1.35;
}

.ubicacion__estado {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 1.5rem;
  color: var(--gris);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.4;
}

.ubicacion__estado:empty {
  display: none;
  margin: 0;
}

.ubicacion__estado-punto {
  flex-shrink: 0;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--texto-suave);
}

.ubicacion__estado--abierto .ubicacion__estado-punto {
  background: #7FA37A;
}

.ubicacion__estado--abre-hoy .ubicacion__estado-punto {
  background: var(--marfil);
}

.ubicacion__estado--cerrado .ubicacion__estado-punto {
  background: var(--texto-suave);
}

.ubicacion__horario {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ubicacion__horario-fila {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.25rem;
  padding: 12px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--marfil) 22%, var(--fondo));
  color: var(--gris);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.45;
}

.ubicacion__horario-fila--cerrado {
  color: var(--texto-suave);
  font-size: 0.9em;
}

.ubicacion__horario-dias {
  min-width: 0;
}

.ubicacion__horario-horas {
  flex-shrink: 0;
  white-space: nowrap;
}

.ubicacion__horario-fila:not(.ubicacion__horario-fila--cerrado) .ubicacion__horario-horas {
  font-weight: 500;
}

/* La clase --hoy solo la pone el JS; sin JS la lista se ve sin resaltado */
.ubicacion__horario-fila.ubicacion__horario--hoy {
  padding-left: 1rem;
}

.ubicacion__horario-fila.ubicacion__horario--hoy .ubicacion__horario-dias {
  font-weight: 500;
  color: var(--gris);
}

.ubicacion__horario-fila.ubicacion__horario--hoy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 2px;
  height: 12px;
  background: var(--marfil);
  transform: translateY(-50%);
}

.ubicacion__aviso {
  margin: 0.85rem 0 0;
  color: var(--texto-suave);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.ubicacion__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
  padding-right: calc(var(--flotante-tam) + var(--flotante-margen));
}

.ubicacion__acciones .boton {
  flex: 1 1 auto;
}

.ubicacion__visual {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
}

.ubicacion__mapa-bloque {
  position: relative;
  min-width: 0;
  width: 100%;
  height: 100%;
  padding-top: 0;
  padding-right: 0;
  overflow: visible;
}

#ubicacion {
  overflow-x: clip;
}

/* Móvil: sello entero dentro del mapa (arriba derecha), dentro del margen */
.ubicacion__sello {
  position: absolute;
  top: 12px;
  right: 12px;
  left: auto;
  z-index: 5;
  width: 64px;
  height: 64px;
  transform: none;
  pointer-events: none;
}

.ubicacion__sello-giro {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  will-change: transform;
}

.ubicacion__sello-fondo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--fondo);
  box-shadow: 0 4px 14px rgb(44 44 44 / 0.08);
}

.ubicacion__sello-img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Curva orgánica arriba a la derecha. El iframe se desplaza para ocultar
   los controles +/− de arriba y la franja de créditos de abajo de OSM. */
.ubicacion__mapa.foto {
  --mapa-recorte-sup: 110px;
  /* Franja de atribución OSM (barra inferior del embed) */
  --mapa-recorte-inf: 72px;
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  overflow: hidden;
  isolation: isolate;
  background: var(--fondo-alt);
  border-radius: var(--radio-foto) var(--radio-organico) var(--radio-foto) var(--radio-foto);
  clip-path: inset(0 round var(--radio-foto) var(--radio-organico) var(--radio-foto) var(--radio-foto));
  filter: drop-shadow(0 8px 16px rgb(44 44 44 / 0.08));
  box-shadow: none;
}

.ubicacion__iframe {
  position: absolute;
  left: 0;
  top: calc(-1 * var(--mapa-recorte-sup));
  display: block;
  width: 100%;
  height: calc(100% + var(--mapa-recorte-sup) + var(--mapa-recorte-inf));
  max-width: none;
  margin: 0;
  border: 0;
  transform: none;
  filter: grayscale(1) sepia(0.25) contrast(0.95) brightness(1.03);
}

/* Pastilla centrada (móvil); desaparece al tocar (.ubicacion__mapa--activo) */
.ubicacion__mapa-activar {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  display: block;
  width: max-content;
  max-width: calc(100% - 2rem);
  margin: 0;
  padding: 0.45rem 0.85rem;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fondo) 90%, transparent);
  color: var(--gris);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.3;
  text-transform: none;
  cursor: pointer;
  transform: translate(-50%, -50%);
}

.ubicacion__mapa:not(.ubicacion__mapa--activo) .ubicacion__iframe {
  pointer-events: none;
}

.ubicacion__mapa--activo .ubicacion__mapa-activar {
  display: none;
}

.ubicacion__creditos {
  margin: 0.55rem 0 0;
  padding: 0;
  color: var(--texto-suave);
  font-size: 0.75rem;
  line-height: 1.4;
  text-align: right;
}

.ubicacion__creditos a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--texto-suave) 35%, transparent);
  text-underline-offset: 0.15em;
}

.ubicacion__creditos a:hover {
  text-decoration-color: var(--texto-suave);
}

@media (min-width: 768px) {
  .ubicacion__acciones {
    padding-right: 0;
  }

  .ubicacion__acciones .boton {
    flex: 0 1 auto;
  }

  .ubicacion__mapa-bloque {
    padding-top: 44px;
    padding-right: 44px;
  }

  /* Tablet+: sello centrado en la esquina superior derecha (mitad dentro / fuera) */
  .ubicacion__sello {
    top: 44px;
    right: 44px;
    left: auto;
    width: 88px;
    height: 88px;
    transform: translate(50%, -50%);
  }
}

@media (min-width: 1024px) {
  .ubicacion {
    display: grid;
    grid-template-columns: minmax(0, 42%) minmax(0, 58%);
    column-gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
  }

  .ubicacion__visual,
  .ubicacion__mapa-bloque {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: auto;
  }

  .ubicacion__mapa-bloque {
    padding-top: 60px;
    /* Sin padding-right: el mapa alinea su borde derecho con la columna;
       el sello sobresale a la derecha (overflow visible del bloque). */
    padding-right: 0;
  }

  /* 8/7 ≈ altura de dirección + 7 días + botones (4/5 y 1/1 quedaban altos) */
  .ubicacion__mapa.foto {
    width: 100%;
    height: auto;
    aspect-ratio: 8 / 7;
  }

  .ubicacion__sello {
    top: 60px;
    right: 0;
    left: auto;
    width: 120px;
    height: 120px;
    transform: translate(50%, -50%);
  }

  .ubicacion__mapa-activar {
    display: none;
  }

  .ubicacion__mapa .ubicacion__iframe {
    pointer-events: auto;
  }
}

/* ---------- Contacto (#contacto) ---------- */

#contacto {
  overflow-x: clip;
  padding-bottom: var(--espacio-m);
}

#contacto .seccion__encabezado {
  margin-bottom: 32px;
}

.contacto {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 5vw, 3rem);
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.contacto__info {
  min-width: 0;
}

.contacto__frase {
  margin: 0 0 1rem;
  color: var(--gris);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 300;
  line-height: 1.2;
}

.contacto__texto {
  margin: 0 0 1.75rem;
  max-width: 520px;
  color: var(--texto-suave);
  font-weight: 400;
  line-height: 1.6;
}

.contacto__whatsapp {
  width: 100%;
  max-width: 420px;
  min-height: 52px;
  padding-block: 0.95rem;
  font-size: 0.8125rem;
}

.contacto__whatsapp svg {
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  fill: currentColor;
}

.contacto__canales {
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  max-width: 520px;
}

.contacto__canales li {
  border-bottom: 1px solid color-mix(in srgb, var(--marfil) 22%, var(--fondo-alt));
}

.contacto__canal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.25rem;
  padding: 14px 0;
  color: var(--gris);
  text-decoration: none;
}

.contacto__canal-etiqueta {
  flex-shrink: 0;
  color: var(--marfil-oscuro);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.contacto__canal-dato {
  min-width: 0;
  color: var(--gris);
  font-weight: 400;
  line-height: 1.45;
  text-align: right;
  transition: color 0.25s ease, font-weight 0.25s ease;
}

.contacto__canal-dato::after {
  content: " →";
  color: var(--marfil-oscuro);
  opacity: 0;
  transition: opacity 0.25s ease;
}

/* Móvil estrecho: etiqueta arriba, dato debajo (Facebook no se parte en dos columnas) */
@media (max-width: 479.98px) {
  .contacto__canal {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }

  .contacto__canal-dato {
    width: 100%;
    text-align: left;
  }
}

@media (hover: hover) and (pointer: fine) {
  .contacto__canal:hover .contacto__canal-dato {
    color: var(--gris);
    font-weight: 500;
  }

  .contacto__canal:hover .contacto__canal-dato::after {
    opacity: 1;
  }
}

/* Marco exterior (curva orgánica invertida); cortina recorta el img interior. */
.contacto__foto {
  margin: 0;
  padding: 0;
  width: 55%;
  max-width: 55%;
  margin-left: auto;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radio-foto) var(--radio-foto) var(--radio-organico) var(--radio-foto);
  clip-path: inset(0 round var(--radio-foto) var(--radio-foto) var(--radio-organico) var(--radio-foto));
  background: var(--fondo-alt);
  filter: drop-shadow(0 8px 16px rgb(44 44 44 / 0.08));
}

.contacto__foto .foto {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  filter: sepia(0.12) brightness(0.98);
}

@media (min-width: 1024px) {
  .contacto {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, min(30%, 340px));
    column-gap: clamp(2rem, 4vw, 3.5rem);
    /* Alinea el borde inferior de la foto con la última fila de canales */
    align-items: end;
  }

  .contacto__foto {
    width: 100%;
    max-width: 340px;
    margin-left: 0;
    margin-top: 0;
    justify-self: end;
  }
}

/* Fotos de la galería y de los comparadores de #trabajos. */
.foto {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radio-foto);
  background: var(--fondo-alt);
  box-shadow: 0 8px 22px rgb(44 44 44 / 0.05);
}

.foto--organica {
  border-radius: var(--radio-foto) var(--radio-foto) var(--radio-foto) var(--radio-organico);
}

.foto--organica-inv {
  border-radius: var(--radio-foto) var(--radio-foto) var(--radio-organico) var(--radio-foto);
}

.galeria {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

.galeria__item:nth-child(even) {
  margin-top: 16px;
}

.galeria__item--cuadrado .foto {
  aspect-ratio: 1 / 1;
}

.galeria__item {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--fondo-alt);
  color: inherit;
  cursor: zoom-in;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radio-foto);
  clip-path: inset(0 round var(--radio-foto));
  filter: drop-shadow(0 8px 16px rgb(44 44 44 / 0.08));
}

.galeria__item:has(.foto--organica) {
  border-radius: var(--radio-foto) var(--radio-foto) var(--radio-foto) var(--radio-organico);
  clip-path: inset(0 round var(--radio-foto) var(--radio-foto) var(--radio-foto) var(--radio-organico));
}

.galeria__item:has(.foto--organica-inv) {
  border-radius: var(--radio-foto) var(--radio-foto) var(--radio-organico) var(--radio-foto);
  clip-path: inset(0 round var(--radio-foto) var(--radio-foto) var(--radio-organico) var(--radio-foto));
}

.galeria__item .foto {
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .galeria__item .foto {
    transition: transform 0.6s var(--curva);
  }

  .galeria__item:hover .foto {
    transform: scale(1.03);
  }
}

/* ---------- Trabajos (#trabajos) ---------- */

.trabajos__subtitulo {
  margin: clamp(4rem, 8vw, 6.5rem) 0 1.5rem;
  color: var(--marfil-oscuro);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

/* ---------- Productos (#productos) ---------- */

.productos {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 5vw, 3rem);
}

.productos__texto .seccion__encabezado {
  margin-bottom: 1.75rem;
}

.productos__marca {
  margin-bottom: 1.25rem;
  font-size: 0.8125rem;
}

.productos__parrafo {
  max-width: 42ch;
  margin-bottom: 1rem;
  line-height: 1.7;
}

.productos__nota {
  max-width: 42ch;
  margin-bottom: 1.75rem;
  color: var(--texto-suave);
  line-height: 1.7;
}

.productos__marco {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  isolation: isolate;
  /* .foto--organica-inv aporta el radio; clip-path round fija la forma con cortina */
  clip-path: inset(0 round var(--radio-foto) var(--radio-foto) var(--radio-organico) var(--radio-foto));
  filter: drop-shadow(0 8px 16px rgb(44 44 44 / 0.08));
  box-shadow: none;
}

.productos__marco .productos__imagen,
.productos__marco picture {
  display: block;
  width: 100%;
  height: 100%;
}

.productos__imagen,
.productos__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.productos__video {
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}

.productos__video--activo {
  opacity: 1;
}

/* ---------- Catálogo de productos (pestañas) ---------- */

.productos__catalogo {
  margin-top: clamp(3rem, 7vw, 5.5rem);
}

.productos__subtitulo {
  margin: 0 0 0.65rem;
  color: var(--marfil-oscuro);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.productos__ayuda {
  margin: 0 0 1.75rem;
  color: var(--texto-suave);
  font-size: 0.85rem;
  line-height: 1.5;
}

.productos__noscript {
  margin-top: 1.5rem;
  color: var(--texto-suave);
  font-size: 0.9375rem;
}

.productos__noscript a {
  color: var(--gris);
}

.productos__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.productos__vistazo {
  min-width: 0;
}

.productos__vistazo[hidden] {
  display: none;
}

.productos__vistazo-marco {
  position: relative;
  aspect-ratio: 4 / 3;
  width: min(100%, calc(260px * 4 / 3));
  max-height: 260px;
  overflow: hidden;
  isolation: isolate;
  clip-path: inset(0 round var(--radio-foto) var(--radio-foto) var(--radio-foto) var(--radio-organico));
  filter: drop-shadow(0 8px 16px rgb(44 44 44 / 0.08));
  box-shadow: none;
}

.productos__vistazo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.productos__vistazo-img--visible {
  opacity: 1;
}

.productos__derecha {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

/* En móvil, los hijos de .productos__derecha participan del flex del cuerpo
   para poder intercaler la foto entre pestañas y panel. */
.productos__catalogo--pestanas .productos__derecha {
  display: contents;
}

.productos__contenido {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

.productos__pestanas-wrap {
  position: relative;
  min-width: 0;
}

.productos__pestanas-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 2.5rem;
  background: linear-gradient(to right, transparent, var(--fondo));
  pointer-events: none;
}

.productos__pestanas {
  display: flex;
  gap: 0.25rem 1.25rem;
  margin: 0;
  padding: 0 2.5rem 0 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  list-style: none;
}

.productos__pestanas::-webkit-scrollbar {
  display: none;
}

.productos__pestana {
  position: relative;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0.55rem 0.15rem 0.7rem;
  border: 0;
  background: transparent;
  color: var(--texto-suave);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  scroll-snap-align: start;
}

.productos__pestana::after {
  content: "";
  position: absolute;
  left: 0.15rem;
  right: 0.15rem;
  bottom: 0.35rem;
  height: 1px;
  background: var(--marfil);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s var(--curva);
}

.productos__pestana[aria-selected="true"] {
  color: var(--gris);
}

.productos__pestana[aria-selected="true"]::after,
.productos__pestana:hover::after,
.productos__pestana:focus-visible::after {
  transform: scaleX(1);
}

.productos__panel {
  min-width: 0;
}

.productos__panel[hidden] {
  display: none;
}

.productos__panel--entrar {
  animation: productos-panel-entrar 0.35s var(--curva) both;
}

.productos__panel-titulo {
  margin: 0 0 0.85rem;
  color: var(--marfil-oscuro);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.productos__panel-foto {
  margin: 0 0 1.25rem;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radio-foto) var(--radio-foto) var(--radio-foto) var(--radio-organico);
  clip-path: inset(0 round var(--radio-foto) var(--radio-foto) var(--radio-foto) var(--radio-organico));
  background: var(--fondo-alt);
  filter: drop-shadow(0 8px 16px rgb(44 44 44 / 0.08));
}

.productos__panel-foto .foto,
.productos__panel-foto img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.productos__panel-desc {
  max-width: 40ch;
  margin: 0 0 1.25rem;
  color: var(--gris);
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.55;
}

.productos__etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.productos__etiqueta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid var(--marfil);
  border-radius: 999px;
  background: transparent;
  color: var(--gris);
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.productos__etiqueta:hover,
.productos__etiqueta:focus-visible {
  background: var(--marfil);
  color: var(--gris);
}

.productos__mas {
  margin: 1.5rem 0 0;
  color: var(--texto-suave);
  font-size: 0.85rem;
  line-height: 1.5;
}

/* Modo pestañas: la foto del panel se oculta (pasa al vistazo sticky) */
.productos__catalogo--pestanas .productos__panel-titulo,
.productos__catalogo--pestanas .productos__panel-foto {
  display: none;
}

/* Móvil: pestañas → foto → panel (aunque en el DOM la foto va antes) */
.productos__catalogo--pestanas .productos__pestanas-wrap { order: 1; }
.productos__catalogo--pestanas .productos__vistazo { order: 2; }
.productos__catalogo--pestanas .productos__contenido { order: 3; }

@keyframes productos-panel-entrar {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

  .productos__panel--entrar {
    animation: none;
  }

  .productos__pestana::after {
    transition: none;
  }

  .productos__etiqueta {
    transition: none;
  }
}

@media (min-width: 1024px) {
  .productos {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 58%);
    justify-content: space-between;
    align-items: start;
    column-gap: clamp(3rem, 8vw, 6.5rem);
  }

  .productos__medio {
    width: 100%;
    margin-top: 64px;
  }

  .productos__catalogo--pestanas .productos__cuerpo {
    display: grid;
    /* La foto va en la 2.ª pista (order: 2). La 1.ª, más ancha, es de pestañas y productos. */
    grid-template-columns: minmax(0, 1fr) min(32%, 380px);
    align-items: start;
    column-gap: clamp(1.75rem, 3vw, 3rem);
    row-gap: 0;
  }

  .productos__catalogo--pestanas .productos__derecha {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 0;
  }

  .productos__catalogo--pestanas .productos__vistazo {
    position: sticky;
    top: calc(var(--altura-cabecera) + 24px);
    width: 100%;
    max-width: 380px;
  }

  .productos__catalogo--pestanas .productos__vistazo-marco {
    aspect-ratio: 4 / 5;
    width: 100%;
    max-width: 380px;
    max-height: none;
  }

  .productos__pestanas-wrap::after {
    display: none;
  }

  .productos__pestanas {
    flex-wrap: nowrap;
    overflow: visible;
    scroll-snap-type: none;
    padding-right: 0;
  }
}

.antes-despues:empty {
  display: none;
}

.antes-despues__lista {
  display: grid;
  gap: clamp(2.25rem, 5vw, 3.5rem);
}

.antes-despues__item {
  min-width: 0;
}

.comparar {
  --pos: 50%;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  clip-path: inset(0 round var(--radio-foto));
  filter: drop-shadow(0 8px 16px rgb(44 44 44 / 0.08));
  box-shadow: none;
}

.comparar__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  border-radius: 0;
}

.comparar__img--despues {
  clip-path: inset(0 0 0 var(--pos));
}

.comparar__linea {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  z-index: 1;
  width: 2px;
  background: var(--blanco);
  transform: translateX(-50%);
  pointer-events: none;
}

.comparar__asa {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--blanco);
  color: var(--gris);
  transform: translate(-50%, -50%);
}

.comparar__marca {
  position: absolute;
  bottom: 0.65rem;
  z-index: 1;
  padding: 0.35rem 0.55rem;
  background: color-mix(in srgb, var(--blanco) 85%, transparent);
  color: var(--gris);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  pointer-events: none;
}

.comparar__marca--antes {
  left: 0.65rem;
}

.comparar__marca--despues {
  right: 0.65rem;
}

.comparar__rango {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  background: transparent;
  cursor: ew-resize;
  appearance: none;
  -webkit-appearance: none;
  touch-action: pan-y;
}

.comparar__rango::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  appearance: none;
  height: 100%;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.comparar__rango::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 44px;
  height: 100%;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.comparar__rango::-moz-range-track {
  height: 100%;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.comparar__rango::-moz-range-thumb {
  appearance: none;
  width: 44px;
  height: 100%;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.comparar__rango:focus {
  outline: none;
}

/* El input está invisible (opacity: 0); el foco de teclado se ve en el asa */
.comparar:has(.comparar__rango:focus-visible) .comparar__asa {
  outline: 2px solid var(--marfil-oscuro);
  outline-offset: 3px;
}

.comparar__titulo {
  margin-top: 0.9rem;
  color: var(--marfil-oscuro);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.trabajos__instagram {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  max-width: none;
  margin-top: clamp(3rem, 6vw, 4.5rem);
}

.trabajos__instagram .boton {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  text-align: center;
}

/* ---------- Visor de fotos ---------- */

.visor {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--blanco);
  touch-action: none;
}

.visor::backdrop {
  background: color-mix(in srgb, var(--gris) 92%, transparent);
}

.visor[open] {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  overflow: hidden;
}

.visor__foto {
  width: auto;
  height: auto;
  max-width: 90vw;
  max-height: 85vh;
  max-height: 85dvh;
  object-fit: contain;
  border-radius: var(--radio-foto);
}

.visor__cerrar,
.visor__nav {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--blanco);
  cursor: pointer;
}

.visor__cerrar {
  top: max(0.75rem, env(safe-area-inset-top));
  right: max(0.75rem, env(safe-area-inset-right));
}

.visor__nav--anterior {
  top: 50%;
  left: max(0.5rem, env(safe-area-inset-left));
  transform: translateY(-50%);
}

.visor__nav--siguiente {
  top: 50%;
  right: max(0.5rem, env(safe-area-inset-right));
  transform: translateY(-50%);
}

.visor__cerrar:hover,
.visor__nav:hover {
  background: color-mix(in srgb, var(--blanco) 14%, transparent);
}

.visor :focus-visible {
  outline-color: var(--blanco);
}

html.visor-abierto,
html.visor-abierto body {
  overflow: hidden;
}

html.visor-abierto .flotante,
html.visor-abierto.js .flotante.flotante--visible {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

/* ---------- Portada (#inicio) ----------
   La única parte simétrica de la web. La curva vive en #servicios (.onda--portada):
   sobresale hacia arriba sobre el vídeo; así ningún hueco de Safari muestra el velo. */

.inicio {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(var(--altura-cabecera) + 32px);
  /* Aire bajo el contenido + hueco para la curva de Servicios */
  padding-bottom: max(1.5rem, calc(var(--onda) + 1.25rem));
  padding-bottom: max(clamp(1.5rem, 4svh, 3rem), calc(var(--onda) + 1.25rem));
  background: var(--fondo);
  text-align: center;
}

/* Fondo a sangre: imagen fija (siempre) y vídeo encima (solo si js/main.js lo carga y arranca).
   El overflow vive aquí (no en .inicio) para que la onda de Servicios pueda
   pintar por encima del borde inferior sin que el vídeo se escape. */
.inicio__fondo {
  position: absolute;
  inset: 0 0 2px 0;
  z-index: 0;
  overflow: hidden;
  overflow: clip;
  pointer-events: none;
}

.inicio__medio {
  position: absolute;
  inset: 0;
}

.inicio__imagen,
.inicio__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.inicio__video {
  opacity: 0;
  transition: opacity 0.8s ease;
}

.inicio__video--activo {
  opacity: 1;
}

/* Velo encima del vídeo */
.inicio__fondo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--velo-color);
  opacity: var(--velo-opacidad);
}

/* El scale(1.08) evita que se vean los bordes al moverse con el parallax */
.inicio--parallax .inicio__medio {
  transform: scale(1.08);
  will-change: transform;
}

/* ---------- Portada: velo y variantes ----------
   La variante se elige con una clase en <section id="inicio">: portada--clara o portada--oscura.
   --velo-opacidad es el mínimo para que el subtítulo llegue a 4,5:1 sobre el píxel más
   oscuro (clara) o más claro (oscura) del vídeo: no bajarlo. */

.inicio,
.portada--clara {
  --velo-color: var(--fondo);
  --velo-opacidad: 0.85;
  --logo-nombre: var(--gris-logo);
  --logo-monograma: var(--gris);
  --logo-sello: var(--marfil);
  --logo-lema: var(--marfil);
}

.portada--oscura {
  --velo-color: var(--gris);
  --velo-opacidad: 0.7;
  --logo-nombre: var(--blanco);
  --logo-monograma: var(--blanco);
}

.portada--oscura .inicio__titulo {
  color: var(--blanco);
}

.portada--oscura .inicio__subtitulo {
  color: var(--fondo-alt);
}

.portada--oscura .inicio__boton--secundario {
  border-color: var(--blanco);
  color: var(--blanco);
}

.portada--oscura .inicio__boton--secundario::after {
  background: var(--marfil);
  opacity: 1;
}

.portada--oscura :focus-visible {
  outline-color: var(--blanco);
}

.inicio__contenido {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.inicio__marca {
  margin-bottom: 2rem;
  margin-bottom: clamp(1.5rem, 5svh, 3.5rem);
}

.logo-portada {
  display: block;
  width: auto;
  height: clamp(180px, 34vh, 380px);
  height: clamp(180px, 34svh, 380px);
  aspect-ratio: 384 / 551;
}

.logo-portada__nombre {
  fill: var(--logo-nombre);
}

.logo-portada__monograma {
  fill: var(--logo-monograma);
}

.logo-portada__sello {
  fill: var(--logo-sello);
}

.logo-portada__lema {
  fill: var(--logo-lema);
}

/* Gira sobre su propio centro (el del anillo) */
.logo-portada__sello {
  transform-box: fill-box;
  transform-origin: center;
}

/* Texto y botones por encima del logo cuando el parallax lo desplaza */
.inicio__titulo,
.inicio__subtitulo,
.inicio__acciones {
  position: relative;
  z-index: 1;
}

.inicio__titulo {
  max-width: 20ch;
  font-size: clamp(1.6rem, 4.5vw, 2.6rem);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-wrap: balance;
}

.inicio__subtitulo {
  max-width: 34rem;
  margin-top: 1rem;
  margin-top: clamp(0.875rem, 2svh, 1.25rem);
  color: var(--texto-suave);
  font-size: 1rem;
  line-height: 1.7;
  text-wrap: pretty;
}

.inicio__acciones {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  max-width: 360px;
  margin-top: 1.75rem;
  margin-top: clamp(1.5rem, 4svh, 2.5rem);
}

.inicio__boton {
  min-height: 48px;
  padding-inline: 1.25rem;
}

/* Pantallas muy estrechas (320 px): que "Pedir cita por WhatsApp" quepa en una línea */
@media (max-width: 359.98px) {
  .inicio__boton {
    padding-inline: 0.75rem;
    letter-spacing: 0.12em;
  }
}

/* Móviles muy bajos (320×568): más compacta y logo algo menor, para que el botón flotante no pise los botones al aparecer */
@media (max-width: 767.98px) and (max-height: 620px) {
  .inicio__marca {
    margin-bottom: 1rem;
  }

  .logo-portada {
    height: clamp(150px, 28svh, 380px);
  }

  .inicio__titulo {
    line-height: 1.25;
  }

  .inicio__subtitulo {
    margin-top: 0.625rem;
    line-height: 1.6;
  }

  .inicio__acciones {
    gap: 0.625rem;
    margin-top: 1.25rem;
  }
}

.inicio__boton svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.inicio__boton--secundario {
  border-color: var(--gris);
  color: var(--gris);
}

.inicio__boton--secundario::after {
  background: var(--marfil);
  opacity: 1;
}

/* Indicador de scroll: en el flujo, ≥ 32 px bajo los botones */
.inicio__descubre {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  margin-top: 2rem;
  color: rgb(255 255 255 / 0.8);
  text-decoration: none;
  opacity: 1;
  transition: opacity 0.4s ease;
}

.inicio__descubre--oculto,
.inicio__descubre--sin-espacio {
  opacity: 0;
  pointer-events: none;
}

.inicio__descubre--sin-espacio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

.inicio__descubre-texto {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
}

.inicio__descubre-linea {
  position: relative;
  display: block;
  width: 1px;
  height: 40px;
  background: rgb(255 255 255 / 0.35);
  overflow: hidden;
}

.inicio__descubre-punto {
  position: absolute;
  left: 0;
  top: -8px;
  width: 1px;
  height: 10px;
  background: var(--blanco);
}

@media (prefers-reduced-motion: no-preference) {
  .inicio__descubre-punto {
    animation: descubre-bajar 2s ease-in-out infinite;
  }
}

@keyframes descubre-bajar {
  0% { transform: translateY(0); opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateY(48px); opacity: 0; }
}

.inicio--parallax .inicio__logo {
  will-change: transform, opacity;
}

/* Entrada al cargar. La clase .inicio-entrada la pone el script del <head>.
   Son animaciones CSS: siempre terminan visibles. */
@media (prefers-reduced-motion: no-preference) {
  .inicio-entrada .logo-portada {
    animation: inicio-logo 0.9s var(--curva) both;
  }

  .inicio-entrada .inicio__titulo,
  .inicio-entrada .inicio__subtitulo,
  .inicio-entrada .inicio__acciones {
    animation: inicio-subir var(--duracion) var(--curva) both;
  }

  .inicio-entrada .inicio__titulo { animation-delay: 0.3s; }
  .inicio-entrada .inicio__subtitulo { animation-delay: 0.42s; }
  .inicio-entrada .inicio__acciones { animation-delay: 0.54s; }
}

@keyframes inicio-logo {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
}

/* 0.01 y no 0: Chrome no cuenta como LCP un texto pintado con opacidad 0 (el titular es el LCP) */
@keyframes inicio-subir {
  from {
    opacity: 0.01;
    transform: translateY(24px);
  }
}

/* Páginas legales */
.legal {
  padding-top: calc(var(--altura-cabecera) + var(--espacio-seccion) / 2);
  padding-bottom: var(--espacio-seccion);
}

.legal__contenido {
  max-width: 42rem;
  margin-inline: auto;
}

.legal h1 {
  margin-bottom: 2.5rem;
}

.legal h2 {
  margin-top: 2.25rem;
  margin-bottom: 0.85rem;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gris);
}

.legal h2:first-of-type {
  margin-top: 0;
}

.legal p,
.legal li {
  color: var(--gris);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.7;
}

.legal p + p {
  margin-top: 0.85rem;
}

.legal ul {
  margin-top: 0.85rem;
  margin-bottom: 0;
  padding-left: 1.15rem;
}

.legal li + li {
  margin-top: 0.45rem;
}

.legal a {
  color: var(--gris);
  text-decoration: underline;
  text-decoration-color: var(--marfil);
  text-underline-offset: 0.25em;
}

.legal a:hover {
  color: var(--marfil-oscuro);
}

/* ---------- Página 404 ---------- */

.pagina-error {
  padding-top: calc(var(--altura-cabecera) + var(--espacio-seccion) / 2);
  padding-bottom: var(--espacio-seccion);
  text-align: center;
}

.pagina-error__contenido {
  max-width: 28rem;
  margin-inline: auto;
}

.pagina-error .titulo-seccion {
  margin-bottom: 1rem;
}

.pagina-error p {
  margin-bottom: 2rem;
  color: var(--texto-suave);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.7;
}

/* ---------- Animación de aparición (.reveal) ----------
   La clase que oculta (.reveal--preparado) solo la pone js/main.js.
   Si el JS falla o hay prefers-reduced-motion, todo se ve sin animación. */

.reveal--preparado {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--curva), transform 0.6s var(--curva);
  transition-delay: var(--retraso, 0ms);
}

.reveal--preparado.reveal--visible {
  opacity: 1;
  transform: none;
}

/* Títulos a la izquierda entran de lado. En móvil la derecha también va a la izquierda. */
.seccion--izq .reveal--preparado,
.seccion--der .reveal--preparado {
  transform: translateX(-16px);
}

.seccion--izq .reveal--preparado.reveal--visible,
.seccion--der .reveal--preparado.reveal--visible {
  transform: none;
}

/* ---------- Cortina en fotos (.cortina) ----------
   El MARCO (.cortina) mantiene border-radius, overflow e isolation.
   El clip-path y el scale van SOLO al medio interior (nunca al marco).
   Al terminar: clip-path none, scale 1 → idéntico a la foto sin efecto. */

.js .cortina {
  overflow: hidden;
  isolation: isolate;
}

/* Galería y Contacto: img hija directa del marco */
.js .cortina.cortina--preparado > img {
  clip-path: inset(100% 0 0 0);
  transform: scale(1.06);
  transform-origin: center center;
  transition: none;
}

.js .cortina.cortina--preparado.cortina--visible > img {
  clip-path: inset(0);
  transform: scale(1);
  transition:
    clip-path 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--retraso, 0ms);
}

/* Productos: picture + vídeo (clip en hijos; scale en la imagen/vídeo) */
.js .productos__marco.cortina.cortina--preparado > picture,
.js .productos__marco.cortina.cortina--preparado > video {
  clip-path: inset(100% 0 0 0);
  transition: none;
}

.js .productos__marco.cortina.cortina--preparado .productos__imagen,
.js .productos__marco.cortina.cortina--preparado .productos__video {
  transform: scale(1.06);
  transform-origin: center center;
  transition: none;
}

.js .productos__marco.cortina.cortina--preparado.cortina--visible > picture,
.js .productos__marco.cortina.cortina--preparado.cortina--visible > video {
  clip-path: inset(0);
  transition: clip-path 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--retraso, 0ms);
}

.js .productos__marco.cortina.cortina--preparado.cortina--visible .productos__imagen,
.js .productos__marco.cortina.cortina--preparado.cortina--visible .productos__video {
  transform: scale(1);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--retraso, 0ms);
}

/* Sobre mí: clip/scale en el wrapper de parallax (el figure es el marco) */
.js .nosotros__foto.cortina.cortina--preparado .nosotros__parallax {
  clip-path: inset(100% 0 0 0);
  transition: none;
}

.js .nosotros__foto.cortina.cortina--preparado .nosotros__parallax .foto {
  transform: scale(1.06);
  transform-origin: center center;
  transition: none;
}

.js .nosotros__foto.cortina.cortina--preparado.cortina--visible .nosotros__parallax {
  clip-path: inset(0);
  transition: clip-path 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--retraso, 0ms);
}

.js .nosotros__foto.cortina.cortina--preparado.cortina--visible .nosotros__parallax .foto {
  transform: scale(1);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--retraso, 0ms);
}

/* Fallback forzado (tras animación / sin IO): sin clip ni scale */
.js .cortina.cortina--forzado > img,
.js .cortina.cortina--forzado > picture,
.js .cortina.cortina--forzado > video,
.js .cortina.cortina--forzado .nosotros__parallax,
.js .cortina.cortina--forzado .foto,
.js .cortina.cortina--forzado .productos__imagen,
.js .cortina.cortina--forzado .productos__video {
  clip-path: none !important;
  transform: none !important;
  transition: none !important;
}

/* ---------- Pie ---------- */

.pie {
  position: relative;
  background: var(--gris);
  color: var(--fondo);
  font-size: 0.9375rem;
  text-align: center;
}

.pie :focus-visible {
  outline-color: var(--marfil);
}

.pie__columnas {
  display: grid;
  justify-items: center;
  gap: 3rem;
  padding-block: clamp(4rem, 8vw, 6rem);
}

.pie__marca img {
  width: 160px;
  height: auto;
}

.pie__titulo {
  margin-bottom: 1.25rem;
  color: var(--marfil);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.pie__lista {
  display: grid;
  gap: 0.5rem;
  color: var(--texto-claro);
}

.pie__lista a {
  text-decoration: none;
}

.pie__lista a:hover,
.pie__legal a:hover {
  color: var(--fondo);
  text-decoration: underline;
  text-decoration-color: var(--marfil);
  text-underline-offset: 0.3em;
}

.horario li {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
}

.horario__dias {
  color: var(--fondo);
}

.pie__redes {
  display: grid;
  justify-items: center;
  gap: 1.5rem;
}

.pie__redes .redes {
  margin-inline: -10px;
}

.pie__legal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding-block: 1.75rem;
  /* En móvil deja sitio al botón flotante para que nunca tape el pie */
  padding-bottom: calc(1.75rem + var(--flotante-tam) + var(--flotante-margen) * 2 + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linea-pie);
  color: var(--texto-claro);
  font-size: 0.8125rem;
}

.pie__legal ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1.5rem;
}

.pie__legal a {
  display: inline-block;
  padding-block: 0.5rem;
  text-decoration: none;
}

/* ==========================================================================
   Tablet (≥ 768 px)
   ========================================================================== */

@media (min-width: 768px) {
  .cabecera__cita {
    display: inline-flex;
    order: 1;
  }

  .menu {
    order: 2;
  }

  .pie {
    text-align: left;
  }

  .pie__columnas {
    grid-template-columns: repeat(2, 1fr);
    justify-items: start;
    gap: 3.5rem 3rem;
  }

  .horario li {
    justify-content: space-between;
    gap: 1.5rem;
    max-width: 18rem;
  }

  .pie__redes {
    justify-items: start;
  }

  .pie__legal {
    flex-direction: row;
    justify-content: space-between;
    padding-bottom: 1.75rem;
  }

  .flotante {
    display: none;
  }

  .trabajos__instagram {
    justify-content: flex-end;
  }
}

/* ==========================================================================
   Escritorio (≥ 1024 px)
   ========================================================================== */

@media (min-width: 1024px) {
  .carta {
    flex-direction: row;
    align-items: flex-start;
    gap: 96px;
  }

  .carta__col {
    flex: 1 1 0;
  }

  .carta__col--der {
    margin-top: 64px;
  }

  .antes-despues__lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    column-gap: clamp(1.5rem, 3vw, 3rem);
    row-gap: 0;
  }

  .antes-despues__item:nth-child(2) {
    margin-top: 48px;
  }

  .pie__columnas {
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
  }
}

/* ==========================================================================
   Menú en línea (≥ 1280 px)
   Los 7 enlaces + "Pedir cita" a 0.75rem / 0.15em: por debajo de 1280 px
   no caben en una línea y se usa el panel.
   ========================================================================== */

@media (min-width: 1280px) {
  .cabecera__interior {
    gap: 1.5rem;
  }

  .cabecera__cita {
    order: 0;
  }

  .menu {
    order: 0;
  }

  .js .menu__boton {
    display: none;
  }

  .menu__panel {
    position: static;
    display: block;
    padding: 0;
    overflow: visible;
    background: none;
    opacity: 1;
    visibility: visible;
    transition: none;
  }

  .menu__lista {
    flex-direction: row;
    gap: 1rem;
    margin: 0;
  }

  .menu__lista li {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .menu__lista a {
    padding: 0.75rem 0;
    color: var(--texto-suave);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    white-space: nowrap;
  }

  .menu__lista a::after {
    left: 0;
    right: 0.15em;
    bottom: 0.45rem;
  }

  .menu__lista a:hover,
  .menu__lista a[aria-current="true"] {
    color: var(--gris);
  }

  .menu__cita,
  .menu__pie {
    display: none;
  }

  .cabecera--portada-oscura:not(.sin-transicion) .menu__lista a {
    transition: color 0.3s ease;
  }

  .cabecera--portada-oscura[data-estado="transparente"] .menu__lista a,
  .cabecera--portada-oscura[data-estado="cristal"] .menu__lista a {
    color: var(--blanco);
  }

  .cabecera--portada-oscura[data-estado="transparente"] .menu__lista a::after,
  .cabecera--portada-oscura[data-estado="cristal"] .menu__lista a::after {
    background: var(--blanco);
  }
}

/* ---------- Composición orgánica ----------
   En móvil y tablet (< 1024 px): márgenes simétricos, sin desplazamientos laterales.
   Escritorio (≥ 1024 px): encabezados a la derecha/centro y secciones estrechas. */

@media (min-width: 768px) {
  .seccion--m,
  .seccion--l {
    padding-bottom: max(var(--espacio), calc(var(--onda) + 1.75rem));
  }

  /* Misma pareja de fondos, sin onda: no aplicar el padding-bottom ampliado */
  #opiniones.seccion--m {
    padding-bottom: calc(var(--espacio-m) / 2);
  }

  /* Antes de la curva del pie: un --espacio-m limpio */
  #contacto.seccion--m {
    padding-bottom: var(--espacio-m);
  }

  .productos__pestana {
    letter-spacing: 0.14em;
    padding-inline: 0;
  }

  .productos__pestanas {
    flex-wrap: nowrap;
    gap: 0.2rem 0.45rem;
    overflow: visible;
    scroll-snap-type: none;
    padding-right: 0;
  }

  .productos__pestanas-wrap::after {
    display: none;
  }

  .galeria {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .galeria__item:nth-child(even) {
    margin-top: 0;
  }

  .galeria__item:nth-child(3n + 2) {
    margin-top: 40px;
  }
}

@media (min-width: 1024px) {
  .galeria {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }

  .galeria__item:nth-child(3n + 2) {
    margin-top: 0;
  }

  .galeria__item:nth-child(4n + 2),
  .galeria__item:nth-child(4n) {
    margin-top: 40px;
  }
}

@media (min-width: 1024px) {
  .seccion--der .seccion__encabezado {
    align-items: flex-end;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    text-align: right;
  }

  .seccion--centro .seccion__encabezado {
    align-items: center;
    text-align: center;
  }

  .seccion--centro .titulo-seccion {
    padding-left: 0.18em;
  }

  .seccion--centro .seccion__cuerpo {
    text-align: center;
  }

  .seccion--centro .seccion__cuerpo p {
    margin-inline: auto;
  }

  .seccion--der .reveal--preparado {
    transform: translateX(16px);
  }

  .seccion--estrecha-izq .contenedor {
    width: min(var(--ancho-estrecho), 100% - 2 * var(--margen));
    margin-left: max(var(--margen), calc((100% - var(--ancho-max)) / 2));
    margin-right: auto;
  }

  .seccion--estrecha-der .contenedor {
    width: min(var(--ancho-estrecho), 100% - 2 * var(--margen));
    margin-left: auto;
    margin-right: max(var(--margen), calc((100% - var(--ancho-max)) / 2));
  }

  .seccion--estrecha-centro .contenedor {
    width: min(var(--ancho-estrecho), 100% - 2 * var(--margen));
  }

  #nosotros::before {
    top: 14%;
    right: 0;
    bottom: auto;
    width: min(42%, 520px);
    height: 70%;
    background-position: right center;
  }

  /* Sin curva entre opiniones y dónde estamos: 72 + 72 px. */
  #opiniones.seccion--m {
    padding-bottom: 4.5rem;
  }

  #ubicacion {
    padding-top: 4.5rem;
  }
}

/* ---------- Portada en tablet y escritorio ---------- */

@media (min-width: 768px) {
  .inicio__subtitulo {
    font-size: 1.125rem;
  }

  .inicio__acciones {
    flex-direction: row;
    justify-content: center;
    gap: 1rem;
    width: auto;
    max-width: none;
  }

  .inicio__boton {
    padding-inline: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .logo-portada {
    height: clamp(180px, 42vh, 380px);
    height: clamp(180px, 42svh, 380px);
  }
}

/* ---------- Movimiento reducido ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}