@charset "UTF-8";
/* ==========================================================================
   Dulce Doce — Repostería y Panadería · Querétaro
   Sistema visual del sitio público.

   La paleta está MEDIDA del logo (el hada sobre el rodillo, dentro del
   círculo de hojas de eucalipto) y no se cambia. Todo lo demás —espacios,
   tipografía, sombras— se deriva de ella.

   Reglas que manda este archivo y no se negocian:
     · Fondo claro siempre. Aquí no hay tema oscuro.
     · Pastelería fina, no fiesta infantil: serif de alta calidad, filetes
       dorados delgados, hojas de eucalipto como único adorno.
     · Nada se mueve más de 18 px ni dura más de 500 ms.
     · Quien navegue con teclado tiene que VER dónde está parado.
     · Ningún ancho de pantalla produce scroll horizontal.

   Orden del archivo:
     01 Variables              08 Héroe
     02 Reinicio y base        09 Listón de temporada
     03 Utilidades             10 Catálogo y tarjeta de producto
     04 Adornos                11 Pasteles personalizados
     05 Botones                12 Galería y visor
     06 Formulario             13 Cómo pedir
     07 Encabezado             14 Dónde estamos y mapa
                               15 Pie
                               16 Velo, cajón del carrito
                               17 Chat de Canelita
                               18 Animaciones al hacer scroll
                               19 Movimiento reducido e impresión
   ========================================================================== */


/* ==========================================================================
   01 · VARIABLES
   ========================================================================== */

:root {
  /* --- Paleta de marca (medida del logo, NO se toca) --- */
  --verde:        #84b490;   /* verde salvia, el color de la marca       */
  --verde-hondo:  #5f8f6e;   /* texto grande sobre claro, filetes        */
  --verde-claro:  #9cc0a8;   /* fondos suaves y hojas                    */
  --hueso:        #f6f7f1;   /* el fondo del sitio                       */
  --dorado:       #c2a05e;   /* acentos, filetes, detalles finos         */
  --tinta:        #2e3630;   /* texto                                    */
  --madera:       #8d7359;   /* del rodillo del logo, detalles cálidos   */

  /* --- Derivados por CONTRASTE, no por gusto ---
     El verde de marca sobre hueso da 3.5:1 y el dorado 2.3:1: alcanzan para
     títulos grandes y filetes, no para texto chico ni para una etiqueta en
     blanco dentro de un botón. Estas dos variantes oscuras son el mismo tono,
     bajado hasta que pasa AA. La paleta de arriba queda intacta. */
  --verde-tinta:  #47705a;   /* relleno de botón primario · 5.6:1 en blanco */
  --dorado-hondo: #806528;   /* dorado legible en texto · 4.7:1 sobre hueso y sobre franja */
  --dorado-claro: #f3e8ce;   /* dorado sobre verde (pie, listón, chat) · 4.6:1 */

  --blanco:       #ffffff;
  --hueso-hondo:  #edefe4;   /* franja alterna de sección */
  --hueso-tibio:  #faf8f2;   /* tarjetas sobre franja alterna */
  --tinta-suave:  #59635a;   /* texto secundario · 6.4:1 sobre hueso */
  --alerta:       #a04b3c;   /* errores y campos obligatorios */

  --velo-verde:   rgba(132, 180, 144, .14);
  --velo-dorado:  rgba(194, 160, 94, .28);
  --linea:        rgba(46, 54, 48, .13);
  --linea-fuerte: rgba(46, 54, 48, .22);
  --linea-oro:    rgba(194, 160, 94, .55);

  /* --- Tipografía --- */
  --serif: "Cormorant Garamond", "Hoefler Text", "Iowan Old Style", Garamond,
           "Times New Roman", Georgia, serif;
  --sans:  "Jost", "Avenir Next", "Segoe UI", "Helvetica Neue", Arial,
           "Noto Sans", sans-serif;

  /* Escala fluida: el primer valor manda en teléfono, el tercero en
     escritorio. Nada salta de golpe al cruzar un punto de quiebre. */
  --txt-xs:   clamp(0.75rem,  0.727rem + 0.12vw, 0.8125rem);
  --txt-sm:   clamp(0.8125rem, 0.78rem  + 0.17vw, 0.9rem);
  --txt-base: clamp(1rem,     0.966rem + 0.17vw, 1.0625rem);
  --txt-lg:   clamp(1.0625rem, 1.006rem + 0.28vw, 1.1875rem);
  --txt-xl:   clamp(1.25rem,  1.148rem + 0.51vw, 1.5rem);
  --txt-2xl:  clamp(1.5rem,   1.318rem + 0.91vw, 2.125rem);
  --txt-3xl:  clamp(1.875rem, 1.534rem + 1.70vw, 3rem);
  --txt-4xl:  clamp(2.375rem, 1.75rem  + 3.13vw, 4.25rem);

  /* --- Espacio --- */
  --e-1: 0.25rem;  --e-2: 0.5rem;   --e-3: 0.75rem;  --e-4: 1rem;
  --e-5: 1.5rem;   --e-6: 2rem;     --e-7: 3rem;     --e-8: 4rem;
  --aire-lado: clamp(1rem, 4.5vw, 2.75rem);   /* nunca menos de 16 px */
  --aire-seccion: clamp(3.5rem, 8vw, 6.5rem);

  /* --- Formas --- */
  --radio-xs: 0.375rem;
  --radio-sm: 0.625rem;
  --radio:    0.875rem;
  --radio-lg: 1.375rem;
  /* El arco de aparador: mitad superior redonda a cualquier tamaño. */
  --radio-arco: 50% 50% var(--radio-lg) var(--radio-lg) /
                34% 34% var(--radio-lg) var(--radio-lg);

  /* --- Sombras (teñidas de verde, nunca grises) --- */
  --sombra-1: 0 1px 2px rgba(46, 54, 48, .05),
              0 6px 18px -12px rgba(46, 54, 48, .20);
  --sombra-2: 0 2px 4px rgba(46, 54, 48, .05),
              0 18px 40px -22px rgba(46, 54, 48, .32);
  --sombra-3: 0 24px 60px -28px rgba(46, 54, 48, .42);

  /* --- Movimiento --- */
  --curva: cubic-bezier(0.22, 0.61, 0.36, 1);
  --veloz: 180ms var(--curva);
  --medio: 320ms var(--curva);

  /* --- Medidas --- */
  --ancho: 1160px;
  --ancho-texto: 62ch;
  --alto-encabezado: 4.5rem;
  --z-encabezado: 60;
  --z-velo: 70;
  --z-cajon: 80;
  --z-chat: 90;
  --z-visor: 100;
}

@media (min-width: 60rem) {
  :root { --alto-encabezado: 5.25rem; }
}


/* ==========================================================================
   02 · REINICIO Y BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

/* El atributo `hidden` gana SIEMPRE. Sin esto, cualquier componente que
   declare su propio display (.exito es grid, .boton es inline-flex,
   .chat__adjunto es flex…) le pasa por encima al display:none del navegador
   y el elemento se ve aunque traiga hidden. Todo el trato con el JS de los
   demás módulos es "quítale el hidden", así que esto es un cimiento. */
[hidden] { display: none !important; }

html {
  /* clip y no hidden: hidden rompe position:sticky del encabezado. */
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100svh;
  overflow-x: clip;
  background-color: var(--hueso);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: var(--txt-base);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Un velo verde muy tenue arriba: el papel del sitio no es blanco plano. */
body::before {
  content: "";
  position: fixed;
  inset-inline: 0;
  top: 0;
  height: 60vh;
  background: radial-gradient(120% 100% at 50% 0%,
              var(--velo-verde) 0%, transparent 65%);
  pointer-events: none;
  z-index: -1;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; background-color: var(--hueso-hondo); }

input, button, textarea, select { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

p, h1, h2, h3, h4, li, figcaption { overflow-wrap: break-word; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--tinta);
  text-wrap: balance;
}

h1 { font-size: var(--txt-4xl); }
h2 { font-size: var(--txt-3xl); }
h3 { font-size: var(--txt-xl); }
h4 { font-size: var(--txt-lg); }

a { color: var(--verde-tinta); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--tinta); }

ul, ol { padding-left: 1.1rem; }

hr { border: 0; border-top: 1px solid var(--linea); }

::selection { background: var(--verde-claro); color: var(--tinta); }

/* --- Foco: obligatorio y visible. Nadie navega a ciegas. --- */
:focus-visible {
  outline: 2.5px solid var(--verde-tinta);
  outline-offset: 3px;
  border-radius: var(--radio-xs);
}
.sobre-verde :focus-visible,
.liston :focus-visible,
.pie :focus-visible,
.chat__cabecera :focus-visible { outline-color: var(--dorado-claro); }

/* Salto al contenido para lectores de pantalla y teclado. */
.salto {
  position: absolute;
  top: var(--e-2);
  left: var(--e-2);
  z-index: 200;
  padding: 0.7rem 1.1rem;
  background: var(--blanco);
  color: var(--verde-tinta);
  font-size: var(--txt-sm);
  font-weight: 600;
  border-radius: var(--radio-sm);
  box-shadow: var(--sombra-2);
  transform: translateY(calc(-100% - var(--e-4)));
  transition: transform var(--veloz);
}
.salto:focus-visible { transform: none; }


/* ==========================================================================
   03 · UTILIDADES
   ========================================================================== */

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--aire-lado);
}
.contenedor--angosto { max-width: 880px; }

.seccion {
  position: relative;
  padding-block: var(--aire-seccion);
  scroll-margin-top: calc(var(--alto-encabezado) + 1rem);
}
.seccion--franja { background-color: var(--hueso-hondo); }
.seccion--franja .tarjeta { background-color: var(--hueso-tibio); }

.solo-lectores {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.oculto { display: none !important; }

/* --- Encabezado de sección --- */
.encabezado-seccion {
  max-width: var(--ancho-texto);
  margin-inline: auto;
  margin-bottom: clamp(2rem, 5vw, 3.25rem);
  text-align: center;
}
.encabezado-seccion--izq { margin-inline: 0; text-align: left; }

.antetitulo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  margin-bottom: var(--e-3);
  font-size: var(--txt-xs);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dorado-hondo);
}
.antetitulo::before, .antetitulo::after {
  content: "";
  width: clamp(1.5rem, 5vw, 2.75rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--linea-oro), transparent);
}
.encabezado-seccion--izq .antetitulo { justify-content: flex-start; }
.encabezado-seccion--izq .antetitulo::before { display: none; }

.encabezado-seccion__texto {
  margin-top: var(--e-4);
  font-size: var(--txt-lg);
  color: var(--tinta-suave);
  line-height: 1.68;
  text-wrap: pretty;
}


/* ==========================================================================
   04 · ADORNOS — hojas de eucalipto y filetes dorados
   ========================================================================== */

.icono {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icono--relleno { fill: currentColor; stroke: none; }
.icono--grande { width: 1.6em; height: 1.6em; }

/* Filete: hairline dorado con una hojita al centro. Separa secciones sin
   meter una línea gruesa que ensucie. */
.filete {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-3);
  color: var(--dorado);
}
.filete::before, .filete::after {
  content: "";
  height: 1px;
  flex: 1 1 auto;
  max-width: 7rem;
  background: linear-gradient(90deg, transparent, var(--linea-oro));
}
.filete::after { background: linear-gradient(90deg, var(--linea-oro), transparent); }
.filete .icono { width: 1.5rem; height: 1.5rem; stroke-width: 1.3; }

/* Hojas sueltas de fondo. Decorativas puras: aria-hidden en el HTML. */
.hojas {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.hojas > svg {
  position: absolute;
  color: var(--verde-claro);
  opacity: 0.5;
  fill: currentColor;
  stroke: none;
}
.hojas--heroe > svg:nth-child(1) {
  width: clamp(9rem, 26vw, 17rem);
  top: -3.5rem; left: -5rem;
  transform: rotate(24deg);
  opacity: 0.38;
}
.hojas--heroe > svg:nth-child(2) {
  width: clamp(7rem, 20vw, 13rem);
  right: -3.5rem; bottom: 8%;
  transform: rotate(-148deg);
  opacity: 0.3;
}
.hojas--seccion > svg:nth-child(1) {
  width: clamp(6rem, 16vw, 11rem);
  top: 1.5rem; right: -2.5rem;
  transform: rotate(-32deg);
  opacity: 0.26;
}


/* ==========================================================================
   05 · BOTONES
   ========================================================================== */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 2.875rem;           /* 46 px: se alcanza con el pulgar */
  padding: 0.7rem 1.35rem;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: var(--txt-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--veloz), color var(--veloz),
              border-color var(--veloz), box-shadow var(--veloz),
              transform var(--veloz);
}
.boton:active { transform: translateY(1px); }
.boton[disabled], .boton[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.boton .icono { width: 1.1em; height: 1.1em; }

.boton--primario {
  background-color: var(--verde-tinta);
  border-color: var(--verde-tinta);
  color: var(--blanco);
  box-shadow: var(--sombra-1);
}
.boton--primario:hover:not([disabled]) {
  background-color: var(--tinta);
  border-color: var(--tinta);
  color: var(--blanco);
  box-shadow: var(--sombra-2);
}

.boton--secundario {
  background-color: var(--blanco);
  border-color: var(--verde-hondo);
  color: var(--verde-tinta);
}
.boton--secundario:hover:not([disabled]) {
  background-color: var(--verde-tinta);
  border-color: var(--verde-tinta);
  color: var(--blanco);
}

.boton--fantasma {
  background-color: transparent;
  border-color: var(--linea-fuerte);
  color: var(--tinta);
}
.boton--fantasma:hover:not([disabled]) {
  background-color: var(--velo-verde);
  border-color: var(--verde-hondo);
  color: var(--tinta);
}

/* Sobre fondo verde (listón, pie, cabecera del chat). */
.boton--claro {
  background-color: var(--hueso);
  border-color: var(--hueso);
  color: var(--verde-tinta);
}
.boton--claro:hover:not([disabled]) {
  background-color: var(--dorado);
  border-color: var(--dorado);
  color: var(--tinta);
}

.boton--grande {
  min-height: 3.25rem;
  padding: 0.9rem 1.9rem;
  font-size: var(--txt-base);
  letter-spacing: 0.05em;
}
.boton--chico {
  min-height: 2.25rem;
  padding: 0.4rem 0.95rem;
  font-size: var(--txt-xs);
}
.boton--bloque { width: 100%; }

/* En pantallas de 320-360 px una etiqueta larga con nowrap ("Escríbenos por
   WhatsApp") fija un ancho mínimo que empuja toda la columna fuera de la
   pantalla. Ahí la etiqueta se parte y los botones del héroe van a lo ancho. */
@media (max-width: 30rem) {
  .boton { white-space: normal; }
  .heroe__acciones { display: grid; }
  .heroe__acciones .boton { width: 100%; }
}

/* Botón redondo de icono (cerrar, cantidad, flechas del visor). */
.boton-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background-color: var(--blanco);
  color: var(--tinta);
  transition: background-color var(--veloz), color var(--veloz),
              border-color var(--veloz);
}
.boton-icono:hover {
  background-color: var(--verde-tinta);
  border-color: var(--verde-tinta);
  color: var(--blanco);
}

/* Enlace con subrayado dorado que crece. */
.enlace-fino {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--txt-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--verde-tinta);
  text-decoration: none;
  border-bottom: 1px solid var(--linea-oro);
  padding-bottom: 2px;
  transition: color var(--veloz), border-color var(--veloz);
}
.enlace-fino:hover { color: var(--tinta); border-color: var(--dorado); }


/* ==========================================================================
   06 · FORMULARIO
   ========================================================================== */

.campos { display: grid; gap: var(--e-4); }
.campos--dos { grid-template-columns: 1fr; }
@media (min-width: 32rem) {
  .campos--dos { grid-template-columns: 1fr 1fr; }
}

.campo { display: grid; gap: 0.35rem; min-width: 0; }

.campo__etiqueta {
  font-size: var(--txt-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--tinta);
}
.campo--requerido .campo__etiqueta::after {
  content: " *";
  color: var(--alerta);
  font-weight: 600;
}

.campo__control {
  width: 100%;
  min-width: 0;
  padding: 0.7rem 0.85rem;
  background-color: var(--blanco);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-sm);
  font-size: var(--txt-base);
  color: var(--tinta);
  transition: border-color var(--veloz), box-shadow var(--veloz);
  -webkit-appearance: none;
  appearance: none;
}
.campo__control::placeholder { color: #9aa39a; }
.campo__control:hover { border-color: var(--verde); }
.campo__control:focus {
  outline: none;
  border-color: var(--verde-tinta);
  box-shadow: 0 0 0 3px rgba(71, 112, 90, .18);
}
textarea.campo__control { min-height: 6rem; resize: vertical; line-height: 1.55; }

select.campo__control {
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f8f6e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 1.05rem;
  cursor: pointer;
}

.campo__ayuda { font-size: var(--txt-xs); color: var(--tinta-suave); line-height: 1.5; }

.campo__error {
  font-size: var(--txt-xs);
  font-weight: 500;
  color: var(--alerta);
}
.campo__error:empty { display: none; }

.campo--malo .campo__control {
  border-color: var(--alerta);
  box-shadow: 0 0 0 3px rgba(160, 75, 60, .14);
}

/* Entrega: dos fichas seleccionables en vez de dos radios sueltos. */
.opciones-entrega { display: grid; gap: var(--e-3); }
@media (min-width: 26rem) {
  .opciones-entrega { grid-template-columns: 1fr 1fr; }
}

.ficha { position: relative; display: block; cursor: pointer; }
.ficha input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.ficha__cara {
  display: grid;
  gap: 0.2rem;
  height: 100%;
  padding: 0.85rem 0.95rem;
  background-color: var(--blanco);
  border: 1.5px solid var(--linea-fuerte);
  border-radius: var(--radio-sm);
  transition: border-color var(--veloz), background-color var(--veloz),
              box-shadow var(--veloz);
}
.ficha__titulo { font-size: var(--txt-sm); font-weight: 600; }
.ficha__nota { font-size: var(--txt-xs); color: var(--tinta-suave); line-height: 1.45; }
.ficha:hover .ficha__cara { border-color: var(--verde); }
.ficha input:checked + .ficha__cara {
  border-color: var(--verde-tinta);
  background-color: var(--velo-verde);
  box-shadow: 0 0 0 1px var(--verde-tinta) inset;
}
.ficha input:focus-visible + .ficha__cara {
  outline: 2.5px solid var(--verde-tinta);
  outline-offset: 3px;
}
.ficha input:disabled + .ficha__cara { opacity: 0.55; cursor: not-allowed; }


/* ==========================================================================
   07 · ENCABEZADO
   ========================================================================== */

.encabezado {
  position: sticky;
  top: 0;
  z-index: var(--z-encabezado);
  background-color: rgba(246, 247, 241, .88);
  border-bottom: 1px solid transparent;
  transition: background-color var(--medio), box-shadow var(--medio),
              border-color var(--medio);
}
@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
  .encabezado {
    -webkit-backdrop-filter: blur(14px) saturate(1.25);
    backdrop-filter: blur(14px) saturate(1.25);
  }
}
/* El JS agrega .encabezado--compacto al bajar de 40 px. */
.encabezado--compacto {
  background-color: rgba(246, 247, 241, .96);
  border-bottom-color: var(--linea);
  box-shadow: var(--sombra-1);
}

.encabezado__barra {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  min-height: var(--alto-encabezado);
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-right: auto;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.marca__logo {
  width: clamp(2.5rem, 7vw, 3.25rem);
  height: clamp(2.5rem, 7vw, 3.25rem);
  flex: none;
  border-radius: 999px;
  object-fit: cover;
  background-color: var(--hueso);
  box-shadow: 0 0 0 1px var(--linea-oro);
}
.marca__texto { display: grid; min-width: 0; }
.marca__nombre {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 3.6vw, 1.6rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0.005em;
  white-space: nowrap;   /* "Dulce Doce" nunca se parte en dos renglones */
}
.marca__giro {
  font-size: clamp(0.5625rem, 1.7vw, 0.6875rem);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--dorado-hondo);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav { display: none; }
.nav__lista {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.6rem);
  list-style: none;
  margin: 0; padding: 0;
}
.nav__enlace {
  position: relative;
  display: inline-block;
  padding-block: 0.4rem;
  font-size: var(--txt-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--tinta);
  text-decoration: none;
  transition: color var(--veloz);
}
.nav__enlace::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5px;
  background-color: var(--dorado);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--medio);
}
.nav__enlace:hover { color: var(--verde-tinta); }
.nav__enlace:hover::after,
.nav__enlace[aria-current="true"]::after { transform: scaleX(1); }

.encabezado__acciones { display: flex; align-items: center; gap: var(--e-2); }

/* Botón del carrito con contador. */
.carrito-boton { position: relative; }
.carrito-boton__cuenta {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  min-width: 1.35rem;
  height: 1.35rem;
  padding-inline: 0.3rem;
  display: grid;
  place-items: center;
  background-color: var(--dorado);
  color: var(--tinta);
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--hueso);
  transition: transform var(--veloz);
}
.carrito-boton--late .carrito-boton__cuenta { animation: latido 420ms var(--curva); }
@keyframes latido {
  0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); }
}

.boton-menu { display: inline-flex; }

/* Menú de teléfono: panel que se despliega bajo la barra. */
.menu-movil {
  display: grid;
  gap: 0.15rem;
  overflow: hidden;
  max-height: 0;
  border-top: 1px solid transparent;
  transition: max-height var(--medio), border-color var(--medio),
              padding var(--medio);
  padding-block: 0;
}
.menu-movil--abierto {
  max-height: 24rem;
  padding-block: var(--e-3) var(--e-4);
  border-top-color: var(--linea);
}
.menu-movil__enlace {
  display: block;
  padding: 0.75rem 0.25rem;
  font-size: var(--txt-base);
  font-weight: 500;
  color: var(--tinta);
  text-decoration: none;
  border-bottom: 1px solid var(--linea);
}
.menu-movil__enlace:last-child { border-bottom: 0; }
.menu-movil__enlace:hover { color: var(--verde-tinta); }

/* En teléfono la etiqueta "WHATSAPP" se comía 110 px de la barra y el nombre
   de la marca se partía en dos renglones. Ahí el botón queda redondo, solo
   con el icono; WhatsApp sigue a la vista en el héroe, en el menú, en
   "Dónde estamos" y en el pie. */
@media (max-width: 47.9375rem) {
  #wa-encabezado {
    width: 2.5rem;
    min-height: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border-radius: 999px;
  }
  #wa-encabezado span { display: none; }
  #wa-encabezado .icono { width: 1.15rem; height: 1.15rem; }
  .encabezado__barra { gap: 0.6rem; }
  /* Con 0.24em, "REPOSTERÍA Y PANADERÍA" no cabía bajo el nombre y salía
     cortada con puntos suspensivos. */
  .marca__giro { letter-spacing: 0.14em; }
}

/* Abajo de 384 px ya no cabe entera ni apretada, y un "REPOSTE…" cortado se
   ve descuidado: mejor solo el nombre. El logo sigue diciendo el giro. */
@media (max-width: 24rem) {
  .marca__giro { display: none; }
}

@media (min-width: 62rem) {
  .nav { display: block; }
  .boton-menu { display: none; }
  .menu-movil { display: none; }
}


/* ==========================================================================
   08 · HÉROE
   ========================================================================== */

.heroe {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 7vw, 5.5rem) clamp(3rem, 8vw, 6rem);
  background:
    radial-gradient(90% 70% at 15% 0%, rgba(156, 192, 168, .30), transparent 60%),
    radial-gradient(70% 60% at 95% 85%, rgba(194, 160, 94, .16), transparent 65%);
}

.heroe__rejilla {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2.25rem, 6vw, 3.5rem);
  align-items: center;
}
@media (min-width: 60rem) {
  .heroe__rejilla { grid-template-columns: 1.05fr 0.95fr; gap: clamp(3rem, 6vw, 5rem); }
}
.heroe__rejilla > * { min-width: 0; }

.heroe__antetitulo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.95rem 0.4rem 0.65rem;
  margin-bottom: var(--e-4);
  background-color: var(--blanco);
  border: 1px solid var(--linea-oro);
  border-radius: 999px;
  font-size: var(--txt-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dorado-hondo);
}
.heroe__antetitulo .icono { width: 1rem; height: 1rem; color: var(--verde-hondo); }

.heroe__titulo {
  font-size: var(--txt-4xl);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
/* La palabra que carga la marca: en cursiva, con filete dorado debajo. */
.heroe__acento {
  position: relative;
  display: inline-block;
  font-style: italic;
  color: var(--verde-tinta);
}
.heroe__acento::after {
  content: "";
  position: absolute;
  left: 0.05em; right: 0.05em;
  bottom: 0.06em;
  height: 0.055em;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--dorado) 18%,
              var(--dorado) 82%, transparent);
  opacity: .75;
}

.heroe__texto {
  max-width: 46ch;
  margin-top: var(--e-5);
  font-size: var(--txt-lg);
  color: var(--tinta-suave);
  line-height: 1.7;
  text-wrap: pretty;
}

.heroe__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

.heroe__nota {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  max-width: 44ch;
  margin-top: var(--e-5);
  font-size: var(--txt-sm);
  color: var(--tinta-suave);
  line-height: 1.55;
}
.heroe__nota .icono {
  width: 1.05rem; height: 1.05rem;
  margin-top: 0.22rem;
  color: var(--verde-hondo);
}

/* --- El arco del aparador --- */
.marco-arco {
  position: relative;
  width: min(100%, 26rem);
  margin-inline: auto;
  isolation: isolate;
}
.marco-arco__foto {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radio-arco);
  box-shadow: var(--sombra-3);
}
/* Filete dorado descuadrado: el detalle fino de la pastelería. */
.marco-arco::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  transform: translate(-0.9rem, 0.9rem);
  border: 1px solid var(--dorado);
  border-radius: var(--radio-arco);
  opacity: 0.8;
}

/* Medallón con el precio o el sello, montado sobre el arco. */
.sello {
  position: absolute;
  z-index: 2;
  right: -0.5rem;
  bottom: 1.5rem;
  display: grid;
  place-items: center;
  gap: 0.1rem;
  width: clamp(6rem, 20vw, 7.5rem);
  height: clamp(6rem, 20vw, 7.5rem);
  padding: 0.5rem;
  text-align: center;
  background-color: var(--hueso);
  border-radius: 999px;
  box-shadow: var(--sombra-2), 0 0 0 1px var(--linea-oro);
}
.sello__cifra {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 5vw, 1.9rem);
  font-weight: 700;
  line-height: 1;
  color: var(--verde-tinta);
}
.sello__pie {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  line-height: 1.3;
}

/* --- Medallones flotantes: los "pastelitos" que van y vienen al hacer
   scroll. La capa exterior la enciende el observador (.revelar); la interior
   flota sola. Separadas para que las dos transformaciones no se peleen. --- */
.medallon {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}
.medallon__foto {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 999px;
  box-shadow: var(--sombra-2), 0 0 0 3px var(--hueso), 0 0 0 4px var(--linea-oro);
  animation: flotar 7s ease-in-out infinite;
}
@keyframes flotar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-11px); }
}
.medallon--a { width: clamp(4.5rem, 13vw, 7rem); top: 4%;  left: -1.5rem; }
.medallon--b { width: clamp(3.5rem, 10vw, 5.5rem); bottom: 12%; left: -2.5rem; }
.medallon--b .medallon__foto { animation-duration: 9s; animation-delay: -2.5s; }
.medallon--c { width: clamp(3rem, 9vw, 4.75rem); top: -1rem; right: 8%; }
.medallon--c .medallon__foto { animation-duration: 8s; animation-delay: -4s; }

/* En teléfono sobran: estorban al texto y pesan. */
@media (max-width: 47.9375rem) {
  .medallon--b, .medallon--c { display: none; }
  .medallon--a { width: 4.25rem; top: 1%; left: -0.75rem; }
}


/* ==========================================================================
   09 · LISTÓN DE TEMPORADA
   ========================================================================== */

.liston {
  position: relative;
  background-color: var(--verde-tinta);
  color: var(--hueso);
  border-block: 1px solid var(--linea-oro);
}
.liston__interior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem clamp(0.75rem, 3vw, 1.5rem);
  padding-block: clamp(0.9rem, 2.5vw, 1.35rem);
  text-align: center;
}
.liston__etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--txt-xs);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dorado-claro);
}
.liston__nombre {
  font-family: var(--serif);
  font-size: var(--txt-xl);
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.01em;
  color: var(--hueso);
}
.liston__nota {
  flex-basis: 100%;
  font-size: var(--txt-sm);
  color: rgba(246, 247, 241, .92);
}
@media (min-width: 48rem) {
  .liston__nota { flex-basis: auto; }
  .liston__nota::before { content: "·"; margin-right: clamp(0.75rem, 3vw, 1.5rem); }
}


/* ==========================================================================
   10 · CATÁLOGO Y TARJETA DE PRODUCTO
   ========================================================================== */

.catalogo__seccion + .catalogo__seccion { margin-top: clamp(2.5rem, 6vw, 4rem); }

.catalogo__titulo {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
  font-size: var(--txt-2xl);
  font-weight: 600;
}
.catalogo__titulo::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, var(--linea-oro), transparent);
}

.rejilla {
  display: grid;
  gap: clamp(1.1rem, 2.5vw, 1.75rem);
  grid-template-columns: repeat(auto-fill, minmax(min(16.25rem, 100%), 1fr));
}

.tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background-color: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio-lg);
  overflow: hidden;
  box-shadow: var(--sombra-1);
  transition: transform var(--medio), box-shadow var(--medio),
              border-color var(--medio);
}
@media (hover: hover) {
  .tarjeta:hover {
    transform: translateY(-4px);
    border-color: var(--verde-claro);
    box-shadow: var(--sombra-2);
  }
  .tarjeta:hover .tarjeta__foto { transform: scale(1.045); }
}
.tarjeta:focus-within {
  border-color: var(--verde-hondo);
  box-shadow: var(--sombra-2);
}

.tarjeta__marco {
  position: relative;
  overflow: hidden;
  background-color: var(--hueso-hondo);
}
.tarjeta__foto {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 500ms var(--curva);
}

/* Producto sin foto: en vez de un hueco roto, el monograma de la casa.
   Ocho de los veinticinco productos aún no tienen fotografía. */
.tarjeta__sinfoto {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.5rem;
  aspect-ratio: 4 / 5;
  padding: var(--e-4);
  text-align: center;
  background:
    radial-gradient(75% 60% at 50% 35%, rgba(255,255,255,.75), transparent 70%),
    var(--velo-verde);
}
.tarjeta__sinfoto .icono {
  width: 2.5rem; height: 2.5rem;
  color: var(--verde);
  stroke-width: 1.2;
}
.tarjeta__sinfoto span {
  font-size: var(--txt-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

/* Chip de temporada montado sobre la foto. */
.tarjeta__liston {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.28rem 0.7rem;
  background-color: rgba(246, 247, 241, .94);
  border: 1px solid var(--linea-oro);
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dorado-hondo);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.tarjeta__cuerpo {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 0.5rem;
  padding: clamp(1rem, 2.5vw, 1.25rem);
}

.tarjeta__nombre {
  font-size: var(--txt-lg);
  font-weight: 600;
  line-height: 1.2;
}

.tarjeta__descripcion {
  font-size: var(--txt-sm);
  color: var(--tinta-suave);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.tarjeta__opciones { display: grid; gap: 0.6rem; margin-top: 0.25rem; }

.opcion-grupo { display: grid; gap: 0.3rem; min-width: 0; }
.opcion-grupo__nombre {
  font-size: var(--txt-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.opcion-grupo__select {
  width: 100%;
  min-width: 0;
  padding: 0.5rem 2.1rem 0.5rem 0.7rem;
  background-color: var(--hueso);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-xs);
  font-size: var(--txt-sm);
  color: var(--tinta);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f8f6e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 1rem;
  transition: border-color var(--veloz);
}
.opcion-grupo__select:hover { border-color: var(--verde); }

.tarjeta__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid var(--linea);
}
.tarjeta__precio {
  font-family: var(--serif);
  font-size: var(--txt-xl);
  font-weight: 700;
  line-height: 1;
  color: var(--verde-tinta);
  white-space: nowrap;
}
.tarjeta__precio small {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

/* --- Esqueleto de carga (sustituye a datos de ejemplo inventados) --- */
.esqueleto {
  border-radius: var(--radio-lg);
  overflow: hidden;
  border: 1px solid var(--linea);
  background-color: var(--blanco);
}
.esqueleto__foto { aspect-ratio: 4 / 5; }
.esqueleto__cuerpo { display: grid; gap: 0.6rem; padding: 1.15rem; }
.esqueleto__linea { height: 0.75rem; border-radius: 999px; }
.esqueleto__linea--corta { width: 45%; }
.esqueleto__linea--media { width: 72%; }
.esqueleto__foto, .esqueleto__linea {
  background: linear-gradient(90deg,
              var(--hueso-hondo) 25%, #f3f5ec 50%, var(--hueso-hondo) 75%);
  background-size: 300% 100%;
  animation: brillo 1.6s linear infinite;
}
@keyframes brillo {
  from { background-position: 150% 0; }
  to   { background-position: -150% 0; }
}

/* Mensaje de "no se pudo cargar" o "no hay nada". */
.vacio {
  grid-column: 1 / -1;
  padding: clamp(2rem, 6vw, 3.5rem) var(--e-4);
  text-align: center;
  background-color: var(--blanco);
  border: 1px dashed var(--linea-fuerte);
  border-radius: var(--radio-lg);
  color: var(--tinta-suave);
}
.vacio__titulo {
  margin-bottom: var(--e-2);
  font-family: var(--serif);
  font-size: var(--txt-xl);
  color: var(--tinta);
}


/* ==========================================================================
   11 · PASTELES PERSONALIZADOS
   ========================================================================== */

.personalizados__rejilla {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
@media (min-width: 58rem) {
  .personalizados__rejilla { grid-template-columns: 1fr 1fr; }
}
.personalizados__rejilla > * { min-width: 0; }

.lista-pasos {
  display: grid;
  gap: var(--e-4);
  margin: var(--e-5) 0 0;
  padding: 0;
  list-style: none;
}
.lista-pasos li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: var(--txt-base);
  color: var(--tinta-suave);
  line-height: 1.6;
}
.lista-pasos .icono {
  width: 1.3rem; height: 1.3rem;
  margin-top: 0.28rem;
  flex: none;
  color: var(--verde-hondo);
}
.lista-pasos strong { color: var(--tinta); font-weight: 600; }

/* Aviso duro: el pedido es una solicitud, la dueña decide. */
.aviso {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: clamp(0.95rem, 2.5vw, 1.25rem);
  background-color: var(--blanco);
  border: 1px solid var(--linea-oro);
  border-left: 3px solid var(--dorado);
  border-radius: var(--radio-sm);
  font-size: var(--txt-sm);
  color: var(--tinta);
  line-height: 1.6;
}
.aviso .icono {
  width: 1.25rem; height: 1.25rem;
  margin-top: 0.2rem;
  flex: none;
  color: var(--dorado-hondo);
}
.aviso strong { font-weight: 600; }
.aviso--verde {
  background-color: var(--velo-verde);
  border-color: var(--verde-claro);
  border-left-color: var(--verde-hondo);
}
.aviso--verde .icono { color: var(--verde-tinta); }


/* ==========================================================================
   12 · GALERÍA Y VISOR
   ========================================================================== */

.galeria {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: dense;
  gap: clamp(0.5rem, 1.5vw, 0.9rem);
}
@media (min-width: 34rem) { .galeria { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 52rem) { .galeria { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 72rem) { .galeria { grid-template-columns: repeat(5, 1fr); } }

.galeria__pieza {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radio);
  background-color: var(--hueso-hondo);
  cursor: zoom-in;
}
/* Cada séptima pieza ocupa el doble: eso es lo que hace mosaico y no cuadrícula. */
@media (min-width: 34rem) {
  .galeria__pieza:nth-child(7n + 1) { grid-column: span 2; grid-row: span 2; }
}
.galeria__pieza img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform 600ms var(--curva), filter var(--medio);
}
.galeria__pieza::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(46, 54, 48, .45));
  opacity: 0;
  transition: opacity var(--medio);
}
@media (hover: hover) {
  .galeria__pieza:hover img { transform: scale(1.07); }
  .galeria__pieza:hover::after { opacity: 1; }
}
.galeria__pieza:focus-within { outline: 2.5px solid var(--verde-tinta); outline-offset: 3px; }

.galeria__mas { display: flex; justify-content: center; margin-top: clamp(1.5rem, 4vw, 2.25rem); }

/* --- Visor a pantalla completa --- */
.visor {
  position: fixed;
  inset: 0;
  z-index: var(--z-visor);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--e-3);
  padding: var(--e-4);
  background-color: rgba(28, 34, 29, .93);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--medio), visibility var(--medio);
}
@supports (backdrop-filter: blur(6px)) {
  .visor { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
}
.visor--abierto { visibility: visible; opacity: 1; }
.visor__barra { display: flex; justify-content: flex-end; }
.visor__lienzo {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
}
.visor__imagen {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  border-radius: var(--radio);
  box-shadow: var(--sombra-3);
  background-color: transparent;
}
.visor__pie {
  max-width: 56ch;
  margin-inline: auto;
  padding-bottom: env(safe-area-inset-bottom, 0);
  font-size: var(--txt-sm);
  color: rgba(246, 247, 241, .88);
  text-align: center;
  line-height: 1.5;
}
.visor__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(246, 247, 241, .9);
  border-color: transparent;
}
.visor__nav--anterior { left: 0; }
.visor__nav--siguiente { right: 0; }
.visor :focus-visible { outline-color: var(--dorado); }


/* ==========================================================================
   13 · CÓMO PEDIR
   ========================================================================== */

.pasos {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  counter-reset: paso;
}
@media (min-width: 48rem) { .pasos { grid-template-columns: repeat(3, 1fr); } }

.paso {
  position: relative;
  padding: clamp(1.5rem, 3.5vw, 2rem) clamp(1.25rem, 3vw, 1.75rem);
  background-color: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-1);
}
.paso::before {
  counter-increment: paso;
  content: counter(paso, decimal-leading-zero);
  display: block;
  margin-bottom: var(--e-3);
  font-family: var(--serif);
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--dorado-hondo);
  opacity: 0.85;
}
.paso__titulo { margin-bottom: var(--e-2); font-size: var(--txt-lg); }
.paso__texto { font-size: var(--txt-sm); color: var(--tinta-suave); line-height: 1.6; }


/* ==========================================================================
   14 · DÓNDE ESTAMOS Y MAPA
   ========================================================================== */

.ubicacion__rejilla {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: start;
}
/* Sin esto, el aspect-ratio del mapa junto con su min-height le fija a la
   columna un ancho mínimo de 396 px y en teléfono se sale de la pantalla. */
.ubicacion__rejilla > * { min-width: 0; }
@media (min-width: 58rem) {
  .ubicacion__rejilla { grid-template-columns: 1fr 1.15fr; }
}

.datos { display: grid; gap: var(--e-4); margin: 0; }
.datos__fila {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding-bottom: var(--e-4);
  border-bottom: 1px solid var(--linea);
}
.datos__fila:last-child { border-bottom: 0; padding-bottom: 0; }
.datos__icono {
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  flex: none;
  background-color: var(--velo-verde);
  border-radius: 999px;
  color: var(--verde-tinta);
}
.datos__icono .icono { width: 1.2rem; height: 1.2rem; }
.datos__titulo {
  font-size: var(--txt-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: 0.2rem;
}
.datos__valor { font-size: var(--txt-base); color: var(--tinta); line-height: 1.55; }
.datos__valor a { font-weight: 500; }

.mapa {
  width: 100%;
  aspect-ratio: 16 / 11;
  min-height: 17rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-lg);
  overflow: hidden;
  background-color: var(--hueso-hondo);
  box-shadow: var(--sombra-1);
  z-index: 0;             /* debajo del encabezado pegajoso */
}
.mapa__nota {
  margin-top: var(--e-3);
  font-size: var(--txt-xs);
  color: var(--tinta-suave);
  line-height: 1.5;
}

/* Leaflet, vestido de la casa. */
.leaflet-container { font-family: var(--sans); background: var(--hueso-hondo); }
.leaflet-container a { color: var(--verde-tinta); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--hueso);
  color: var(--tinta);
  border-radius: var(--radio-sm);
  box-shadow: var(--sombra-2);
}
.leaflet-popup-content { margin: 0.85rem 1rem; font-size: var(--txt-sm); line-height: 1.5; }
.leaflet-popup-content strong { font-family: var(--serif); font-size: var(--txt-lg); }
.leaflet-control-zoom a {
  color: var(--tinta) !important;
  background: var(--hueso) !important;
  border-color: var(--linea) !important;
}
.leaflet-control-attribution { font-size: 10px; background: rgba(246,247,241,.8) !important; }


/* ==========================================================================
   15 · PIE
   ========================================================================== */

.pie {
  position: relative;
  background-color: var(--verde-tinta);
  color: rgba(246, 247, 241, .92);
  border-top: 1px solid var(--linea-oro);
}
.pie__rejilla {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
  padding-block: clamp(2.75rem, 7vw, 4.5rem);
}
@media (min-width: 42rem) { .pie__rejilla { grid-template-columns: 1.3fr 1fr 1fr; } }

.pie__marca { display: grid; gap: var(--e-3); justify-items: start; }
.pie__logo {
  width: 4.5rem; height: 4.5rem;
  border-radius: 999px;
  object-fit: cover;
  background-color: var(--hueso);
  box-shadow: 0 0 0 1px var(--linea-oro);
}
.pie__lema {
  max-width: 34ch;
  font-family: var(--serif);
  font-size: var(--txt-lg);
  font-style: italic;
  color: var(--hueso);
  line-height: 1.45;
}

.pie__titulo {
  margin-bottom: var(--e-3);
  font-family: var(--sans);
  font-size: var(--txt-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dorado-claro);
}
.pie__lista { display: grid; gap: 0.6rem; list-style: none; margin: 0; padding: 0; }
.pie__lista li { font-size: var(--txt-sm); line-height: 1.55; }
.pie a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--hueso);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--veloz), color var(--veloz);
}
.pie a:hover { color: var(--dorado-claro); border-bottom-color: var(--dorado-claro); }
.pie .icono { width: 1.05rem; height: 1.05rem; flex: none; }

.pie__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem var(--e-5);
  justify-content: space-between;
  padding-block: var(--e-4) calc(var(--e-4) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(246, 247, 241, .18);
  font-size: var(--txt-xs);
  color: rgba(246, 247, 241, .9);
  line-height: 1.55;
}


/* ==========================================================================
   16 · VELO Y CAJÓN DEL CARRITO
   ========================================================================== */

.velo {
  position: fixed;
  inset: 0;
  z-index: var(--z-velo);
  background-color: rgba(28, 34, 29, .5);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--medio), visibility var(--medio);
}
@supports (backdrop-filter: blur(3px)) {
  .velo { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
}
.velo--visible { visibility: visible; opacity: 1; }

/* El cajón nace cerrado por CSS, no con el atributo hidden: display:none
   mata la transición. El JS solo alterna .cajon--abierto y aria-hidden. */
.cajon {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: var(--z-cajon);
  width: min(27rem, 100%);
  display: flex;
  flex-direction: column;
  background-color: var(--hueso);
  border-left: 1px solid var(--linea);
  box-shadow: var(--sombra-3);
  visibility: hidden;
  opacity: 0;
  transform: translateX(102%);
  transition: transform var(--medio), opacity var(--medio), visibility var(--medio);
}
.cajon--abierto { visibility: visible; opacity: 1; transform: none; }

.cajon__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  flex: none;
  padding: var(--e-4) var(--e-5);
  padding-top: calc(var(--e-4) + env(safe-area-inset-top, 0px));
  background-color: var(--blanco);
  border-bottom: 1px solid var(--linea);
}
.cajon__titulo { font-size: var(--txt-xl); }

.cajon__cuerpo {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: var(--e-5);
  display: grid;
  gap: var(--e-5);
  align-content: start;
}

.cajon__pie {
  flex: none;
  display: grid;
  gap: var(--e-3);
  padding: var(--e-4) var(--e-5);
  padding-bottom: calc(var(--e-5) + env(safe-area-inset-bottom, 0px));
  background-color: var(--blanco);
  border-top: 1px solid var(--linea);
}

/* --- Renglones del carrito --- */
.carrito-lista { display: grid; gap: var(--e-4); list-style: none; margin: 0; padding: 0; }

.carrito-item {
  display: grid;
  grid-template-columns: 4.25rem 1fr;
  gap: var(--e-3);
  padding-bottom: var(--e-4);
  border-bottom: 1px solid var(--linea);
}
.carrito-item:last-child { border-bottom: 0; padding-bottom: 0; }
.carrito-item__foto {
  width: 4.25rem;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radio-sm);
  background-color: var(--hueso-hondo);
}
.carrito-item__datos { display: grid; gap: 0.3rem; min-width: 0; }
.carrito-item__nombre {
  font-family: var(--serif);
  font-size: var(--txt-base);
  font-weight: 600;
  line-height: 1.25;
}
.carrito-item__opciones { font-size: var(--txt-xs); color: var(--tinta-suave); line-height: 1.45; }
.carrito-item__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  margin-top: 0.2rem;
}
.carrito-item__importe {
  font-family: var(--serif);
  font-size: var(--txt-lg);
  font-weight: 700;
  color: var(--verde-tinta);
}

.contador {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--linea-fuerte);
  border-radius: 999px;
  background-color: var(--blanco);
  overflow: hidden;
}
.contador button {
  display: grid;
  place-items: center;
  width: 2rem; height: 2rem;
  color: var(--verde-tinta);
  transition: background-color var(--veloz);
}
.contador button:hover { background-color: var(--velo-verde); }
.contador button .icono { width: 0.9rem; height: 0.9rem; }
.contador__valor {
  min-width: 2rem;
  text-align: center;
  font-size: var(--txt-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.carrito-item__quitar {
  font-size: var(--txt-xs);
  color: var(--tinta-suave);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.carrito-item__quitar:hover { color: var(--alerta); }

/* --- Totales --- */
.totales { display: grid; gap: 0.55rem; }
.totales__fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
  font-size: var(--txt-sm);
  color: var(--tinta-suave);
}
.totales__fila--fuerte {
  padding-top: 0.55rem;
  border-top: 1px solid var(--linea);
  font-size: var(--txt-base);
  color: var(--tinta);
}
.totales__fila--fuerte dd {
  font-family: var(--serif);
  font-size: var(--txt-2xl);
  font-weight: 700;
  color: var(--verde-tinta);
  line-height: 1;
}
.totales dt, .totales dd { margin: 0; }
.totales__nota {
  font-size: var(--txt-xs);
  color: var(--tinta-suave);
  line-height: 1.5;
  text-align: right;
}

/* --- Estado del envío del pedido --- */
.estado {
  padding: 0.8rem 1rem;
  border-radius: var(--radio-sm);
  font-size: var(--txt-sm);
  line-height: 1.55;
}
.estado:empty { display: none; }
.estado--malo {
  background-color: rgba(160, 75, 60, .1);
  border: 1px solid rgba(160, 75, 60, .35);
  color: #7d3a2e;
}
.estado--bueno {
  background-color: var(--velo-verde);
  border: 1px solid var(--verde-claro);
  color: var(--verde-tinta);
}

/* --- Pantalla de éxito con folio --- */
.exito { display: grid; gap: var(--e-4); justify-items: center; text-align: center; padding-block: var(--e-5); }
.exito__marca {
  display: grid; place-items: center;
  width: 4.5rem; height: 4.5rem;
  background-color: var(--velo-verde);
  border: 1px solid var(--verde-claro);
  border-radius: 999px;
  color: var(--verde-tinta);
}
.exito__marca .icono { width: 2rem; height: 2rem; stroke-width: 1.5; }
.exito__folio {
  padding: 0.45rem 1.1rem;
  background-color: var(--blanco);
  border: 1px dashed var(--dorado);
  border-radius: var(--radio-sm);
  font-size: var(--txt-lg);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--tinta);
}
.exito__texto { font-size: var(--txt-sm); color: var(--tinta-suave); line-height: 1.6; max-width: 38ch; }


/* ==========================================================================
   17 · CHAT DE CANELITA
   ========================================================================== */

.burbuja {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: calc(clamp(1rem, 3vw, 1.75rem) + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-chat);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  height: 3.5rem;
  padding: 0 1.15rem 0 0.9rem;
  background-color: var(--verde-tinta);
  color: var(--blanco);
  border: 1px solid var(--linea-oro);
  border-radius: 999px;
  box-shadow: var(--sombra-2);
  transition: transform var(--veloz), background-color var(--veloz), opacity var(--medio);
}
.burbuja:hover { background-color: var(--tinta); transform: translateY(-2px); }
.burbuja .icono { width: 1.4rem; height: 1.4rem; }
.burbuja__texto {
  font-size: var(--txt-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
/* Anillo que respira una vez cada tanto para que se note sin molestar. */
.burbuja::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 1px solid var(--dorado);
  border-radius: 999px;
  opacity: 0;
  animation: anillo 5s ease-out infinite;
  pointer-events: none;
}
@keyframes anillo {
  0%       { transform: scale(1);    opacity: .55; }
  22%, 100% { transform: scale(1.16); opacity: 0; }
}
.burbuja--oculta { opacity: 0; visibility: hidden; transform: scale(.85); }

/* Con el cajón o el visor abiertos, la burbuja tapaba el botón de "Enviar mi
   solicitud". Se quita sola para que nadie tenga que acordarse de hacerlo;
   .burbuja--oculta sigue existiendo por si el JS la quiere controlar a mano. */
body:has(.cajon--abierto) .burbuja,
body:has(.visor--abierto) .burbuja,
body:has(.chat--abierto) .burbuja {
  opacity: 0;
  visibility: hidden;
  transform: scale(.85);
}

/* La invitación "Cotiza tu pastel" se queda visible en los teléfonos de
   390 px, que son la mayoría; solo en los muy angostos se reduce al icono. */
@media (max-width: 23rem) {
  .burbuja { padding: 0; width: 3.5rem; justify-content: center; }
  .burbuja__texto { display: none; }
}

/* --- Ventana --- */
.chat {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: calc(clamp(1rem, 3vw, 1.75rem) + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-chat);
  display: flex;
  flex-direction: column;
  width: min(23.5rem, calc(100vw - 2rem));
  height: min(38rem, calc(100dvh - 6rem));
  background-color: var(--hueso);
  border: 1px solid var(--linea);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-3);
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  transform: translateY(14px) scale(.98);
  transform-origin: bottom right;
  transition: opacity var(--medio), transform var(--medio), visibility var(--medio);
}
.chat--abierto { visibility: visible; opacity: 1; transform: none; }

/* En teléfono es una hoja a pantalla completa: escribir en 320 px de alto
   con el teclado arriba no se puede. */
@media (max-width: 34rem) {
  .chat {
    inset: 0;
    width: 100%;
    height: 100dvh;
    border: 0;
    border-radius: 0;
    transform: translateY(2%);
  }
  /* La hoja abierta se asienta en su sitio. Sin esta línea la regla de arriba
     le gana a .chat--abierto (misma especificidad y va después en el archivo)
     y la hoja se queda 2% abajo: en un teléfono de 844 px son 17 px que se
     comen el último renglón del pie del chat. */
  .chat--abierto { transform: none; }
}

.chat__cabecera {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex: none;
  padding: 0.85rem 1rem;
  padding-top: calc(0.85rem + env(safe-area-inset-top, 0px));
  background-color: var(--verde-tinta);
  color: var(--hueso);
}
.chat__avatar {
  width: 2.5rem; height: 2.5rem;
  flex: none;
  border-radius: 999px;
  object-fit: cover;
  background-color: var(--hueso);
  box-shadow: 0 0 0 1px var(--linea-oro);
}
.chat__quien { display: grid; margin-right: auto; min-width: 0; }
.chat__nombre {
  font-family: var(--serif);
  font-size: var(--txt-lg);
  font-weight: 600;
  color: var(--hueso);
  line-height: 1.15;
}
.chat__rol {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dorado-claro);
}
.chat__cerrar {
  width: 2.25rem; height: 2.25rem;
  background-color: rgba(246, 247, 241, .14);
  border-color: transparent;
  color: var(--hueso);
}
.chat__cerrar:hover { background-color: rgba(246, 247, 241, .28); color: var(--hueso); }

.chat__cuerpo {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: var(--e-4);
}

.chat__mensaje {
  max-width: 88%;
  padding: 0.65rem 0.9rem;
  font-size: var(--txt-sm);
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.chat__mensaje--canelita {
  align-self: flex-start;
  background-color: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio) var(--radio) var(--radio) 0.25rem;
  color: var(--tinta);
}
.chat__mensaje--cliente {
  align-self: flex-end;
  background-color: var(--verde-claro);
  border-radius: var(--radio) var(--radio) 0.25rem var(--radio);
  color: var(--tinta);
}
.chat__mensaje img {
  margin-top: 0.5rem;
  border-radius: var(--radio-sm);
  max-height: 13rem;
  object-fit: cover;
}

/* Tres puntos mientras Canelita piensa. */
.chat__escribiendo {
  align-self: flex-start;
  display: inline-flex;
  gap: 0.28rem;
  padding: 0.8rem 0.95rem;
  background-color: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio) var(--radio) var(--radio) 0.25rem;
}
.chat__escribiendo span {
  width: 0.4rem; height: 0.4rem;
  background-color: var(--verde-hondo);
  border-radius: 999px;
  animation: puntear 1.3s ease-in-out infinite;
}
.chat__escribiendo span:nth-child(2) { animation-delay: .18s; }
.chat__escribiendo span:nth-child(3) { animation-delay: .36s; }
@keyframes puntear {
  0%, 60%, 100% { transform: translateY(0);     opacity: .4; }
  30%           { transform: translateY(-5px);  opacity: 1; }
}

.chat__pie {
  flex: none;
  display: grid;
  gap: 0.55rem;
  padding: 0.75rem;
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  background-color: var(--blanco);
  border-top: 1px solid var(--linea);
}
.chat__forma { display: flex; align-items: flex-end; gap: 0.5rem; }
.chat__texto {
  flex: 1 1 auto;
  min-width: 0;
  max-height: 7rem;
  padding: 0.6rem 0.8rem;
  background-color: var(--hueso);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  font-size: var(--txt-sm);
  line-height: 1.5;
  resize: none;
  transition: border-color var(--veloz), box-shadow var(--veloz);
}
.chat__texto:focus {
  outline: none;
  border-color: var(--verde-tinta);
  box-shadow: 0 0 0 3px rgba(71, 112, 90, .16);
}
.chat__boton {
  width: 2.6rem; height: 2.6rem;
  flex: none;
  border-radius: 999px;
}
.chat__boton--enviar {
  background-color: var(--verde-tinta);
  border-color: var(--verde-tinta);
  color: var(--blanco);
}
.chat__boton--enviar:hover:not([disabled]) { background-color: var(--tinta); color: var(--blanco); }
.chat__boton[disabled] { opacity: .45; cursor: not-allowed; }

.chat__adjunto {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.6rem;
  background-color: var(--velo-verde);
  border: 1px solid var(--verde-claro);
  border-radius: var(--radio-sm);
  font-size: var(--txt-xs);
  color: var(--tinta-suave);
}
.chat__adjunto img {
  width: 2.5rem; height: 2.5rem;
  object-fit: cover;
  border-radius: var(--radio-xs);
  flex: none;
}
.chat__adjunto button { margin-left: auto; color: var(--alerta); text-decoration: underline; }

.chat__legal { font-size: 0.6875rem; color: var(--tinta-suave); text-align: center; line-height: 1.45; }

/* Aviso de bloqueo: sustituye al formulario, no lo tapa. */
.chat__bloqueado {
  display: grid;
  gap: 0.6rem;
  padding: var(--e-4);
  background-color: rgba(160, 75, 60, .08);
  border-top: 1px solid rgba(160, 75, 60, .3);
  text-align: center;
  font-size: var(--txt-sm);
  color: #7d3a2e;
  line-height: 1.55;
}


/* ==========================================================================
   18 · ANIMACIONES AL HACER SCROLL
   Un IntersectionObserver agrega .revelar--visible. Nada se mueve más de
   18 px ni tarda más de 500 ms: la página respira, no brinca.
   ========================================================================== */

html:not(.no-js) .revelar {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity 500ms var(--curva) var(--retraso, 0ms),
    transform 500ms var(--curva) var(--retraso, 0ms);
}

html:not(.no-js) .revelar--izq   { transform: translate3d(-20px, 0, 0); }
html:not(.no-js) .revelar--der   { transform: translate3d(20px, 0, 0); }
html:not(.no-js) .revelar--escala{ transform: scale(.965); }
html:not(.no-js) .revelar--suave { transform: translate3d(0, 10px, 0); }

/* Dos clases a propósito: con una sola perdía el empate de especificidad
   contra las variantes de arriba y lo revelado se quedaba a medio camino. */
html:not(.no-js) .revelar.revelar--visible { opacity: 1; transform: none; }
/* Lleva el mismo prefijo html:not(.no-js) que la regla que oculta; si no, aquella
   gana por especificidad y lo revelado se queda invisible para siempre. */

/* En teléfono no se entra de lado: 20 px de corrimiento sacan el texto por
   la orilla izquierda y se ve cortado mientras aparece. */
@media (max-width: 47.9375rem) {
  html:not(.no-js) .revelar--izq,
  html:not(.no-js) .revelar--der { transform: translate3d(0, 18px, 0); }
}

/* Escalonado: se le pone a un contenedor y sus hijos entran en cascada.
   Ocho pasos bastan; más se siente lento. */
.escalonar > * { --retraso: 0ms; }
.escalonar > :nth-child(1) { --retraso: 0ms; }
.escalonar > :nth-child(2) { --retraso: 70ms; }
.escalonar > :nth-child(3) { --retraso: 140ms; }
.escalonar > :nth-child(4) { --retraso: 210ms; }
.escalonar > :nth-child(5) { --retraso: 280ms; }
.escalonar > :nth-child(6) { --retraso: 350ms; }
.escalonar > :nth-child(7) { --retraso: 420ms; }
.escalonar > :nth-child(n + 8) { --retraso: 480ms; }


/* ==========================================================================
   19 · MOVIMIENTO REDUCIDO E IMPRESIÓN
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Lo revelado se queda revelado: quien pidió no ver movimiento
     tiene que ver el contenido igual. */
  .revelar { opacity: 1 !important; transform: none !important; }
  .medallon__foto, .burbuja::after, .esqueleto__foto, .esqueleto__linea {
    animation: none !important;
  }
  .tarjeta:hover { transform: none; }
  .tarjeta:hover .tarjeta__foto,
  .galeria__pieza:hover img { transform: none; }
}

@media print {
  .encabezado, .burbuja, .chat, .cajon, .velo, .visor,
  .hojas, .medallon, .galeria__mas, .boton { display: none !important; }
  body { background: #fff; color: #000; }
  .revelar { opacity: 1 !important; transform: none !important; }
  .seccion { padding-block: 1.5rem; break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; }
}