/* Micreación · tienda cofrade
   Morado nazareno, oro y damasco. */

:root {
  --morado: #5B1B6A;
  --morado-osc: #3A0F4A;
  --morado-med: #47145A;
  --lila: #7A3F8F;
  --lila-claro: #EFE7F2;
  --lila-velo: #F3EEF5;
  --oro: #C9A24A;
  --oro-claro: #E8CC80;
  --fondo: #F5F2EE;
  --blanco: #FFFFFF;
  --tinta: #2B2230;
  --suave: #5E5566;
  --borde: #E2D6E6;
  --borde-fuerte: #D5C6DB;
  --verde: #1F5A2A;
  --naranja: #8A3A0B;
  --rojo: #8E1F1A;
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ancho: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font-family: var(--sans); font-size: 16px; line-height: 1.55; }
img { max-width: 100%; display: block; }
a { color: var(--morado); }
a:hover { color: var(--morado-osc); }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.1; margin: 0; }
svg { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; }

.oculto, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip:focus { position: fixed; top: 8px; left: 8px; z-index: 50; background: var(--blanco); padding: 10px 14px; }

.damasco { background-color: var(--lila-claro); background-image: url(../img/damasco.svg); background-size: 120px 160px; }
.damasco-oro { background-color: var(--morado-med); background-image: url(../img/damasco-oro.webp); background-size: 168px 195px; }

/* ---------- Botones ---------- */
.botones { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 28px; border: 1px solid var(--morado);
  background: var(--morado); color: var(--blanco); font: inherit; font-weight: 500;
  text-decoration: none; cursor: pointer; text-align: center;
}
.boton:hover { background: var(--morado-osc); border-color: var(--morado-osc); color: var(--blanco); }
.boton--claro { background: var(--blanco); color: var(--morado); }
.boton--claro:hover { background: var(--lila-velo); color: var(--morado-osc); }
.boton--ancho { width: 100%; }
.boton[disabled] { background: var(--lila-velo); border-color: var(--borde-fuerte); color: var(--suave); cursor: not-allowed; }

/* ---------- Cabecera ----------
   Ordenador: franja fina arriba (dirección, buscar, cuenta y carrito) y, debajo, el menú partido
   en dos mitades con el logo en el centro, que baja por debajo de la barra.
   Al bajar por la página se queda más compacta (el logo cabe dentro de la barra).
   Tablets y móviles (hasta 1180 px): botón «Menú» que despliega las secciones. */
.cabecera { position: sticky; top: 0; z-index: 10; background: var(--morado); border-bottom: 2px solid var(--oro); }
.cabecera__barra { background: var(--morado-osc); border-bottom: 1px solid rgba(201, 162, 74, .3); }
.cabecera__barra-in { max-width: var(--ancho); margin: 0 auto; padding: 0 24px; min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cabecera__datos { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: 13.5px; color: #E2D3E8; letter-spacing: .02em; }
.cabecera__datos a { color: inherit; text-decoration: none; }
.cabecera__datos a:hover { color: var(--oro-claro); }
.cabecera__acciones { display: flex; align-items: center; gap: 2px; margin-right: -10px; }
.cabecera__acciones .cabecera__icono { min-height: 38px; font-size: 13.5px; }
.cabecera__acciones .cabecera__icono svg { width: 19px; height: 19px; }
.cabecera__in { max-width: var(--ancho); margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "mizq logo mder"; align-items: center; column-gap: 40px; min-height: 66px; }
.cabecera__izq, .cabecera__der { display: none; align-items: center; gap: 2px; }
.cabecera__izq { grid-area: izq; justify-self: start; }
.cabecera__der { grid-area: der; justify-self: end; }
.cabecera__logo { grid-area: logo; position: relative; width: 128px; height: 66px; display: block; }
.cabecera__logo img { position: absolute; left: 50%; top: 8px; width: 128px; height: 128px; transform: translateX(-50%); object-fit: contain; background: var(--blanco); border-radius: 50%; border: 3px solid var(--oro); box-shadow: 0 8px 22px rgba(26, 6, 34, .35); transition: width .2s ease, height .2s ease, top .2s ease; }
.cabecera__logo:focus-visible { outline: none; }
.cabecera__logo:focus-visible img { outline: 3px solid var(--oro-claro); outline-offset: 3px; }
.cabecera__icono, .cabecera__menu-btn { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; color: var(--blanco); text-decoration: none; background: none; border: 0; font: inherit; font-size: 14.5px; letter-spacing: .02em; cursor: pointer; }
.cabecera__icono:hover, .cabecera__menu-btn:hover { color: var(--oro-claro); }
.cabecera__icono svg, .cabecera__menu-btn svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.cabecera__menu-btn { display: none; }
.cabecera__menu-btn path { transition: transform .2s ease, opacity .2s ease; transform-origin: 12px 12px; }
.cabecera--abierta .cabecera__menu-btn .l1 { transform: translateY(5px) rotate(45deg); }
.cabecera--abierta .cabecera__menu-btn .l2 { opacity: 0; }
.cabecera--abierta .cabecera__menu-btn .l3 { transform: translateY(-5px) rotate(-45deg); }
.menu { display: contents; font-family: var(--serif); font-variant: small-caps; font-weight: 600; letter-spacing: .04em; }
.menu__mitad { display: flex; align-items: center; gap: 4px 34px; font-family: var(--serif); font-variant: small-caps; font-size: 21px; font-weight: 600; letter-spacing: .04em; }
.menu__mitad--izq { grid-area: mizq; justify-self: end; }
.menu__mitad--der { grid-area: mder; justify-self: start; }
.menu a { position: relative; color: var(--blanco); text-decoration: none; padding: 8px 0; white-space: nowrap; }
.menu a:hover { color: var(--oro-claro); }
.menu a[aria-current=page] { color: var(--oro-claro); }
.menu a[aria-current=page]::after { content: ''; position: absolute; left: 0; right: 0; bottom: 3px; height: 2px; background: var(--oro); }
/* Compacta al bajar o con el buscador abierto: el logo cabe dentro de la barra */
.cabecera--compacta .cabecera__in, .cabecera--buscando .cabecera__in { min-height: 58px; }
.cabecera--compacta .cabecera__logo, .cabecera--buscando .cabecera__logo { width: 64px; height: 58px; }
.cabecera--compacta .cabecera__logo img, .cabecera--buscando .cabecera__logo img { width: 52px; height: 52px; top: 3px; border-width: 2px; box-shadow: none; }

@media (max-width: 1360px) and (min-width: 1181px) { .menu__mitad { font-size: 19px; gap: 4px 24px; } .cabecera__in { column-gap: 28px; } }
@media (max-width: 1180px) {
  .cabecera__barra { display: none; }
  .cabecera__in { padding: 6px 16px; column-gap: 8px; grid-template-areas: "izq logo der"; min-height: 0; }
  .cabecera__izq, .cabecera__der { display: flex; }
  .cabecera__menu-btn { display: inline-flex; }
  .cabecera__logo, .cabecera--compacta .cabecera__logo, .cabecera--buscando .cabecera__logo { width: 92px; height: 64px; }
  .cabecera__logo img { width: 88px; height: 88px; top: 2px; }
  .cabecera--compacta .cabecera__logo img, .cabecera--buscando .cabecera__logo img { width: 58px; height: 58px; top: 3px; }
  /* Menú plegado: se abre por encima del contenido */
  .menu { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; margin-top: 2px; padding: 6px 0 14px; background: var(--morado-osc); border-top: 1px solid rgba(201, 162, 74, .45); border-bottom: 2px solid var(--oro); box-shadow: 0 18px 40px rgba(26, 6, 34, .35); max-height: calc(100vh - 110px); overflow-y: auto; }
  .cabecera--abierta .menu { display: flex; animation: menu-baja .18s ease-out; }
  .menu__mitad { display: contents; }
  .menu a { font-size: 22px; padding: 13px 24px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
  .menu__mitad--der a:last-child { border-bottom: 0; }
  .menu a[aria-current=page] { background: rgba(201, 162, 74, .12); }
  .menu a[aria-current=page]::after { left: 0; right: auto; top: 0; bottom: 0; width: 3px; height: auto; }
  .cabecera--abierta .cabecera__logo img { width: 58px; height: 58px; top: 3px; }
}
@media (max-width: 640px) {
  .cabecera__in { padding: 4px 8px; column-gap: 4px; }
  .cabecera__menu-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cabecera__icono, .cabecera__menu-btn { padding: 0 9px; }
  .cabecera__logo, .cabecera--compacta .cabecera__logo, .cabecera--buscando .cabecera__logo { width: 76px; height: 56px; }
  .cabecera__logo img { width: 74px; height: 74px; }
  .cabecera--compacta .cabecera__logo img, .cabecera--buscando .cabecera__logo img { width: 50px; height: 50px; }
}
@keyframes menu-baja { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cabecera__logo img, .cabecera__menu-btn path { transition: none; } .cabecera--abierta .menu { animation: none; } }

/* ---------- Bloques comunes ---------- */
.bloque { max-width: var(--ancho); margin: 0 auto; padding: 72px 24px 24px; }
.bloque--listado { padding-top: 24px; }
.bloque__cab { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 36px; }
.bloque__cab h1, .bloque__cab h2 { font-size: clamp(36px, 4.4vw, 56px); }
.bloque__cab p { margin: 6px 0 0; max-width: 640px; font-size: 18px; font-weight: 300; color: var(--suave); }
.bloque__cab--claro h2 { color: var(--blanco); }
.bloque__cab--claro p { color: #E9DDEE; }
.bloque__cab--claro .antetitulo { color: var(--oro-claro); }
.antetitulo { font-family: var(--serif); font-size: 24px; font-weight: 500; color: var(--lila); }
.centro { text-align: center; margin: 36px 0 0; }
.migas { max-width: var(--ancho); margin: 0 auto; padding: 22px 24px 0; font-size: 14px; color: var(--suave); }
.migas a { color: var(--suave); }

/* ---------- Portada ---------- */
.portada { border-bottom: 1px solid var(--borde); }
.portada__velo { background: rgba(255, 255, 255, .72); }
.portada__in { max-width: 980px; margin: 0 auto; padding: 80px 24px 88px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.portada__titulo { font-variant: small-caps; font-size: clamp(56px, 8vw, 96px); line-height: 1; letter-spacing: .02em; color: var(--morado); }
.portada__sub { margin: 0; font-size: 26px; }
.portada__txt { margin: 0; max-width: 760px; font-size: 19px; font-weight: 300; line-height: 1.65; }
.adorno { display: flex; align-items: center; gap: 12px; color: var(--oro); }
.adorno span { display: block; width: 60px; height: 1px; background: var(--oro); }
.adorno svg { width: 18px; height: 18px; stroke-width: 1.6; }

.ventajas { background: var(--blanco); border-bottom: 1px solid #ECE6EE; }
.ventajas__in { max-width: var(--ancho); margin: 0 auto; padding: 40px 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 28px; }
.ventaja { display: flex; gap: 16px; align-items: flex-start; }
.ventaja svg { width: 40px; height: 40px; flex: none; color: var(--morado); stroke-width: 1.2; }
.ventaja .oro, .tipo .oro { stroke: var(--oro); }
.ventaja h2 { font-variant: small-caps; font-size: 22px; font-weight: 600; color: var(--morado); }
.ventaja p { margin: 2px 0 0; font-size: 15px; font-weight: 300; color: var(--suave); }

/* ---------- Categorías ---------- */
.categorias { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 24px; }
.categoria { position: relative; aspect-ratio: 4 / 3; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; color: var(--blanco); text-decoration: none; }
.categoria img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; transition: transform .4s ease, opacity .4s ease; }
.categoria::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(46, 10, 58, .85), rgba(46, 10, 58, 0) 65%); }
.categoria:hover img { transform: scale(1.04); opacity: .7; }
.categoria__nombre, .categoria__ver { position: relative; z-index: 1; }
.categoria__nombre { font-family: var(--serif); font-variant: small-caps; font-size: 30px; font-weight: 600; line-height: 1.05; }
.categoria__ver { margin-top: 8px; font-size: 14px; font-weight: 500; color: var(--oro-claro); }
.categoria:hover { color: var(--blanco); }

/* ---------- Fichas de producto ---------- */
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 24px; }
.ficha { background: var(--blanco); border: 1px solid #ECE6EE; display: flex; flex-direction: column; }
.ficha__foto { position: relative; display: block; margin: 12px 12px 0; aspect-ratio: 1 / 1; background: var(--lila-velo); overflow: hidden; }
.ficha__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.ficha:hover .ficha__foto img { transform: scale(1.04); }
.ficha--agotada .ficha__foto img { opacity: .55; }
.etiqueta { position: absolute; left: 8px; bottom: 8px; background: var(--morado); color: var(--blanco); font-size: 12px; font-weight: 500; padding: 5px 10px; }
.etiqueta--agotado { background: var(--blanco); color: var(--rojo); border: 1px solid var(--borde); }
.ficha__txt { padding: 16px 16px 20px; text-align: center; display: flex; flex-direction: column; gap: 6px; }
.ficha h3 { font-size: 23px; font-weight: 600; }
.ficha h3 a { color: var(--tinta); text-decoration: none; }
.ficha h3 a:hover { color: var(--morado); }
.ficha__precio { color: var(--morado); font-weight: 500; }

/* ---------- Personaliza ---------- */
.personaliza { color: var(--blanco); }
.personaliza__in { max-width: var(--ancho); margin: 0 auto; padding: 84px 24px; }
.tipos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.tipo { background: var(--blanco); color: var(--tinta); padding: 26px; display: flex; flex-direction: column; gap: 8px; border-top: 3px solid var(--oro); text-decoration: none; }
.tipo svg { width: 40px; height: 40px; color: var(--morado); stroke-width: 1.3; }
.tipo strong { font-family: var(--serif); font-variant: small-caps; font-size: 28px; font-weight: 600; color: var(--morado); }
.tipo span { font-size: 15px; font-weight: 300; color: var(--suave); }
.tipo em { font-style: normal; font-weight: 500; color: var(--morado); }
.tipo:hover { background: var(--lila-velo); color: var(--tinta); }

.duda { max-width: 900px; margin: 0 auto; padding: 80px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.duda h2 { font-size: clamp(34px, 4vw, 48px); }
.duda p { margin: 0; max-width: 620px; font-size: 18px; font-weight: 300; color: var(--suave); }

/* ---------- Listado ---------- */
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: -12px 0 28px; }
.chips a { text-decoration: none; padding: 9px 16px; min-height: 44px; display: inline-flex; align-items: center; background: var(--blanco); border: 1px solid var(--borde-fuerte); color: var(--tinta); font-size: 15px; }
.chips a:hover { border-color: var(--morado); }
.chips a[aria-current] { background: var(--morado); border-color: var(--morado); color: var(--blanco); }
.listado__barra { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 20px; color: var(--suave); font-size: 15px; }
.listado__barra form { display: flex; align-items: center; gap: 8px; }
select, input[type=search], input[type=text], input[type=password], input[type=email] {
  font: inherit; font-size: 15px; padding: 10px 14px; min-height: 46px; border: 1px solid var(--borde-fuerte); background: var(--blanco); color: var(--tinta); border-radius: 0;
}
.paginas { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 40px; }
.paginas a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--borde-fuerte); background: var(--blanco); text-decoration: none; }
.paginas a[aria-current] { background: var(--morado); color: var(--blanco); border-color: var(--morado); }
.buscador { display: flex; gap: 10px; max-width: 640px; margin: -10px auto 32px; }
.buscador input { flex: 1; min-width: 0; }
.vacio { text-align: center; padding: 40px 0; display: flex; flex-direction: column; align-items: center; gap: 18px; color: var(--suave); }
.vacio p { max-width: 520px; margin: 0; }

/* ---------- Ficha de producto ---------- */
.producto { max-width: var(--ancho); margin: 0 auto; padding: 24px 24px 40px; display: flex; flex-wrap: wrap; gap: 48px; }
.producto__foto { flex: 1 1 480px; min-width: 0; border: 1px solid var(--borde); padding: 28px; display: flex; align-items: center; justify-content: center; }
.producto__foto img { width: 100%; height: auto; max-width: 560px; aspect-ratio: 1 / 1; object-fit: cover; background: var(--blanco); box-shadow: 0 14px 30px rgba(58, 15, 74, .18); }
.producto__info { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.producto__info h1 { font-size: clamp(38px, 4vw, 52px); }
.producto__precio { font-size: 26px; font-weight: 500; color: var(--morado); }
.producto__stock { font-size: 15px; color: var(--verde); display: flex; align-items: center; gap: 8px; min-height: 22px; }
.producto__stock:not(:empty)::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.producto__stock--pocas { color: var(--naranja); }
.producto__stock--no { color: var(--rojo); }
.opcion { border: 0; padding: 0; margin: 0; }
.opcion legend { font-family: var(--serif); font-variant: small-caps; font-size: 22px; font-weight: 600; color: var(--morado); margin-bottom: 10px; }
.opcion__valores { display: flex; flex-wrap: wrap; gap: 8px; }
.pastilla { position: relative; cursor: pointer; }
.pastilla input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pastilla span { display: inline-flex; align-items: center; min-height: 46px; padding: 10px 16px; border: 1px solid var(--borde-fuerte); background: var(--blanco); font-size: 15px; }
.pastilla input:checked + span { background: var(--morado); border-color: var(--morado); color: var(--blanco); font-weight: 500; }
.pastilla input:focus-visible + span { outline: 3px solid var(--oro); outline-offset: 2px; }
.producto__compra { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.producto__desc { font-size: 16px; font-weight: 300; line-height: 1.7; border-top: 1px solid var(--borde); padding-top: 18px; }
.producto__ventajas { list-style: none; margin: 0; padding: 18px; background: var(--blanco); border: 1px solid var(--borde); display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--suave); }
.producto__ventajas li::before { content: "✦"; color: var(--oro); margin-right: 10px; }

/* ---------- Avisos (404, muy pronto…) ---------- */
.aviso { padding: 80px 24px; }
.aviso__caja { max-width: 680px; margin: 0 auto; background: var(--blanco); border: 1px solid var(--borde); border-top: 3px solid var(--oro); padding: 48px 36px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.aviso__caja h1 { font-size: clamp(34px, 4vw, 46px); }
.aviso__caja p { margin: 0 0 8px; font-size: 17px; font-weight: 300; color: var(--suave); }

/* ---------- Pie ---------- */
.pie { color: #E9DDEE; border-top: 3px solid var(--oro); background-color: var(--morado-osc); }
.pie__in { max-width: var(--ancho); margin: 0 auto; padding: 56px 24px 28px; display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; }
.pie__in > * { display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.pie__marca { flex: 1 1 260px; }
.pie__marca img { width: 104px; height: 104px; object-fit: contain; }
.pie__marca p { margin: 0; font-weight: 300; line-height: 1.7; }
.pie strong { font-family: var(--serif); font-variant: small-caps; font-size: 22px; font-weight: 600; color: var(--oro-claro); }
.pie a { color: #E9DDEE; text-decoration: none; }
.pie a:hover { color: var(--oro-claro); }
.sellos { display: flex; flex-wrap: wrap; gap: 8px; }
.sellos span { background: var(--blanco); color: var(--tinta); font-size: 13px; font-weight: 600; padding: 6px 10px; }
.pie__legal { border-top: 1px solid #6A3A7E; text-align: center; padding: 18px 16px; font-size: 13px; color: #D2C2DA; }

/* ---------- Pantalla de acceso en pruebas ---------- */
.previa { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.previa__caja { width: 100%; max-width: 460px; background: var(--blanco); border-top: 3px solid var(--oro); padding: 40px 32px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.previa__caja h1 { font-size: 34px; }
.previa__caja p { margin: 0; color: var(--suave); font-weight: 300; }
.previa__caja form { width: 100%; display: flex; flex-direction: column; gap: 10px; text-align: left; margin-top: 10px; }
.previa__caja label { font-size: 14px; font-weight: 500; }
.previa__error { color: var(--rojo) !important; font-weight: 500 !important; }

/* ---------- Personalizadores ---------- */
.perso { max-width: var(--ancho); margin: 0 auto; padding: 24px 24px 72px; display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.perso__vista { flex: 1 1 520px; min-width: 0; position: sticky; top: 100px; display: flex; flex-direction: column; gap: 12px; }
.perso__lienzo { position: relative; min-height: 600px; border: 1px solid var(--borde); display: flex; align-items: center; justify-content: center; padding: 48px 20px; overflow: hidden; }
.perso__sello { position: absolute; top: 16px; left: 16px; background: var(--blanco); color: var(--morado); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; padding: 5px 10px; }
.perso__nota { margin: 0; font-size: 14px; font-weight: 300; color: var(--suave); }
.perso__panel { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.perso__panel h1 { font-size: clamp(40px, 4.4vw, 54px); }
.perso__precio { font-size: 26px; font-weight: 500; color: var(--morado); margin-top: -10px; }
.perso__precio small { font-size: 15px; font-weight: 400; color: var(--suave); }
.perso__intro { margin: 0; font-size: 16px; font-weight: 300; line-height: 1.65; }
.perso__plazo { margin: -10px 0 0; font-size: 14px; color: var(--verde); display: flex; align-items: center; gap: 8px; }
.perso__plazo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.perso__enviar { position: sticky; bottom: 0; background: var(--fondo); padding: 16px 0 6px; border-top: 1px solid var(--borde); display: flex; flex-direction: column; gap: 10px; }
.perso__total { font-size: 18px; }
.perso__total strong { color: var(--morado); font-size: 22px; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.opcion__ayuda { margin: 8px 0 0; font-size: 14px; color: var(--suave); }
.opcion--datos { display: flex; flex-direction: column; gap: 14px; }
.opcion--datos .opcion__ayuda { margin-top: -6px; }
.pastilla small { font-size: 12px; opacity: .8; margin-left: 4px; }
.opcion__valores--color { gap: 14px; }
.muestra { position: relative; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 76px; text-align: center; }
.muestra input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.muestra__bola { width: 48px; height: 48px; border-radius: 50%; border: 1px solid #B9AEBD; }
.muestra input:checked + .muestra__bola { box-shadow: 0 0 0 3px var(--fondo), 0 0 0 5px var(--morado); }
.muestra input:focus-visible + .muestra__bola { outline: 3px solid var(--oro); outline-offset: 4px; }
.muestra__txt { font-size: 13px; line-height: 1.25; }

.tallas { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.talla { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--blanco); border: 1px solid var(--borde-fuerte); padding: 4px 4px 4px 12px; font-weight: 600; }
.talla small { font-weight: 400; color: var(--suave); }
.talla input { width: 64px; font: inherit; font-size: 16px; text-align: center; padding: 8px; min-height: 44px; border: 1px solid var(--borde); }

.subida { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; border: 1px dashed #B79CC2; background: var(--blanco); padding: 16px; cursor: pointer; }
.subida svg { width: 28px; height: 28px; color: var(--morado); stroke-width: 1.6; }
.subida__txt { flex: 1 1 200px; display: flex; flex-direction: column; font-size: 15px; word-break: break-word; }
.subida__txt small { color: var(--suave); font-size: 13px; }
.subida:focus-within { outline: 3px solid var(--oro); outline-offset: 2px; }

.campo { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.opcion--datos .campo { margin-top: 0; }
.campo label { font-size: 15px; font-weight: 500; }
.campo input, .campo textarea { font: inherit; font-size: 16px; padding: 11px 14px; min-height: 46px; border: 1px solid var(--borde-fuerte); background: var(--blanco); color: var(--tinta); border-radius: 0; }
.campo textarea { resize: vertical; }
.campo__error { margin: 4px 0 0; color: var(--rojo); font-size: 14px; font-weight: 500; }
.campos2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.contador { display: inline-flex; align-items: center; border: 1px solid var(--borde-fuerte); background: var(--blanco); align-self: flex-start; }
.contador button { width: 48px; height: 50px; border: 0; background: transparent; color: var(--morado); font-size: 22px; cursor: pointer; }
.contador input { width: 64px; border: 0; text-align: center; font: inherit; font-size: 17px; font-weight: 600; min-height: 50px; }
.entrega { display: flex; flex-wrap: wrap; gap: 8px; }
.casilla { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; cursor: pointer; }
.casilla input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--morado); flex: none; }
.alerta { padding: 14px 16px; border: 1px solid; font-weight: 500; }
.alerta--error { background: #FBE2E0; border-color: #E9B8B4; color: var(--rojo); }
.alerta--ok { background: #E5F2E7; border-color: #B9DBC0; color: var(--verde); }

/* Vista previa: piezas comunes */
.pv { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; }
.pv-img { object-fit: contain; }
.pv-texto { font-family: var(--serif); font-weight: 700; color: var(--morado); text-align: center; line-height: 1.1; word-break: break-word; }
.pv-texto:empty { display: none; }
.pv-conmutador { display: flex; background: var(--blanco); border: 1px solid var(--borde-fuerte); }
.pv-conmutador button { font: inherit; font-size: 15px; min-height: 44px; padding: 10px 20px; border: 0; background: var(--blanco); color: var(--tinta); cursor: pointer; }
.pv-conmutador button[aria-pressed="true"] { background: var(--morado); color: var(--blanco); font-weight: 500; }
.pv-conmutador button:disabled { color: #B9AEBD; cursor: not-allowed; }
.pv-calor { font: inherit; font-size: 15px; font-weight: 500; min-height: 44px; padding: 10px 18px; background: var(--blanco); color: var(--morado); border: 1px solid var(--morado); cursor: pointer; }
[hidden] { display: none !important; }

/* Azulejo */
.pv-azulejo { gap: 0; }
.pv-azulejo__marco { box-shadow: 0 14px 30px rgba(58, 15, 74, .25); transition: border .2s; }
.pv-azulejo__marco[data-fx="madera"] { border: 22px solid #8A5A35; box-shadow: inset 0 0 0 2px #5E3B20, 0 14px 30px rgba(58, 15, 74, .25); }
.pv-azulejo__marco[data-fx="forja"] { border: 16px solid #2B2230; outline: 3px solid var(--oro); outline-offset: -10px; }
.pv-azulejo__marco[data-fx="otro"] { border: 18px solid var(--oro); }
.pv-azulejo__pieza { background: var(--blanco); box-shadow: inset 0 0 0 1px #E8E1EA; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; box-sizing: border-box; transition: width .25s, height .25s; overflow: hidden; }
.pv-azulejo__pieza .pv-img { width: 62%; height: auto; max-height: 62%; flex: 0 1 auto; min-height: 0; }
.pv-azulejo__pieza .pv-texto { font-size: 22px; }
.pv-azulejo__atril { display: flex; justify-content: center; gap: 120px; margin-top: -4px; }
.pv-azulejo__atril span { display: block; width: 7px; height: 48px; background: #8A5A35; transform: rotate(14deg); }
.pv-azulejo__atril span + span { transform: rotate(-14deg); }
.pv-azulejo__colgador { order: -1; width: 70px; height: 34px; border: 3px solid #6B6170; border-bottom: 0; border-radius: 40px 40px 0 0; margin-bottom: -2px; }
.pv-medida { margin-top: 18px; font-size: 13px; color: var(--morado); background: var(--blanco); padding: 4px 10px; }

/* Camiseta */
.pv-camiseta__prenda { position: relative; width: 420px; max-width: 100%; aspect-ratio: 420 / 460; }
.pv-camiseta__svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 14px 24px rgba(58, 15, 74, .25)); stroke-linecap: round; stroke-linejoin: round; }
.pv-camiseta__delante, .pv-camiseta__espalda { position: absolute; inset: 0; }
.pv-camiseta__escudo { position: absolute; top: 24%; left: 56%; width: 19%; height: auto; }
.pv-camiseta__texto { position: absolute; top: 56%; left: 24%; width: 52%; font-size: clamp(16px, 2.2vw, 24px); }
.pv-camiseta__espalda { display: flex; flex-direction: column; align-items: center; padding-top: 20%; gap: 2px; }
.pv-camiseta__nombre { font-weight: 600; font-size: clamp(18px, 2.4vw, 26px); letter-spacing: .1em; text-transform: uppercase; }
.pv-camiseta__numero { font-family: var(--serif); font-weight: 700; font-size: clamp(56px, 8vw, 90px); line-height: .9; }
.pv-camiseta__escudo-grande { width: 30%; height: auto; margin-top: 8px; }

/* Taza */
.pv-taza__fila { display: flex; align-items: center; flex-direction: row-reverse; }
.pv-taza__fila--b { flex-direction: row; }
.pv-taza__cuerpo { width: 300px; max-width: 64vw; aspect-ratio: 300 / 330; background: var(--blanco); border-radius: 8px 8px 30px 30px; border-top: 16px solid #FFFFFF; box-shadow: inset 0 0 0 1px #E1D9E4, 0 16px 28px rgba(58, 15, 74, .25); display: flex; align-items: center; justify-content: center; padding: 18px; box-sizing: border-box; }
.pv-taza__cuerpo .pv-img { width: 62%; height: auto; }
.pv-taza__texto { font-size: 32px; }
.pv-taza__frio { color: #D9CDE0; text-align: center; font-size: 15px; padding: 0 20px; }
.pv-taza__asa { width: 70px; height: 150px; border: 18px solid #FFFFFF; border-left: 0; border-radius: 0 80px 80px 0; box-shadow: 0 0 0 1px #E1D9E4; margin-left: -2px; box-sizing: border-box; }
.pv-taza__fila:not(.pv-taza__fila--b) .pv-taza__asa { border-left: 18px solid; border-right: 0; border-radius: 80px 0 0 80px; margin: 0 -2px 0 0; }

/* Visítanos: dirección y mapa */
.contacto { background: var(--blanco); border-top: 1px solid var(--borde); }
.contacto__in { max-width: var(--ancho); margin: 0 auto; padding: 80px 24px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.contacto__datos h2 { font-size: clamp(34px, 4vw, 46px); color: var(--morado-osc); margin: 4px 0 0; }
.contacto__intro { margin: 12px 0 0; font-size: 17px; font-weight: 300; color: var(--suave); max-width: 460px; }
.contacto__lista { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 18px; }
.contacto__lista li { display: flex; gap: 16px; align-items: flex-start; }
.contacto__lista svg { flex: none; width: 44px; height: 44px; padding: 10px; box-sizing: border-box; border: 1px solid var(--borde-fuerte); fill: none; stroke: var(--morado); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.contacto__lista svg .oro { stroke: var(--oro); }
.contacto__lista span { display: flex; flex-direction: column; font-size: 17px; line-height: 1.4; }
.contacto__lista small { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--suave); margin-bottom: 2px; }
.contacto__lista a { color: var(--tinta); text-decoration: none; border-bottom: 1px solid var(--oro); }
.contacto__lista a:hover { color: var(--morado); }
.contacto__botones { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 0; }
@media (max-width: 860px) {
  .contacto__in { grid-template-columns: 1fr; gap: 36px; padding: 60px 16px; }
}

/* Cojín */
.pv-cojin { gap: 16px; }
.pv-cojin__cojin { position: relative; width: 320px; max-width: 76vw; aspect-ratio: 1; border-radius: 26px 26px 26px 26px / 26px 26px 26px 26px; background: #FFFFFF;
  box-shadow: inset 0 0 0 3px #EEE7F0, inset 0 0 46px rgba(58, 15, 74, .10), inset 18px 18px 40px -20px rgba(255, 255, 255, .9), 0 18px 34px rgba(58, 15, 74, .24);
  transition: width .25s; }
.pv-cojin__cojin::before { content: ''; position: absolute; inset: 9px; border-radius: 20px; border: 1px dashed rgba(91, 27, 106, .18); pointer-events: none; }
.pv-cojin__cara { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 12%; box-sizing: border-box; }
.pv-cojin__cara[hidden] { display: none; }
.pv-cojin__cara .pv-img { width: 72%; height: auto; max-height: 66%; min-height: 0; flex: 0 1 auto; }
.pv-cojin__texto { font-size: clamp(18px, 2.4vw, 26px); }
.pv-cojin__cara--texto .pv-cojin__texto { font-size: clamp(26px, 3.4vw, 38px); }
.pv-cojin__lisa { font-size: 14px; color: var(--suave); border: 1px dashed var(--borde-fuerte); padding: 6px 12px; }
.subida-b { margin-top: 12px; }
.subida-b[hidden] { display: none; }

/* ---------- Carrito y compra ---------- */
.iconos__carrito { position: relative; }
.iconos__num { position: absolute; top: 3px; right: 0; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--oro); color: var(--morado-osc); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.producto__form { display: flex; flex-wrap: wrap; gap: 10px; }
.producto__anadir { flex: 1 1 200px; }
.alerta--aviso { background: #FCEBD9; border-color: #EBCBA6; color: var(--naranja); font-weight: 400; }
.carrito .alerta { margin-bottom: 16px; }
.carrito__cuerpo { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.carrito__lineas { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.linea { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto auto 44px; gap: 16px; align-items: center; background: var(--blanco); border: 1px solid var(--borde); padding: 14px; }
.linea--problema { border-color: #E9B8B4; }
.linea__foto img { width: 96px; height: 96px; object-fit: cover; background: var(--lila-velo); }
.linea__info h2 { font-size: 22px; font-weight: 600; }
.linea__info h2 a { color: var(--tinta); text-decoration: none; }
.linea__opciones { margin: 4px 0 0; font-size: 14px; color: var(--suave); }
.linea__unidad { margin: 6px 0 0; font-size: 14px; }
.linea__cant input { width: 72px; font: inherit; font-size: 16px; text-align: center; padding: 8px; min-height: 44px; border: 1px solid var(--borde-fuerte); }
.linea__total { font-weight: 600; color: var(--morado); min-width: 80px; text-align: right; }
.linea__quitar { width: 44px; height: 44px; border: 1px solid var(--borde); background: var(--blanco); color: var(--rojo); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.linea__quitar svg { width: 18px; height: 18px; stroke-width: 2; }
.resumen-caja { flex: 1 1 300px; background: var(--blanco); border: 1px solid var(--borde); border-top: 3px solid var(--oro); padding: 24px; display: flex; flex-direction: column; gap: 12px; position: sticky; top: 100px; }
.resumen-caja h2 { font-size: 28px; font-weight: 600; }
.resumen-caja dl { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.resumen-caja dl div { display: flex; justify-content: space-between; gap: 12px; }
.resumen-caja dd { margin: 0; font-weight: 500; }
.resumen-caja__total { border-top: 1px solid var(--borde); padding-top: 10px; font-size: 20px; }
.resumen-caja__total dd { color: var(--morado); font-weight: 700; }
.resumen-caja__regalo { margin: 0; background: var(--lila-velo); padding: 10px 12px; font-size: 14px; }
.suave-txt { margin: 0; font-size: 13px; color: var(--suave); font-weight: 400; }
.centro-txt { text-align: center; }
.enlace-suave { text-align: center; font-size: 14px; color: var(--suave); }
.sellos--claro { justify-content: center; }
.sellos--claro span { background: var(--lila-velo); color: var(--morado); font-size: 12px; font-weight: 600; padding: 5px 10px; }
.mini-lineas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--borde); padding-bottom: 12px; font-size: 14px; }
.mini-lineas li { display: flex; justify-content: space-between; gap: 12px; }
.mini-lineas small { display: block; color: var(--suave); font-size: 12px; }

.checkout { max-width: var(--ancho); margin: 0 auto; padding: 24px 24px 72px; display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.checkout__datos { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.checkout__datos h1 { font-size: clamp(38px, 4vw, 50px); }
.checkout__resumen { flex: 1 1 320px; }
.campos3 { display: grid; grid-template-columns: minmax(110px, 0.7fr) 1fr 1fr; gap: 14px; }
.direccion { display: flex; flex-direction: column; gap: 14px; }
.entrega--grande, .pagos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.tarjeta-opcion { position: relative; display: flex; gap: 12px; align-items: flex-start; background: var(--blanco); border: 1px solid var(--borde-fuerte); padding: 14px 16px; cursor: pointer; }
.tarjeta-opcion input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--morado); flex: none; }
.tarjeta-opcion:has(input:checked) { border-color: var(--morado); box-shadow: inset 0 0 0 1px var(--morado); background: #FBF9FC; }
.tarjeta-opcion strong { display: block; font-weight: 600; }
.tarjeta-opcion small { display: block; color: var(--suave); font-size: 13px; margin-top: 2px; }
.tarjeta-opcion__icono svg { width: 26px; height: 26px; color: var(--morado); stroke-width: 1.6; }
.reintentar { display: flex; flex-direction: column; gap: 12px; }
.reintentar p { margin: 0; }

@media (max-width: 600px) {
  .linea { grid-template-columns: 64px minmax(0, 1fr) 44px; grid-template-areas: "foto info quitar" "foto cant total"; gap: 8px 12px; }
  .linea__foto { grid-area: foto; } .linea__foto img { width: 64px; height: 64px; }
  .linea__info { grid-area: info; } .linea__cant { grid-area: cant; } .linea__total { grid-area: total; } .linea__quitar { grid-area: quitar; }
  .campos3 { grid-template-columns: 1fr; }
  .checkout { padding: 16px 14px 48px; gap: 24px; }
  .resumen-caja { position: static; }
}

/* Solicitud enviada */
.gracias { max-width: 760px; margin: 0 auto; padding: 56px 24px 80px; }
.gracias__caja { background: var(--blanco); border: 1px solid var(--borde); border-top: 3px solid var(--oro); padding: 40px 36px; display: flex; flex-direction: column; gap: 16px; }
.gracias__caja h1 { font-size: clamp(36px, 4vw, 48px); }
.gracias__codigo { display: inline-block; font-weight: 600; letter-spacing: .06em; background: var(--lila-velo); color: var(--morado); padding: 6px 12px; }
.resumen { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--borde); }
.resumen li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid #ECE6EE; font-size: 15px; }
.resumen li span:first-child { color: var(--suave); }
.resumen li span:last-child { text-align: right; font-weight: 500; }

@media (max-width: 900px) {
  .perso__vista { position: static; }
  .perso__lienzo { min-height: 440px; padding: 40px 12px; }
}

@media (max-width: 600px) {
  .perso { padding: 16px 14px 48px; gap: 24px; }
  .pv-taza__cuerpo { width: 220px; }
  .pv-taza__asa { width: 54px; height: 116px; border-width: 14px; }
  .bloque { padding: 48px 14px 16px; }
  .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .ficha__foto { margin: 8px 8px 0; }
  .ficha__txt { padding: 12px 10px 14px; }
  .ficha h3 { font-size: 19px; }
  .categorias { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .categoria { aspect-ratio: 1 / 1; padding: 14px; }
  .categoria__nombre { font-size: 22px; }
  .portada__in { padding: 56px 16px 64px; }
  .producto { padding: 16px 14px 32px; gap: 28px; }
  .producto__foto { padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}
.mini-lineas li > span:last-child, .linea__total, .resumen li span:last-child { white-space: nowrap; }
.prueba { border: 1px solid var(--borde); padding: 24px; display: flex; justify-content: center; }
.prueba img { max-width: 100%; max-height: 560px; background: var(--blanco); box-shadow: 0 12px 26px rgba(58, 15, 74, .2); }
.prueba__cambios { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--borde); padding-top: 16px; }

/* =====================================================================
   Zona de cliente
   ===================================================================== */
.boton--peligro { background: var(--rojo); border-color: var(--rojo); }
.boton--peligro:hover { background: #6B1612; border-color: #6B1612; }
.campo select { font: inherit; font-size: 16px; padding: 11px 14px; min-height: 46px; border: 1px solid var(--borde-fuerte); background: var(--blanco); color: var(--tinta); border-radius: 0; }
.campo input:disabled { background: var(--lila-velo); color: var(--suave); }

/* Entrar / registrarse */
.acceso { padding: 56px 24px 80px; }
.acceso__in { max-width: 1060px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); background: var(--blanco); border: 1px solid var(--borde); border-top: 3px solid var(--oro); box-shadow: 0 18px 40px rgba(58, 15, 74, .12); }
.acceso__caja { padding: 0 0 36px; }
.acceso__tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--borde); }
.acceso__tabs a { padding: 16px 12px; text-align: center; text-decoration: none; font-weight: 500; color: var(--suave); background: var(--lila-velo); }
.acceso__tabs a[aria-current] { background: var(--blanco); color: var(--morado); box-shadow: inset 0 -3px 0 var(--morado); }
.acceso__form { padding: 30px 40px 0; display: flex; flex-direction: column; gap: 14px; }
.acceso__form h1 { font-size: clamp(32px, 3.6vw, 42px); color: var(--morado-osc); }
.acceso__intro { margin: 0; color: var(--suave); font-weight: 300; }
.acceso__form .campo { margin-top: 0; }
.acceso__cambio { margin: 4px 0 0; text-align: center; }
.campo__fila { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.campo__fila a { font-size: 14px; }
.clave { display: flex; }
.clave input { flex: 1; min-width: 0; }
.clave button { font: inherit; font-size: 14px; border: 1px solid var(--borde-fuerte); border-left: 0; background: var(--lila-velo); color: var(--morado); padding: 0 14px; cursor: pointer; }
.acceso__lado { color: var(--blanco); padding: 44px 38px; display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.acceso__lado .antetitulo { color: var(--oro-claro); }
.acceso__lado h2 { font-size: 34px; }
.acceso__lado ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.acceso__lado li { padding-left: 30px; position: relative; font-weight: 300; line-height: 1.45; }
.acceso__lado li::before { content: '✦'; position: absolute; left: 0; color: var(--oro); }
.acceso__lado strong { font-weight: 500; color: var(--oro-claro); }
.aviso__caja--form { text-align: left; align-items: stretch; }
.aviso__caja--form h1, .aviso__caja--form .antetitulo { text-align: center; }
.form-simple { display: flex; flex-direction: column; gap: 14px; }
.form-simple .campo { margin-top: 0; }

/* Mi cuenta */
.cuenta { max-width: var(--ancho); margin: 0 auto; padding: 40px 24px 80px; }
.cuenta__cab { margin-bottom: 22px; }
.cuenta__cab h1 { font-size: clamp(38px, 4.4vw, 54px); color: var(--morado-osc); }
.cuenta > .alerta { margin-bottom: 16px; }
.cuenta__cuerpo { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; align-items: start; }
.cuenta__menu { display: flex; flex-direction: column; padding: 10px 0; position: sticky; top: 16px; border-top: 3px solid var(--oro); }
.cuenta__menu a, .cuenta__menu button { display: block; width: 100%; text-align: left; padding: 12px 22px; color: rgba(255, 255, 255, .86); text-decoration: none; font: inherit; background: none; border: 0; cursor: pointer; border-left: 3px solid transparent; }
.cuenta__menu a:hover, .cuenta__menu button:hover { color: var(--blanco); background: rgba(255, 255, 255, .07); }
.cuenta__menu a[aria-current] { color: var(--blanco); border-left-color: var(--oro); background: rgba(255, 255, 255, .1); font-weight: 500; }
.cuenta__menu form { margin-top: 8px; border-top: 1px solid rgba(255, 255, 255, .16); padding-top: 8px; }
.cuenta__menu button { color: var(--oro-claro); }
.cuenta__contenido { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.cuenta__intro { margin: 0; color: var(--suave); }
.tarjeta-c { background: var(--blanco); border: 1px solid var(--borde); padding: 24px 26px; display: flex; flex-direction: column; gap: 12px; }
.tarjeta-c h2 { font-size: 28px; color: var(--morado-osc); }
.tarjeta-c h3 { font-size: 22px; margin-top: 8px; }
.tarjeta-c p { margin: 0; }
.tarjeta-c.vacio { padding: 40px 24px; }
.form-c { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.form-c .campo { margin-top: 0; }
.form-c > .boton { align-self: flex-start; }
.chip-c { display: inline-block; font-size: 13px; font-weight: 500; padding: 4px 12px; border-radius: 999px; white-space: nowrap; background: var(--lila-velo); color: var(--suave); }
.chip-c--morado { background: var(--lila-claro); color: var(--morado); }
.chip-c--azul { background: #E3ECF8; color: #1E3F78; }
.chip-c--verde { background: #E5F2E7; color: var(--verde); }
.chip-c--rojo { background: #FBE2E0; color: var(--rojo); }
.chip-c--gris { background: #EEEAEF; color: var(--suave); }

.pedido-c__cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.pedido-c__num { font-family: var(--serif); font-size: 24px; color: var(--morado-osc); }
.pedido-c__items { color: var(--suave); }
.pedido-c__nota { background: var(--lila-velo); padding: 10px 14px; border-left: 3px solid var(--oro); }
.pedido-c__acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.pedido-c__acciones .boton { min-height: 42px; padding: 8px 18px; font-size: 15px; }
.progreso { display: grid; grid-template-columns: repeat(4, 1fr); margin: 6px 0 4px; }
.progreso__paso { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; color: var(--suave); text-align: center; }
.progreso__paso span { width: 16px; height: 16px; border-radius: 50%; background: var(--blanco); border: 2px solid var(--borde-fuerte); position: relative; z-index: 1; }
.progreso__paso::before { content: ''; position: absolute; top: 7px; right: 50%; width: 100%; height: 2px; background: var(--borde-fuerte); }
.progreso__paso:first-child::before { display: none; }
.progreso__paso--hecho { color: var(--morado); }
.progreso__paso--hecho span { background: var(--morado); border-color: var(--morado); }
.progreso__paso--hecho::before { background: var(--morado); }
.progreso__paso--ahora { font-weight: 600; }
.progreso__paso--ahora span { box-shadow: 0 0 0 4px var(--oro-claro); }

.rejilla-c { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.direccion-c--principal { border-color: var(--lila); box-shadow: inset 0 3px 0 var(--oro); }
.direccion-c__cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.direccion-c p { color: var(--suave); line-height: 1.5; }
.direccion-c__acciones { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: auto; font-size: 14px; }
.direccion-c__acciones button { font: inherit; background: none; border: 0; padding: 0; color: var(--morado); text-decoration: underline; cursor: pointer; }
.diseno-c { gap: 8px; }
.diseno-c__img { aspect-ratio: 1 / 1; background: var(--lila-velo) url(../img/damasco.svg); background-size: 90px 120px; display: flex; align-items: center; justify-content: center; padding: 16px; margin-bottom: 4px; }
.diseno-c__img img { max-height: 100%; object-fit: contain; background: var(--blanco); box-shadow: 0 8px 18px rgba(58, 15, 74, .18); }
.diseno-c__img span { font-family: var(--serif); font-size: 36px; color: var(--morado); }
.diseno-c strong { overflow-wrap: anywhere; }
.diseno-c__usar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.diseno-c__usar::before { content: 'Usar en:'; width: 100%; font-size: 13px; color: var(--suave); }
.diseno-c__usar a { font-size: 14px; padding: 4px 12px; border: 1px solid var(--borde-fuerte); text-decoration: none; }
.diseno-c__usar a:hover { border-color: var(--morado); background: var(--lila-velo); }
.pref { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--borde); cursor: pointer; }
.pref input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--morado); flex: none; }
.pref span { display: flex; flex-direction: column; gap: 2px; }
.pref small { color: var(--suave); font-size: 14px; }
details.borrar summary { cursor: pointer; color: var(--rojo); font-weight: 500; }
details.borrar[open] { border-color: #E9B8B4; }

/* Integraciones: checkout, gracias, producto, personalizador */
.checkout__cuenta { margin: 0 0 4px; padding: 12px 16px; background: var(--lila-velo); border-left: 3px solid var(--oro); }
.gracias__cuenta { color: var(--blanco); padding: 22px 24px; display: flex; gap: 18px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.gracias__cuenta strong { font-family: var(--serif); font-size: 26px; font-weight: 500; color: var(--oro-claro); }
.gracias__cuenta p { margin: 6px 0 0; font-weight: 300; max-width: 460px; }
.gracias__cuenta .boton { background: var(--oro); border-color: var(--oro); color: var(--morado-osc); }
.gracias__cuenta .boton:hover { background: var(--oro-claro); border-color: var(--oro-claro); }
.producto__titulo { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.corazon { flex: none; width: 48px; height: 48px; border: 1px solid var(--borde-fuerte); background: var(--blanco); color: var(--morado); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 50%; }
.corazon svg { width: 24px; height: 24px; stroke-width: 1.6; }
.corazon:hover { border-color: var(--morado); background: var(--lila-velo); }
.corazon--on svg { fill: var(--morado); }
.diseno-usado { display: flex; gap: 14px; align-items: center; padding: 12px; margin-bottom: 12px; background: var(--lila-velo); border: 1px solid var(--borde); border-left: 3px solid var(--oro); }
.diseno-usado img { width: 64px; height: 64px; object-fit: contain; background: var(--blanco); }
.diseno-usado span { display: flex; flex-direction: column; }
.diseno-usado small { color: var(--suave); font-size: 14px; }

@media (max-width: 900px) {
  .acceso__in { grid-template-columns: 1fr; }
  .acceso__lado { padding: 32px 26px; }
  .cuenta__cuerpo { grid-template-columns: 1fr; }
  .cuenta__menu { position: static; flex-direction: row; overflow-x: auto; padding: 0; border-top-width: 2px; scrollbar-width: none; }
  .cuenta__menu a, .cuenta__menu button { white-space: nowrap; width: auto; padding: 14px 16px; border-left: 0; border-bottom: 3px solid transparent; }
  .cuenta__menu a[aria-current] { border-bottom-color: var(--oro); }
  .cuenta__menu form { margin: 0; border: 0; padding: 0; }
}
@media (max-width: 600px) {
  .acceso { padding: 24px 12px 56px; }
  .acceso__form { padding: 24px 20px 0; }
  .cuenta { padding: 24px 14px 56px; }
  .tarjeta-c { padding: 20px 18px; }
  .progreso__paso { font-size: 11px; }
}

/* =====================================================================
   Páginas legales
   ===================================================================== */
.legal { max-width: 860px; margin: 0 auto; padding: 24px 24px 80px; }
.legal__cab { text-align: center; margin: 12px 0 28px; }
.legal__cab h1 { font-size: clamp(38px, 5vw, 56px); color: var(--morado-osc); margin-top: 6px; }
.legal__texto { background: var(--blanco); border: 1px solid var(--borde); border-top: 3px solid var(--oro); padding: 34px 40px; font-size: 16.5px; line-height: 1.7; }
.legal__texto h2 { font-size: 28px; color: var(--morado-osc); margin: 30px 0 10px; }
.legal__texto h2:first-child { margin-top: 0; }
.legal__texto h3 { font-size: 22px; margin: 22px 0 8px; }
.legal__texto p, .legal__texto ul, .legal__texto ol { margin: 0 0 14px; }
.legal__texto li { margin-bottom: 6px; }
.legal__texto blockquote { margin: 16px 0; padding: 16px 22px; background: var(--lila-velo); border-left: 3px solid var(--oro); }
.legal__texto blockquote p, .legal__texto blockquote ul { margin-bottom: 6px; }
.tabla-legal { overflow-x: auto; margin: 6px 0 18px; }
.tabla-legal table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.tabla-legal th, .tabla-legal td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--borde); }
.tabla-legal th { background: var(--lila-velo); color: var(--morado-osc); font-weight: 600; }
.legal__otras { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 26px; }
.legal__otras a { padding: 8px 14px; border: 1px solid var(--borde-fuerte); text-decoration: none; background: var(--blanco); font-size: 15px; }
@media (max-width: 600px) { .legal { padding: 16px 12px 56px; } .legal__texto { padding: 22px 18px; } }

/* =====================================================================
   Slider de portada
   ===================================================================== */
.slider { position: relative; border-bottom: 1px solid var(--borde); background: var(--morado-osc); }
.slide { position: relative; min-height: clamp(440px, 62vh, 620px); display: flex; align-items: center; overflow: hidden; }
.slide[hidden] { display: none; }
.slide.damasco { background-color: var(--lila-claro); }
.slide.damasco::before { content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, .72); }
.slide__img, .slide__img img { position: absolute; inset: 0; width: 100%; height: 100%; }
.slide__img img { object-fit: cover; animation: slide-entra .9s ease both; }
.slide__velo { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(42, 9, 54, var(--velo)), rgba(42, 9, 54, calc(var(--velo) * .55))); }
.slide--derecha .slide__velo { background: linear-gradient(270deg, rgba(42, 9, 54, var(--velo)), rgba(42, 9, 54, calc(var(--velo) * .55))); }
.slide--centro .slide__velo { background: rgba(42, 9, 54, var(--velo)); }
.slide__in { position: relative; width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 72px 72px 96px; display: flex; flex-direction: column; gap: 16px; }
.slide--centro .slide__in { align-items: center; text-align: center; }
.slide--izquierda .slide__in { align-items: flex-start; text-align: left; }
.slide--derecha .slide__in { align-items: flex-end; text-align: right; }
.slide--izquierda .botones { justify-content: flex-start; }
.slide--derecha .botones { justify-content: flex-end; }
.slide__ante { margin: 0; font-family: var(--serif); font-size: 26px; color: var(--lila); }
.slide__titulo { font-variant: small-caps; font-size: clamp(48px, 7.5vw, 92px); line-height: 1; letter-spacing: .02em; color: var(--morado); max-width: 900px; }
.slide__txt { margin: 0; max-width: 720px; font-size: 19px; font-weight: 300; line-height: 1.65; }
.slide__in--foto { color: var(--blanco); }
.slide__in--foto .slide__titulo { color: var(--blanco); text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
.slide__in--foto .slide__ante { color: var(--oro-claro); }
.slide__in--foto .adorno span { background: var(--oro); }
.slide__in--foto .adorno svg { color: var(--oro-claro); }
.slide__in--foto .boton--claro { background: transparent; color: var(--blanco); border-color: rgba(255, 255, 255, .8); }
.slide__in--foto .boton--claro:hover { background: rgba(255, 255, 255, .14); color: var(--blanco); }
.slider__flecha { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .6); background: rgba(58, 15, 74, .55); color: var(--blanco); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; }
.slider__flecha:hover { background: var(--morado); }
.slider__flecha svg { width: 22px; height: 22px; stroke-width: 1.8; }
.slider__flecha--ant { left: 16px; }
.slider__flecha--sig { right: 16px; }
.slider__puntos { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; justify-content: center; align-items: center; gap: 10px; z-index: 2; }
.slider__puntos button[data-punto] { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--oro); background: rgba(255, 255, 255, .7); padding: 0; cursor: pointer; }
.slider__puntos button[aria-current] { background: var(--oro); }
.slider__pausa { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .6); background: rgba(58, 15, 74, .55); color: var(--blanco); display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.slider__pausa svg { width: 14px; height: 14px; stroke-width: 2.2; }
@keyframes slide-entra { from { opacity: .3; transform: scale(1.03); } to { opacity: 1; transform: none; } }
@media (max-width: 700px) {
  .slide { min-height: 480px; }
  .slide__in { padding: 48px 20px 76px; align-items: center !important; text-align: center !important; }
  .slide .botones { justify-content: center !important; }
  .slide__velo { background: rgba(42, 9, 54, var(--velo)) !important; }
  .slider__flecha { display: none; }
  .slide__txt { font-size: 17px; }
}
.producto__foto--galeria { flex-direction: column; gap: 16px; }
.miniaturas { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.miniaturas button { padding: 0; border: 2px solid transparent; background: var(--blanco); cursor: pointer; }
.miniaturas button[aria-current] { border-color: var(--oro); }
.miniaturas img { width: 64px; height: 64px; object-fit: cover; display: block; }
.listado__intro { max-width: 760px; margin: 10px auto 0; color: var(--suave); font-weight: 300; font-size: 17px; }
.desistir { margin: 4px 0 0; padding-top: 14px; border-top: 1px solid var(--borde); font-size: 15px; }
.desistir > a { font-weight: 600; }
.desistir small { color: var(--suave); }

/* =====================================================================
   Guía de tallas
   ===================================================================== */
.guia-btn { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 15px; font-weight: 500; color: var(--morado); background: none; border: 0; border-bottom: 1px solid currentColor; padding: 2px 0; cursor: pointer; margin: 2px 0 6px; }
.guia-btn svg { width: 22px; height: 22px; stroke-width: 1.6; }
.guia-btn:hover { color: var(--morado-osc); }
dialog.guia { width: min(760px, calc(100% - 24px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-top: 4px solid var(--oro); background: var(--blanco); color: var(--tinta); box-shadow: 0 24px 60px rgba(42, 9, 54, .35); }
dialog.guia::backdrop { background: rgba(42, 9, 54, .55); }
dialog.guia[open] { animation: guia-entra .22s ease both; }
.guia__cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 22px 26px 8px; position: sticky; top: 0; background: var(--blanco); z-index: 1; }
.guia__cab h2 { font-size: 34px; color: var(--morado-osc); }
.guia__cerrar { width: 44px; height: 44px; flex: none; border: 1px solid var(--borde-fuerte); background: var(--blanco); color: var(--morado); font-size: 28px; line-height: 1; cursor: pointer; border-radius: 50%; }
.guia__cerrar:hover { background: var(--lila-velo); }
.guia__pestanas { display: flex; gap: 4px; padding: 6px 26px 0; border-bottom: 1px solid var(--borde); overflow-x: auto; }
.guia__pestanas button { font: inherit; font-size: 15px; padding: 10px 14px; border: 0; background: none; color: var(--suave); cursor: pointer; white-space: nowrap; border-bottom: 3px solid transparent; }
.guia__pestanas button[aria-selected="true"] { color: var(--morado); font-weight: 600; border-bottom-color: var(--oro); }
.guia__panel { padding: 18px 26px 6px; }
.guia__intro { margin: 0 0 14px; color: var(--suave); }
.guia__tabla { overflow-x: auto; border: 1px solid var(--borde); }
.guia__tabla table { width: 100%; border-collapse: collapse; font-size: 15px; text-align: center; font-variant-numeric: tabular-nums; }
.guia__tabla th, .guia__tabla td { padding: 10px 12px; border-bottom: 1px solid var(--borde); white-space: nowrap; }
.guia__tabla thead th { background: var(--morado); color: var(--blanco); font-weight: 500; font-size: 14px; }
.guia__tabla tbody th { color: var(--morado-osc); font-weight: 700; background: var(--lila-velo); }
.guia__tabla tbody tr:nth-child(even) td { background: #FBF9FC; }
.guia__tabla tbody tr:hover td, .guia__tabla tbody tr:hover th { background: var(--lila-claro); }
.guia__medir { display: grid; grid-template-columns: 150px 1fr; gap: 22px; align-items: center; margin: 20px 0 6px; }
.guia__dibujo { width: 150px; color: var(--morado); }
.guia__medir h3 { font-size: 22px; color: var(--morado-osc); margin-bottom: 6px; }
.guia__medir p { margin: 0 0 8px; font-size: 15px; line-height: 1.55; }
.guia__nota { color: var(--suave); font-size: 14px !important; }
.guia__pie { margin: 0; padding: 14px 26px 22px; font-size: 15px; border-top: 1px solid var(--borde); }
@keyframes guia-entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) {
  dialog.guia { width: 100%; max-width: 100%; max-height: 92vh; margin: auto 0 0; }
  .guia__cab, .guia__panel { padding-left: 16px; padding-right: 16px; }
  .guia__pestanas { padding: 6px 12px 0; }
  .guia__pie { padding: 14px 16px 20px; }
  .guia__medir { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .guia__tabla th, .guia__tabla td { padding: 9px 8px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { dialog.guia[open] { animation: none; } }
.guia-btn { align-self: flex-start; width: auto; }
.guia__dibujo text { stroke: none; font-family: var(--sans, inherit); }
.guia__dibujo path { stroke-linecap: round; }

/* =====================================================================
   Cuenta atrás para Semana Santa
   ===================================================================== */
.cuenta-atras { position: relative; color: var(--blanco); text-align: center; border-top: 3px solid var(--oro); border-bottom: 3px solid var(--oro); }
.cuenta-atras::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(58, 15, 74, .55), rgba(42, 9, 54, .85)); }
.cuenta-atras__in { position: relative; max-width: 980px; margin: 0 auto; padding: 54px 24px 58px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.cuenta-atras__ante { font-family: var(--serif); font-style: italic; font-size: 24px; color: var(--oro-claro); letter-spacing: .02em; }
.cuenta-atras__ante::before, .cuenta-atras__ante::after { content: '✠'; font-style: normal; color: var(--oro); margin: 0 14px; font-size: 18px; vertical-align: 2px; }
.cuenta-atras__titulo { font-variant: small-caps; font-size: clamp(30px, 4.2vw, 46px); line-height: 1.1; color: var(--blanco); letter-spacing: .02em; }
.cuenta-atras__txt { margin: 0; font-size: 18px; font-weight: 300; max-width: 620px; }
.reloj { display: flex; justify-content: center; margin: 10px 0 4px; }
.reloj__celda { display: flex; flex-direction: column; align-items: center; min-width: 120px; padding: 6px 22px; }
.reloj__celda + .reloj__celda { border-left: 1px solid rgba(201, 162, 74, .55); }
.reloj__celda span { font-family: var(--serif); font-size: clamp(46px, 7vw, 78px); font-weight: 600; line-height: 1; color: var(--oro-claro); font-variant-numeric: lining-nums tabular-nums; }
.reloj__celda--dias span { color: var(--blanco); }
.reloj__celda small { margin-top: 8px; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.cuenta-atras__fechas { margin: 4px 0 0; font-size: 15px; color: rgba(255, 255, 255, .82); }
.cuenta-atras__boton { margin-top: 10px; background: var(--oro); border-color: var(--oro); color: var(--morado-osc); }
.cuenta-atras__boton:hover { background: var(--oro-claro); border-color: var(--oro-claro); color: var(--morado-osc); }
@media (max-width: 600px) {
  .cuenta-atras__in { padding: 40px 14px 44px; }
  .cuenta-atras__ante { font-size: 20px; }
  .reloj__celda { min-width: 0; flex: 1; padding: 4px 6px; }
  .reloj__celda small { font-size: 10px; letter-spacing: .12em; }
  .cuenta-atras__fechas { font-size: 14px; line-height: 1.6; }
}
@media (max-width: 600px) { .reloj__celda span { font-size: 40px; } }

/* =====================================================================
   Aviso de cookies
   ===================================================================== */
.aviso-cookies { position: fixed; left: 20px; bottom: 20px; z-index: 50; width: min(440px, calc(100% - 40px)); display: grid; grid-template-columns: auto 1fr; gap: 12px 14px; align-items: start;
  padding: 18px 18px 16px; background: var(--blanco); color: var(--tinta); border: 1px solid var(--borde); border-top: 3px solid var(--oro); box-shadow: 0 16px 40px rgba(42, 9, 54, .22);
  opacity: 0; transform: translateY(16px); transition: opacity .25s ease, transform .25s ease; }
.aviso-cookies--visible { opacity: 1; transform: none; }
.aviso-cookies__icono { width: 30px; height: 30px; color: var(--oro); stroke-width: 1.5; margin-top: 2px; }
.aviso-cookies__txt { margin: 0; font-size: 14.5px; line-height: 1.55; padding-right: 22px; }
.aviso-cookies__txt strong { color: var(--morado-osc); }
.aviso-cookies__botones { grid-column: 2; display: flex; align-items: center; gap: 12px; }
.aviso-cookies__aceptar { min-height: 40px; padding: 8px 22px; font-size: 15px; }
.aviso-cookies__cerrar { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border: 0; background: none; color: var(--suave); font-size: 24px; line-height: 1; cursor: pointer; border-radius: 50%; }
.aviso-cookies__cerrar:hover { background: var(--lila-velo); color: var(--morado); }
@media (max-width: 600px) {
  .aviso-cookies { left: 10px; right: 10px; bottom: 10px; width: auto; }
}
@media (prefers-reduced-motion: reduce) { .aviso-cookies { transition: none; } }

/* =====================================================================
   TikTok en la portada
   ===================================================================== */
.tiktok { --tt-lado: max(24px, calc((100% - var(--ancho)) / 2 + 24px)); padding: 0 0 90px; }
.tiktok__cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 34px; padding: 46px var(--tt-lado) 40px; color: var(--blanco); border-top: 3px solid var(--oro); border-bottom: 3px solid var(--oro);
  background: var(--morado-med) url(../img/damasco-oro.webp) center top / 168px 195px; }
.tiktok__cab .antetitulo { color: var(--oro-claro); }
.tiktok__cab h2 { font-size: clamp(34px, 4vw, 46px); color: var(--blanco); margin-top: 4px; }
.tiktok__cab p { margin: 8px 0 0; max-width: 600px; color: rgba(255, 255, 255, .82); font-weight: 300; font-size: 17px; }
.tiktok__cab .boton--claro { background: transparent; border-color: var(--oro); color: var(--oro-claro); }
.tiktok__cab .boton--claro:hover { background: var(--oro); color: var(--morado-osc); }
.tiktok__acciones { display: flex; align-items: center; gap: 10px; }
.tiktok__flecha { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(201, 162, 74, .6); background: transparent; color: var(--oro-claro); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.tiktok__flecha:hover { border-color: var(--oro); background: var(--oro); color: var(--morado-osc); }
.tiktok__flecha svg { width: 22px; height: 22px; stroke-width: 1.8; }
.tiktok__pista { list-style: none; margin: 0; padding: 4px 2px 14px; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 18px) / 5); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--lila) transparent; }
.tt-card { scroll-snap-align: start; }
.tt-card a { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--tinta); }
.tt-card__img { position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; background: var(--morado-osc); border: 1px solid var(--borde); }
.tt-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.tt-card__img::after { content: ''; position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(transparent, rgba(42, 9, 54, .55)); }
.tt-card__play { position: absolute; left: 50%; top: 50%; z-index: 1; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: rgba(255, 255, 255, .88); color: var(--morado); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); transition: transform .2s ease; }
.tt-card__play svg { width: 24px; height: 24px; fill: currentColor; stroke: none; margin-left: 3px; }
.tt-card a:hover .tt-card__img img { transform: scale(1.04); }
.tt-card a:hover .tt-card__play { transform: scale(1.08); background: var(--oro-claro); }
.tt-card a:focus-visible .tt-card__img { outline: 3px solid var(--oro); outline-offset: 2px; }
.tt-card__txt { font-size: 14.5px; line-height: 1.45; color: var(--suave); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tiktok__aviso { color: var(--blanco); border-top: 3px solid var(--oro); }
.tiktok__aviso-in { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; padding: 40px 24px; text-align: left; background: rgba(42, 9, 54, .55); }
.tiktok__aviso p { margin: 0; max-width: 460px; font-weight: 300; }
.tiktok__aviso strong { font-family: var(--serif); font-size: 24px; font-weight: 500; color: var(--oro-claro); }
.tiktok__aviso a { color: var(--oro-claro); }
.tiktok__aviso .boton { background: var(--oro); border-color: var(--oro); color: var(--morado-osc); }
.tiktok__logo { width: 52px; height: 52px; color: var(--oro); stroke-width: 1.6; }
.tiktok__embed { display: flex; justify-content: center; }
.tiktok .tiktok__pista, .tiktok .tiktok__aviso, .tiktok .tiktok__embed { margin-left: var(--tt-lado); margin-right: var(--tt-lado); }
.tt-card__img.damasco-oro::before { content: ''; position: absolute; inset: 0; background: rgba(42, 9, 54, .35); }
.tt-card__img img { position: relative; z-index: 0; }
/* Ventana del vídeo */
.tt-modal { padding: 0; border: 0; background: transparent; max-width: none; max-height: none; overflow: visible; color: var(--blanco); }
.tt-modal::backdrop { background: rgba(26, 6, 34, .86); backdrop-filter: blur(3px); }
.tt-abierto { overflow: hidden; }
.tt-modal__marco { position: relative; width: min(400px, calc((100vh - 120px) * 9 / 16), 92vw); }
.tt-modal__video { aspect-ratio: 9 / 16; background: #000 url('../img/logo.png') center / 30% no-repeat; border: 1px solid rgba(201, 162, 74, .55); box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
.tt-modal__video iframe { width: 100%; height: 100%; border: 0; display: block; }
.tt-modal__cerrar, .tt-modal__nav { position: absolute; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); background: rgba(42, 9, 54, .7); color: var(--blanco); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.tt-modal__cerrar:hover, .tt-modal__nav:hover { background: var(--oro); border-color: var(--oro); color: var(--morado-osc); }
.tt-modal__cerrar:focus-visible, .tt-modal__nav:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; }
.tt-modal__cerrar svg, .tt-modal__nav svg { width: 22px; height: 22px; stroke-width: 2; }
.tt-modal__cerrar { top: 0; right: -62px; }
.tt-modal__nav { top: 50%; margin-top: -23px; }
.tt-modal__nav--ant { left: -66px; }
.tt-modal__nav--sig { right: -66px; }
.tt-modal__pie { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin: 12px 2px 0; font-size: 14px; font-weight: 300; }
.tt-modal__pie span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tt-modal__pie a { color: var(--oro-claro); white-space: nowrap; font-weight: 500; }
@media (max-width: 640px) {
  .tt-modal { width: 100vw; height: 100dvh; margin: 0; }
  .tt-modal__marco { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 58px 0 14px; box-sizing: border-box; }
  .tt-modal__video { width: min(100%, calc((100dvh - 130px) * 9 / 16)); margin: 0 auto; border-left: 0; border-right: 0; }
  .tt-modal__cerrar { top: 8px; right: 10px; }
  .tt-modal__nav { top: 8px; margin: 0; }
  .tt-modal__nav--ant { left: 10px; }
  .tt-modal__nav--sig { left: 64px; right: auto; }
  .tt-modal__pie { padding: 0 16px; }
}
@media (max-width: 1000px) { .tiktok__pista { grid-auto-columns: calc((100% - 2 * 18px) / 3); } }
@media (max-width: 600px) {
  .tiktok { padding: 0 0 64px; }
  .tiktok__cab { padding: 34px 16px 28px; margin-bottom: 18px; }
  .tiktok .tiktok__pista, .tiktok .tiktok__aviso, .tiktok .tiktok__embed { margin-left: 0; margin-right: 0; }
  .tiktok__flecha { display: none; }
  .tiktok__pista { grid-auto-columns: 44%; gap: 12px; padding: 4px 16px 12px; scroll-padding-left: 16px; }
  .tiktok__aviso-in { text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .tiktok__pista { scroll-behavior: auto; } .tt-card__img img, .tt-card__play { transition: none; } }

/* Código de descuento */
.resumen-caja__desc dd, .resumen-caja__desc dt { color: #2E7D32; }
.resumen-caja__desc dd { white-space: nowrap; }
.cupon { margin: 4px 0 16px; font-size: 15px; }
.cupon summary { cursor: pointer; color: var(--morado); text-decoration: underline; text-underline-offset: 3px; }
.cupon form { display: flex; gap: 8px; margin-top: 10px; }
.cupon input { flex: 1; min-width: 0; text-transform: uppercase; }
.cupon--puesto { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: #EEF7EE; border: 1px solid #CDE6CF; padding: 8px 12px; }
.cupon--puesto .enlace-suave { background: none; border: 0; font: inherit; cursor: pointer; }
.volumen { margin: 14px 0 0; padding: 10px 14px; background: #FBF5E6; border-left: 3px solid var(--oro); font-size: 15px; }
.volumen [data-volumen-estado] { color: #2E7D32; font-weight: 500; }

/* Estrellas */
.estrellas { display: inline-flex; gap: 1px; font-size: 17px; line-height: 1; letter-spacing: 0; }
.estrellas__si { color: var(--oro); }
.estrellas__no { color: #D9D0DC; }
.estrellas--grande { font-size: 22px; }

/* Opiniones de Google (portada) */
.opiniones { background: var(--morado-med) url(../img/damasco-oro.webp) center top / 168px 195px; border-top: 3px solid var(--oro); border-bottom: 3px solid var(--oro); color: var(--blanco); }
.opiniones .antetitulo { color: var(--oro-claro); }
.opiniones__cab h2 { color: var(--blanco) !important; }
.opiniones__nota { color: rgba(255, 255, 255, .85) !important; }
.opiniones__nota strong { color: var(--oro-claro) !important; }
.opiniones .estrellas--grande .estrellas__no { color: rgba(255, 255, 255, .3); }
.opiniones .autor__txt a, .opiniones .autor__txt strong { color: var(--blanco) !important; }
.opiniones .autor__txt small { color: rgba(255, 255, 255, .75) !important; }
.opiniones .autor__foto { box-shadow: 0 4px 12px rgba(0, 0, 0, .25); }
.opiniones .bocadillo blockquote { box-shadow: 0 14px 30px rgba(26, 6, 34, .35); border-color: transparent; }
.opiniones .bocadillo blockquote::after { border-color: transparent; }
.opiniones__pie .boton--claro { background: transparent; border-color: var(--oro); color: var(--oro-claro); }
.opiniones__pie .boton--claro:hover { background: var(--oro); color: var(--morado-osc); }
.opiniones__pie .boton:not(.boton--claro) { background: var(--oro); border-color: var(--oro); color: var(--morado-osc); }
.opiniones__pie .boton:not(.boton--claro):hover { background: var(--oro-claro); }
.opiniones__fuente { color: rgba(255, 255, 255, .7) !important; }
.opiniones__pista { scrollbar-color: var(--oro) transparent !important; }
.opiniones__in { max-width: var(--ancho); margin: 0 auto; padding: 80px 24px 70px; }
.opiniones__cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 34px; }
.opiniones__cab h2 { font-size: clamp(34px, 4vw, 46px); color: var(--morado-osc); margin: 4px 0 0; }
.opiniones__nota { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 0; font-size: 16px; color: var(--suave); }
.opiniones__nota strong { font-family: var(--serif); font-size: 34px; color: var(--morado); line-height: 1; }
.opiniones__acciones { display: flex; gap: 10px; }
.opiniones__pista { list-style: none; margin: 0; padding: 6px 4px 22px; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * 24px) / 3); gap: 24px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--lila) transparent; }
.opinion { scroll-snap-align: start; display: flex; }
.bocadillo { margin: 0; display: flex; flex-direction: column; width: 100%; }
.bocadillo blockquote { position: relative; margin: 0 0 22px; flex: 1; background: var(--blanco); border: 1px solid var(--borde); border-radius: 18px; padding: 26px 26px 22px;
  box-shadow: 0 10px 26px rgba(58, 15, 74, .08); display: flex; flex-direction: column; gap: 12px; }
.bocadillo blockquote::before { content: '“'; position: absolute; top: -6px; right: 20px; font-family: var(--serif); font-size: 96px; line-height: 1; color: var(--oro); opacity: .35; }
/* el pico del bocadillo, hacia la foto */
.bocadillo blockquote::after { content: ''; position: absolute; left: 34px; bottom: -13px; width: 24px; height: 24px; background: var(--blanco);
  border-right: 1px solid var(--borde); border-bottom: 1px solid var(--borde); transform: rotate(45deg); border-bottom-right-radius: 4px; }
.bocadillo__txt { margin: 0; font-size: 16px; line-height: 1.6; color: var(--tinta); display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.bocadillo__txt--abierto { -webkit-line-clamp: unset; display: block; }
.bocadillo__mas { align-self: flex-start; background: none; border: 0; padding: 0; font: inherit; font-size: 14px; color: var(--morado); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.autor { display: flex; align-items: center; gap: 12px; padding-left: 18px; }
.autor__foto { position: relative; flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--morado); border: 2px solid var(--oro); overflow: hidden; display: grid; place-items: center; }
.autor__foto span { color: var(--oro-claro); font-family: var(--serif); font-weight: 700; font-size: 20px; }
.autor__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.autor__txt { display: flex; flex-direction: column; line-height: 1.3; }
.autor__txt a, .autor__txt strong { font-weight: 600; color: var(--tinta); text-decoration: none; }
.autor__txt a:hover { color: var(--morado); text-decoration: underline; }
.autor__txt small { font-size: 13px; color: var(--suave); }
.opiniones__pie { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 26px 0 0; }
.opiniones__fuente { text-align: center; font-size: 13px; color: var(--suave); margin: 14px 0 0; }
@media (max-width: 1000px) { .opiniones__pista { grid-auto-columns: calc((100% - 24px) / 2); } }
@media (max-width: 640px) {
  .opiniones__in { padding: 60px 0 56px; }
  .opiniones__cab { padding: 0 16px; }
  .opiniones__pista { grid-auto-columns: 86%; padding-left: 16px; padding-right: 16px; scroll-padding: 0 16px; }
  .opiniones__pie, .opiniones__fuente { padding: 0 16px; }
}

/* Opiniones en la ficha */
.producto__valoracion { display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 0; color: var(--suave); font-size: 15px; text-decoration: none; }
.producto__valoracion:hover span { text-decoration: underline; }
.op-producto__media { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 8px 0 0; color: var(--suave); }
.op-producto__lista { max-width: 820px; margin: 0 auto; display: grid; gap: 16px; }
.op-producto__item { background: var(--blanco); border: 1px solid var(--borde); padding: 18px 20px; }
.op-producto__item p { margin: 10px 0 0; }
.op-producto__cab { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.op-producto__cab small { color: var(--suave); margin-left: auto; }
.chip-verif { font-size: 12px; color: var(--verde); background: #EEF7EE; padding: 2px 8px; }
.op-producto__resp { background: var(--lila-velo); border-left: 3px solid var(--oro); padding: 10px 12px; font-size: 15px; }

/* Formulario de opinión */
.opinar { max-width: 760px; margin: 0 auto; }
.opinar__intro { color: var(--suave); }
.opinar__item { border: 1px solid var(--borde); background: var(--blanco); padding: 16px 20px 20px; margin: 0 0 16px; }
.opinar__item legend { font-weight: 600; padding: 0 6px; }
.opinar__item textarea { width: 100%; box-sizing: border-box; margin-top: 10px; }
.votar { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.votar input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.votar label { font-size: 34px; line-height: 1; color: #D9D0DC; cursor: pointer; transition: color .1s; }
.votar label:hover, .votar label:hover ~ label, .votar input:checked ~ label { color: var(--oro); }
.votar input:focus-visible + label { outline: 3px solid var(--morado); outline-offset: 2px; }
.opinar__gracias { text-align: center; max-width: 560px; margin: 0 auto; }

/* Guías */
.guia__fecha { color: var(--suave); font-size: 14px; margin: 6px 0 0; }
.guia__texto h2 { border-bottom: 2px solid var(--oro); padding-bottom: 6px; }
.guia__productos { margin: 26px 0 30px; }
.guia__productos .rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.guia__perso { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 20px 0 30px; }
.guia__perso-item { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; background: var(--morado); color: var(--blanco); text-decoration: none; border-bottom: 3px solid var(--oro); }
.guia__perso-item strong { font-family: var(--serif); font-size: 21px; }
.guia__perso-item span { font-size: 14px; color: var(--oro-claro); }
.guia__perso-item:hover { background: var(--morado-osc); }
.guias { max-width: 860px; margin: 0 auto; display: grid; gap: 16px; }
.guias__item { display: block; background: var(--blanco); border: 1px solid var(--borde); border-left: 4px solid var(--oro); padding: 22px 24px; text-decoration: none; color: var(--tinta); }
.guias__item h2 { margin: 0; color: var(--morado-osc); font-size: 26px; }
.guias__item p { margin: 8px 0; color: var(--suave); }
.guias__item span { color: var(--morado); font-weight: 500; }
@media (max-width: 860px) { .guia__productos .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.guia__productos .centro { margin-top: 18px; text-align: center; }

/* =====================================================================================
   Temporada, buscador, hermandades, boletín, Instagram y «Completa tu pedido»
   ===================================================================================== */
button.enlace-suave { background: none; border: 0; padding: 0; font: inherit; font-size: 14px; color: var(--morado); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Barra de aviso de Semana Santa (arriba del todo) */
.aviso-temporada { position: relative; display: flex; justify-content: center; align-items: center; padding: 9px 52px 9px 16px; background: #F6EBCB; border-bottom: 1px solid #E6D29C; color: var(--morado-osc); font-size: 14.5px; line-height: 1.4; }
.aviso-temporada p { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 14px; text-align: center; }
.aviso-temporada__cuenta { display: inline-flex; align-items: center; padding: 3px 11px; border-radius: 999px; background: var(--morado); color: var(--blanco); font-size: 13px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.aviso-temporada a { color: var(--morado); font-weight: 600; white-space: nowrap; }
.aviso-temporada--tarde { background: var(--lila-velo); border-bottom-color: var(--borde); }
.aviso-temporada__x { position: absolute; right: 8px; top: 50%; width: 36px; height: 36px; margin-top: -18px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--morado-osc); cursor: pointer; border-radius: 50%; }
.aviso-temporada__x:hover { background: rgba(91, 27, 106, .1); }
.aviso-temporada__x svg { width: 18px; height: 18px; stroke-width: 2; }

/* Buscador de la cabecera */
.buscador-panel { border-top: 1px solid rgba(201, 162, 74, .45); background: var(--morado-osc); padding: 16px 24px 20px; }
.buscador-panel__in { position: relative; max-width: 760px; margin: 0 auto; }
.buscador-panel__in input[type=search] { width: 100%; min-height: 54px; padding: 12px 56px 12px 50px; font: inherit; font-size: 17px; border: 1px solid var(--oro); background: var(--blanco); color: var(--tinta); border-radius: 0; }
.buscador-panel__lupa { position: absolute; left: 16px; top: 27px; width: 22px; height: 22px; margin-top: -11px; color: var(--morado); stroke-width: 1.8; pointer-events: none; }
.buscador-panel__cerrar { position: absolute; right: 6px; top: 27px; width: 42px; height: 42px; margin-top: -21px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--suave); cursor: pointer; }
.buscador-panel__cerrar svg { width: 20px; height: 20px; stroke-width: 2; }
.buscador-panel .sugiere { top: calc(100% + 8px); }

/* Desplegable de sugerencias (cabecera y página de búsqueda) */
.buscador { position: relative; flex-wrap: wrap; }
.sugiere { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; max-height: min(70vh, 560px); overflow-y: auto; background: var(--blanco); border: 1px solid var(--borde); border-top: 3px solid var(--oro); box-shadow: 0 18px 40px rgba(26, 6, 34, .22); padding: 8px 10px 10px; text-align: left; }
.sugiere__grupo { margin: 10px 8px 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--suave); }
.sugiere__op { text-decoration: none; color: var(--tinta); }
.sugiere__op--prod { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 7px 8px; }
.sugiere__op--prod img { width: 48px; height: 48px; object-fit: cover; border: 1px solid #ECE6EE; background: var(--lila-velo); }
.sugiere__op--prod:hover, .sugiere__op--prod[aria-selected=true] { background: var(--lila-velo); }
.sugiere__nombre { font-size: 15px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; }
.sugiere__nombre small { display: block; color: var(--suave); font-size: 12.5px; }
.sugiere__precio { color: var(--morado); font-weight: 600; white-space: nowrap; font-size: 15px; }
.sugiere__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 8px 6px; }
.sugiere__chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--borde-fuerte); font-size: 14px; }
.sugiere__chip small { color: var(--suave); }
.sugiere__chip:hover, .sugiere__chip[aria-selected=true] { border-color: var(--morado); background: var(--lila-velo); }
.sugiere__chip--oro { border-color: var(--oro); background: #FBF5E6; }
.sugiere__fix { margin: 4px 0 2px; padding: 9px 10px; background: #FBF5E6; font-size: 15px; }
.sugiere__todo { display: block; margin-top: 8px; padding: 12px 8px 4px; border-top: 1px solid #ECE6EE; font-size: 14.5px; font-weight: 500; text-decoration: none; }
.sugiere__nada { margin: 0; padding: 12px 8px; color: var(--suave); font-size: 15px; }
.buscador__nota { max-width: 640px; margin: -14px auto 30px; text-align: center; color: var(--suave); }

/* Completa tu pedido (carrito) */
.completa { margin-top: 64px; padding-top: 44px; border-top: 1px solid var(--borde); }
.completa__cab h2 { font-size: clamp(28px, 3vw, 38px); color: var(--morado-osc); }
.completa__cab p { margin: 6px 0 0; color: var(--suave); font-weight: 300; }
.completa__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; margin-top: 24px; }
.completa__item { display: grid; grid-template-columns: 84px minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 8px 16px; align-items: center; background: var(--blanco); border: 1px solid var(--borde); padding: 14px; }
.completa__foto { grid-row: 1 / 3; }
.completa__foto img { width: 84px; height: 84px; object-fit: cover; border: 1px solid #ECE6EE; }
.completa__info h3 { font-family: var(--sans); font-size: 15.5px; font-weight: 500; line-height: 1.35; }
.completa__info h3 a { color: var(--tinta); text-decoration: none; }
.completa__info h3 a:hover { color: var(--morado); }
.completa__precio { display: block; margin-top: 4px; color: var(--morado); font-weight: 600; }
.completa__boton { min-height: 38px; padding: 6px 18px; font-size: 14.5px; justify-self: start; }
.completa__item form { margin: 0; }

/* Hermandades */
.hdad-cab { position: relative; color: var(--blanco); text-align: center; border-bottom: 3px solid var(--oro); }
.hdad-cab::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(58, 15, 74, .5), rgba(42, 9, 54, .82)); }
.hdad-cab__in { position: relative; max-width: 840px; margin: 0 auto; padding: 64px 24px 72px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hdad-cab .antetitulo { color: var(--oro-claro); }
.hdad-cab h1 { font-variant: small-caps; font-size: clamp(40px, 5.4vw, 62px); color: var(--blanco); letter-spacing: .02em; }
.hdad-cab p { margin: 0; max-width: 680px; font-size: 18px; font-weight: 300; line-height: 1.65; color: rgba(255, 255, 255, .88); }
.hdad-ventajas { background: var(--blanco); border-bottom: 1px solid #ECE6EE; }
.hdad-ventajas__in { max-width: var(--ancho); margin: 0 auto; padding: 40px 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px 32px; }
.hdad { max-width: var(--ancho); margin: 0 auto; padding: 60px 24px 96px; display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.hdad__form { flex: 999 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.hdad__titulo h2 { font-size: clamp(32px, 3.6vw, 44px); color: var(--morado-osc); }
.hdad__titulo p { margin: 6px 0 0; color: var(--suave); }
.hdad__grupo { display: block; background: var(--blanco); border: 1px solid var(--borde); padding: 26px 28px 28px; }
.hdad__grupo legend { float: left; width: 100%; padding: 0; margin: 0 0 16px; }
.hdad__grupo legend + * { clear: left; }
.hdad__grupo > * + *:not(legend) { margin-top: 16px; }
.hdad__grupo legend + * { margin-top: 0 !important; }
.hdad__grupo .campo { margin-top: 0; }
.hdad__grupo .campos2 > .campo, .hdad__grupo .campos3 > .campo { margin-top: 0; }
.hdad__ayuda { margin-top: 0; }
.hdad__lineas { display: flex; flex-direction: column; gap: 16px; }
.hdad-linea { display: flex; flex-direction: column; gap: 14px; background: #FBF9FC; border: 1px solid #ECE6EE; border-left: 3px solid var(--oro); padding: 18px 20px 20px; }
.hdad-linea__cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.hdad-linea__cab strong { font-family: var(--serif); font-size: 21px; font-weight: 600; color: var(--morado); }
.hdad-linea__fila { display: grid; grid-template-columns: minmax(0, 2fr) minmax(120px, 1fr); gap: 14px; }
.hdad-linea input[type=file] { font: inherit; font-size: 14px; padding: 8px 0; min-height: 0; border: 0; background: none; }
.hdad__mas { align-self: flex-start; }
.hdad__envio { display: flex; flex-direction: column; gap: 14px; }
.hdad__fecha { max-width: 280px; }
.hdad__enviar { min-width: 260px; }
.hdad__pasos { flex: 1 1 300px; position: sticky; top: 110px; background: var(--blanco); border: 1px solid var(--borde); border-top: 3px solid var(--oro); padding: 28px 26px; }
.hdad__pasos h2 { font-size: 28px; color: var(--morado-osc); margin-bottom: 18px; }
.hdad__pasos ol { list-style: none; margin: 0; padding: 0; counter-reset: paso; display: flex; flex-direction: column; gap: 18px; }
.hdad__pasos li { counter-increment: paso; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; }
.hdad__pasos li::before { content: counter(paso); grid-row: 1 / 3; width: 34px; height: 34px; border-radius: 50%; background: var(--morado); color: var(--oro-claro); font-family: var(--serif); font-size: 19px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.hdad__pasos li strong { font-weight: 600; line-height: 1.3; }
.hdad__pasos li span { color: var(--suave); font-size: 14.5px; line-height: 1.45; margin-top: 2px; }
.hdad__wa { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid #ECE6EE; font-size: 15px; color: var(--suave); }
.hdad-gracias { width: 100%; max-width: 760px; margin: 0 auto; text-align: center; background: var(--blanco); border: 1px solid var(--borde); border-top: 3px solid var(--oro); padding: 52px 36px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hdad-gracias h2 { font-size: clamp(32px, 3.6vw, 44px); color: var(--morado-osc); }
.hdad-gracias p { margin: 0 0 8px; max-width: 560px; font-size: 17px; font-weight: 300; color: var(--suave); }
@media (max-width: 720px) {
  .hdad { padding: 36px 16px 72px; gap: 32px; }
  .hdad__grupo { padding: 20px 16px 22px; }
  .hdad-linea { padding: 16px 14px 18px; }
  .hdad-linea__fila { grid-template-columns: minmax(0, 1fr) 110px; }
  .hdad__pasos { position: static; }
  .hdad__enviar { width: 100%; min-width: 0; }
  .hdad-cab__in { padding: 44px 16px 52px; }
}

/* Presupuesto (página que recibe la hermandad) */
.presu { max-width: var(--ancho); margin: 0 auto; padding: 32px 24px 96px; display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.presu__doc { flex: 999 1 620px; min-width: 0; background: var(--blanco); border: 1px solid var(--borde); padding: 36px 40px; }
.presu__cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding-bottom: 20px; border-bottom: 2px solid var(--oro); }
.presu__cab h1 { font-size: clamp(32px, 3.6vw, 44px); color: var(--morado-osc); margin: 2px 0 6px; }
.presu__logo { width: 76px; height: 76px; object-fit: contain; flex: none; }
.presu__mensaje { margin: 24px 0 0; padding: 14px 18px; background: var(--lila-velo); border-left: 3px solid var(--oro); line-height: 1.6; }
.presu__tabla { width: 100%; border-collapse: collapse; margin-top: 26px; }
.presu__tabla th { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--suave); padding: 10px 8px; border-bottom: 1px solid var(--borde); }
.presu__tabla td { padding: 14px 8px; border-bottom: 1px solid #ECE6EE; vertical-align: top; }
.presu__tabla td small { display: block; margin-top: 3px; color: var(--suave); font-size: 13.5px; line-height: 1.45; }
.presu__tabla .num { text-align: right; white-space: nowrap; }
.presu__tabla tfoot td { border-bottom: 0; padding: 10px 8px; color: var(--suave); }
.presu__total td { font-size: 21px; font-weight: 700; color: var(--morado) !important; border-top: 2px solid var(--borde); padding-top: 14px !important; }
.presu__total small { font-size: 12px; font-weight: 400; color: var(--suave); }
.presu__pie { margin: 26px 0 0; }
.presu__imprimir { margin: 10px 0 0; }
.presu__aceptar { flex: 1 1 320px; position: sticky; top: 110px; background: var(--blanco); border: 1px solid var(--borde); border-top: 3px solid var(--oro); padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.presu__aceptar h2 { font-size: 28px; color: var(--morado-osc); }
.presu__aceptar p { margin: 0; }
.presu__form { display: flex; flex-direction: column; gap: 14px; }
.presu__form .campo { margin-top: 0; }
@media (max-width: 720px) { .presu { padding: 20px 16px 72px; } .presu__doc { padding: 24px 18px; } .presu__aceptar { position: static; } }
@media print {
  .aviso-temporada, .cabecera, .pie, .migas, .presu__aceptar, .presu__imprimir, .aviso-cookies { display: none !important; }
  body { background: #fff; }
  .presu { padding: 0; }
  .presu__doc { border: 0; padding: 0; }
}

/* Datos de la transferencia */
.transferencia { margin: 18px 0; padding: 18px 22px; background: var(--morado-osc); color: var(--blanco); display: grid; gap: 10px; text-align: left; }
.transferencia div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding-bottom: 9px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.transferencia div:last-child { border-bottom: 0; padding-bottom: 0; }
.transferencia dt { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--oro-claro); }
.transferencia dd { margin: 0; font-size: 17px; font-weight: 600; text-align: right; }
.transferencia__iban { letter-spacing: .03em; }
.transferencia button.enlace-suave { color: var(--oro-claro); margin-left: 8px; font-size: 13px; }

/* Instagram (mismo estilo que TikTok, publicaciones 4:5) */
.instagram__pista { grid-auto-columns: calc((100% - 3 * 18px) / 4); }
.ig-card { scroll-snap-align: start; }
.ig-card a { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--tinta); }
.ig-card__img { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--morado-osc); border: 1px solid var(--borde); }
.ig-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.ig-card a:hover .ig-card__img img { transform: scale(1.04); }
.ig-card a:focus-visible .ig-card__img { outline: 3px solid var(--oro); outline-offset: 2px; }
.ig-card__tipo { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; background: rgba(42, 9, 54, .62); color: var(--blanco); display: flex; align-items: center; justify-content: center; }
.ig-card__tipo svg { width: 15px; height: 15px; stroke-width: 2; }
.ig-modal__marco { width: min(480px, 92vw); }
.ig-modal__post { height: min(760px, calc(100vh - 130px)); background: var(--blanco); border: 1px solid rgba(201, 162, 74, .55); box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
.ig-modal__post iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 1000px) { .instagram__pista { grid-auto-columns: calc((100% - 2 * 18px) / 3); } }
@media (max-width: 640px) { .ig-modal__post { width: 100%; height: calc(100dvh - 130px); border-left: 0; border-right: 0; } }
@media (max-width: 600px) { .instagram__pista { grid-auto-columns: 62%; } }

/* Boletín (parte de arriba del pie) */
.pie__boletin { background: rgba(42, 9, 54, .58); border-bottom: 1px solid rgba(201, 162, 74, .35); }
.pie__boletin-in { max-width: var(--ancho); margin: 0 auto; padding: 46px 24px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px 64px; align-items: center; }
.pie__boletin-txt h2 { font-variant: small-caps; font-size: clamp(28px, 3vw, 38px); font-weight: 600; color: var(--blanco); letter-spacing: .02em; }
.pie__boletin-txt p { margin: 8px 0 0; max-width: 470px; font-weight: 300; color: #E9DDEE; }
.pie__boletin-form { margin: 0; }
.pie__boletin-fila { display: flex; gap: 10px; }
.pie__boletin-fila input { flex: 1; min-width: 0; min-height: 50px; padding: 12px 16px; font: inherit; font-size: 16px; color: var(--tinta); background: var(--blanco); border: 1px solid rgba(201, 162, 74, .7); border-radius: 0; }
.pie__boletin-fila .boton { background: var(--oro); border-color: var(--oro); color: var(--morado-osc); }
.pie__boletin-fila .boton:hover { background: var(--oro-claro); border-color: var(--oro-claro); }
.pie__boletin-ok { display: flex; gap: 9px; align-items: flex-start; margin-top: 12px; font-size: 13.5px; line-height: 1.5; color: #E9DDEE; cursor: pointer; }
.pie__boletin-ok input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--oro); flex: none; }
.pie .pie__boletin-ok a { color: var(--oro-claro); text-decoration: underline; }
.pie__boletin-msg { margin: 12px 0 0; padding: 10px 14px; font-size: 14.5px; border-left: 3px solid; }
.pie__boletin-msg--ok { background: rgba(31, 90, 42, .35); border-color: #8FD19E; }
.pie__boletin-msg--error { background: rgba(142, 31, 26, .4); border-color: #F0A9A3; }
@media (max-width: 760px) {
  .pie__boletin-in { grid-template-columns: 1fr; padding: 36px 16px; }
  .pie__boletin-fila { flex-wrap: wrap; }
  .pie__boletin-fila .boton { flex: 1 1 100%; }
}
/* Ajustes finos */
.buscador-panel input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.sugiere__todo { position: sticky; bottom: -10px; background: var(--blanco); padding-bottom: 10px; }
.completa { margin-bottom: 56px; }
.migas + .hdad-cab { margin-top: 20px; }
.hdad-cab__in { max-width: 980px; }
.hdad-cab h1 { font-size: clamp(38px, 5vw, 58px); }
.hdad-ventajas .ventaja h2 { font-size: 19px; line-height: 1.2; }
@media (max-width: 520px) {
  .aviso-temporada { font-size: 13.5px; padding: 8px 44px 8px 12px; }
  .aviso-temporada a { display: none; }
}
.presu__movil { display: none !important; }
@media (max-width: 600px) {
  .presu__tabla, .presu__tabla tbody, .presu__tabla tfoot { display: block; }
  .presu__tabla thead, .presu__tabla tbody td:nth-child(2), .presu__tabla tbody td:nth-child(3) { display: none; }
  .presu__tabla tr { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; border-bottom: 1px solid #ECE6EE; }
  .presu__tabla td { border-bottom: 0; padding-left: 0; padding-right: 0; }
  .presu__tabla tfoot tr { border-bottom: 0; }
  .presu__tabla tfoot td { padding: 10px 0; }
  .presu__tabla .presu__total { border-top: 2px solid var(--borde); }
  .presu__tabla .presu__total td { border-top: 0; }
  .presu__movil { display: block !important; color: var(--tinta) !important; font-weight: 500; margin-top: 6px !important; }
}

/* Quién pide el presupuesto */
.hdad-tipos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px !important; }
.hdad-tipo { position: relative; cursor: pointer; }
.hdad-tipo input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hdad-tipo span { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border: 1px solid var(--borde-fuerte); background: var(--blanco); font-size: 15px; transition: background .15s, border-color .15s; }
.hdad-tipo:hover span { border-color: var(--morado); }
.hdad-tipo input:checked + span { background: var(--morado); border-color: var(--morado); color: var(--blanco); }
.hdad-tipo input:focus-visible + span { outline: 3px solid var(--oro); outline-offset: 2px; }