/* =====================================================================
   NEBULA · Estilos personalizados (lo que Tailwind no cubre)
   ===================================================================== */

/* --- Tipografía de la marca (Novaria) para el wordmark NEBULA --- */
@font-face {
  font-family: "Novaria";
  src: url("../fonts/NOVARIA.woff2") format("woff2"),
       url("../fonts/NOVARIA.woff") format("woff");
  font-weight: 400 700;
  font-display: swap;
}
.font-novaria {
  font-family: "Novaria", "Playfair Display", serif;
}

/* --- Tipografías de titular de la marca ---------------------------------
   BELLEZA (licencia OFL: libre para uso comercial): sans elegante de alto
            contraste, pensada para moda. Sustituye a Apolo, que era solo
            para uso personal. Un solo grosor, sin itálica.
   ITALIANA (licencia OFL, de Santiago Orozco / Typemade, Monterrey): serif
            de display delgada y de alto contraste. Sustituye a Velista, que
            era solo para uso personal. Se escribe siempre en MAYÚSCULAS
            (text-transform) para conservar el aire de versales de la marca.
   Las dos traen ¿ y ¡. El resto del sitio sigue en Playfair. */
@font-face {
  font-family: "Belleza";
  src: url("../fonts/belleza.woff2") format("woff2"),
       url("../fonts/belleza.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Italiana";
  src: url("../fonts/italiana.woff2") format("woff2"),
       url("../fonts/italiana.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --- Títulos en Italiana -----------------------------------------------
   Los nombres de colección y los títulos importantes van en Italiana, en
   MAYÚSCULAS. Las mayúsculas necesitan más aire entre letras que las
   minúsculas, e Italiana solo tiene un grosor: pedirle negritas la
   engorda a la fuerza (los tokens de Tailwind traen 600/700, y su hoja se
   inyecta después de esta, de ahí el !important). */
.titulo-italiana {
  font-family: "Italiana", "Playfair Display", serif;
  text-transform: uppercase;
  font-weight: 400 !important;
  /* !important también aquí: los tokens de tamaño de Tailwind traen tracking
     negativo (-0.01/-0.02em), pensado para minúsculas. Las versales lo
     necesitan positivo o se amontonan. */
  letter-spacing: 0.025em !important;
  line-height: 1.12;
  /* Reparte las líneas parejo en vez de dejar una palabra suelta abajo. */
  text-wrap: balance;
}

/* Titular de portada. Belleza solo tiene un grosor: pedirle negritas obliga al
   navegador a engordarla a la fuerza y se ensucia el trazo. */
.titulo-hero {
  /* !important porque el token de tamaño de Tailwind trae peso 700 y su hoja
     se inyecta después de esta. Sin esto el navegador engorda Belleza a la
     fuerza y el trazo se ensucia. */
  font-weight: 400 !important;
  letter-spacing: -0.005em;
  line-height: 1.12;
}
.titulo-hero .en-italiana {
  /* Italiana va en mayúsculas y es más delgada que Belleza: a su mismo tamaño
     se ven parejas, así que no se le baja (Velista sí necesitaba 0.88em). */
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.015em;
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* =====================================================================
   ONDAS DE MARCA (el sello de NEBULA)
   ---------------------------------------------------------------------
   Las curvas con profundidad son parte de la identidad (flyers,
   catálogo impreso). Aquí viven las tres piezas del sistema:
     1. --onda-*      medidas compartidas (alto de la barra + su curva)
     2. .nav-curva    el borde curvo que cuelga del menú superior
     3. .onda-div     el divisor ondulado entre secciones
   La onda NUNCA lleva relieve propia: es solo la línea donde termina una
   superficie. Lo que se ve con profundidad es el ESPACIO entre una onda y
   la siguiente, gracias a una sombra ancha que entra en él y se desvanece.
   Todo va del mismo color del papel; lo único visible es esa sombra.
   ===================================================================== */
:root {
  --onda-barra: 64px;  /* alto de la barra del menú */
  --onda-curva: 26px;  /* cuánto baja la curva por debajo de la barra */
  --onda-nav: 89px;    /* barra + curva = alto visual total del menú */
}
@media (min-width: 768px) {
  :root { --onda-curva: 44px; --onda-nav: 108px; }
}

/* --- Fondo de ondas grabadas en todo el sitio --- */
body {
  background-image: url("../img/ondas-fondo.svg?v=4");
  background-repeat: repeat-y;
  background-position: center top;
  /* El ancho nunca baja de 1100px: en un celular vemos solo un tramo de la
     onda (curvas amplias y suaves) en vez del dibujo entero aplastado.
     El alto marca el ritmo: 1200px deja ~2 ondas por pantalla de celular,
     que es lo que se siente calmado (con menos, se ve rayado). */
  background-size: max(1100px, 100%) 1200px;
}

/* --- Curva inferior del menú ---
   La barra y la curva son del MISMO color (una sola pieza). La onda no
   lleva relieve: la profundidad está en el espacio que queda debajo, donde
   cae una sombra ancha que se desvanece. */
.nav-curva {
  display: block;
  width: 100%;
  height: var(--onda-curva);
  margin-top: -1px; /* evita una hairline entre la barra y la curva */
  filter: drop-shadow(0 14px 22px rgba(26, 28, 27, 0.10));
  transition: filter 0.35s ease, opacity 0.25s ease;
  pointer-events: none;
}
/* Al hacer scroll el menú "levanta" un poco más. */
#navbar.nav-scrolled .nav-curva {
  filter: drop-shadow(0 18px 30px rgba(26, 28, 27, 0.15));
}
/* Cuando la barra de filtros se pega debajo, el menú y los filtros pasan a
   ser UNA sola superficie: la curva del menú quedaría atrapada en medio, así
   que se retira y la onda de los filtros toma su lugar como borde del bloque. */
#navbar.con-filtros-pegados .nav-curva {
  opacity: 0;
}

/* --- Divisor de ondas entre secciones (menú móvil, cortes de página) ---
   Mismo principio: la onda solo marca dónde termina una superficie, y la
   sombra ancha entra en el espacio de abajo para darle profundidad. */
.onda-div {
  display: block;
  width: 100%;
  height: 34px;
  overflow: visible;
  filter: drop-shadow(0 13px 20px rgba(26, 28, 27, 0.095));
}

/* --- Barra de filtros del catálogo ---
   Antes se pegaba por debajo de la curva del menú y, como la curva es
   cóncava, en los costados quedaba una franja vacía por donde se asomaban
   las tarjetas a medio cortar. Ahora se pega justo al borde inferior de la
   BARRA (no de la curva), del mismo color del papel: menú y filtros se leen
   como una sola pieza, y la onda de abajo marca dónde termina el bloque. */
.barra-filtros {
  position: sticky;
  /* -1px para que no aparezca una hairline entre la barra y los filtros */
  top: calc(var(--onda-barra) - 1px);
  z-index: 40;
  background-color: #f9f9f7; /* el mismo papel que el menú */
}
/* Pegada, la onda de los filtros es el borde de todo el bloque, así que
   proyecta la sombra profunda (la misma que tenía el menú al hacer scroll). */
.barra-filtros.pegada .nav-curva {
  filter: drop-shadow(0 18px 30px rgba(26, 28, 27, 0.15));
}

/* =====================================================================
   PORTADAS DE COLECCIÓN · la burbuja de NEBULA
   ---------------------------------------------------------------------
   La marca es REDONDA, no cuadrada. La burbuja tiene el extremo izquierdo
   curvo (como el catálogo impreso) y la FOTO ocupa casi la mitad derecha,
   de arriba abajo, pegada al borde.
   La foto no lleva marco ni aro: la recorta la burbuja misma
   (`overflow:hidden` + el radio del contenedor), así sus curvas son
   EXACTAMENTE las de la burbuja y no una forma aparte flotando dentro.
   Tipografía igual que la portada de inicio: Playfair 700, interlínea
   corta y un pelín de tracking negativo. Un solo color para todos los
   nombres — sin códigos de color por colección.
   ===================================================================== */
.coleccion {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 48%;
  align-items: center;
  gap: 12px;
  min-height: 258px;
  /* Sin padding a la derecha: ahí llega la foto hasta el borde. */
  padding: 26px 0 26px 22px;
  background-color: #ffffff;
  /* Radio izquierdo = media altura (extremo redondo). NUNCA 999px: el
     navegador reparte el exceso y aplasta las esquinas de la derecha. */
  border-radius: 129px 34px 34px 129px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(26, 28, 27, 0.035), 0 20px 44px rgba(26, 28, 27, 0.085);
  cursor: pointer;
  transition: box-shadow 0.5s ease, transform 0.5s ease;
}
@media (hover: hover) {
  .coleccion:hover {
    box-shadow: 0 2px 5px rgba(26, 28, 27, 0.045), 0 30px 62px rgba(26, 28, 27, 0.13);
    transform: translateY(-3px);
  }
  .coleccion:hover .coleccion-marco img { transform: scale(1.05); }
}
@media (min-width: 768px) {
  .coleccion {
    grid-template-columns: 1fr 55%;
    gap: 18px;
    min-height: 300px;
    padding: 30px 0 30px 46px;
    border-radius: 150px 44px 44px 150px;
  }
}

/* La foto sube y baja hasta el borde: los márgenes negativos cancelan el
   padding vertical de la burbuja. */
.coleccion-foto {
  position: relative;
  align-self: stretch;
  margin: -26px 0;
}
@media (min-width: 768px) {
  .coleccion-foto { margin: -30px 0; }
}
.coleccion-marco {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.coleccion-marco img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Los banners de colección son PNG sin fondo: el ramo tiene que verse
     COMPLETO, no recortado contra el borde. Como el resto es blanco igual que
     la burbuja, el ramo parece flotar dentro de ella. */
  object-fit: contain;
  /* Pegado al borde DERECHO de la burbuja, no flotando en medio: el ramo cierra
     la pieza. Sin esto, `contain` lo centra y deja aire de los dos lados. */
  object-position: right center;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.4s ease-in-out;
}

/* Mismas letras que la portada de inicio. */
.coleccion-nombre {
  color: #1a1c1b;
  font-family: "Italiana", "Playfair Display", serif;
  text-transform: uppercase;
  /* Tamaño medido: el nombre más largo ("Flower Bags") tiene que caber en un
     solo renglón dentro de su columna. Si crece, se parte en dos y la burbuja
     se desbalancea respecto a las demás. */
  font-size: 21px;
  font-weight: 400;
  line-height: 1.14;
  /* Versales: piden más aire entre letras que las minúsculas. */
  letter-spacing: 0.03em;
  margin-bottom: 10px;
  /* Ningún nombre debe partirse a media palabra. */
  overflow-wrap: normal;
  hyphens: none;
}
.coleccion-frase {
  color: #6d7170;
  font-size: 12.5px;
  line-height: 1.55;
  margin-bottom: 16px;
}
@media (min-width: 768px) {
  .coleccion-nombre { font-size: 26px; margin-bottom: 12px; }
  .coleccion-frase { font-size: 14px; margin-bottom: 20px; }
}

/* Colección sin productos todavía (Flower Bar). */
.coleccion-proximo { cursor: default; }
/* Sin fondo: ahora que los banners flotan sobre el blanco de la burbuja, un
   recuadro gris aquí se vería como una caja pegada. Solo el símbolo. */
.coleccion-proximo .coleccion-marco {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =====================================================================
   PORTADA DE INICIO · el óvalo que va cambiando
   ---------------------------------------------------------------------
   El óvalo es la forma de la casa (la misma de las fichas del catálogo) y
   es lo primero que se ve en el celular. Criterios tomados de marcas de
   alta gama (Dior, Jo Malone, Flowerbx):
     1. LA IMAGEN MANDA y se sale del margen: una foto centrada y contenida
        se lee como estampa; asomándose por el borde se lee como editorial.
     2. PROFUNDIDAD EN CAPAS: mancha blush detrás, óvalo flotando con una
        sombra amplia y baja. Sin marcos ni filos.
     3. MOVIMIENTO LENTO: la foto respira con un acercamiento de 20s y los
        cambios son fundidos largos. Nada salta.
     4. EL PIE ES DIMINUTO: versalitas muy espaciadas, y dice de qué
        colección es la pieza que se está viendo.
   ===================================================================== */
.hero-oval {
  position: relative;
  display: block;
  width: min(82vw, 340px);
  aspect-ratio: 3 / 4;
  /* Centrado en celular: es lo primero que se ve y así queda equilibrado.
     En escritorio se alinea a la derecha, dentro de su columna. */
  margin-inline: auto;
  border-radius: 50% / 42%;
  overflow: hidden;
  background-color: #ededeb;
  box-shadow: 0 34px 64px -20px rgba(26, 28, 27, 0.30),
    0 10px 24px -10px rgba(26, 28, 27, 0.14);
  transition: box-shadow 0.6s ease;
}
.hero-oval img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Encuadre alto: en estas fotos el ramo está por encima del centro, y a
     media altura entraba demasiado piso. */
  object-position: center 40%;
  transition: opacity 1.6s ease-in-out;
  /* Arranca ya acercada (el ramo llena el óvalo, no el fondo) y respira. */
  animation: hero-deriva 22s ease-in-out infinite alternate;
}
@keyframes hero-deriva {
  from { transform: scale(1.08); }
  to { transform: scale(1.16); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-oval img { animation: none; }
}
@media (hover: hover) {
  .hero-oval:hover {
    box-shadow: 0 42px 78px -20px rgba(26, 28, 27, 0.34),
      0 12px 28px -10px rgba(26, 28, 27, 0.16);
  }
}
@media (min-width: 768px) {
  .hero-oval {
    width: min(36vw, 420px);
    margin-right: 0;
    margin-left: auto;
  }
}

/* Pie del óvalo: dice qué colección se está viendo. */
.hero-pie {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 18px;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #6d7170;
  transition: color 0.4s ease;
}
.hero-pie b {
  font-weight: 500;
  color: #c4788a;
}
.hero-pie::after {
  content: "";
  width: 18px;
  height: 1px;
  background-color: #c4788a;
  transition: width 0.4s ease;
}
@media (hover: hover) {
  .hero-oval-enlace:hover .hero-pie::after { width: 30px; }
}
@media (min-width: 768px) {
  .hero-pie { font-size: 11px; margin-top: 22px; }
}

/* Sello chico de marca (florería boutique · Méx.) */
.hero-sello {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #6d7170;
}
.hero-sello::before {
  content: "";
  width: 22px;
  height: 1px;
  background-color: #c4788a;
}

/* =====================================================================
   BURBUJAS DE CONTENIDO (pasos de compra, opiniones)
   Misma familia que las colecciones: papel blanco, esquinas muy redondas y
   la sombra suave de las ondas. Sin bordes grises: en NEBULA lo que separa
   es la profundidad, no la línea.
   ===================================================================== */
.burbuja {
  position: relative;
  background-color: #ffffff;
  border-radius: 34px;
  box-shadow: 0 1px 2px rgba(26, 28, 27, 0.035), 0 18px 40px rgba(26, 28, 27, 0.08);
}
@media (min-width: 768px) {
  .burbuja { border-radius: 40px; }
}
/* Número de paso en la serif de la casa, en blush, grande y discreto. */
.paso-numero {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: 44px;
  line-height: 1;
  color: #c4788a;
  letter-spacing: -0.02em;
}
@media (min-width: 768px) {
  .paso-numero { font-size: 52px; }
}

/* --- Animación de entrada al hacer scroll --- */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }

/* --- Recorte ovalado para las fotos de arreglos --- */
.oval-crop {
  border-radius: 50% / 42%;
  overflow: hidden;
}

/* --- Zoom suave de imagen al pasar el cursor --- */
.img-zoom {
  overflow: hidden;
}
.img-zoom img {
  transition: transform 0.7s ease;
}
.img-zoom:hover img {
  transform: scale(1.05);
}

/* --- Barra de filtros sin scrollbar visible --- */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* --- Scroll suave entre secciones --- */
html { scroll-behavior: smooth; }

/* --- Menú móvil --- */
.mobile-menu {
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.mobile-menu.hidden-menu {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
}

/* =====================================================================
   OPTIMIZACIONES MÓVIL (el 99% de los clientes entran por celular)
   ===================================================================== */
@media (max-width: 767px) {
  /* Ritmo vertical más compacto: 120px se siente enorme en un teléfono. */
  .py-section-gap { padding-top: 4rem !important; padding-bottom: 4rem !important; }
  .pb-section-gap { padding-bottom: 3.5rem !important; }
  .pt-section-gap { padding-top: 4rem !important; }

  /* Fila de filtros que se desliza en horizontal (estilo app), no se amontona. */
  .chips-scroll {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-bottom: 2px;
    margin: 0 calc(-1 * var(--margin-mobile, 20px));
    padding-left: 20px;
    padding-right: 20px;
  }
  .chips-scroll > button { scroll-snap-align: start; }

  /* Destacados del inicio como carrusel deslizable (se ve 1 + asoma el siguiente). */
  .featured-carousel,
  .carrusel-movil {
    display: flex !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 1rem !important;
    margin: 0 calc(-1 * var(--margin-mobile, 20px));
    padding: 0 20px 4px;
  }
  .featured-carousel > *,
  .carrusel-movil > * {
    flex: 0 0 78%;
    scroll-snap-align: center;
  }
}

.chips-scroll::-webkit-scrollbar,
.featured-carousel::-webkit-scrollbar,
.carrusel-movil::-webkit-scrollbar { display: none; }
.featured-carousel,
.carrusel-movil { -ms-overflow-style: none; scrollbar-width: none; }

/* Ocultar barra de desplazamiento en las filas deslizables */
.chips-scroll::-webkit-scrollbar { display: none; }
.chips-scroll { -ms-overflow-style: none; scrollbar-width: none; }

/* =====================================================================
   INSTAGRAM · botón y aviso
   ---------------------------------------------------------------------
   Muchos clientes piden por Instagram, así que el botón va junto al de
   WhatsApp en todo el sitio. Como Instagram NO permite abrir el chat con
   el mensaje ya escrito, al tocarlo copiamos el pedido al portapapeles y
   avisamos con un mensajito para que solo se pegue.
   ===================================================================== */
/* =====================================================================
   BOTONES · un solo sistema para todo el sitio
   ---------------------------------------------------------------------
   Antes cada botón traía su color de marca (verde de WhatsApp, degradado
   de Instagram) y la página parecía un semáforo. Ahora hay dos formas:
     .btn-papel  → fondo blanco, filo finísimo y sombra suave. Es el
                   botón normal; usa la misma profundidad de las ondas.
     .btn-tinta  → sólido oscuro, para LA acción principal de cada
                   pantalla (nunca dos en la misma vista).
   Los logos de WhatsApp e Instagram van en un solo tono: se reconocen
   por su forma, y así el color deja de competir con las flores.
   ===================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 14px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow 0.35s ease, transform 0.35s ease,
    background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; flex: none; }

/* --- Papel: el botón de todos los días --- */
.btn-papel {
  background-color: #ffffff;
  color: #1a1c1b;
  border-color: rgba(26, 28, 27, 0.10);
  box-shadow: 0 1px 2px rgba(26, 28, 27, 0.05), 0 10px 22px rgba(26, 28, 27, 0.075);
}
/* Solo con ratón: en el celular un :hover pegajoso deja el botón "encendido". */
@media (hover: hover) {
  .btn-papel:hover {
    border-color: rgba(26, 28, 27, 0.18);
    box-shadow: 0 2px 4px rgba(26, 28, 27, 0.06), 0 16px 32px rgba(26, 28, 27, 0.115);
    transform: translateY(-1px);
  }
}

/* --- Tinta: la acción principal, una por pantalla --- */
.btn-tinta {
  background-color: #1a1c1b;
  color: #f9f9f7;
  border-color: #1a1c1b;
  box-shadow: 0 1px 2px rgba(26, 28, 27, 0.10), 0 10px 22px rgba(26, 28, 27, 0.16);
}
@media (hover: hover) {
  .btn-tinta:hover {
    background-color: #2f3130;
    border-color: #2f3130;
    box-shadow: 0 2px 4px rgba(26, 28, 27, 0.12), 0 16px 32px rgba(26, 28, 27, 0.22);
    transform: translateY(-1px);
  }
}

/* --- Contorno claro: cuando el fondo es oscuro (banda del CTA) --- */
.btn-contorno-claro {
  background-color: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.45);
}
@media (hover: hover) {
  .btn-contorno-claro:hover {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: #ffffff;
  }
}

/* --- Medidas --- */
.btn-sm { padding: 10px 20px; font-size: 14px; }
.btn-sm svg { width: 16px; height: 16px; }
.btn-lg { padding: 16px 30px; font-size: 16px; }
.btn-lg svg { width: 20px; height: 20px; }
.btn-bloque { width: 100%; }
/* Etiqueta corta en versalitas (el WhatsApp del menú) */
.btn-etiqueta {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
}

/* --- Redondos: solo el logo, sin texto --- */
.btn-circulo,
.btn-circulo-lg {
  padding: 0;
  gap: 0;
}
.btn-circulo { width: 40px; height: 40px; }
.btn-circulo svg { width: 19px; height: 19px; }
.btn-circulo-lg { width: 54px; height: 54px; }
.btn-circulo-lg svg { width: 23px; height: 23px; }

/* Nota bajo los botones de "Pedir por Instagram" (se lee ANTES de tocar). */
.ig-nota {
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 1.45;
  color: #6d7170;
  text-align: center;
}

/* Hoja de instrucciones al pedir por Instagram. En celular sube desde abajo
   (como las hojas nativas); en computadora es un recuadro centrado. */
#hoja-ig {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.hoja-ig-fondo {
  position: absolute;
  inset: 0;
  background: rgba(26, 28, 27, 0.45);
  opacity: 0;
  transition: opacity 0.28s ease;
}
.hoja-ig-panel {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: 92vh;
  overflow-y: auto;
  background: #ffffff;
  border-radius: 30px 30px 0 0;
  padding: 26px 22px calc(18px + env(safe-area-inset-bottom));
  box-shadow: 0 -12px 40px rgba(26, 28, 27, 0.18);
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: center;
}
#hoja-ig.abierta .hoja-ig-fondo { opacity: 1; }
#hoja-ig.abierta .hoja-ig-panel { transform: translateY(0); }
@media (min-width: 768px) {
  #hoja-ig { align-items: center; }
  .hoja-ig-panel {
    border-radius: 34px;
    padding: 32px 30px 22px;
    transform: translateY(16px) scale(0.98);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  #hoja-ig.abierta .hoja-ig-panel { transform: none; opacity: 1; }
}
.hoja-ig-icono {
  display: inline-flex;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #f4f4f2;
  color: #1a1c1b;
  margin-bottom: 12px;
}
.hoja-ig-icono svg { width: 22px; height: 22px; }
.hoja-ig-titulo {
  font-family: "Playfair Display", serif;
  font-size: 22px;
  font-weight: 600;
  color: #1a1c1b;
  margin-bottom: 8px;
}
.hoja-ig-texto {
  font-size: 14px;
  line-height: 1.5;
  color: #6d7170;
  margin-bottom: 14px;
}
.hoja-ig-pasos {
  counter-reset: paso;
  list-style: none;
  text-align: left;
  margin: 0 auto 16px;
  padding: 0;
  max-width: 340px;
}
.hoja-ig-pasos li {
  counter-increment: paso;
  position: relative;
  padding-left: 34px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.45;
  color: #1a1c1b;
}
.hoja-ig-pasos li::before {
  content: counter(paso);
  position: absolute;
  left: 0;
  top: -1px;
  width: 23px;
  height: 23px;
  border-radius: 999px;
  background: #F2D4DA;
  color: #1a1c1b;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hoja-ig-mensaje {
  text-align: left;
  background: #f4f4f2;
  border-radius: 16px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.45;
  color: #444748;
  margin-bottom: 18px;
  /* El pedido del armador viene en renglones (flores, papel, moño). */
  white-space: pre-line;
  max-height: 30vh;
  overflow-y: auto;
  user-select: all;
  -webkit-user-select: all;
}
.hoja-ig-cancelar {
  margin-top: 10px;
  padding: 8px 16px;
  font-size: 13px;
  color: #6d7170;
  background: none;
  border: 0;
  cursor: pointer;
}

/* Aviso flotante ("copiamos tu pedido") */
#nebula-aviso {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translate(-50%, 16px);
  z-index: 120;
  max-width: min(92vw, 420px);
  padding: 12px 18px;
  border-radius: 999px;
  background: #1a1c1b;
  color: #fff;
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 10px 28px rgba(26, 28, 27, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.28s ease;
}
#nebula-aviso.visible { opacity: 1; transform: translate(-50%, 0); }