/* Fiesta en Papel — identidad de color REAL, extraída del logo actual
   (muestreo de píxeles, no inventada). Ver docs/marca/02-identidad-visual.md
   secciones 1-2 para el análisis completo y la jerarquía de uso.
   Fuente: activos/logo/logo-instagram-actual.jpg */

:root {
  /* Rojo — color principal, lidera el wordmark "FIESTA". CTAs y acentos. */
  --color-principal: #f70038;
  --color-principal-oscuro: #b8002b;

  /* Azul profundo — color secundario, de la carpa y el script "Papelería
     creativa". Reservado para superficies grandes/oscuras (footer, panel
     del hero) — da un contrapunto sobrio al rojo. */
  --color-secundario: #01568f;
  --color-secundario-oscuro: #013a5f;

  /* Amarillo — acento de alta visibilidad (de "PAPEL"). Solo en chips,
     badges y detalles puntuales — nunca como texto sobre fondo claro
     (baja legibilidad) ni como fondo grande. */
  --color-acento: #f7e900;

  /* Naranja y púrpura — acentos terciarios (sombra 3D y "VE" del logo).
     Para variedad decorativa (iconos, placeholders), no para UI principal. */
  --color-acento-2: #f47900;
  --color-acento-3: #7d5297;

  --color-neutro-base: #faf3e7;    /* crema/hueso — no viene del logo (ese
                                       usa un gris de mockup), es la base
                                       neutra recomendada para web */
  --color-superficie: #ffffff;
  --color-texto: #3a322c;          /* carbón cálido, no negro puro */
  --color-texto-suave: #6f6459;
  --color-borde: #e5dcc9;

  --fuente-titulares: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --fuente-cuerpo: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --radio: 14px;
  --sombra-suave: 0 10px 30px rgba(58, 50, 44, 0.08);
  --sombra-tarjeta: 0 6px 20px rgba(58, 50, 44, 0.10);
  --contenedor-max: 1120px;
}

* { box-sizing: border-box; }

/* ---------- Íconos (SVG inline — Lucide para línea, Simple Icons para
   marcas como WhatsApp/Instagram — ambos gratis, licencia abierta, sin
   atribución obligatoria). Heredan color con currentColor. ---------- */
.icono {
  flex-shrink: 0;
}

.icono-boton {
  width: 18px;
  height: 18px;
}

.icono-tarjeta {
  width: 26px;
  height: 26px;
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--fuente-cuerpo);
  color: var(--color-texto);
  background: var(--color-neutro-base);
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: var(--fuente-titulares);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.5em;
}

p { margin: 0 0 1em; }

a { color: inherit; text-decoration: none; }

.contenedor {
  max-width: var(--contenedor-max);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Navegación ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 243, 231, 0.9);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--color-borde);
  box-shadow: 0 0 0 rgba(58, 50, 44, 0);
  transition: box-shadow 0.25s ease, background 0.25s ease;
}

.nav--con-sombra {
  background: rgba(250, 243, 231, 0.97);
  box-shadow: 0 4px 20px rgba(58, 50, 44, 0.08);
}

.nav .contenedor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 16px;
}

.nav__logo {
  font-family: var(--fuente-titulares);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-principal);
}

.nav__links {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__links a {
  position: relative;
  display: inline-block;
  padding: 4px 0;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-texto);
  transition: color 0.2s ease;
}

.nav__links a:hover { color: var(--color-principal); }

.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-principal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.nav__links a:hover::after {
  transform: scaleX(1);
}

.nav__links a.activo {
  color: var(--color-principal);
  font-weight: 700;
}

.nav__links a.activo::after {
  transform: scaleX(1);
}

/* ---------- Dropdown "Otros proyectos" ---------- */
.nav__dropdown {
  position: relative;
}

.nav__dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-texto);
  cursor: pointer;
  transition: color 0.2s ease;
}

.nav__dropdown-toggle:hover,
.nav__dropdown-toggle[aria-expanded="true"] {
  color: var(--color-principal);
}

.nav__dropdown-panel {
  display: none;
  position: absolute;
  top: calc(100% + 16px);
  right: 0;
  min-width: 230px;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: 12px;
  box-shadow: var(--sombra-suave);
  padding: 8px;
  z-index: 60;
}

.nav__dropdown-panel--abierto {
  display: block;
}

.nav__dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 10px;
  border-radius: 8px;
}

a.nav__dropdown-item {
  cursor: pointer;
  transition: background 0.15s ease;
}

a.nav__dropdown-item:hover {
  background: var(--color-neutro-base);
}

a.nav__dropdown-item:hover .nav__dropdown-item-nombre {
  color: var(--color-principal);
}

.nav__dropdown-item-nombre {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-texto);
}

.nav__dropdown-item-estado {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-texto-suave);
  background: var(--color-neutro-base);
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

.nav__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--color-principal);
  color: var(--color-principal);
  flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.nav__cta .icono-boton {
  width: 19px;
  height: 19px;
}

.nav__cta:hover {
  background: var(--color-principal);
  color: var(--color-superficie);
  transform: translateY(-1px);
}

/* ---------- Redes sociales dentro del menú ---------- */
.nav__redes {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 4px;
}

.nav__redes a,
.nav__redes span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-neutro-base);
  color: var(--color-texto-suave);
  transition: background 0.2s ease, color 0.2s ease;
}

.nav__redes svg {
  width: 15px;
  height: 15px;
}

.nav__redes a:hover {
  background: var(--color-principal);
  color: var(--color-superficie);
}

.nav__red--proximamente {
  opacity: 0.5;
  cursor: default;
}

.nav__acciones {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ---------- Menú móvil (hamburguesa) ---------- */
.nav__menu-toggle {
  display: none;
  position: relative;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  color: var(--color-texto);
  cursor: pointer;
}

.nav__menu-icono {
  width: 24px;
  height: 24px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.15s ease;
}

.nav__menu-icono--cerrar { opacity: 0; }

.nav__menu-toggle[aria-expanded="true"] .nav__menu-icono--abrir { opacity: 0; }
.nav__menu-toggle[aria-expanded="true"] .nav__menu-icono--cerrar { opacity: 1; }

@media (max-width: 760px) {
  .nav__logo { font-size: 1.18rem; }

  .nav__menu-toggle { display: flex; }

  .nav__links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--color-neutro-base);
    border-bottom: 1px solid var(--color-borde);
    box-shadow: var(--sombra-suave);
    padding: 8px 0;
    max-height: calc(100vh - 100%);
    overflow-y: auto;
  }

  .nav__links--abierto { display: flex; }

  .nav__links li { width: 100%; }

  .nav__links a {
    display: block;
    padding: 14px 24px;
  }

  .nav__links a::after { display: none; }

  .nav__dropdown { width: 100%; }

  .nav__dropdown-toggle {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 14px 24px;
  }

  .nav__dropdown-panel {
    position: static;
    width: 100%;
    min-width: 0;
    box-shadow: none;
    border: none;
    border-radius: 0;
    background: rgba(58, 50, 44, 0.03);
    padding: 4px 16px 8px;
  }

  .nav__redes {
    padding: 14px 24px 8px;
    margin-top: 4px;
    border-top: 1px solid var(--color-borde);
  }
}

/* ---------- Botón "volver arriba" ---------- */
.boton-arriba {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 45;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--color-secundario);
  color: var(--color-superficie);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sombra-suave);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s, background 0.2s ease;
}

.boton-arriba svg { width: 22px; height: 22px; }

.boton-arriba--visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.boton-arriba:hover { background: var(--color-secundario-oscuro); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 96px 0 80px;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 20%, rgba(247, 0, 56, 0.07) 0%, transparent 45%),
    radial-gradient(circle at 85% 0%, rgba(1, 86, 143, 0.08) 0%, transparent 50%);
}

.hero__eyebrow {
  display: inline-block;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-principal);
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 20px;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}

.hero h1 {
  font-size: clamp(2.2rem, 4.2vw, 3.4rem);
  color: var(--color-texto);
  margin-bottom: 0.4em;
}

.hero h1 em {
  font-style: normal;
  color: var(--color-secundario);
}

.hero__subtexto {
  font-size: 1.15rem;
  color: var(--color-texto-suave);
  max-width: 46ch;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 28px;
}

.boton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.boton--primario {
  background: var(--color-principal);
  color: var(--color-superficie);
  box-shadow: var(--sombra-suave);
}

.boton--primario:hover {
  background: var(--color-principal-oscuro);
  transform: translateY(-2px);
}

.boton--secundario {
  background: transparent;
  color: var(--color-secundario);
  border: 1.5px solid var(--color-secundario);
}

.boton--secundario:hover {
  background: var(--color-superficie);
  transform: translateY(-2px);
}

.hero__confianza {
  margin-top: 36px;
  font-size: 0.9rem;
  color: var(--color-texto-suave);
}

.hero__visual {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 24px;
  background:
    linear-gradient(160deg, var(--color-secundario) 0%, var(--color-secundario-oscuro) 100%);
  box-shadow: var(--sombra-suave);
  overflow: hidden;
}

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { aspect-ratio: 16 / 10; order: -1; }
}

/* ---------- Carrusel de Instagram (dentro de .hero__visual) ---------- */
.carrusel-ig__track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
}

.carrusel-ig__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
}

.carrusel-ig__slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.carrusel-ig__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--fuente-titulares);
  font-size: 1rem;
  text-align: center;
  padding: 24px;
}

.carrusel-ig__slide:nth-child(3n+2) .carrusel-ig__placeholder {
  background: linear-gradient(160deg, var(--color-principal) 0%, var(--color-acento-3) 100%);
}
.carrusel-ig__slide:nth-child(3n+3) .carrusel-ig__placeholder {
  background: linear-gradient(160deg, var(--color-acento-2) 0%, var(--color-acento) 100%);
}

.carrusel-ig__placeholder-icono {
  font-size: 2rem;
}

.carrusel-ig__flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.85);
  color: var(--color-secundario-oscuro);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.carrusel-ig__flecha:hover { background: var(--color-superficie); }
.carrusel-ig__flecha--prev { left: 12px; }
.carrusel-ig__flecha--next { right: 12px; }

.carrusel-ig__puntos {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 6px;
}
.carrusel-ig__punto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  padding: 0;
}
.carrusel-ig__punto--activo {
  background: var(--color-acento);
  width: 18px;
  border-radius: 4px;
}

/* ---------- Secciones genéricas ---------- */
.seccion {
  padding: 88px 0;
}

.seccion--alterna {
  background: var(--color-superficie);
}

.seccion__cabecera {
  max-width: 640px;
  margin: 0 auto 48px;
  text-align: center;
}

.seccion__eyebrow {
  display: inline-block;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-acento);
  background: var(--color-secundario);
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.seccion__cabecera h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  color: var(--color-texto);
}

.seccion__cabecera p {
  color: var(--color-texto-suave);
  font-size: 1.05rem;
}

/* ---------- Grid de líneas de producto ---------- */
.grid-productos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.tarjeta {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: 28px;
  box-shadow: var(--sombra-tarjeta);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tarjeta:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-suave);
}

.tarjeta--destacada {
  border-color: var(--color-acento-2);
  border-width: 2px;
  position: relative;
}

.tarjeta__badge {
  position: absolute;
  top: -12px;
  right: 20px;
  background: var(--color-acento);
  color: var(--color-secundario-oscuro);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  letter-spacing: 0.03em;
}

.tarjeta__icono {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--color-neutro-base);
  color: var(--color-secundario);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.tarjeta h3 {
  font-size: 1.15rem;
  margin-bottom: 8px;
  color: var(--color-texto);
}

.tarjeta p {
  color: var(--color-texto-suave);
  font-size: 0.95rem;
  margin-bottom: 0;
}

.tarjeta__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--color-principal);
  color: var(--color-superficie);
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.tarjeta__cta:hover {
  background: var(--color-principal-oscuro);
  transform: translateY(-1px);
}

/* Tarjetas de "la carpa creativa": mismo alto fijo siempre (no crecen ni
   se recortan). Lo que cambia es el tamaño del ícono — grande en reposo,
   se achica al interactuar para dejarle espacio a la descripción y el
   botón, que ya tienen su espacio reservado (solo cambian de opacidad,
   nunca mueven el layout). El título nunca cambia de tamaño. En táctil
   (celular, la mayoría del tráfico) no existe "hover", así que ahí todo
   queda visible siempre con el ícono en su tamaño grande. */
.tarjeta--interactiva {
  height: 320px;
  display: flex;
  flex-direction: column;
}

.tarjeta--interactiva .tarjeta__icono {
  width: 64px;
  height: 64px;
  transition: width 0.3s ease, height 0.3s ease;
}

.tarjeta--interactiva .tarjeta__icono .icono-tarjeta {
  width: 34px;
  height: 34px;
  transition: width 0.3s ease, height 0.3s ease;
}

.tarjeta--interactiva h3 {
  flex-shrink: 0;
}

.tarjeta--interactiva .tarjeta__desc {
  flex-shrink: 0;
  margin-top: 8px;
}

.tarjeta--interactiva .tarjeta__desc p {
  margin: 0;
}

.tarjeta--interactiva .tarjeta__accion {
  flex-shrink: 0;
  margin-top: 10px;
}

@media (hover: hover) and (pointer: fine) {
  .tarjeta--interactiva .tarjeta__desc,
  .tarjeta--interactiva .tarjeta__accion {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }

  .tarjeta--interactiva:hover .tarjeta__icono,
  .tarjeta--interactiva:focus-within .tarjeta__icono {
    width: 48px;
    height: 48px;
  }

  .tarjeta--interactiva:hover .tarjeta__icono .icono-tarjeta,
  .tarjeta--interactiva:focus-within .tarjeta__icono .icono-tarjeta {
    width: 24px;
    height: 24px;
  }

  .tarjeta--interactiva:hover .tarjeta__desc,
  .tarjeta--interactiva:focus-within .tarjeta__desc,
  .tarjeta--interactiva:hover .tarjeta__accion,
  .tarjeta--interactiva:focus-within .tarjeta__accion {
    opacity: 1;
    pointer-events: auto;
  }
}

/* ---------- Testimonios ---------- */
.testimonio {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.testimonio blockquote {
  font-family: var(--fuente-titulares);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  color: var(--color-secundario);
  margin: 0 0 20px;
}

.testimonio cite {
  font-style: normal;
  color: var(--color-texto-suave);
  font-weight: 600;
}

/* ---------- Footer ---------- */
.footer {
  background: var(--color-secundario-oscuro);
  color: rgba(255,255,255,0.85);
  padding: 56px 0 32px;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 32px;
}

.footer h4 {
  color: var(--color-superficie);
  font-size: 1rem;
  margin-bottom: 12px;
}

.footer a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.7);
  font-size: 0.92rem;
  margin-bottom: 8px;
  transition: color 0.2s ease;
}

.footer a:hover { color: var(--color-acento); }

.footer__redes {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.footer__red {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 0;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.footer__red svg {
  width: 18px;
  height: 18px;
}

a.footer__red:hover {
  background: var(--color-acento);
  color: var(--color-secundario-oscuro);
  transform: translateY(-2px);
}

.footer__red--proximamente {
  cursor: default;
  opacity: 0.4;
}

.footer__base {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 20px;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.55);
  text-align: center;
}

@media (max-width: 700px) {
  .footer__grid { grid-template-columns: 1fr; }
}