:root{
  --verde:#1b7a3d;          /* 9/9/2026: el verde de "codigo aplicado" y del descuento en el resumen */
  --t1: clamp(2.9rem, 6.2vw, 5.4rem);
  --t2: clamp(1.9rem, 3.4vw, 3rem);
  --t3: 1.42rem;
  --t4: 1.12rem;
  --t5: 1rem;
  --t6: .94rem;



  --ancho-banda: 1400px;
  --ancho-medio: 1100px;
  --ancho-lectura: 680px;

  /* ═════════════════════════════════════════════════════════════════════════
     EL MARGEN DE LOS LADOS. 17/8/2026.
     ═════════════════════════════════════════════════════════════════════════
     Tres medidas compiten y gana la mayor:
       · 24 px — el suelo: en un móvil no se regala más sitio.
       · el 5 % del ancho de la pantalla — el margen crece con ella: unos
         38 px en una tablet, unos 68 en un portátil de 1366.
       · lo que sobre de 1400 repartido a los lados — en pantallas grandes
         el contenido se queda centrado, igual que siempre.
     No hay saltos ni excepciones para ninguna pantalla concreta: es una
     sola fórmula seguida.

     POR QUÉ EXISTE: la web anterior dejaba 64 px de mínimo. Al estrenar la
     nueva el 14/8 el mínimo bajó a 24 —pensado para el móvil— y se aplicó
     también al ordenador, así que en cualquier portátil el titular y las
     fotos quedaban pegados al borde. Eva lo vio: "queda fatal el texto y
     fotos tan enganchado". Tenía razón: sí había cambiado.
     ═════════════════════════════════════════════════════════════════════════ */
  --margen-lado: max(24px, 5vw, calc((100% - var(--ancho-banda))/2));

  --aire-normal: clamp(56px, 7vw, 110px);
  --aire-amplio: clamp(74px, 9vw, 142px);

  --sp-texto: 0;
  --sp-rotulo: .2em;
  --sp-marca: .34em;

  --negro:#1a1614;
  --rojo:#B11217;
  --rojo-oscuro:#8e0e12;
  --gris:#4A4038;
  --crema:#F4EBDD;

  --bandera-azul:#012169;
  --bandera-rojo:#C8102E;
  --bandera-blanco:#FFFFFF;
  --bandera-es-rojo:#AA151B;
  --bandera-es-amarillo:#F1BF00;
  --crema2:#E0CDB5;
  --blanco:#FDFAF6;
  --dorado:#755419;


  --dorado-claro:#E8C57A;
  --fondo-foto:#fefefe;

  --titulos:'EB Garamond', Garamond, Georgia, serif;
  --texto:'EB Garamond', Garamond, Georgia, serif;

  --sistema: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

*{box-sizing:border-box}
body{margin:0;background:var(--blanco);color:var(--negro);
  font-family:var(--texto);font-size:var(--t4);font-weight:500;line-height:1.75;
  font-variant-numeric:lining-nums;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--titulos);font-weight:400;margin:0}

.aviso{background:var(--negro);color:var(--blanco);font-family:var(--texto);
  font-size:var(--t6);letter-spacing:var(--sp-rotulo);text-transform:uppercase;
  padding:9px 20px;text-align:center}
.aviso b{color:var(--dorado-claro)}


nav{display:flex;align-items:center;gap:36px;flex-wrap:wrap;
  padding:20px var(--margen-lado);border-bottom:1px solid var(--crema2)}
.marca{margin-right:auto;font-family:var(--titulos);font-size:var(--t4);
  letter-spacing:var(--sp-marca);font-weight:600;text-transform:uppercase;
  text-decoration:none;color:var(--negro);display:flex;align-items:center;gap:12px}

.marca-logo{height:42px;width:auto;aspect-ratio:600/173;display:block}
@media(max-width:640px){ .marca-logo{height:32px} }
.marca-m{height:34px;width:auto;display:block}
@media(max-width:640px){ .marca-m{height:28px} }
nav a.enlace{font-family:var(--texto);font-size:var(--t5);letter-spacing:var(--sp-rotulo);
  text-transform:uppercase;font-weight:600;text-decoration:none;color:var(--negro)}
nav a.enlace:hover{color:var(--rojo)}

nav a.enlace.idioma{display:inline-flex;align-items:center;gap:7px}
.bandera{display:block;width:21px;height:11px;flex:none;border:0.5px solid var(--crema2)}
.bandera .f-azul{fill:var(--bandera-azul)}
.bandera .f-blanco{stroke:var(--bandera-blanco)}
.bandera .f-rojo{stroke:var(--bandera-rojo)}
.bandera .f-es-rojo{fill:var(--bandera-es-rojo)}
.bandera .f-es-amarillo{fill:var(--bandera-es-amarillo)}
.nav-pedir{border:1px solid var(--dorado);padding:9px 20px}
.nav-pedir:hover{border-color:var(--rojo)}


.banda{padding:var(--aire-normal) var(--margen-lado)}
.banda-crema{background:var(--crema)}




.banda-catalogo{padding-top:var(--aire-amplio);padding-bottom:var(--aire-amplio);

  border-bottom:1px solid var(--crema2)}

.banda-catalogo .titulo-catalogo{font-size:clamp(2.4rem,4.6vw,3.9rem);margin-bottom:18px}
.banda-catalogo .rotulo{color:var(--rojo)}

.banda-catalogo .fila{margin-top:clamp(34px,4vw,58px)}


@media(min-width:1000px){

  /* ═══════════════════════════════════════════════════════════════════════
     LA TARJETA DE VELA TIENE UN TAMAÑO MÁXIMO. 17/8/2026.
     ═══════════════════════════════════════════════════════════════════════
     Antes: seis columnas de 1fr y cada vela ocupando dos. Eso reparte TODO el
     ancho disponible, así que la tarjeta crecía sin tope hasta los 445 px en
     una pantalla grande. En un portátil de 768 de alto, una sola vela ocupaba
     dos tercios de lo que se ve y no cabía entera con su nombre y su precio.

     Primero puse un tope al ANCHO DE LA PARRILLA, y era un parche pensado para
     una pantalla concreta. Lo dijo la dueña y tenía razón: "el problema no
     debe solucionarse añadiendo un parche específico para mi portátil".

     Ahora el tope está donde debe: EN LA TARJETA. Tres por fila, y ninguna
     mayor de 340 px, se mire desde donde se mire. Si la pantalla no da para
     tres de 340, encogen solas; si sobra sitio, no crecen: se centran.
     ═══════════════════════════════════════════════════════════════════════ */
  .banda-catalogo .fila{grid-template-columns:repeat(3,minmax(0,340px));
    justify-content:center;
    row-gap:clamp(64px,7vw,104px)}
  .banda-catalogo .fila > .ficha{grid-column:auto}

}

.filete{height:1px;background:var(--dorado);opacity:.5;border:0;margin:0}
.filete-corto{width:54px;height:1px;background:var(--dorado);border:0;margin:26px 0}

/* El enlace a la pagina propia de cada vela. Va debajo del boton de anadir,
   dentro del desplegable de la portada. Discreto: no compite con el boton. */
.mas-ficha{margin:16px 0 0}
.mas-ficha a{font-size:var(--t6);letter-spacing:var(--sp-rotulo);text-transform:uppercase;
  color:var(--gris);text-decoration:none;border-bottom:1px solid var(--crema2);padding-bottom:2px}
.mas-ficha a:hover{color:var(--rojo);border-bottom-color:var(--rojo)}
.mas-ficha a:focus-visible{outline:2px solid var(--negro);outline-offset:3px}

/* Las tarjetas de vela ahora se pueden abrir con el teclado, asi que tienen
   que VERSE cuando el tabulador llega a ellas. Sin esto, quien va con el
   teclado no sabe donde esta. 20/8/2026. */
.ficha:focus-visible{outline:2px solid var(--negro);outline-offset:4px}
.ficha[data-abre],.ficha[data-baja]{cursor:pointer}

/* El salto para ir directo al contenido. Esta escondido hasta que se pulsa
   el tabulador: es lo primero que encuentra quien entra con el teclado o con
   un lector de pantalla, y le ahorra pasar por todo el menu en cada pagina. */
.salta-al-contenido{position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--negro);color:var(--blanco);padding:14px 22px;
  font-size:var(--t6);letter-spacing:var(--sp-rotulo);text-transform:uppercase;
  text-decoration:none}
.salta-al-contenido:focus{left:8px;top:8px}

.rotulo{font-family:var(--texto);font-size:var(--t5);letter-spacing:var(--sp-rotulo);
  text-transform:uppercase;font-weight:600;color:var(--rojo);margin:0 0 20px}
.titulo{font-size:var(--t2);line-height:1.15;margin:0 0 14px}
.titulo b{font-weight:600;color:var(--rojo)}
.bajada{font-size:var(--t3);color:var(--gris);font-weight:400;line-height:1.7;max-width:56ch;margin:0}


.portada{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,5vw,76px);align-items:center;
  padding:clamp(40px,5vw,84px) var(--margen-lado)}
.frase-grande{font-size:var(--t1);line-height:1.05;letter-spacing:-.012em}
.frase-grande i{font-style:italic;font-weight:500;color:var(--rojo)}
.entradilla{font-size:var(--t3);color:var(--gris);line-height:1.7;max-width:34ch;margin:26px 0 0;font-weight:400}
.foto-cuadro{background:var(--crema);aspect-ratio:1/1;overflow:hidden}
.foto-cuadro img{width:100%;height:100%;object-fit:cover}

.foto-producto{background:var(--blanco)}
.foto-producto img{width:100%;height:auto;display:block}



.fila{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:clamp(20px,2.4vw,38px);padding:42px 0 0;margin:0}
.ficha{min-width:0}



/* ═══════════════════════════════════════════════════════════════════════════
   LOS SEIS VASOS, APOYADOS EN LA MISMA LÍNEA. 17/8/2026.
   ═══════════════════════════════════════════════════════════════════════════
   Cada foto trae el vaso a una altura distinta, y estos números lo corrigen
   para que los seis se vean apoyados en la misma línea, como en un estante.

   CÓMO SE CALCULA EL NÚMERO DE UNA VELA NUEVA (para no volver a las andadas):
   1· Buscar en la FOTO ORIGINAL en qué píxel acaba el CRISTAL del vaso.
      Ojo con la trampa: el borde del cristal, NO la sombra de debajo (la
      sombra ya engañó una vez, y a Madreselva la tuvo días flotando).
      Se divide ese píxel entre el alto de la foto: eso es g (entre 0 y 1).
   2· El vaso apoya, dentro de su tarjeta, en:  0.5 + (g − 0.5)·escala + asienta
   3· Las seis velas apoyan en 0.889 (89% de la tarjeta). Despejar:
         asienta = 0.889 − 0.5 − (g − 0.5)·escala
   Medido con las seis fotos el 17/8/2026: g vale 0.867 (ojo), 0.865
   (inicial), 0.888 (foto), 0.811 (midnight), 0.869 (summer), 0.800
   (madreselva, foto de 1448 px, la única que no es de 1254).
   La tira de la página inglesa usa otra caja (cuadrada) y otro número,
   --asienta-tira, con la misma fórmula pero apoyando en 0.916: está en el
   propio en.html.
   ═══════════════════════════════════════════════════════════════════════════ */
.v-ojo       {--escala:1;     --asienta:2.25%}
.v-inicial   {--escala:.999;  --asienta:2.46%}
.v-foto      {--escala:.967;  --asienta:1.31%; --desplaza:4.7%}
.v-midnight  {--escala:.801;  --asienta:14.00%}
.v-summer    {--escala:1.119; --asienta:-2.38%}
.v-madreselva{--escala:1.104; --asienta:5.77%}

.ficha-foto{position:relative;background:var(--fondo-foto);aspect-ratio:4/5;overflow:hidden;margin-bottom:18px;border-radius:3px}

.novedad{position:absolute;top:12px;left:0;right:0;z-index:1;text-align:center;
  font-family:var(--texto);font-size:var(--t6);font-weight:500;color:var(--negro)}

@media(max-width:640px){ .novedad{top:7px} }
.ficha-foto img{width:100%;height:100%;object-fit:cover;transition:transform .5s;
  transform:translateY(var(--asienta,0)) scale(var(--escala,1))}

.ficha:hover
.ficha-foto img{transform:translateX(var(--desplaza,0)) translateY(var(--asienta,0)) scale(calc(var(--escala,1) * 1.03))}
.ficha .nota{font-family:var(--texto);font-size:var(--t6);letter-spacing:var(--sp-rotulo);
  text-transform:uppercase;color:var(--gris);font-weight:600;margin:0 0 6px}
.ficha h3{font-size:var(--t3);font-weight:500;line-height:1.3;margin:0 0 6px}
.precio{font-family:var(--texto);font-size:var(--t4);font-weight:400;color:var(--gris);margin:0}

.opciones{font-size:var(--t6);font-weight:400;color:var(--gris);white-space:nowrap;margin-left:4px}
.pista{font-family:var(--texto);font-size:var(--t6);color:var(--gris);font-weight:400;margin:8px 0 0}


.dos{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:start}
/* La foto de estas secciones NO lleva tope: llena su columna y queda pegada
   al mismo borde que la foto de la portada. Tuvo un tope de 430 px del 17/8
   de madrugada al 17/8 de mediodia, y fue un error mio: Eva se quejaba del
   ESPACIO de debajo y yo achique la FOTO. La causa era otra -el blanco que
   trae la propia imagen- y esta arreglada donde toca, mas abajo. Ademas ese
   tope acabo aplicandose a las cuatro secciones y encogio tambien la del Ojo,
   que nadie habia pedido.                                        17/8/2026. */




.ficha{cursor:pointer;text-align:center}
.ficha .pista{margin-left:auto;margin-right:auto}
.ficha .ver{font-size:var(--t6);letter-spacing:var(--sp-rotulo);text-transform:uppercase;
  font-weight:600;color:var(--rojo);margin:12px 0 0;opacity:.75;transition:opacity .2s}
.ficha .ver a{color:inherit;text-decoration:none}
.ficha .ver a:hover{text-decoration:underline}
.ficha:hover .ver{opacity:1}
.ficha.abierta .ver{opacity:1}

.detalle{display:none;grid-column:1 / -1;position:relative;
  background:var(--crema);border-radius:3px;padding:clamp(24px,3vw,44px);margin-top:6px}
.detalle.abierto{display:block}
.detalle-dos{display:grid;grid-template-columns:.85fr 1fr;gap:clamp(24px,3.5vw,56px);align-items:start}
.detalle-dos img{width:100%;border-radius:3px}

.detalle-foto{background:var(--fondo-foto);aspect-ratio:1/1;overflow:hidden;border-radius:3px}
.detalle-foto img{width:100%;height:100%;object-fit:cover;border-radius:0;
  transform:translateX(var(--desplaza,0)) scale(var(--escala,1))}

.detalle-ancha{margin:clamp(28px,3.5vw,44px) 0 0;padding-top:clamp(24px,3vw,34px);
  border-top:1px solid var(--crema2)}

.detalle-ancha img{width:100%;display:block;border-radius:3px;
  aspect-ratio:16/6.5;object-fit:cover;object-position:center 56%}
.detalle-ancha figcaption{font-family:var(--texto);font-size:var(--t5);
  color:var(--gris);line-height:1.6;margin-top:14px;text-align:center}


.detalle-par{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.detalle-par figure{margin:0}
.detalle-par figcaption{font-family:var(--texto);font-size:var(--t6);
  letter-spacing:var(--sp-rotulo);text-transform:uppercase;font-weight:600;
  color:var(--gris);text-align:center;margin-top:10px}
.detalle-titulo{font-size:var(--t2);font-weight:400;line-height:1.15;margin:0 0 16px}
.detalle-texto{font-size:var(--t4);color:var(--gris);line-height:1.7;margin:0 0 10px;max-width:52ch}
.detalle-texto i{font-style:italic;color:var(--negro)}


.tres{list-style:none;margin:16px 0;padding:0}
.tres li{font-size:var(--t4);color:var(--gris);line-height:1.7;padding-left:18px;position:relative}
.tres li::before{content:"";position:absolute;left:0;top:.85em;width:8px;height:1px;background:var(--dorado)}
.tres b{font-weight:600;color:var(--negro)}


.versiones{border-collapse:collapse;width:100%;max-width:440px;margin:0 0 18px}
.versiones td{font-size:var(--t4);color:var(--gris);padding:9px 0;border-bottom:1px solid var(--crema2)}
.versiones tr:last-child td{border-bottom:none}
.versiones td:first-child{width:34%}
.versiones td:last-child{text-align:right}
.versiones b{font-weight:600;color:var(--negro)}

.detalle-pie{font-size:var(--t6);color:var(--gris);line-height:1.7;margin:0 0 18px}
.detalle-precio{font-size:var(--t3);font-weight:500;color:var(--negro);margin:0}
.detalle-precio span{font-size:var(--t6);font-weight:400;color:var(--gris);margin-left:10px}

/* z-index:1 porque la foto de la vela lleva un scale() para encuadrarla, y eso
   la pintaba POR ENCIMA de la X en pantallas estrechas: no se podia cerrar
   tocando la X. 20/8/2026. */
.detalle .cerrar{position:absolute;top:10px;right:14px;z-index:1;background:transparent;border:none;
  font-family:var(--texto);font-size:var(--t3);line-height:1;color:var(--gris);cursor:pointer;padding:6px}
.detalle .cerrar:hover{color:var(--rojo)}

/* 999.98 y no 1000: el escritorio empieza EN 1000 (la regla del catálogo de
   más arriba). Con 1000 en los dos sitios, una pantalla de 1000 justos
   cumplía las dos reglas a la vez y quedaba a medio camino. 17/8/2026. */
@media(max-width:999.98px){
  .detalle-dos{grid-template-columns:1fr}
  .versiones td:last-child{text-align:left}
}



.frase-luz{font-size:var(--t2);font-style:italic;font-weight:400;color:var(--negro);
  line-height:1.2;margin:0}
.frase-luz b{font-weight:500;color:var(--rojo)}


.regalo-modo{font-size:var(--t4);color:var(--gris);font-weight:400;line-height:1.6;margin:0 0 10px;max-width:46ch}
.regalo-modo b{font-weight:600;color:var(--negro)}


.regalo-bolsa{font-size:var(--t4);color:var(--gris);font-weight:400;line-height:1.6;
  margin:22px 0 0;max-width:46ch;border-left:1px solid var(--dorado);padding-left:18px}
.regalo-bolsa b{font-weight:600;color:var(--negro)}




.nav-pedir{position:relative}
.nav-pedir .cuenta{display:inline-flex;align-items:center;justify-content:center;
  min-width:19px;height:19px;padding:0 5px;margin-left:9px;border-radius:19px;
  background:var(--rojo);color:var(--blanco);font-size:var(--t6);font-weight:600;
  letter-spacing:0;line-height:1}


/* ═══════════════════════════════════════════════════════════════════════════
   EL AVISO DE "AÑADIDA" SALE JUNTO AL BOTÓN. 17/8/2026.
   ═══════════════════════════════════════════════════════════════════════════
   Era una barra negra pegada al borde de abajo y centrada. Si la clienta
   pulsaba un botón a media página, el aviso aparecía lejos de donde estaba
   mirando y no se enteraba de que la vela había entrado. Lo dijo Eva: "es
   difícil de ver", "el mensaje tendría que salir al lado de donde clicas".
   Ahora carrito.js calcula el sitio —encima del botón, o debajo si arriba no
   cabe— y lo escribe en left/top. Aquí solo se pinta.
   La clase 'suelto' es el comportamiento de antes, para cuando no se sabe qué
   botón fue: abajo y centrado.
   ═══════════════════════════════════════════════════════════════════════════ */
#aviso-carrito{position:fixed;left:0;top:0;
  background:var(--negro);color:var(--blanco);padding:12px 18px;border-radius:3px;
  font-size:var(--t5);line-height:1.5;z-index:1000;box-shadow:0 6px 26px rgba(0,0,0,.22);
  max-width:min(340px,88vw);text-align:left;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .18s,transform .18s,visibility .18s}
#aviso-carrito.visible{opacity:1;visibility:visible;transform:translateY(0)}
#aviso-carrito::after{content:'';position:absolute;left:50%;margin-left:-7px;bottom:-7px;
  width:0;height:0;border:7px solid transparent;border-top-color:var(--negro);border-bottom:0}
#aviso-carrito.debajo::after{bottom:auto;top:-7px;border-top:0;border-bottom:7px solid var(--negro)}
#aviso-carrito.suelto{left:50%;top:auto;bottom:26px;
  transform:translateX(-50%) translateY(6px);text-align:center}
#aviso-carrito.suelto.visible{transform:translateX(-50%) translateY(0)}
#aviso-carrito.suelto::after{display:none}
#aviso-carrito b{font-weight:600}
/* el enlace no se parte: sin esto la flecha se caia sola a la linea de abajo */
#aviso-carrito a{color:var(--dorado-claro);text-decoration:none;border-bottom:1px solid var(--dorado-claro);margin-left:10px;white-space:nowrap;display:inline-block}


#pedido-real.con-carrito .col-precio,
#pedido-real.con-carrito .form-velas,
#pedido-real.con-carrito .bloque-velas{display:none}

.carrito-resumen{background:var(--crema);border:1px solid var(--crema2);border-radius:3px;
  padding:22px 24px;margin:0 0 30px}
.carrito-linea{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:9px 0;border-bottom:1px solid var(--crema2);font-size:var(--t4)}
.carrito-linea:last-of-type{border-bottom:none}
.carrito-linea b{font-weight:600}
.carrito-quita{background:transparent;border:none;cursor:pointer;font-family:var(--texto);
  font-size:var(--t6);letter-spacing:var(--sp-rotulo);text-transform:uppercase;color:var(--gris)}
.carrito-quita:hover{color:var(--rojo)}
.carrito-cambiar{margin-top:16px;background:transparent;border:1px solid var(--dorado);
  border-radius:3px;padding:11px 22px;cursor:pointer;font-family:var(--texto);
  font-size:var(--t5);letter-spacing:var(--sp-rotulo);text-transform:uppercase;
  font-weight:600;color:var(--negro)}
.carrito-cambiar:hover{border-color:var(--rojo);color:var(--rojo)}


.versiones .anade{background:transparent;border:1px solid var(--crema2);border-radius:3px;
  padding:5px 12px;cursor:pointer;font-family:var(--texto);font-size:var(--t6);
  letter-spacing:var(--sp-rotulo);text-transform:uppercase;font-weight:600;color:var(--negro);white-space:nowrap}
.versiones .anade:hover{border-color:var(--rojo);color:var(--rojo)}


.mas{display:none}
.mas.abierto{display:block}
.seguir-leyendo{margin-top:26px;background:transparent;border:none;padding:0;cursor:pointer;
  font-family:var(--texto);font-size:var(--t5);letter-spacing:var(--sp-rotulo);
  text-transform:uppercase;font-weight:600;color:var(--rojo);
  border-bottom:1px solid var(--dorado);padding-bottom:4px}
.seguir-leyendo:hover{border-color:var(--rojo)}

.firma{font-family:var(--titulos);font-size:var(--t3);font-style:italic;color:var(--negro);margin:30px 0 0}
.firma-cargo{font-size:var(--t6);letter-spacing:var(--sp-rotulo);text-transform:uppercase;
  font-weight:600;color:var(--rojo);margin:4px 0 0}


.contactos{display:flex;flex-direction:column;gap:10px;max-width:440px;margin:30px auto 0}
.contactos a{display:block;padding:13px 20px;border:1px solid var(--crema2);border-radius:3px;
  text-decoration:none;color:var(--negro);font-size:var(--t4);background:var(--blanco)}
.contactos a:hover{border-color:var(--dorado)}
.contactos b{font-weight:600;color:var(--rojo)}


.regalo-indica{font-size:var(--t4);color:var(--gris);font-weight:400;margin:20px 0 0}
.regalo-indica a{color:var(--negro);text-decoration:none;border-bottom:1px solid var(--dorado);padding-bottom:2px}
.regalo-indica a:hover{color:var(--rojo);border-color:var(--rojo)}

.cuidado-tira{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.cuidado-enlace{font-family:var(--texto);font-size:var(--t4);font-weight:500;color:var(--negro);
  text-decoration:none;border-bottom:1px solid var(--dorado);padding-bottom:3px}
.cuidado-enlace:hover{color:var(--rojo);border-color:var(--rojo)}



.boton,.btn,#pedido-real .btn{display:inline-block;padding:15px 42px;background:var(--rojo);color:var(--blanco);
  text-decoration:none;font-family:var(--texto);font-size:var(--t5);letter-spacing:var(--sp-rotulo);
  text-transform:uppercase;font-weight:600;border:none;cursor:pointer;border-radius:3px;
  line-height:1.75;
  transition:background .2s}
.boton{margin-top:28px}

.boton:hover,.btn:hover,#pedido-real .btn:hover{background:var(--rojo-oscuro)}


.boton:focus-visible,.btn:focus-visible,#pedido-real .btn:focus-visible{outline:2px solid var(--negro);outline-offset:3px}


.boton:disabled,.btn:disabled,.boton[disabled],.btn[disabled],#pedido-real .btn:disabled{
  background:var(--crema2);color:var(--gris);cursor:not-allowed}
.boton:disabled:hover,.btn:disabled:hover,.boton[disabled]:hover,.btn[disabled]:hover{
  background:var(--crema2)}
.boton-linea{display:inline-block;margin-top:28px;padding:15px 42px;background:transparent;color:var(--negro);
  border:1px solid var(--dorado);text-decoration:none;font-family:var(--texto);font-size:var(--t5);
  letter-spacing:var(--sp-rotulo);text-transform:uppercase;font-weight:600;border-radius:3px}
.boton-linea:hover{border-color:var(--rojo);color:var(--rojo)}


.pedido{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(28px,4vw,64px);align-items:start;margin-top:44px}
.pasos{display:flex;gap:28px;flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid var(--crema2);margin-bottom:34px}
.paso{font-family:var(--texto);font-size:var(--t6);letter-spacing:var(--sp-rotulo);text-transform:uppercase;
  font-weight:600;color:var(--gris)}
.paso.activo{color:var(--rojo)}
.paso span{color:var(--rojo);margin-right:7px}

.linea-vela{display:grid;grid-template-columns:72px 1fr auto;gap:18px;align-items:center;
  padding:18px 0;border-bottom:1px solid var(--crema2)}
.linea-vela img{width:72px;height:90px;object-fit:cover;border-radius:3px}
.linea-vela h4{font-family:var(--titulos);font-size:var(--t4);font-weight:500;margin:0 0 2px}
.linea-vela p{font-family:var(--texto);font-size:var(--t6);color:var(--gris);margin:0}
.cantidad{display:flex;align-items:center;gap:0;border:1px solid var(--crema2);border-radius:3px}
.cantidad button{width:32px;height:32px;border:none;background:transparent;cursor:pointer;
  font-family:var(--texto);font-size:var(--t4);color:var(--negro);line-height:1}
.cantidad button:hover{color:var(--rojo)}
.cantidad input{width:38px;height:32px;border:none;text-align:center;background:transparent;
  font-family:var(--sistema);font-size:var(--t6);font-weight:500;color:var(--negro)}

.campos{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;margin-top:34px}
.campo{display:flex;flex-direction:column;gap:6px}
.campo.ancho{grid-column:1 / -1}
.campo label{font-family:var(--texto);font-size:var(--t6);letter-spacing:var(--sp-rotulo);
  text-transform:uppercase;font-weight:600;color:var(--gris)}

.campo input{font-family:var(--sistema);font-size:var(--t6);font-weight:400;color:var(--negro);
  padding:13px 14px;border:1px solid var(--crema2);background:var(--blanco);border-radius:3px}
.campo input:focus{outline:none;border-color:var(--dorado)}


.resumen{position:sticky;top:24px;background:var(--crema);border:1px solid var(--crema2);
  border-radius:3px;padding:30px 28px}
.resumen h3{font-size:var(--t3);font-weight:500;margin:0 0 4px}
.resumen .sub{font-family:var(--texto);font-size:var(--t6);color:var(--gris);margin:0 0 22px}
.resumen-fila{display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--texto);font-size:var(--t4);font-weight:400;color:var(--gris);padding:9px 0}
.resumen-fila b{font-weight:500;color:var(--negro)}
.resumen-total{display:flex;justify-content:space-between;align-items:baseline;
  border-top:1px solid var(--dorado);margin-top:14px;padding-top:16px;
  font-family:var(--titulos);font-size:var(--t3);font-weight:500;color:var(--negro)}
.resumen .boton{width:100%;text-align:center;margin-top:22px}
.seguro{font-family:var(--texto);font-size:var(--t6);color:var(--gris);text-align:center;margin:14px 0 0;line-height:1.6}


footer{padding:64px var(--margen-lado);text-align:center;border-top:1px solid var(--crema2)}
footer .marca-pie{font-family:var(--titulos);font-size:var(--t3);letter-spacing:var(--sp-marca);font-weight:600;margin:0 0 10px}
footer p{font-family:var(--texto);font-size:var(--t6);color:var(--gris);margin:5px 0}

footer a{color:inherit;text-decoration:underline;text-underline-offset:3px}
footer a:hover{color:var(--rojo)}

@media(max-width:999.98px){
  .portada,.dos,.pedido,.campos{grid-template-columns:1fr}
  .resumen{position:static}
  nav{gap:16px}
}

@media(max-width:640px){
  .fila{grid-template-columns:1fr 1fr;gap:16px}
}


.es-regalo{background:var(--crema);border:1px solid var(--crema2);border-radius:3px;
  padding:16px 18px;margin:0 0 20px}
.es-regalo label{display:flex;align-items:flex-start;gap:12px;cursor:pointer;
  font-size:var(--t4);color:var(--gris);line-height:1.5}
.es-regalo input{margin-top:5px;width:17px;height:17px;flex:0 0 auto;accent-color:var(--rojo)}
.es-regalo b{color:var(--negro);font-weight:600}
.es-regalo small{font-size:var(--t6);color:var(--gris)}


.carrito-extra{display:flex;flex-direction:column;gap:6px;padding:4px 0 14px}
.carrito-extra label{font-size:var(--t6);letter-spacing:var(--sp-rotulo);
  text-transform:uppercase;font-weight:600;color:var(--rojo)}
.carrito-extra input{font-family:var(--sistema);font-size:var(--t6);padding:11px 13px;
  border:1px solid var(--crema2);border-radius:3px;background:var(--blanco);max-width:260px}
.carrito-extra input:focus{outline:none;border-color:var(--dorado)}
.carrito-extra small{font-size:var(--t6);color:var(--gris)}



.elegir{margin:24px 0 22px;padding:20px 22px;background:var(--blanco);
  border:1px solid var(--crema2);border-radius:3px}
.elegir label{display:block;font-size:var(--t5);letter-spacing:var(--sp-rotulo);
  text-transform:uppercase;font-weight:600;color:var(--rojo);margin-bottom:10px}
.elegir input{width:88px;height:64px;text-align:center;
  font-family:var(--titulos);font-size:var(--t2);font-weight:600;color:var(--negro);
  border:1px solid var(--crema2);border-radius:3px;background:var(--blanco);
  text-transform:uppercase}
.elegir input:focus{outline:none;border-color:var(--dorado);
  box-shadow:0 0 0 3px rgba(117,84,25,.12)}
.elegir small{display:block;margin-top:10px;font-size:var(--t6);color:var(--gris)}

.boton[disabled]{background:var(--crema2);color:var(--gris);cursor:not-allowed}
.boton[disabled]:hover{background:var(--crema2)}


.carrito-linea small{display:inline-block;margin-top:4px;font-size:var(--t6);color:var(--gris)}
.carrito-linea small b{color:var(--negro);font-weight:600}
a.carrito-cambiar{display:inline-block;text-decoration:none;text-align:center}


.elegir-idea{font-size:var(--t4);color:var(--negro);font-style:italic;
  margin:0 0 14px;line-height:1.5}

.elegir input{width:100%;max-width:280px;height:58px;text-align:left;padding:0 16px;
  font-size:var(--t3);letter-spacing:.08em}


.whatsapp{position:fixed;bottom:24px;right:24px;z-index:999;
  background:#25D366;color:#fff;width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.18);transition:transform .2s}
.whatsapp:hover{transform:scale(1.08)}

/* ═══════════════════════════════════════════════════════════════════════════
   MIENTRAS SE PREGUNTA POR LAS COOKIES, LA BURBUJA DE WHATSAPP SE APARTA.
   ═══════════════════════════════════════════════════════════════════════════
   Las dos cosas viven pegadas a la esquina de abajo a la derecha, y la burbuja
   se montaba encima del boton ACEPTAR tapandole media palabra. Le pasaba a
   TODA visitante nueva, porque el aviso solo sale la primera vez.

   Se aparta en vez de moverse a otro sitio porque el aviso mide distinto en
   cada pantalla —dos lineas en un portatil, cuatro en un movil— y cualquier
   altura que se le ponga a mano se queda mal en alguna. Aqui no hay que
   medir nada: mientras haya que contestar, no hay burbuja; en cuanto se
   contesta, vuelve sola.
   Se esconde con visibility y no con transparencia: una burbuja transparente
   seguía ahí para quien navega con el tabulador, y se podía "pisar" un botón
   invisible. Así desaparece del todo, también para el teclado.   17/8/2026. */
body:has(.cookie-banner.visible) .whatsapp{visibility:hidden}


.cookie-banner{display:none;position:fixed;bottom:0;left:0;width:100%;
  background:var(--negro);color:var(--blanco);padding:18px 40px;z-index:999;
  align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  font-size:var(--t6);line-height:1.6}
.cookie-banner.visible{display:flex}
.cookie-banner p{margin:0;max-width:760px;opacity:.9}
.cookie-banner a{color:var(--crema2)}
.cookie-botones{display:flex;gap:12px;flex-wrap:wrap}
.cookie-btn{background:transparent;color:var(--blanco);border:1px solid var(--crema2);
  padding:10px 28px;font-family:var(--texto);font-size:var(--t6);
  letter-spacing:.15em;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.cookie-btn.acepta{background:var(--rojo);border-color:var(--rojo)}



.banda-tira{padding:34px var(--margen-lado);
  border-top:1px solid var(--crema2)}
.cuidado-tira .rotulo{margin:0}



.rotulo.separado, .bajada.separado{margin-bottom:12px}


.bajada.enfasis{font-style:italic;color:var(--negro)}


.bajada.aire{margin-top:18px}

/* En ROJO por orden de Eva (3/9/2026): es lo que convierte la vela en
   regalo y se perdia en gris. El texto es suyo, solo cambia el color. */
.bajada.nota-caja{font-size:var(--t6);font-weight:600;margin-top:52px;color:var(--rojo)}
.bajada.aire-corto{margin-top:14px}
.bajada.aire-corto-arriba{margin-top:10px}
.bajada.antes-tabla{margin-bottom:24px}
.bajada.antes-regalo{margin-bottom:16px}

.tres.aire-lista{margin:18px 0 14px}
.filete-corto.antes-tabla{margin:44px 0 26px}

.detalle-pie.con-aire{margin-top:16px}
.detalle-precio.con-aire{margin-top:12px}


.foto-producto.en-crema{background:var(--crema)}


.banda.centrada{text-align:center}
.banda.centrada .bajada{margin:0 auto}

.filete-corto.centrado{margin:26px auto}




.cartel-cerrada,#pedido-real .cartel-cerrada{background:var(--rojo);color:#fff;
  padding:28px 32px;border-radius:3px;margin-bottom:32px;text-align:center;
  font-size:var(--t4);line-height:1.7}
.titulo-cerrada,#pedido-real .titulo-cerrada{font-size:var(--t3);letter-spacing:.05em}
.aire-10,#pedido-real .aire-10{margin-top:10px}
.oculto,#pedido-real .oculto{display:none}


.apagado-tienda{opacity:.4;pointer-events:none;cursor:not-allowed}


/* ═══════════════════════════════════════════════════════════════════════════
   PANTALLAS DE ESCRITORIO BAJAS · portátiles
   ═══════════════════════════════════════════════════════════════════════════
   17/8/2026. Toda la web miraba SOLO el ancho de la pantalla, nunca el alto.
   Por eso en un portátil de 1366x768 la portada salía enorme: el titular a 86
   px partido en tres líneas, la vela cortada por abajo y el texto fuera de la
   primera pantalla. La dueña: "yo veo todo gigante en un portátil".

   No es un parche para su ordenador: es una regla general para CUALQUIER
   pantalla de escritorio con menos de 850 px de alto útil, que son la mayoría
   de los portátiles que no son caros.

   El móvil NO entra aquí: la regla pide 1000 px de ancho como mínimo.

   Qué hace, y por qué cada cosa:
     · El titular baja de 86 a 62 px. Sigue siendo el más grande de la web y
       sigue mandando; simplemente deja de comerse la pantalla.
     · El aire de arriba y de abajo se mide en alto de pantalla, no en ancho.

     LA FOTO NO ENCOGE, Y ESTO SE HIZO MAL UNA VEZ.
     Primero le puse un tope del 58 % del alto de la pantalla. La foto se quedó
     en 445 px dentro de una columna de 608, así que se pegó a la derecha y
     dejó UN AGUJERO DE CREMA de 160 px entre el texto y la foto. Eva lo vio en
     la captura a la primera: "qué es esta mierda".

     La foto NO tenía que encoger tanto. Quitando el aire de sobra, la portada
     cabe con mucho menos recorte. El tope que queda es el 78 % del alto de lo
     que se ve, y OJO: no es un "por si acaso", trabaja a diario. En un
     portátil de 1366x768 el navegador y la barra de Windows dejan unos
     625-650 px útiles, así que la foto se queda en unos 490 px dentro de una
     columna de 616 y respira ~60 px de blanco por cada lado (medido el
     17/8/2026). Ese blanco es el precio de que la portada entera se vea sin
     bajar; sin el tope, la foto saldría cortada. Se limita por el ANCHO para
     que siga siendo cuadrada: si se limitara el alto, se deformaría. Y va
     centrada en su columna, para que el blanco se reparta igual a los dos
     lados y no se descuelgue.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width:1000px) and (max-height:850px){
  .portada{padding-top:clamp(20px,3.5vh,44px);padding-bottom:clamp(20px,3.5vh,44px);
    gap:clamp(24px,3vw,48px)}
  .frase-grande{font-size:clamp(2.4rem,4.4vw,3.9rem)}
  .portada .foto-cuadro{max-width:min(100%,78vh);margin-left:auto;margin-right:auto}
  .portada .entradilla{margin-top:18px}
  .banda-catalogo{padding-top:clamp(40px,6vh,74px);padding-bottom:clamp(40px,6vh,74px)}
}


/* ═══════════════════════════════════════════════════════════════════════════
   PERSONALIZADA: MENOS AIRE ABAJO, PORQUE LA FOTO YA TRAE EL SUYO. 17/8/2026.
   ═══════════════════════════════════════════════════════════════════════════
   Eva, varias veces: "sobra espacio debajo del apartado personalizada".
   Las veces anteriores lo medí y me salía bien: 96 px arriba y 96 abajo,
   exactamente igual que Ojo, Botánica y Origen. Por eso no lo arreglaba.

   Lo que no miré es LA FOTO. La del perrito tiene 136 px de blanco suyo por
   debajo del vaso —el 10,8 % de la imagen—, y la del Ojo no tiene ninguno.
   Así que esta sección enseñaba ese blanco DE MÁS donde sus vecinas enseñan
   solo el aire de la banda. Ese es el bulto que se ve, y estaba dentro de la
   foto, no en la hoja de estilos.

   Se le descuenta a la sección el blanco que pone la foto. Así el aire que
   SE VE es el mismo que en las demás. No es un capricho para esta sección:
   es descontar lo que la imagen ya trae puesto.

   CUÁNTO SE DESCUENTA: el 10,8 % de lo que mida la foto en pantalla. La foto
   llena su columna, así que su ancho —y su blanco— cambia con la pantalla:
   unos 46 px de blanco en un escritorio justo de 1000, unos 63 en un
   portátil, unos 71 en un monitor grande. Por eso no vale un número fijo:
   la cuenta de abajo saca el ancho de la columna con las mismas medidas que
   usa la parrilla (la mitad de la banda, menos el margen del lado, menos la
   mitad del hueco entre columnas) y le aplica el 10,8 %.

   Solo en escritorio: en móvil las columnas van una debajo de otra y el
   blanco de la foto hace de separación natural: no aplica.
   ═══════════════════════════════════════════════════════════════════════════ */
@media(min-width:1000px){
  #personaliza{padding-bottom:calc(var(--aire-normal) - (50% - var(--margen-lado) - clamp(14px,2.5vw,40px))*.108)}
}

/* El cartel discreto: mismo sitio y mismo tamaño que el rojo de "cerrada",
   pero sin gritar. Se usa para el aviso de entrega -que es informacion, no
   una mala noticia- y para cerrar por algo grave: un luto no se anuncia en
   rojo comercial. Lo pidio Eva el 17/8/2026. */
.cartel-cerrada.cartel-sobrio,
#pedido-real .cartel-cerrada.cartel-sobrio{background:var(--crema);color:var(--negro);
  border-top:1px solid var(--crema2);border-bottom:1px solid var(--dorado)}
.cartel-cerrada.cartel-sobrio .titulo-cerrada,
#pedido-real .cartel-cerrada.cartel-sobrio .titulo-cerrada{color:var(--negro)}
/* Ojo: la regla roja de arriba lleva #pedido-real, y un #id pesa mas que una
   clase. Sin repetir el #id aqui, en la pagina de pedido el cartel discreto
   salia rojo igual. Lo cazo la prueba de los tres estados. */

/* ── LA VENTANA DEL 10 % (9/9/2026) ───────────────────────────────────────
   Eva vio esta ventana en otra web de velas y dijo "yo quiero esto". La
   pinta descuento.js a los ocho segundos o al bajar media pagina, una sola
   vez por persona. Descuento: 10 % en las velas de la primera compra, a
   cambio del correo. Los textos son de Eva. */
.mg-desc-fondo{position:fixed;inset:0;background:rgba(26,22,20,.55);z-index:9000;display:flex;align-items:center;justify-content:center;padding:20px}
.mg-desc{position:relative;box-sizing:border-box;background:var(--blanco);color:var(--negro);max-width:340px;width:100%;padding:30px 24px 20px;border:1px solid var(--crema2);box-shadow:0 20px 60px rgba(0,0,0,.25);text-align:center;font-family:var(--texto)}
.mg-desc h2{font-family:var(--titulos);font-weight:500;font-size:var(--t3);line-height:1.2;margin:0 0 8px;color:var(--negro)}
.mg-desc h2 b{color:var(--rojo);font-weight:600}
.mg-desc p{font-size:var(--t5);line-height:1.5;margin:0 0 16px;color:var(--gris)}
.mg-desc input[type=email]{width:100%;box-sizing:border-box;border:1px solid var(--crema2);background:var(--blanco);padding:11px 12px;font-family:var(--texto);font-size:var(--t5);color:var(--negro);margin-bottom:8px}
.mg-desc input[type=email]:focus{outline:2px solid var(--rojo);outline-offset:1px}
.mg-desc-ok{width:100%;background:var(--rojo);color:var(--blanco);border:0;padding:11px;font-family:var(--texto);font-size:var(--t5);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.mg-desc-ok:hover{background:var(--rojo-oscuro)}
.mg-desc-ok:focus-visible,.mg-desc-cerrar:focus-visible{outline:2px solid var(--negro);outline-offset:3px}
.mg-desc-legal{font-size:var(--t6);color:var(--gris);margin:12px 0 0}
.mg-desc-legal a{color:var(--rojo)}
.mg-desc-error{color:var(--rojo);font-size:var(--t5);margin:0 0 6px;min-height:1.2em}
.mg-desc-cerrar{position:absolute;top:6px;right:8px;background:none;border:0;font-size:var(--t3);line-height:1;color:var(--gris);cursor:pointer;padding:8px 12px}
.mg-desc-trampa{position:absolute;left:-9999px;opacity:0;height:0;width:0}
@media (max-width:639.98px){
  .mg-desc-fondo{align-items:flex-end;padding:0}
  .mg-desc{max-width:none;padding:30px 20px 18px;border:0;border-top:3px solid var(--rojo)}
}