/* site.css — Marketing site styles. Requires /css/tokens.css loaded first. */

/* NAV */
nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247,240,225,.82); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; padding: .9rem 0; }
.brand { font-family: var(--wordmark); font-weight: 500; font-size: clamp(1.7rem, 2.7vw, 2rem); letter-spacing: .01em; color: var(--cacao); display: flex; align-items: center; }
.brand .amp { color: var(--caramelo); font-style: italic; padding: 0 .22em; }
.nav-links { display: flex; gap: 2rem; align-items: center; }
.nav-links a {
  font-size: .86rem; font-weight: 500; letter-spacing: .02em;
  position: relative; padding: .2rem 0; color: var(--cacao-suave); transition: color .2s;
}
.nav-links a::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 1.5px; width: 0; background: var(--mantequilla); transition: width .25s ease; }
.nav-links a:hover { color: var(--cacao); }
.nav-links a:hover::after { width: 100%; }
.nav-links a.nav-cta {
  color: var(--caramelo-osc) !important;
  border: 1.5px solid var(--caramelo-osc);
  border-radius: 999px;
  padding: .4rem 1.05rem;
  font-size: .84rem; font-weight: 600;
  background: transparent;
  display: inline-flex; align-items: center; min-height: 44px;
  transition: background .18s, color .18s;
}
.nav-links a.nav-cta::after { display: none !important; }
.nav-links a.nav-cta:hover {
  background: var(--caramelo-osc);
  color: var(--crema) !important;
}
.lang-toggle { background: none; border: 1.5px solid var(--linea); border-radius: 999px; padding: .28rem .9rem; min-height: 44px; font-size: .76rem; color: var(--cacao); cursor: pointer; font-family: var(--body); display: inline-flex; align-items: center; gap: .22rem; letter-spacing: .06em; transition: border-color .2s; }
.lang-toggle:hover { border-color: var(--caramelo); }
.nav-toggle { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: none; border: none; cursor: pointer; min-width: 44px; min-height: 44px; }
.nav-toggle span { width: 22px; height: 2px; background: var(--cacao); border-radius: 2px; }

/* HERO */
header.hero { position: relative; padding: clamp(3rem,7vw,6rem) 0 clamp(2rem,5vw,4rem); }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,5vw,4.5rem); align-items: center; }
.hero-tag { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid var(--linea); border-radius: 999px; padding: .35rem .9rem; font-size: .74rem; font-weight: 600; letter-spacing: .04em; color: var(--caramelo-osc); margin-bottom: 1.6rem; background: var(--azucar); }
.hero-tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pistache); flex-shrink: 0; }
.hero h1 { font-family: var(--display); font-weight: 500; font-size: clamp(2.6rem,6.3vw,5rem); line-height: 1.02; letter-spacing: -.02em; margin-bottom: 1.4rem; }
.hero h1 em { font-style: italic; color: var(--caramelo); }
.hero h1 .amp { color: var(--mantequilla); font-style: italic; }
.lead { font-size: clamp(1rem,1.4vw,1.18rem); max-width: 34ch; color: var(--cacao-suave); margin-bottom: 2rem; }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }

/* Hero CTA — ancla principal */
.cta-pedido {
  display: inline-flex; align-items: center; gap: 1.1rem;
  background: var(--caramelo); color: var(--crema);
  border-radius: 999px; padding: .9rem 1rem .9rem 1.8rem;
  font-family: var(--body); font-size: 1.05rem; font-weight: 700;
  text-decoration: none; letter-spacing: .01em;
  box-shadow: 0 6px 28px -6px rgba(176,106,44,.45);
  animation: cta-glow 3s ease-in-out infinite;
  transition: background .22s, transform .22s, box-shadow .22s;
}
.cta-pedido .cta-label { white-space: nowrap; }
.cta-pedido .cta-icon {
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,253,247,.22);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; flex-shrink: 0;
  transition: transform .22s ease, background .22s;
}
.cta-pedido:hover { background: var(--caramelo-osc); transform: translateY(-3px); box-shadow: 0 16px 40px -10px rgba(138,79,30,.55); animation: none; }
.cta-pedido:hover .cta-icon { transform: translateX(4px); background: rgba(255,253,247,.32); }
@keyframes cta-glow {
  0%,100% { box-shadow: 0 6px 28px -6px rgba(176,106,44,.45), 0 0 0 0 rgba(176,106,44,.25); }
  55%      { box-shadow: 0 6px 28px -6px rgba(176,106,44,.45), 0 0 0 9px rgba(176,106,44,0); }
}
.hero-art { position: relative; display: grid; place-items: center; min-height: 340px; }
.art-disc { position: absolute; inset: 0; margin: auto; width: min(420px,82%); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 42%, #F6D798 0%, var(--mantequilla) 42%, var(--caramelo) 100%); box-shadow: inset 0 -18px 50px rgba(138,79,30,.45), 0 30px 60px -30px rgba(176,106,44,.6); }
.palmier { position: relative; width: min(300px,62%); z-index: 2; filter: drop-shadow(0 14px 22px rgba(58,36,23,.28)); }
.float-chip { position: absolute; z-index: 3; background: var(--azucar); border: 1px solid var(--linea); border-radius: 14px; padding: .55rem .85rem; font-size: .78rem; font-weight: 600; color: var(--cacao); box-shadow: 0 12px 30px -16px rgba(58,36,23,.45); display: flex; align-items: center; gap: .45rem; }
.float-chip small { display: block; font-weight: 500; color: var(--cacao-suave); font-size: .68rem; }
.chip-1 { top: 6%; left: -4%; }
.chip-2 { bottom: 8%; right: -2%; }
.chip-ico { width: 22px; height: 22px; flex-shrink: 0; }
.ph-cam { width: 14px; height: 14px; vertical-align: -2px; margin-right: .25rem; }

/* RIBBON */
.ribbon { background: var(--cacao); color: var(--crema); padding: .85rem 0; overflow: hidden; border-block: 1px solid rgba(255,253,247,.12); }
.ribbon-track { display: flex; gap: 2.5rem; white-space: nowrap; width: max-content; animation: slide 32s linear infinite; }
.ribbon-track span { font-family: var(--display); font-style: italic; font-size: 1.05rem; letter-spacing: .02em; display: inline-flex; align-items: center; gap: 2.5rem; color: #F3E4C2; }
.ribbon-track span::after { content: "✶"; color: var(--mantequilla); font-style: normal; }
@keyframes slide { to { transform: translateX(-50%); } }

/* SECTION SHELL */
section { padding: clamp(3.5rem,7vw,6.5rem) 0; }
.sec-head { max-width: 60ch; margin-bottom: 2.8rem; }
.sec-head h2 { font-family: var(--display); font-weight: 500; font-size: clamp(2rem,4vw,3rem); line-height: 1.08; letter-spacing: -.02em; margin: .7rem 0 .9rem; }
.sec-head h2 em { font-style: italic; color: var(--caramelo); }
.sec-head p { color: var(--cacao-suave); font-size: 1.05rem; max-width: 52ch; }

/* HISTORIA */
#historia { background: var(--azucar); border-block: 1px solid var(--linea); }
.historia-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem,5vw,4.5rem); align-items: center; }
.historia-photo { aspect-ratio: 4/5; border-radius: 20px; overflow: hidden; background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.35), transparent 45%), linear-gradient(150deg,#EBC987 0%, var(--caramelo) 60%, var(--caramelo-osc) 100%); display: grid; place-items: center; text-align: center; border: 1px solid rgba(58,36,23,.12); }
.historia-photo .ph-note { font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: #fff6e6; background: rgba(58,36,23,.35); padding: .5rem .9rem; border-radius: 999px; backdrop-filter: blur(2px); }
.historia-photo .ph-pal { width: 46%; opacity: .92; margin-bottom: 1rem; filter: drop-shadow(0 10px 18px rgba(58,36,23,.3)); }
.historia-body h2 { font-family: var(--display); font-weight: 500; font-size: clamp(1.9rem,3.6vw,2.8rem); line-height: 1.1; letter-spacing: -.02em; margin: .8rem 0 1.2rem; }
.historia-body h2 em { font-style: italic; color: var(--caramelo); }
.historia-body p { color: var(--cacao-suave); margin-bottom: 1.1rem; font-size: 1.05rem; }
.historia-body p strong { color: var(--cacao); font-weight: 600; }
.historia-body .btn { margin-top: .5rem; }

/* PRODUCTOS */
.productos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin-top: 1rem; }
.producto-card { border: 1px solid var(--linea); border-radius: var(--e-r-lg); overflow: hidden; background: var(--azucar); box-shadow: var(--e-shadow-sm); transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.producto-card:hover { transform: translateY(-4px); box-shadow: var(--e-shadow-lg); }
.producto-art { aspect-ratio: 4/3; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #F6D798 0%, var(--mantequilla) 50%, var(--caramelo) 100%); }
.producto-art svg { width: 55%; filter: drop-shadow(0 8px 16px rgba(58,36,23,.3)); }
.concha-art { background: radial-gradient(circle at 50% 40%, #F9E4C8 0%, var(--caramelo) 60%, var(--caramelo-osc) 100%); }
.cake-art { background: radial-gradient(circle at 50% 40%, #EDD5B8 0%, var(--caramelo-osc) 60%, var(--cacao) 100%); }
.producto-inicial { font-family: var(--display); font-size: 4rem; font-weight: 600; color: rgba(255,253,247,.65); line-height: 1; }
.producto-info { padding: 1.4rem 1.5rem; }
.producto-info h3 { font-family: var(--display); font-weight: 500; font-size: 1.5rem; letter-spacing: -.01em; margin-bottom: .2rem; }
.producto-sub { font-style: italic; color: var(--cacao-suave); font-size: .9rem; margin-bottom: .7rem; }
.producto-desc { font-size: .92rem; color: var(--cacao-suave); margin-bottom: 1.1rem; max-width: 28ch; }

/* PROCESO */
.proceso-dark { background: var(--cacao); color: var(--crema); border-block: 1px solid rgba(255,253,247,.08); }
.proceso-dark .eyebrow { color: var(--mantequilla); }
.proceso-dark .sec-head h2 { color: var(--crema); }
.proceso-dark .sec-head h2 em { color: var(--mantequilla); }
.proceso-dark .sec-head p { color: #E3D4BC; }
.pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.4rem; margin-top: 1rem; }
.paso { border: 1px solid rgba(255,253,247,.14); border-radius: 18px; padding: 1.8rem 1.6rem; background: rgba(255,253,247,.03); transition: transform .2s var(--ease-out), background .2s var(--ease-out); }
.paso:hover { transform: translateY(-4px); background: rgba(255,253,247,.06); }
.paso .p-num { font-family: var(--display); font-style: italic; font-weight: 600; font-size: 2.2rem; color: var(--mantequilla); line-height: 1; margin-bottom: 1rem; display: block; }
.paso h3 { font-family: var(--display); font-weight: 500; font-size: 1.35rem; margin-bottom: .5rem; }
.paso p { color: #E3D4BC; font-size: .95rem; }

/* PEDIDOS */
.pedidos-card { background: radial-gradient(circle at 85% 15%, rgba(232,176,75,.22), transparent 55%), var(--azucar); border: 1px solid var(--linea); border-radius: 26px; padding: clamp(2.4rem,5vw,4rem); display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }
.pedidos-card h2 { font-family: var(--display); font-weight: 500; font-size: clamp(2rem,3.6vw,2.9rem); line-height: 1.08; letter-spacing: -.02em; margin: .5rem 0 1rem; }
.pedidos-card h2 em { font-style: italic; color: var(--caramelo); }
.pedidos-card > div > p { color: var(--cacao-suave); font-size: 1.05rem; margin-bottom: 1.8rem; max-width: 42ch; }
.pedidos-list { list-style: none; display: flex; flex-direction: column; gap: .8rem; }
.pedidos-list li { display: flex; gap: .8rem; align-items: flex-start; font-size: .98rem; }
.tick { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--pistache); color: #fff; display: grid; place-items: center; font-size: .7rem; margin-top: .15rem; font-weight: 700; }
.pedidos-actions { display: flex; flex-direction: column; gap: .8rem; }
.pedidos-actions .btn { justify-content: center; }

/* DONDE ENCONTRARNOS
   Banda oscura: el logotipo de 956 es negro sobre transparente y necesita un
   fondo claro propio. Sobre una placa crema en campo oscuro se lee como un
   letrero encendido de noche, que es justo lo que la seccion quiere decir.
   El rojo ladrillo es la marca de ELLOS, tomado de su logotipo: vive aqui con
   alcance de seccion y NO sube a tokens.css. */
#donde { --ladrillo: #A62A24; background: var(--cacao); color: var(--crema); border-block: 1px solid rgba(255,253,247,.08); }
#donde .eyebrow { color: var(--mantequilla); }
.donde-head { max-width: 46ch; }
.donde-head h2 { font-family: var(--display); font-weight: 500; font-size: clamp(2.1rem,4vw,3.2rem); line-height: 1.06; letter-spacing: -.02em; margin: .5rem 0 1rem; color: var(--crema); }
.donde-head h2 em { font-style: italic; color: var(--mantequilla); }
.donde-head > p { color: #E3D4BC; font-size: 1.05rem; line-height: 1.6; }

/* El letrero. La placa es el elemento firma de la seccion. */
.donde-sign { display: flex; align-items: center; gap: clamp(1.5rem,5vw,4rem); flex-wrap: wrap; margin: clamp(2.5rem,5vw,3.5rem) 0; }
.donde-placa { background: var(--azucar); border-radius: 14px; padding: clamp(1.1rem,2.4vw,1.6rem) clamp(1.4rem,3vw,2.2rem); box-shadow: 0 18px 44px -18px rgba(0,0,0,.6), 0 0 0 1px rgba(255,253,247,.1); flex: 0 1 auto; }
.donde-placa img { display: block; width: clamp(200px,32vw,340px); height: auto; }

/* El numero pesa mas que el encabezado: es lo que se lee desde el coche.
   `address` viene en italica por defecto del navegador. */
.donde-dir { font-style: normal; display: flex; align-items: baseline; gap: 1rem; }
.donde-num { font-family: var(--display); font-weight: 600; font-size: clamp(3.6rem,8.5vw,5.6rem); line-height: .82; letter-spacing: -.04em; color: var(--mantequilla); }
.donde-calle { font-family: var(--body); font-size: 1.05rem; line-height: 1.35; color: #E3D4BC; }

/* Renglon bajo: los datos practicos en linea, sin tarjeta con hueco muerto. */
.donde-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.4rem; padding-top: 1.8rem; border-top: 1px solid rgba(255,253,247,.12); }
.donde-dato { font-size: .95rem; color: #E3D4BC; }
.donde-dato b { font-weight: 600; color: var(--crema); margin-left: .4rem; }
.donde-dato a { color: var(--crema); text-decoration: none; border-bottom: 1px solid rgba(255,253,247,.25); }
.donde-dato a:hover { border-bottom-color: var(--mantequilla); color: var(--mantequilla); }
.donde-dato a:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(232,176,75,.35); border-radius: 4px; }
/* La estrella separa, no decora: es el motivo de 956 haciendo de vineta. */
.donde-sep { width: 13px; height: 13px; fill: var(--ladrillo); flex: none; }
.donde-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-left: auto; }
.btn-ghost { border: 1px solid rgba(255,253,247,.28); color: var(--crema); background: transparent; }
.btn-ghost:hover { border-color: var(--mantequilla); color: var(--mantequilla); }

.donde-nota { margin-top: 1.6rem; font-size: .88rem; line-height: 1.5; color: #B9A68C; max-width: 52ch; }

/* FOOTER */
footer { padding: 3.5rem 0 2.5rem; border-top: 1px solid var(--linea); }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 3rem; margin-bottom: 2.5rem; }
.foot-brand { font-family: var(--wordmark); font-size: 2.3rem; font-weight: 500; line-height: 1; letter-spacing: .01em; }
.foot-brand .amp { color: var(--caramelo); font-style: italic; padding: 0 .18em; }
.foot-tag { color: var(--cacao-suave); font-size: .92rem; margin-top: .5rem; max-width: 28ch; line-height: 1.6; }
.foot-sub { color: var(--caramelo-osc); font-size: .82rem; margin-top: .4rem; }
.foot-links { display: flex; flex-direction: column; gap: .6rem; }
.foot-links a { font-size: .88rem; color: var(--cacao-suave); transition: color .2s; }
.foot-links a:hover { color: var(--caramelo); }
.foot-meta { font-size: .86rem; color: var(--cacao-suave); line-height: 1.9; }
.foot-bottom { padding-top: 1.5rem; border-top: 1px solid var(--linea); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .78rem; color: var(--cacao-suave); }

/* RESPONSIVE */
@media (max-width: 860px) {
  .nav-links { position: absolute; top: 100%; left: 0; right: 0; background: var(--crema); flex-direction: column; align-items: flex-start; gap: 1.2rem; padding: 1.4rem 4vw 2rem; border-bottom: 1px solid var(--linea); transform: translateY(-130%); transition: transform .3s ease; }
  .nav-links.open { transform: translateY(0); }
  .nav-toggle { display: flex; }
  .hero-grid, .historia-grid, .pedidos-card, .foot-grid { grid-template-columns: 1fr; }
  /* Apilada, el `margin-left:auto` empujaría los botones contra el borde
     derecho en su propio renglón. Al ras de la izquierda, como todo lo demás. */
  .donde-actions { margin-left: 0; width: 100%; }
  .donde-actions .btn { flex: 1 1 auto; justify-content: center; }
  .hero-art { order: -1; min-height: 280px; }
  /* Stack hero CTAs full-width so nothing clips on narrow screens */
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .cta-pedido { justify-content: center; }
  .hero-actions .btn-secondary { justify-content: center; }
  /* Keep floating chips inside the viewport on small screens */
  .float-chip { font-size: .72rem; padding: .45rem .7rem; max-width: 46%; }
  .chip-1 { left: 2%; }
  .chip-2 { right: 2%; }
  /* Comfortable tap height for stacked mobile nav links */
  .nav-links a { display: flex; align-items: center; min-height: 44px; }
}

/* Footer collapses to a single column on small phones */
@media (max-width: 560px) {
  .foot-bottom { flex-direction: column; gap: .5rem; }
}

/* Respect reduced-motion for the infinite/looping animations */
@media (prefers-reduced-motion: reduce) {
  .cta-pedido { animation: none; }
  .ribbon-track { animation: none; }
}

/* ── Refinamientos de diseño (oficial) ── */
.cta-pedido:active { transform: scale(.98); }
.nav-links a.nav-cta:active { transform: scale(.97); }
@media (hover: none), (pointer: coarse) {
  .producto-card:hover, .paso:hover { transform: none; }
}

/* ── Fotos de sección de la landing (Mezcla: stock, reemplazables) ──────── */
.producto-art.has-photo,
.historia-photo.has-photo,
.art-disc.has-photo { background-size: cover; background-position: center; }
.producto-art.has-photo > * { display: none; }           /* oculta el SVG/inicial del placeholder */
.historia-photo.has-photo .ph-pal { display: none; }     /* deja la etiqueta @butter.andsugar */
.historia-photo.has-photo { place-items: end center; padding-bottom: 1rem; } /* etiqueta al pie */
.hero-art.has-photo .palmier { display: none; }          /* deja los float-chips sobre la foto */

/* Banda de foto en la sección Proceso (oscura) */
.proceso-photo {
  height: clamp(180px, 26vw, 300px); border-radius: 20px; margin-bottom: 2.8rem;
  background-size: cover; background-position: center;
  border: 1px solid rgba(255,253,247,.12);
  box-shadow: 0 24px 55px -32px rgba(0,0,0,.7);
}

/* Callout a BÁSICO desde el landing de marketing (navy) */
.basico-badge { display: inline-block; vertical-align: middle; color: var(--basico); }
.basico-callout {
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  text-decoration: none; margin-top: 2.5rem; padding: 1.5rem 1.9rem; border-radius: 18px;
  background: linear-gradient(120deg, #101820 0%, #24384C 100%); color: #EAF0F5;
  transition: transform .18s ease, box-shadow .18s ease;
}
.basico-callout:hover { transform: translateY(-3px); box-shadow: 0 20px 44px -22px rgba(16,24,32,.75); }
.basico-callout .basico-badge { width: 78px; height: 78px; color: #EAF0F5; flex-shrink: 0; }
.basico-callout .bc-text { flex: 1; min-width: 220px; }
.bc-eyebrow { display: block; font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: #9FB2C4; font-weight: 700; }
.bc-title { display: block; font-family: var(--wordmark-bc); font-weight: 700; font-size: 2rem; letter-spacing: 2px; line-height: 1; margin: .3rem 0; }
.bc-desc { display: block; font-size: .95rem; color: #C4D0DB; max-width: 48ch; }
.bc-cta { font-weight: 700; color: #9FB2C4; white-space: nowrap; align-self: center; }