/* ==================================================================
   CESTA DE PRESUPUESTO · PÁGINA DE PEDIDO
   Archivo aparte: no toca ninguna regla del diseño existente.
   ================================================================== */

/* ---------------------------------------------- botón cabecera --- */
.boton-cesta {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid var(--border-fuerte);
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: border-color var(--dur-rapida) var(--ease-suave),
              background var(--dur-rapida) var(--ease-suave);
}

.boton-cesta svg { width: 1.25rem; height: 1.25rem; }

.boton-cesta:hover {
  border-color: var(--acento);
  background: color-mix(in srgb, var(--acento) 8%, transparent);
}

/* El atributo `hidden` tiene que ganar al display de abajo: sin esto, la
   burbuja se ve con un 0 cuando la cesta está vacía. */
.boton-cesta__cuenta[hidden] { display: none; }

.boton-cesta__cuenta {
  position: absolute;
  top: -.3rem;
  right: -.3rem;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 .3rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--latido);
  color: #fff;
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}

/* La cabecera sobre imagen usa colores claros: el botón la sigue. */
.cabecera[data-modo='sobre-imagen'] .boton-cesta {
  border-color: rgba(255, 252, 248, .45);
}

/* ---------------------------------------------- panel ------------ */
.cesta {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
}

.cesta[data-abierto='true'] { pointer-events: auto; }

.cesta__velo {
  position: absolute;
  inset: 0;
  background: rgba(46, 29, 20, .42);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity var(--dur-media) var(--ease-suave);
}

.cesta[data-abierto='true'] .cesta__velo { opacity: 1; }

.cesta__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(30rem, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--bg);
  box-shadow: var(--sombra-flotante);
  transform: translateX(100%);
  transition: transform var(--dur-media) var(--ease-salida);
}

.cesta[data-abierto='true'] .cesta__panel { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .cesta__velo, .cesta__panel { transition: none; }
}

.cesta__cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  border-bottom: 1px solid var(--border);
}

.cesta__cabecera h2 {
  font-size: 1.45rem;
  font-weight: 400;
  margin: .2rem 0 0;
}

.cesta__titulo-cuenta {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  color: var(--text-tenue);
  margin-top: .25rem;
}

.cesta__cerrar {
  flex: none;
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
  color: var(--text-suave);
  cursor: pointer;
}

.cesta__cerrar svg { width: 1.1rem; height: 1.1rem; }
.cesta__cerrar:hover { border-color: var(--acento); color: var(--acento); }

.cesta__cuerpo {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-5);
  display: grid;
  align-content: start;
  gap: var(--sp-5);
}

.cesta__vacia {
  text-align: center;
  display: grid;
  gap: var(--sp-4);
  justify-items: center;
  padding-top: var(--sp-6);
}

.cesta__vacia p { color: var(--text-suave); margin: 0; }

/* ---------------------------------------------- líneas ----------- */
.cesta__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-4);
}

.cesta-linea {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-m);
}

.cesta-linea__cabecera {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  align-items: flex-start;
}

.cesta-linea h3 {
  font-size: 1.05rem;
  font-weight: 400;
  margin: 0;
  line-height: 1.3;
}

.cesta-linea__precio {
  margin: .2rem 0 0;
  font-size: var(--t-micro);
  color: var(--text-tenue);
}

.cesta-linea__quitar {
  flex: none;
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-s);
  background: transparent;
  color: var(--tinta-30);
  cursor: pointer;
}

.cesta-linea__quitar svg { width: 1.05rem; height: 1.05rem; }
.cesta-linea__quitar:hover { color: var(--burdeos-500); background: var(--rosa-100); }

.cesta-linea__controles {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.cesta-linea__subtotal {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: var(--text);
}

.cesta-linea__campo {
  display: grid;
  gap: .25rem;
}

.cesta-linea__campo > span {
  font-size: var(--t-micro);
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  color: var(--text-tenue);
}

.cesta-linea__campo select,
.cesta-linea__campo input {
  width: 100%;
  padding: .5rem .7rem;
  font: inherit;
  font-size: var(--t-small);
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border-fuerte);
  border-radius: var(--r-s);
}

.cesta-linea__opciones {
  border: 0;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .3rem;
}

.cesta-linea__opciones legend {
  font-size: var(--t-micro);
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  color: var(--text-tenue);
  padding: 0 0 .25rem;
}

.cesta-linea__opciones label {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--t-small);
  color: var(--text-suave);
  cursor: pointer;
}

.cesta-linea__opciones input { accent-color: var(--acento); }

/* ---------------------------------------------- contador --------- */
.contador {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-fuerte);
  border-radius: var(--r-s);
  overflow: hidden;
  background: var(--bg);
}

.contador button {
  width: 2.1rem;
  height: 2.1rem;
  border: 0;
  background: transparent;
  color: var(--text-suave);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.contador button:hover { background: var(--crema-100); color: var(--acento); }

.contador input {
  width: 3.2rem;
  height: 2.1rem;
  border: 0;
  border-inline: 1px solid var(--border);
  background: transparent;
  text-align: center;
  font: inherit;
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
  color: var(--text);
  -moz-appearance: textfield;
}

.contador input::-webkit-outer-spin-button,
.contador input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.contador--pequeno button { width: 1.8rem; height: 1.8rem; }
.contador--pequeno input { width: 2.6rem; height: 1.8rem; }

/* ---------------------------------------------- total ------------ */
.cesta__total {
  padding: var(--sp-4);
  background: var(--crema-100);
  border-radius: var(--r-m);
}

.cesta__total-fila {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-3);
  font-size: var(--t-small);
  color: var(--text-suave);
}

.cesta__total-fila strong {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--text);
}

.cesta__aviso {
  margin: var(--sp-3) 0 0;
  font-size: var(--t-micro);
  line-height: 1.55;
  color: var(--text-tenue);
}

.cesta__aviso strong { color: var(--text-suave); }

.cesta__acciones { display: grid; gap: var(--sp-2); }

/* Confirmación breve al añadir desde el catálogo. */
.boton--hecho {
  border-color: var(--agua-500) !important;
  color: var(--agua-600) !important;
}

/* ==================================================================
   PÁGINA /pedido.html
   ================================================================== */
.pedido {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  align-items: start;
}

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

.pedido__vacio {
  text-align: center;
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-8) var(--sp-4);
  background: var(--crema-100);
  border-radius: var(--r-l);
}

.pedido__vacio p { margin: 0; }

.pedido__tabla {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  font-size: var(--t-small);
}

.pedido__tabla th {
  text-align: left;
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  color: var(--text-tenue);
  padding: var(--sp-3) var(--sp-4);
  background: var(--crema-100);
  white-space: nowrap;
}

.pedido__tabla td {
  padding: var(--sp-4);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.pedido__tabla tbody td strong { font-weight: 500; }

.pedido__detalle {
  display: block;
  font-size: var(--t-micro);
  color: var(--text-tenue);
  margin-top: .15rem;
}

.pedido__cant { width: 1%; white-space: nowrap; }

.pedido__importe {
  width: 1%;
  white-space: nowrap;
  text-align: right;
  font-family: var(--font-serif);
  font-size: 1.05rem;
}

.pedido__tabla tfoot td {
  border-bottom: 0;
  border-top: 2px solid var(--border-fuerte);
  color: var(--text-suave);
}

.pedido__tabla tfoot strong { font-size: 1.35rem; font-weight: 400; }

.pedido__quitar { width: 1%; }

.pedido__quitar button {
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-s);
  background: transparent;
  color: var(--tinta-30);
  cursor: pointer;
}

.pedido__quitar svg { width: 1.05rem; height: 1.05rem; }
.pedido__quitar button:hover { color: var(--burdeos-500); background: var(--rosa-100); }

.pedido__formulario {
  position: sticky;
  top: 7rem;
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-l);
  box-shadow: var(--sombra-s);
}

@media (max-width: 960px) {
  .pedido__formulario { position: static; }
}

.pedido__como {
  font-size: var(--t-micro);
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  color: var(--text-tenue);
  margin: var(--sp-4) 0 var(--sp-2);
}

.pedido__envios { display: grid; gap: var(--sp-2); }

.pedido__envios .boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
}

.pedido__envios svg { width: 1.05rem; height: 1.05rem; flex: none; }

/* ---------------------------------------------- consentimiento --- */
.campo-consentimiento {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin: var(--sp-4) 0 0;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--text-suave);
  cursor: pointer;
}

.campo-consentimiento input {
  margin-top: .22em;
  flex: none;
  width: 1rem;
  height: 1rem;
  accent-color: var(--acento);
}

.campo-consentimiento a { color: var(--acento); }

.aviso-envio--error {
  background: var(--rosa-100);
  border-color: var(--rosa-300);
  color: var(--burdeos-500);
}

/* Precio todavía sin fijar: se dice, no se inventa un número. */
.tarjeta-producto__precio--consultar {
  font-family: var(--font-sans);
  font-size: var(--t-small);
  font-style: italic;
  color: var(--text-tenue);
}

/* ==================================================================
   FICHA DE FAMILIA — los modelos de un producto
   ================================================================== */
.ficha-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
}

.ficha-cabecera > div { flex: 1 1 28rem; }
.ficha-cabecera h2 { margin: .4rem 0 var(--sp-3); }
.ficha-cabecera .entradilla { margin: 0; }

.ficha-desde {
  flex: none;
  margin: 0;
  text-align: right;
  line-height: 1.3;
}

.ficha-desde small {
  display: block;
  font-size: var(--t-micro);
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  color: var(--text-tenue);
}

.ficha-desde strong {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 1.4rem + 2vw, 2.8rem);
  font-weight: 400;
  color: var(--acento);
}

/* ---------------------------------------------- un modelo -------- */
.modelo {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-l);
  overflow: hidden;
  box-shadow: var(--sombra-s);
  transition: box-shadow var(--dur-media) var(--ease-suave),
              transform var(--dur-media) var(--ease-suave);
}

.modelo:hover { box-shadow: var(--sombra-m); transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .modelo { transition: none; }
  .modelo:hover { transform: none; }
}

.modelo .marco { border-radius: 0; }

.modelo__cuerpo {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: var(--sp-4);
  flex: 1;
}

.modelo__nombre {
  font-size: var(--t-h4);
  font-weight: 400;
  margin: 0;
}

.modelo__desc {
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--text-suave);
}

.modelo__pie {
  margin-top: auto;
  padding-top: var(--sp-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.modelo__precio {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--text);
}

.modelo__precio small {
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  color: var(--text-tenue);
  margin-right: .35rem;
}

.modelo__unidad { margin-left: .25rem; margin-right: 0 !important; }

/* ---------------------------------------------- ficha técnica ---- */
.ficha-datos {
  display: grid;
  gap: var(--sp-4);
  margin: var(--sp-7) 0 0;
  padding: var(--sp-5);
  background: var(--crema-100);
  border-radius: var(--r-m);
}

.ficha-datos > div {
  display: grid;
  grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: baseline;
}

@media (max-width: 640px) {
  .ficha-datos > div { grid-template-columns: 1fr; gap: .4rem; }
}

.ficha-datos dt {
  font-size: var(--t-micro);
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  color: var(--text-tenue);
}

.ficha-datos dd {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.pildora {
  font-size: var(--t-small);
  color: var(--text-suave);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .3em .9em;
}

/* ==================================================================
   SUBMENÚ DE PRODUCTOS
   Se abre con el ratón y también al llegar con el teclado. El enlace
   de arriba sigue funcionando: quien quiere el catálogo entero pincha.
   ================================================================== */
.nav__grupo { position: relative; }

.submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  translate: -50% 0;
  z-index: 60;
  min-width: 30rem;
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-m);
  box-shadow: var(--sombra-l);
  color: var(--text);

  /* Cerrado: invisible y sin capturar el ratón */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-.5rem);
  transition: opacity var(--dur-rapida) var(--ease-suave),
              transform var(--dur-rapida) var(--ease-suave),
              visibility 0s linear var(--dur-rapida);
}

/* Puente invisible entre el enlace y el panel, para que no se cierre
   al cruzar el hueco con el ratón. */
.submenu::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: -.7rem;
  height: .7rem;
}

.nav__grupo:hover .submenu,
.nav__grupo:focus-within .submenu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.submenu__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: var(--sp-5);
}

.submenu__lista li { break-inside: avoid; }

.submenu__lista a {
  display: block;
  padding: .42rem .6rem;
  border-radius: var(--r-s);
  font-size: var(--t-small);
  line-height: 1.35;
  color: var(--text-suave);
  text-decoration: none;
  transition: background var(--dur-rapida), color var(--dur-rapida);
}

.submenu__lista a:hover,
.submenu__lista a:focus-visible {
  background: var(--crema-100);
  color: var(--acento);
}

.submenu__todos {
  display: inline-block;
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  width: 100%;
  font-size: var(--t-micro);
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  color: var(--acento);
  text-decoration: none;
}

.submenu__todos:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .submenu { transition: none; }
}

/* --- en el móvil no hay hover: la lista va desplegada bajo su enlace --- */
.menu-movil__sub {
  list-style: none;
  margin: -.2rem 0 .8rem;
  padding: 0 0 0 var(--sp-4);
  display: grid;
  gap: .1rem;
  border-left: 1px solid var(--border);
}

.menu-movil__sub a {
  display: block;
  padding: .3rem 0;
  font-size: var(--t-small);
  color: var(--text-suave);
  text-decoration: none;
}

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

/* ==================================================================
   AJUSTES DE ESPACIO Y PROYECTOS
   ================================================================== */

/* Dos secciones seguidas sin fondo propio suman sus dos paddings y
   dejan un hueco enorme en medio: 288 px entre «los dos universos» y
   «Crea tu evento». Se reparte a la mitad por cada lado. */
#universos:has(+ .crea) { padding-bottom: calc(var(--seccion-y) * .45); }
#universos + .crea { padding-top: calc(var(--seccion-y) * .35); }

/* ---------------------------------------------- proyectos -------- */
.proyecto { display: flex; }

.proyecto__enlace {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  width: 100%;
  text-decoration: none;
  color: inherit;
}

.proyecto .marco {
  border-radius: var(--r-l);
  transition: box-shadow var(--dur-media) var(--ease-suave);
}

.proyecto__enlace:hover .marco { box-shadow: var(--sombra-m); }

.proyecto .marco img {
  transition: transform 1.1s var(--ease-salida);
}

.proyecto__enlace:hover .marco img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  .proyecto .marco img { transition: none; }
  .proyecto__enlace:hover .marco img { transform: none; }
}

.proyecto__estilo {
  margin: .3rem 0 0;
  font-size: var(--t-micro);
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  color: var(--text-tenue);
}

.proyecto__nombre {
  margin: 0;
  font-size: var(--t-h4);
  font-weight: 400;
  line-height: 1.25;
}

.proyecto__enlace:hover .proyecto__nombre { color: var(--acento); }