/* ==========================================================================
   Teka Pudins  ·  layout.css
   Encabezado, portada, secciones y grillas.
   ========================================================================== */

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* Los fondos se alternan crema / blanco / tiffany muy suave / rosa muy claro,
   nunca dos secciones seguidas del mismo color. */
.seccion { position: relative; padding-block: var(--sec-y); }
.seccion--blanca  { background: var(--bg-blanco); }
.seccion--tiffany { background: var(--bg-tiffany); }
.seccion--rosa    { background: var(--bg-rosa); }
.seccion--crema   { background: var(--bg); }

/* Sección de contraste fuerte: roxo profundo, para el CTA final. */
.seccion--roxo {
  background: var(--choco-700);
  color: var(--crema-100);
  text-align: center;
}
.seccion--roxo h2 { color: var(--blanco); }
.seccion--roxo p  { color: color-mix(in srgb, var(--crema-100) 82%, transparent); }
.seccion--roxo .cta-final { display: grid; justify-items: center; gap: 1.4rem; max-width: 640px; margin-inline: auto; }
.seccion--roxo .boton--principal { background: var(--rosa-500); box-shadow: 0 18px 36px -18px rgba(0,0,0,.35); }
.seccion--roxo .boton--principal:hover { background: var(--rosa-700); }

.encabezado-seccion {
  max-width: 60ch;
  margin-bottom: clamp(2.2rem, 4.5vw, 3.2rem);
}
.encabezado-seccion--centrado {
  margin-inline: auto;
  text-align: center;
}
.encabezado-seccion h2 { margin-bottom: .55rem; }
.encabezado-seccion .deco { margin-bottom: .3rem; }
.encabezado-seccion--centrado .sub { margin-inline: auto; }

/* ==========================================================================
   ENCABEZADO
   ========================================================================== */
.sitio-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, box-shadow .3s ease, background-color .3s ease;
}
.sitio-header.esta-fijo {
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  border-bottom-color: var(--borde-tiffany);
  box-shadow: 0 14px 34px -26px rgb(var(--sombra) / .55);
}
@media (prefers-reduced-transparency: reduce) {
  .sitio-header { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.header-fila {
  display: flex;
  align-items: center;
  gap: clamp(.55rem, 2vw, 1.4rem);
  height: 70px;
  transition: height .3s cubic-bezier(.16,1,.3,1);
}
@media (min-width: 1180px) { .header-fila { height: 80px; } }
/* Al desplazarse el encabezado se compacta */
.sitio-header.esta-fijo .header-fila { height: 64px; }
@media (min-width: 1180px) { .sitio-header.esta-fijo .header-fila { height: 68px; } }

.marca {
  display: flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  margin-right: auto;
  flex-shrink: 0;
}
.marca img {
  width: 46px; height: 46px;
  object-fit: contain;
  transition: width .3s cubic-bezier(.16,1,.3,1), height .3s cubic-bezier(.16,1,.3,1);
}
.sitio-header.esta-fijo .marca img { width: 40px; height: 40px; }
.marca-texto { display: none; line-height: 1.1; }
@media (min-width: 400px) { .marca-texto { display: block; } }
.marca-texto b {
  display: block;
  font-family: var(--f-titulo);
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -.015em;
}
.marca-texto span {
  display: block;
  font-size: .58rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--tiffany-700);
}

/* El corte es 1180 y no 1100: con las redes sumadas, a 1100 el menú
   quedaba apretado contra el botón de pedido. */
.nav-principal { display: none; }
@media (min-width: 1180px) {
  .nav-principal { display: flex; align-items: center; gap: clamp(.85rem, 1.4vw, 1.5rem); }
}
.nav-principal a {
  position: relative;
  text-decoration: none;
  font-size: .93rem;
  font-weight: 500;
  color: var(--texto-suave);
  padding-block: .4rem;
  white-space: nowrap;
  transition: color .2s ease;
}
.nav-principal a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2.5px;
  border-radius: 2px;
  background: var(--rosa-300);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.16,1,.3,1);
}
.nav-principal a:hover, .nav-principal a.activo { color: var(--texto); }
.nav-principal a:hover::after, .nav-principal a.activo::after { transform: scaleX(1); }

.header-acciones { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }

/* Redes ancladas arriba a la derecha: aros finos en tiffany, discretos */
.header-redes { display: none; align-items: center; gap: .3rem; }
@media (min-width: 768px) { .header-redes { display: inline-flex; } }

.boton-red {
  display: inline-grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  color: var(--texto-suave);
  font-size: 1.08rem;
  text-decoration: none;
  box-shadow: inset 0 0 0 1.5px var(--borde-tiffany);
  transition: color .22s ease, box-shadow .22s ease,
              background-color .22s ease, transform .2s cubic-bezier(.16,1,.3,1);
}
.boton-red:hover {
  color: var(--choco-700);
  background: var(--tiffany-300);
  box-shadow: inset 0 0 0 1.5px var(--tiffany-300);
  transform: translateY(-2px);
}

/* Hilo vertical que separa las redes del carrito */
.header-division {
  width: 1px;
  height: 24px;
  margin-inline: .3rem;
  background: var(--borde-tiffany);
}
@media (max-width: 767px) { .header-division { display: none; } }

/* Redes dentro del menú de celular, ya con texto */
.menu-redes { display: flex; gap: .6rem; margin-top: 1.5rem; }
.menu-redes .boton-red {
  width: auto; height: 46px;
  flex: 1;
  gap: .5rem;
  grid-auto-flow: column;
  padding-inline: 1rem;
  border-radius: var(--r-boton);
  font-size: .92rem;
  font-weight: 500;
}

/* ---------- Menú móvil ---------- */
.menu-movil {
  position: fixed;
  inset: 0;
  z-index: var(--z-panel);
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--bg);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .42s cubic-bezier(.16,1,.3,1), visibility .42s;
}
.menu-movil[data-abierto="true"] { transform: translateY(0); visibility: visible; }
.menu-movil-top { display: flex; align-items: center; height: 70px; }
.menu-movil nav { padding: 1rem var(--pad-x) 2.5rem; overflow-y: auto; }
.menu-movil nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.05rem .25rem;
  font-family: var(--f-titulo);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -.02em;
  text-decoration: none;
  border-bottom: 1px solid var(--borde);
}
.menu-movil nav a i { color: var(--rosa-500); font-size: 1.05rem; }
.menu-movil .boton { margin-top: 1.8rem; width: 100%; }
.menu-movil .deco {
  display: block;
  text-align: center;
  margin-top: 2rem;
}

/* ==========================================================================
   PORTADA
   ========================================================================== */
/* Fondo luminoso: baja de blanco a crema y termina en un tiffany apenas
   insinuado. Sin puntos, sin texturas, sin manchas. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(178deg,
    var(--blanco) 0%,
    var(--crema-100) 46%,
    var(--tiffany-50) 100%);
  padding-top: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(3.5rem, 8vw, 6rem);
}
/* Dos formas grandes y limpias detrás del contenido: un disco de tiffany
   muy claro y un aro fino de rosa. Bordes definidos, nada difuminado. */
.hero .forma--a {
  width: min(62vw, 640px);
  aspect-ratio: 1;
  top: -26%;
  right: -16%;
}
.hero .forma--b {
  width: min(40vw, 380px);
  aspect-ratio: 1;
  bottom: -14%;
  left: -12%;
}

.hero-grid {
  display: grid;
  gap: clamp(2.4rem, 5vw, 3.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr 1.06fr;
    gap: clamp(2.5rem, 5vw, 5rem);
    min-height: 62vh;
  }
}

.hero-texto h1 { margin: 1.1rem 0 1.15rem; }
.hero-texto .sub { margin-bottom: 2.1rem; font-size: clamp(1.02rem, 1.9vw, 1.15rem); }
.hero-acciones { display: flex; flex-wrap: wrap; gap: .75rem; }

/* La portada muestra el producto. El sello se apoya encima, como una
   etiqueta pegada sobre la foto. */
.hero-visual {
  position: relative;
  width: min(100%, 500px);
  margin-inline: auto;
  padding: 0 0 clamp(2.6rem, 6vw, 3.6rem) clamp(1.5rem, 5vw, 3rem);
}
/* Bloque de tiffany apenas girado, como una hoja de papel debajo de la foto */
.hero-visual::before {
  content: "";
  position: absolute;
  inset: 6% -7% 2.2rem 18%;
  border-radius: var(--r-bloque);
  background: var(--tinte-tiffany);
  transform: rotate(3.5deg);
}
/* El marco fija la proporción. La foto y el video van adentro, uno encima
   del otro, para que el cambio sea un fundido y no un salto de altura. */
.hero-marco {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r-bloque);
  background: var(--superficie-2);
  box-shadow: 0 44px 80px -48px rgb(var(--sombra) / calc(var(--sombra-op) * 7));
}
.hero-foto,
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-video {
  z-index: 1;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.hero-marco[data-video-listo="true"] .hero-video { opacity: 1; }

/* Foto chica que se apoya sobre la esquina de la grande. Da profundidad y
   deja ver un segundo producto sin llenar la portada de elementos. */
.hero-detalle {
  position: absolute;
  right: -4%;
  bottom: 0;
  z-index: 2;
  width: clamp(112px, 27vw, 176px);
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--r-card);
  box-shadow:
    0 0 0 7px var(--bg),
    0 26px 46px -26px rgb(var(--sombra) / .55);
}

.hero-sello {
  position: absolute;
  left: 0;
  bottom: clamp(2.2rem, 5vw, 3rem);
  z-index: 3;
  width: clamp(94px, 23vw, 142px);
  height: auto;
}
/* En celular la foto pasa a cuadrada: mantiene el producto grande pero le
   saca casi 90 px de alto a la portada. */
/* En celular la foto pasa a cuadrada y la foto chica se achica, para que la
   portada siga siendo grande sin comerse toda la pantalla. */
@media (max-width: 640px) {
  .hero { padding-bottom: clamp(2.4rem, 7vw, 3.4rem); }
  .hero-visual { width: min(100%, 360px); padding: 0 0 2.2rem 1.4rem; }
  .hero-marco { aspect-ratio: 1 / 1; }
  .hero-sello { width: 84px; bottom: 1.6rem; }
  .hero-detalle { width: 104px; box-shadow: 0 0 0 5px var(--bg), 0 18px 32px -20px rgb(var(--sombra) / .55); }
}

/* ==========================================================================
   BENEFICIOS
   ========================================================================== */
.beneficios {
  display: grid;
  gap: clamp(.9rem, 2.2vw, 1.35rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 900px) { .beneficios { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ==========================================================================
   CATÁLOGO
   ========================================================================== */
.barra-busqueda {
  position: sticky;
  top: 64px;
  z-index: var(--z-sticky);
  background: color-mix(in srgb, var(--bg-blanco) 90%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding-block: 1rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease;
}
@media (min-width: 1180px) { .barra-busqueda { top: 68px; } }
.barra-busqueda.esta-fija { border-bottom-color: var(--borde-tiffany); }

.grid-productos {
  display: grid;
  gap: clamp(1.1rem, 2.4vw, 1.8rem);
  grid-template-columns: 1fr;
}
@media (min-width: 620px)  { .grid-productos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px)  { .grid-productos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1300px) { .grid-productos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Con pocos productos (hoy, uno solo), centra las tarjetas en vez de
   dejarlas perdidas en una grilla ancha y vacía. */
.grid-productos--destaque {
  grid-template-columns: repeat(auto-fit, minmax(280px, 400px)) !important;
  justify-content: center;
  max-width: 520px;
  margin-inline: auto;
}

/* ==========================================================================
   BOXES  (bento de tres celdas exactas)
   ========================================================================== */
.bento-boxes {
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.6rem);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .bento-boxes {
    grid-template-columns: 1.22fr 1fr;
    grid-template-rows: auto auto;
  }
  .bento-boxes > :first-child { grid-row: span 2; }
}

/* ==========================================================================
   SOBRE DULCITOS
   ========================================================================== */
.nosotros-grid {
  display: grid;
  gap: clamp(2.2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 900px) { .nosotros-grid { grid-template-columns: .92fr 1.08fr; } }

.nosotros-collage {
  position: relative;
  width: min(100%, 410px);
  margin-inline: auto;
  padding: 0 0 clamp(2rem, 5vw, 2.8rem);
}
/* Los dos aros del sello (rosa por dentro, tiffany por fuera) enmarcan la
   foto redonda. Van en la misma declaración que la sombra: si se separan en
   una clase aparte, esta regla la pisa por orden de carga. */
.nosotros-foto {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  box-shadow:
    0 0 0 6px var(--bg),
    0 0 0 8px var(--rosa-300),
    0 0 0 14px var(--bg),
    0 0 0 17px var(--tiffany-300),
    0 40px 74px -46px rgb(var(--sombra) / calc(var(--sombra-op) * 7));
}
/* Los aros salen del borde: hay que dejarles lugar. */
.nosotros-collage { padding-inline: 18px; }
.nosotros-sello {
  position: absolute;
  right: -2%;
  top: 2%;
  width: clamp(86px, 22vw, 130px);
  height: auto;
}
.nosotros-collage .distintivo {
  position: absolute;
  left: 2%;
  bottom: 0;
}

.nosotros-firma { margin-top: 1.2rem; }

.nosotros-sellos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: .8rem;
  margin-top: 1.8rem;
}

/* ==========================================================================
   CÓMO PEDIR
   ========================================================================== */
.pasos {
  display: grid;
  gap: clamp(1.2rem, 2.6vw, 1.8rem);
  grid-template-columns: 1fr;
}
@media (min-width: 780px) { .pasos { grid-template-columns: repeat(3, 1fr); } }

.datos-pedido {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* ==========================================================================
   UBICACIÓN
   ========================================================================== */
.tarjeta-ubicacion {
  border-radius: var(--r-bloque);
  background: var(--superficie);
  box-shadow: inset 0 0 0 1px var(--borde-tiffany), 0 36px 70px -52px rgb(var(--sombra) / .55);
  overflow: hidden;
}
.ubicacion-grid {
  display: grid;
  align-items: stretch;
}
@media (min-width: 900px) { .ubicacion-grid { grid-template-columns: 1fr 1.05fr; } }

.mapa-marco {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--superficie-2);
  border-bottom: 1px solid var(--borde-tiffany);
}
@media (min-width: 900px) {
  .mapa-marco { aspect-ratio: auto; min-height: 100%; border-bottom: 0; border-right: 1px solid var(--borde-tiffany); }
}
.mapa-marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.ubicacion-datos { padding: clamp(1.5rem, 3.5vw, 2.4rem); }
.ubicacion-datos h2 { margin-bottom: 1.2rem; }

.horario-lista { display: grid; gap: .1rem; margin-bottom: 1.6rem; }
.horario-fila {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .8rem 0;
  border-bottom: 1px solid var(--borde);
}
.horario-fila:last-child { border-bottom: 0; }
.horario-fila i {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--tinte-tiffany);
  color: var(--tiffany-700);
  font-size: 1.1rem;
}

.horario-fila span { color: var(--texto-suave); font-size: .89rem; line-height: 1.45; }
.horario-fila b { display: block; color: var(--texto); font-weight: 600; font-size: .98rem; }

.ubicacion-acciones { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }

/* ==========================================================================
   REDES
   ========================================================================== */
.redes-duo {
  display: grid;
  gap: clamp(1rem, 2.4vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* ==========================================================================
   PEDIDO FINAL
   ========================================================================== */
.pedido-grid {
  display: grid;
  gap: clamp(1.6rem, 4vw, 2.6rem);
  align-items: start;
}
@media (min-width: 980px) { .pedido-grid { grid-template-columns: 1.32fr .88fr; } }

/* ==========================================================================
   PIE
   ========================================================================== */
.sitio-footer {
  position: relative;
  background: var(--choco-700);
  color: var(--crema-100);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}
.sitio-footer h3, .sitio-footer b { color: var(--blanco); }
.sitio-footer p,
.sitio-footer a,
.sitio-footer li { color: color-mix(in srgb, var(--crema-100) 84%, transparent); }
.sitio-footer .deco { color: var(--rosa-300); }
.footer-grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer-grid a { text-decoration: none; transition: color .2s ease; }
.footer-grid a:hover { color: var(--tiffany-300); }
.footer-titulo {
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--tiffany-300) !important;
  margin-bottom: 1rem;
}
.footer-lista { display: grid; gap: .65rem; font-size: .94rem; }
.footer-abajo {
  margin-top: clamp(2.2rem, 5vw, 3.2rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
  font-size: .82rem;
}

/* Acceso al panel de administrador: a propósito chico y apagado, para que
   no compita con nada del pie. Sólo quien lo busca lo encuentra.
   El selector repite .sitio-footer para ganarle en especificidad a la
   regla general ".sitio-footer a" sin recurrir a !important. */
.sitio-footer .footer-admin {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  /* El texto se ve chico a propósito; el padding vertical amplía la zona
     táctil real para el celular sin agrandar la letra. */
  padding-block: .6rem;
  margin-block: -.6rem;
  font-size: .76rem;
  text-decoration: none;
  color: color-mix(in srgb, var(--crema-100) 45%, transparent);
  transition: color .2s ease;
}
.sitio-footer .footer-admin i { font-size: .9rem; }
.sitio-footer .footer-admin:hover { color: var(--tiffany-300); }

/* ==========================================================================
   BARRA INFERIOR MÓVIL
   ========================================================================== */
.barra-movil {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem var(--pad-x) calc(.7rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg-blanco) 94%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--borde-tiffany);
  transform: translateY(120%);
  transition: transform .38s cubic-bezier(.16,1,.3,1);
}
.barra-movil[data-visible="true"] { transform: translateY(0); }
@media (min-width: 1180px) { .barra-movil { display: none; } }
.barra-movil .resumen { display: grid; line-height: 1.3; }
.barra-movil .resumen small { font-size: .73rem; color: var(--texto-tenue); }
.barra-movil .resumen b {
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -.02em;
}
.barra-movil .boton { margin-left: auto; }
body:has(.barra-movil[data-visible="true"]) { padding-bottom: 78px; }
@media (min-width: 1180px) { body:has(.barra-movil[data-visible="true"]) { padding-bottom: 0; } }

/* ==========================================================================
   UTILIDADES DE VISIBILIDAD
   Van con la clase repetida a propósito: tienen que ganarle a .boton y
   .boton-icono, que también definen display.
   ========================================================================== */
.solo-desktop.solo-desktop { display: none; }
.solo-mobile.solo-mobile   { display: inline-flex; }
@media (min-width: 1180px) {
  .solo-desktop.solo-desktop { display: inline-flex; }
  .solo-mobile.solo-mobile   { display: none; }
}