/* =============================================================
   CARIOCAS — "El pliego, la cinta y la etiqueta"

   La idea: la página es una hoja de papel de regalo. Las secciones
   son planos de papel que se pisan entre sí; una cinta coral baja
   enhebrándolo todo; los rótulos son etiquetas troqueladas.

   Dos reglas que sostienen el estilo y NO se rompen:
     1. La profundidad se hace SOLO por superposición de papeles.
        Cero sombras. Ni una.
     2. Un solo momento de animación con protagonismo: la cinta.
        Todo lo demás entra en silencio.

   Orden: 1 tokens · 2 base · 3 utilidades · 4 tipografía
          5 piezas · 6 secciones · 7 cinta y movimiento
          8 responsive · 9 movimiento reducido
   ============================================================= */


/* =============================================================
   1. TOKENS  (paleta del brandbook — editar sólo acá)
   ============================================================= */
:root{
  /* Paleta oficial "Coral & Crema" */
  --coral:      #E76F51;   /* Principal — acciones y la cinta */
  --coral-ink:  #A8431F;   /* Coral oscuro — texto coral y fondo del cierre */
  --coral-pale: #F6C3B2;   /* Coral lavado — planos y trazos suaves */
  --turquesa:   #2A9D8F;   /* Acento */
  --turquesa-pale:#BFE4DE;
  --crema:      #FAF3E0;   /* Fondo — manda en la página */
  --carbon:     #2B2B2B;   /* Texto */

  /* Los papeles. Se distinguen por tono, nunca por sombra. */
  --papel:      #FFFDF6;
  --arena:      #F3EAD4;
  --arena-2:    #EDE2C7;
  --linea:      #DCCFB2;   /* Hilo de 1px: el único borde que existe */
  --gris:       #6F6757;   /* Texto secundario */

  /* Verde WhatsApp tal cual, el que la gente reconoce. El texto va en
     carbón y no en blanco: blanco sobre este verde da 1.98:1 y es
     ilegible; carbón da 7.4:1 y el verde se mantiene intacto. */
  --wa:         #25D366;
  --wa-hover:   #1EBE5B;

  /* Escala tipográfica. Fija: no hay tamaños fuera de esta lista. */
  --t-xs:   0.75rem;
  --t-sm:   0.875rem;
  --t-base: 1rem;
  --t-md:   1.0625rem;
  --t-lg:   clamp(1.25rem, 2.4vw, 1.5rem);
  --t-xl:   clamp(1.75rem, 4.6vw, 2.75rem);
  --t-2xl:  clamp(2.5rem, 8.2vw, 4.75rem);

  /* Ritmo vertical. Todo espacio sale de acá. */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2.5rem;
  --s-5: 4rem;
  --s-6: 6rem;
  --s-7: clamp(5rem, 12vw, 9rem);

  --shell:  1120px;
  --gutter: 22px;

  --ease: cubic-bezier(.16,1,.3,1);   /* salida exponencial */
}


/* =============================================================
   2. BASE
   ============================================================= */
*,*::before,*::after{ box-sizing:border-box; margin:0; }

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

body{
  background:var(--crema);
  color:var(--carbon);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:var(--t-base);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}

img,svg{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none; }
ul,ol{ list-style:none; padding:0; }
p{ text-wrap:pretty; }

/* --- Las superficies que no dibujé, vestidas igual que el resto --- */
::selection{ background:var(--coral); color:var(--crema); }
html{ caret-color:var(--coral); accent-color:var(--coral); scrollbar-color:var(--coral-pale) var(--crema); }
html{ scrollbar-width:thin; }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--crema); }
::-webkit-scrollbar-thumb{ background:var(--coral-pale); border:3px solid var(--crema); border-radius:99px; }
::-webkit-scrollbar-thumb:hover{ background:var(--coral); }

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


/* =============================================================
   3. UTILIDADES
   ============================================================= */
.shell{
  width:100%; max-width:var(--shell);
  margin-inline:auto; padding-inline:var(--gutter);
}

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

.skip-link{
  position:fixed; top:-100px; left:16px; z-index:200;
  padding:.7rem 1.1rem; border-radius:2px;
  background:var(--carbon); color:var(--crema); font-weight:600;
}
.skip-link:focus{ top:16px; }


/* =============================================================
   4. TIPOGRAFÍA
   ============================================================= */
h1,h2,h3{
  font-family:'Poppins',system-ui,sans-serif;
  font-weight:600;
  line-height:1.04;
  letter-spacing:-.035em;
  text-wrap:balance;
}
h1{ font-weight:700; font-size:var(--t-2xl); }
h2{ font-size:var(--t-xl); }
h3{ font-size:var(--t-lg); letter-spacing:-.02em; }

.lead{
  font-size:var(--t-md);
  color:var(--gris);
  max-width:46ch;          /* medida de lectura */
}
.prosa{ max-width:66ch; }


/* =============================================================
   5. PIEZAS
   ============================================================= */

/* ---- 5.1 Logo (isotipo del brandbook + wordmark) ---- */
.logo{
  display:inline-flex; align-items:center;
  gap:.34em;                 /* ≈ X, el grosor de la C: el aire del manual */
  font-size:34px; line-height:1;
}
.logo-iso{ width:1em; height:1em; flex:none; overflow:visible; }
.logo-c,.logo-sonrisa{ stroke:var(--coral); }
.logo-confeti{ fill:var(--turquesa); }
.logo-word{
  font-family:'Poppins',sans-serif; font-weight:700;
  font-size:.6em; letter-spacing:-.03em; color:var(--carbon);
}
.logo-neg .logo-c,
.logo-neg .logo-sonrisa{ stroke:var(--crema); }
.logo-neg .logo-confeti{ fill:var(--crema); }
.logo-neg .logo-word{ color:var(--crema); }

/* ---- 5.2 La etiqueta de regalo ----
   Rectángulo con la punta izquierda cortada y un ojal.
   Es la forma que rotula todo: categorías, rubros, estados. */
.tag{
  position:relative;
  display:inline-flex; align-items:center;
  padding:.5rem 1rem .5rem 1.6rem;
  background:var(--papel);
  border:1px solid var(--linea);
  clip-path:polygon(0.85rem 0, 100% 0, 100% 100%, 0.85rem 100%, 0 50%);
  font-size:var(--t-xs);
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gris);
  white-space:nowrap;
}
.tag::before{            /* el ojal */
  content:""; position:absolute; left:.95rem; top:50%;
  width:5px; height:5px; margin-top:-2.5px;
  border-radius:50%;
  background:var(--crema);
  border:1px solid var(--linea);
}

/* ---- 5.3 Botones ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.6em;
  padding:1rem 1.6rem;
  font-family:'Inter',sans-serif;
  font-weight:600; font-size:var(--t-base);
  border:1px solid transparent;
  transition:background-color .35s var(--ease), color .35s var(--ease),
             border-color .35s var(--ease);
}
.btn-ico{ width:1.15em; height:1.15em; flex:none; fill:currentColor; }

.btn-wa{ background:var(--wa); color:var(--carbon); }
.btn-wa:hover{ background:var(--wa-hover); }

.btn-linea{
  background:transparent; color:var(--carbon);
  border-color:var(--carbon);
}
.btn-linea:hover{ background:var(--carbon); color:var(--crema); }

/* Enlace de texto con subrayado propio (no el del navegador) */
.link{
  display:inline-flex; align-items:center; gap:.45em;
  font-weight:600; font-size:var(--t-sm);
  color:var(--coral-ink);
  padding-bottom:2px;
  border-bottom:1px solid var(--coral-pale);
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.link:hover{ border-bottom-color:var(--coral); color:var(--coral); }
.link svg{ width:1em; height:1em; fill:currentColor; }


/* =============================================================
   6. SECCIONES
   ============================================================= */

/* ---- 6.1 Barra superior ---- */
.topbar{
  position:sticky; top:0; z-index:100;
  background:var(--crema);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease);
}
.topbar.is-stuck{ border-bottom-color:var(--linea); }
.topbar-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-2);
  min-height:74px;
}
.topbar .logo{ font-size:30px; }

/* ---- 6.2 Portada ----
   Sin foto y sin columna de imagen al costado: el encabezado es la
   guirnalda, y el título va debajo, a todo el ancho. */
.hero{ padding-block:0 var(--s-6); }

/* --- La guirnalda de papel picado --- */
.picado{
  position:relative;
  margin-bottom:var(--s-5);
  /* La perspectiva hace que el giro de cada banderín sea real y no
     un simple achatamiento. */
  perspective:900px;
  perspective-origin:50% 0;
}
.picado-hilo{
  display:block; width:100%; height:46px;
  fill:none; stroke:var(--linea); stroke-width:2.5;
}
.picado-fila{
  display:flex; align-items:flex-start;
  margin-top:-42px;        /* los banderines cuelgan DEL hilo */
  padding-inline:clamp(4px,2vw,28px);
  gap:clamp(2px,.9vw,12px);
}
.pf{
  flex:1 1 0; min-width:0;
  margin-top:var(--y,0);
  transform-origin:50% 0;
  transform-style:preserve-3d;
  will-change:transform;
  animation:colgar 7.5s var(--d,0s) ease-in-out infinite;
}
.pf svg{ width:100%; height:auto; }

/* El vaivén: gira sobre el hilo y se tuerce mostrando el canto.
   7,5 s es deliberadamente lento: tiene que leerse como aire, no
   como un efecto. */
@keyframes colgar{
  0%,100%{ transform:rotate(-1.5deg) rotateY(-8deg); }
  50%    { transform:rotate( 1.5deg) rotateY( 8deg); }
}

/* --- El título --- */
.hero-caja{ text-align:center; }
.hero h1{ max-width:15ch; margin-inline:auto; }
.hero h1 em{ font-style:normal; color:var(--coral-ink); }
.hero .lead{ margin:var(--s-3) auto 0; }
.hero-act{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:var(--s-2) var(--s-3);
  margin-top:var(--s-4);
}
.hero-nota{ margin-top:var(--s-3); font-size:var(--t-sm); color:var(--gris); }

/* ---- 6.3 Cómo pedís ----
   Sin tarjetas, sin números: tres párrafos colgados de la cinta. */
.pasos{ padding-block:var(--s-6); background:var(--arena); }
.pasos-lista{
  display:grid; gap:var(--s-4);
  margin-top:var(--s-4);
}
.paso h3{ margin-bottom:var(--s-1); }
.paso p{ color:var(--gris); font-size:var(--t-sm); max-width:38ch; }
.paso-marca{             /* un trazo corto de cinta, no un número */
  display:block; width:26px; height:2px;
  background:var(--coral); margin-bottom:var(--s-2);
}

/* ---- 6.4 Catálogo ---- */
.catalogo{ padding-block:var(--s-6); }
.catalogo-cabeza{
  display:grid; gap:var(--s-2);
  margin-bottom:var(--s-4);
}

/* Fila de etiquetas: la activa y las que todavía no abrieron */
.rubros{
  display:flex; flex-wrap:wrap; gap:var(--s-1) .6rem;
  align-items:center;
  margin-bottom:var(--s-4);
  padding-top:var(--s-2);
  border-top:1px solid var(--linea);
}
.rubro-on{
  background:var(--coral-ink); border-color:var(--coral-ink); color:var(--crema);
}
.rubro-on::before{ background:var(--coral); border-color:var(--coral); }

/* Las categorías que aún no abren: diseñadas, no ausentes.
   Se distinguen por el troquelado punteado y el papel vacío,
   no por un texto más claro: el texto mantiene su contraste. */
.rubro-off{
  background:transparent;
  border-style:dashed;
  color:var(--gris);
}
.rubro-off::before{ background:var(--crema); border-style:dashed; }
.rubros-nota{
  font-size:var(--t-xs); color:var(--gris);
  margin-left:auto; letter-spacing:.02em;
}

/* La grilla: los productos van sobre el papel, sin caja ni sombra */
.grilla{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--s-4) var(--s-3);
}
.prod{ display:flex; flex-direction:column; }
.prod-lamina{
  position:relative;
  aspect-ratio:1/1;
  background:var(--papel);
  border:1px solid var(--linea);
  overflow:hidden;
}
/* La foto del producto entra como fondo de la lámina: así se recorta
   sola a cuadrado sin deformarse, venga del tamaño que venga. */
.prod-lamina{
  background-size:cover;
  background-position:center;
  transition:transform .8s var(--ease);
}
.prod:hover .prod-lamina{ transform:scale(1.03); }

/* Producto todavía sin foto: papel vacío con un trazo de cinta,
   no un cuadro roto. */
.prod-sinfoto{
  display:grid; place-items:center;
  background:var(--arena);
}
.prod-sinfoto::after{
  content:""; width:34px; height:2px;
  background:var(--coral-pale);
}

/* Mientras el catálogo carga, o si no pudo cargar */
.grilla-estado{
  padding:48px 20px;
  text-align:center;
  font-size:var(--t-sm); color:var(--gris);
  max-width:46ch; margin-inline:auto;
}
.grilla-estado[hidden]{ display:none; }
.prod h3{
  margin-top:var(--s-2);
  font-size:var(--t-base);
  letter-spacing:-.02em;
}
.prod p{
  margin-top:2px;
  font-size:var(--t-sm); color:var(--gris);
  max-width:34ch;
}
.prod .link{ margin-top:var(--s-2); align-self:flex-start; }

/* ---- 6.5 Para quien organiza ----
   Una ficha troquelada: el borde punteado de arriba la hace leer como
   el cupón que se corta al pie de un volante. Va más chica que las
   demás secciones a propósito: es una puerta lateral, no la principal. */
.organiza{ padding-block:var(--s-6); }
.ficha{
  max-width:620px;
  padding:var(--s-3);
  background:var(--papel);
  border:1px solid var(--linea);
  border-top:2px dashed var(--coral-pale);
}
.ficha h2{
  font-size:var(--t-lg);
  margin-bottom:var(--s-1);
}
.ficha p{
  color:var(--gris); font-size:var(--t-sm);
  max-width:52ch; margin-bottom:var(--s-3);
}

/* ---- 6.6 Cierre ----
   El único momento de compromiso total del color. Pasa una vez. */
.cierre{
  background:var(--coral-ink);
  color:var(--crema);
  padding-block:var(--s-7);
  text-align:center;
}
.cierre h2{ max-width:14ch; margin-inline:auto; }
.cierre .lead{
  color:#F1DCCF;
  margin:var(--s-3) auto 0;
  max-width:42ch;
}
.cierre .btn-wa{ margin-top:var(--s-4); }
.cierre-nota{ margin-top:var(--s-3); font-size:var(--t-sm); color:#F5E3D9; }

/* ---- 6.7 Pie ---- */
.pie{ background:var(--carbon); color:var(--crema); padding-block:var(--s-5) var(--s-3); }
.pie-grid{ display:grid; gap:var(--s-4); }
.pie .logo{ font-size:30px; }
.pie h3{
  font-family:'Inter',sans-serif;
  font-size:var(--t-xs); font-weight:600;
  text-transform:uppercase; letter-spacing:.14em;
  color:var(--turquesa-pale);
  margin-bottom:var(--s-1);
}
.pie p{ font-size:var(--t-sm); color:#D8D2C4; }
.pie strong{ color:var(--crema); font-weight:600; }
.pie-bloque + .pie-bloque{ margin-top:var(--s-3); }
.pie .link{ color:var(--crema); border-bottom-color:#6E665A; }
.pie .link:hover{ color:var(--coral-pale); border-bottom-color:var(--coral-pale); }
.pie-legal{
  margin-top:var(--s-4); padding-top:var(--s-3);
  border-top:1px solid #45413A;
  display:flex; flex-wrap:wrap; gap:.4rem var(--s-3);
  justify-content:space-between;
  font-size:var(--t-xs); color:#A49C8C;
}
.pie-legal a{ color:#C9C1B2; border-bottom:1px solid #5A5349; }


/* =============================================================
   7. LA CINTA Y EL MOVIMIENTO
   ============================================================= */

/* La cinta: un solo trazo coral que baja enhebrando la página.
   El recorrido lo calcula main.js con las posiciones reales de
   las secciones, así que se adapta a cualquier alto y ancho. */
.lienzo{ position:relative; }

/* Ojo: la cinta queda fuera del flujo. Si una regla le devolviera
   position:relative, su alto volvería a contar y empujaría la
   página hacia abajo sin fin. Por eso el :not() de abajo. */
.cinta{
  position:absolute !important;
  inset:0;
  width:100% !important; height:100% !important;
  pointer-events:none;
  /* Por encima de los planos de papel: una cinta se apoya sobre el
     envoltorio, no se esconde debajo. Corre por el margen izquierdo,
     donde nunca hay texto, así que puede ir arriba sin molestar. */
  z-index:2;
  overflow:visible;
}
.cinta path{
  fill:none;
  stroke:var(--coral);
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.lienzo > *:not(.cinta){ position:relative; z-index:1; }

/* El nudo donde la cinta termina */
.nudo{ width:46px; height:46px; margin:0 auto var(--s-3); }
.nudo path{ fill:none; stroke:var(--crema); stroke-width:2.5; stroke-linecap:round; }

/* Entradas en silencio: un desplazamiento corto y nada más */
[data-entra]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
[data-entra].vista{ opacity:1; transform:none; }

/* Sin JS no se esconde nada */
.no-js [data-entra]{ opacity:1; transform:none; }
.no-js .cinta{ display:none; }


/* =============================================================
   8. RESPONSIVE  (540 · 720 · 960 · 1280)
   ============================================================= */
/* En pantallas angostas sobran banderines: diez entran de 32 px y se
   pierde el calado. Mejor seis, grandes y legibles. */
@media (max-width:539px){
  .pf:nth-child(n+7){ display:none; }
}

@media (min-width:540px){
  .grilla{ gap:var(--s-4) var(--s-4); }
}

@media (min-width:720px){
  :root{ --gutter:32px; }
  .pasos-lista{ grid-template-columns:repeat(3,1fr); gap:var(--s-3); }
  .grilla{ grid-template-columns:repeat(3,1fr); }
  .pie-grid{ grid-template-columns:1.2fr 1fr 1fr; }
  .catalogo-cabeza{
    grid-template-columns:1fr auto;
    align-items:end;
  }
}

@media (min-width:960px){
  .hero{ padding-bottom:var(--s-7); }
  .picado{ margin-bottom:var(--s-6); }
}

@media (min-width:1280px){
  .grilla{ gap:var(--s-5) var(--s-4); }
}


/* =============================================================
   9. MOVIMIENTO REDUCIDO
   Sólo se apaga lo que se mueve solo. Las entradas y la cinta
   quedan en su estado final, no desaparecen.
   ============================================================= */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  [data-entra]{ opacity:1; transform:none; transition:none; }
  .prod-lamina svg{ transition:none; }
  /* La guirnalda deja de mecerse, pero sigue colgada y visible */
  .pf{ animation:none; transform:rotate(0) rotateY(0); }
}