/* ===========================================================================
   mytxuleta — diseno del catalogo.
   GENERADO. No editar aqui: sale de diseno-web/mytxuleta-web.html con
   exportar-css.py. Cualquier cambio a mano se pierde en la siguiente
   exportacion.
   =========================================================================== */

:root {
    --noir: #000000;
    --noir-2: #000000;
    --noir-3: #000000;
    --burdeos: #000000;
    --oro: #b8955e;
    --oro-2: #d6bd8c;
    --sal: #e9d2c6;
    --marfil: #f6efe9;
    --marfil-2: #eee3db;
    --tinta: #1c1315;
    --gris: #75676a;
    --gris-osc: #ad9c95;
    --linea: #e2d4cc;
    --linea-osc: rgba(214, 189, 140, 0.16);
    --display: "Gilda Display", "Didot", "Bodoni 72", "Bodoni MT", Georgia, serif;
    --texto: "Jost", "Futura", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0; color: var(--marfil);
    background-color: #0a0807;
    background-image:
      radial-gradient(120% 70% at 50% 0%, #1a120c 0%, #0c0807 58%, #050303 100%);
    background-attachment: fixed;
    font-family: var(--texto); font-size: 16px; line-height: 1.65; font-weight: 400;
    -webkit-font-smoothing: antialiased;
  }
  img { max-width: 100%; display: block; }
  a { color: inherit; text-decoration: none; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { background: none; border: 0; cursor: pointer; padding: 0; }
  :focus-visible { outline: 1px solid var(--oro-2); outline-offset: 3px; }
  h1, h2, h3, p { margin: 0; }
  ul { margin: 0; padding: 0; list-style: none; }

  [data-chef="no"] .es-chef { display: none !important; }
  [data-modo="catalogo"] .solo-tienda { display: none !important; }
  [data-modo="tienda"] .solo-catalogo { display: none !important; }

  .wrap { width: min(1320px, 100% - 72px); margin-inline: auto; }
  @media (max-width: 560px) { .wrap { width: calc(100% - 40px); } }

  .eyebrow { font-size: 11.5px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--oro); }
  .display { font-family: var(--display); font-weight: 400; line-height: 1.06; letter-spacing: 0.005em; text-wrap: balance; }
  .h1 { font-size: clamp(42px, 6vw, 88px); }
  .h2 { font-size: clamp(34px, 4.3vw, 60px); }
  .h3 { font-size: clamp(24px, 2.3vw, 32px); }
  .lede { font-size: clamp(16px, 1.2vw, 18.5px); line-height: 1.75; font-weight: 300; color: var(--gris-osc); max-width: 56ch; text-wrap: pretty; }
  .light .lede { color: var(--gris); }

  .dark { color: var(--marfil); }
  .dark-2 { color: var(--marfil); }
  .light { background: var(--marfil); color: var(--tinta); }
  .pad { padding-block: clamp(80px, 10vw, 148px); }
  .cabeza { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: clamp(40px, 5vw, 64px); flex-wrap: wrap; }
  .cabeza .display { margin-top: 18px; }

  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    min-height: 54px; padding: 0 32px; border: 1px solid var(--oro); color: var(--oro-2);
    font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
    transition: background 0.35s, color 0.35s, border-color 0.35s;
  }
  .btn:hover { background: var(--oro); color: var(--noir); }
  .btn.solid { background: var(--oro); color: var(--noir); }
  .btn.solid:hover { background: var(--oro-2); border-color: var(--oro-2); }
  .light .btn { border-color: var(--tinta); color: var(--tinta); }
  .light .btn:hover { background: var(--tinta); color: var(--marfil); }
  .light .btn.solid { background: var(--tinta); color: var(--marfil); }
  .light .btn.solid:hover { background: var(--burdeos); border-color: var(--burdeos); }
  .enlace { display: inline-block; font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 5px; }
  .dark .enlace, .dark-2 .enlace { color: var(--oro-2); }

  /* ---------- barra superior ---------- */
  .strip { background: rgba(0,0,0,0.45); color: var(--sal); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; }
  .strip .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 40px; }
  .strip a { color: var(--oro-2); }
  @media (max-width: 560px) { .strip .largo { display: none; } }
  @media (max-width: 860px) { .strip .der { display: none; } .strip .wrap { justify-content: center; text-align: center; font-size: 10.5px; } }

  /* ---------- cabecera ---------- */
  .hd { position: sticky; top: 0; z-index: 40; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  .hd .hd-fila { display: flex; align-items: center; justify-content: space-between; height: clamp(96px, 9.5vw, 128px); }
  .hd-menu { border-top: 1px solid var(--linea-osc); }
  .hd-menu .wrap { display: flex; align-items: center; justify-content: center; height: clamp(52px, 4.4vw, 62px); }
  /* el logo va dentro de una placa: doble filete dorado, bisel y sombra */
  .logo { position: relative; align-self: center; flex: none;
      display: inline-flex; align-items: center; justify-content: center;
      padding: 15px 22px; border: 1px solid rgba(184,149,94,0.4); border-radius: 2px;
      background: linear-gradient(155deg, rgba(214,189,140,0.11) 0%, rgba(0,0,0,0.32) 52%, rgba(0,0,0,0.5) 100%);
      box-shadow: 0 12px 26px rgba(0,0,0,0.6), inset 0 1px 0 rgba(214,189,140,0.24), inset 0 -1px 0 rgba(0,0,0,0.7);
      font-family: var(--display); line-height: 1; color: var(--marfil); }
  .logo::after { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(184,149,94,0.17); border-radius: 1px; pointer-events: none; }
  .logo img { display: block; height: clamp(38px, 3.6vw, 50px); width: auto; }
  .logo-movil { padding: 8px 12px; }
  .logo-movil img { height: 26px; }
  .logo-pie { flex-direction: column; padding: 14px 20px 12px; }
  .logo-pie img { height: 40px; }
  .logo small { display: block; font-family: var(--texto); font-size: 9px; letter-spacing: 0.46em; text-transform: uppercase; color: var(--oro); margin-top: 7px; }
  .nav { display: flex; gap: clamp(28px, 3.2vw, 52px); }
  .nav > * { display: flex; align-items: center; }
  .nav a, .nav button { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sal); position: relative; height: 100%; display: flex; align-items: center; gap: 8px; transition: color 0.25s; }
  .nav a:hover, .nav button:hover, .nav .activo { color: var(--oro-2); }
  .nav .activo::after { content: ""; position: absolute; left: 0; right: 0; top: calc(100% + 8px); bottom: auto; height: 1px; background: var(--oro); }
  .acciones { display: flex; justify-content: flex-end; align-items: center; gap: 14px; }
  .icono { width: 44px; height: 44px; display: grid; place-items: center; color: var(--sal); position: relative; transition: color 0.25s; }
  .icono:hover { color: var(--oro-2); }
  .contador { position: absolute; top: 5px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--oro); color: var(--noir); font-size: 10.5px; font-weight: 600; display: grid; place-items: center; line-height: 1; }
  .contador:empty { display: none; }
  .acciones .btn { min-height: 44px; padding: 0 20px; font-size: 11px; }
  .hamb { display: none; }
  @media (max-width: 1100px) {
    .nav { display: none; }
    .hamb { display: grid; }
    .hd-menu { display: none; }
    .hd .hd-fila { height: 76px; }
    .logo { padding: 8px 12px; }
    .logo img { height: 28px; }
    .logo small { display: none; }
    .acciones .btn { display: none; }
  }

  /* ---------- menú colección ---------- */
  .mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--noir-2); border-bottom: 1px solid var(--linea-osc); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.25s, transform 0.25s, visibility 0.25s; }
  .con-mega:hover .mega, .con-mega:focus-within .mega, .mega.abierto { opacity: 1; visibility: visible; transform: none; }
  /* al entrar en una familia el panel se retira, aunque el raton siga encima;
     vuelve a responder al hover en cuanto el raton sale de la zona */
  .con-mega.quieto:hover .mega { opacity: 0; visibility: hidden; transform: translateY(-6px); }
  .mega .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 28px; height: auto; padding-block: 36px 40px; }
  .mega-item { display: flex; gap: 16px; align-items: center; padding: 8px 0; }
  .mega-item .mini { width: 64px; height: 64px; flex: 0 0 64px; overflow: hidden; position: relative; background: var(--noir-3); }
  .mega-item .mini img { width: 100%; height: 100%; object-fit: cover; }
  .mega-item b { display: block; font-family: var(--display); font-weight: 400; font-size: 19px; color: var(--marfil); line-height: 1.2; }
  .mega-item span { font-size: 12.5px; color: var(--gris-osc); line-height: 1.45; }
  .mega-item:hover b { color: var(--oro-2); }
  .mega-todo { grid-column: 1 / -1; border-top: 1px solid var(--linea-osc); padding-top: 22px; margin-top: 8px; }

  /* ---------- menú móvil ---------- */
  .movil { position: fixed; inset: 0; z-index: 60; background: var(--noir); overflow-y: auto; transform: translateX(100%); transition: transform 0.4s cubic-bezier(.2,.7,.2,1); }
  .movil.abierto { transform: none; }
  .movil-top { display: flex; justify-content: space-between; align-items: center; height: 72px; padding-inline: 20px; border-bottom: 1px solid var(--linea-osc); }
  .movil nav { padding: 18px 20px 120px; }
  .movil nav > a, .movil summary { display: flex; justify-content: space-between; align-items: center; font-family: var(--display); font-size: 30px; padding: 16px 0; border-bottom: 1px solid var(--linea-osc); cursor: pointer; list-style: none; }
  .movil summary::-webkit-details-marker { display: none; }
  .movil details[open] summary svg { transform: rotate(45deg); }
  .movil details a { display: block; padding: 11px 0 11px 4px; font-size: 15px; letter-spacing: 0.06em; color: var(--sal); }
  .movil details div { padding: 8px 0 14px; border-bottom: 1px solid var(--linea-osc); }
  .movil .movil-tel { margin-top: 34px; color: var(--gris-osc); font-size: 14px; }
  .movil .movil-tel a { color: var(--oro-2); display: block; font-size: 20px; margin-top: 6px; }

  /* ---------- foto pendiente ---------- */
  .pendiente { position: absolute; inset: 0; display: grid; place-items: center; background: #000000; overflow: hidden; }
  .pendiente::before { content: ""; position: absolute; inset: 14px; border: 1px solid var(--linea-osc); }
  .pendiente .ini { font-family: var(--display); font-size: clamp(90px, 10vw, 180px); line-height: 1; color: rgba(214, 189, 140, 0.13); }
  .pendiente .nota { position: absolute; left: 0; right: 0; bottom: 26px; text-align: center; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(233, 210, 198, 0.45); }
  .pendiente.arriba .nota { top: 30px; bottom: auto; }

  /* ---------- portada ---------- */
  .portada { position: relative; overflow: hidden; background-color: #000;
      min-height: clamp(700px, 92vh, 980px); display: flex; flex-direction: column; justify-content: center;
      padding-block: clamp(130px, 15vh, 180px) clamp(120px, 14vh, 170px); }

  .estanteria { position: absolute; inset: 0; pointer-events: none; }
  .suelto { position: absolute; }
  .suelto img { width: 100%; height: 100%; object-fit: contain; display: block;  }
  @keyframes flotar { from { transform: translateY(-9px); } to { transform: translateY(11px); } }
  .s1 { left: -3%; top: 5%; width: clamp(280px, 32vw, 520px); aspect-ratio: 16 / 9; --dur: 13s; }
  .s2 { right: 0%; top: 3%; width: clamp(200px, 22vw, 360px); aspect-ratio: 16 / 9; --dur: 11s; --del: -3s; }
  .s3 { left: 3%; bottom: 5%; width: clamp(200px, 22vw, 350px); aspect-ratio: 16 / 9; --dur: 12s; --del: -6s; }
  .s4 { right: -1%; bottom: 6%; width: clamp(210px, 23vw, 370px); aspect-ratio: 16 / 9; --dur: 14s; --del: -2s; }
  .s5 { left: 25%; bottom: 1%; width: clamp(150px, 17vw, 270px); aspect-ratio: 16 / 9; --dur: 10s; --del: -5s; }
  .s6 { right: 22%; top: -3%; width: clamp(160px, 18vw, 285px); aspect-ratio: 16 / 9; --dur: 12s; --del: -8s; }
  .s7 { right: 7%; top: 28%; width: clamp(96px, 10vw, 160px); aspect-ratio: 0.355; --dur: 15s; --del: -4s; }

  .portada-centro { position: relative; z-index: 3; text-align: center; display: flex; flex-direction: column; align-items: center; }
  .portada-centro .display { margin: 26px 0 26px; max-width: 15ch; text-shadow: 0 6px 30px rgba(0,0,0,0.85); }
  .portada-centro .lede { max-width: 50ch; text-shadow: 0 3px 18px rgba(0,0,0,0.9); }
  .portada-centro .botones { display: flex; align-items: center; justify-content: center; gap: 32px; margin-top: 42px; flex-wrap: wrap; }
  .tira-sellos { padding-block: 26px; }
  .sellos { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 48px; }
  .sellos li { font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sal); display: flex; align-items: center; gap: 12px; }
  .sellos li::before { content: ""; width: 5px; height: 5px; background: var(--oro); transform: rotate(45deg); }

  @media (max-width: 900px) {
    .portada { min-height: 0; padding-block: 90px 60px; }
    .s5, .s6, .s7 { display: none; }
    .s1 { left: -8%; top: 2%; width: 62vw; }
    .s2 { right: -6%; top: 10%; width: 48vw; }
    .s3 { left: -6%; bottom: 1%; width: 52vw; }
    .s4 { right: -8%; bottom: 7%; width: 54vw; }
    .portada-centro { padding-block: 210px 190px; }
    .portada-centro .display { max-width: 12ch; }
    .sellos { flex-direction: column; align-items: center; gap: 12px; }
  }

  .intro { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(40px, 7vw, 120px); align-items: end; }
  .intro .lede { margin-bottom: 30px; }
  @media (max-width: 900px) { .intro { grid-template-columns: 1fr; } }

  .cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(230px, 21vw, 320px); gap: 14px; }
  .cat { position: relative; overflow: hidden; background: var(--noir-2); display: flex; align-items: flex-end; }
  .cat.grande { grid-column: span 2; grid-row: span 2; }
  .cat.ancha { grid-column: span 2; }
  .cat > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
  .cat:hover > img { transform: scale(1.05); }
  /* los recortes necesitan sitio libre abajo para el titulo.
     alto y ancho explicitos: en una imagen absoluta, width:auto usa el ancho
     nativo y se salta el margen derecho; y el padding en % se calcula sobre
     el ancho tambien en vertical, que aplastaba las tarjetas anchas. */
  .cat > img[style*="contain"] { left: 8%; width: 84%; right: auto; top: 8%; height: 52%; bottom: auto; }
  .cat.grande > img[style*="contain"] { left: 9%; width: 82%; top: 7%; height: 65%; }
  .cat.ancha > img[style*="contain"] { left: 23%; width: 54%; top: 9%; height: 58%; }
  /* entre 860 y 1100 px las tarjetas se estrechan y el titulo pasa a dos lineas */
  @media (max-width: 1100px) {
    .cat > img[style*="contain"] { top: 6%; height: 42%; }
    .cat.grande > img[style*="contain"] { height: 56%; }
    .cat.ancha > img[style*="contain"] { left: 20%; width: 60%; height: 50%; }
    .cat:not(.grande):not(.ancha) .lema { display: none; }
  }
  .cat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.25) 55%, rgba(0,0,0,0) 100%); pointer-events: none; }
  .cat .txt { position: relative; z-index: 2; padding: clamp(22px, 2.4vw, 34px); width: 100%; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
  .cat .nombre { font-family: var(--display); font-size: clamp(24px, 2.2vw, 34px); line-height: 1.1; color: var(--marfil); }
  .cat.grande .nombre { font-size: clamp(32px, 3.4vw, 52px); }
  .cat .lema { display: block; font-size: 13px; color: var(--sal); margin-top: 8px; font-weight: 300; }
  .cat .flecha { flex: 0 0 auto; width: 44px; height: 44px; border: 1px solid rgba(214,189,140,0.45); display: grid; place-items: center; color: var(--oro-2); transition: background 0.3s, color 0.3s; }
  .cat:hover .flecha { background: var(--oro); color: var(--noir); }
  @media (max-width: 860px) {
    .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 220px; }
    .cat.grande { grid-row: span 1; }
    .cat.ancha { grid-column: span 1; }
    .cat.ancha > img[style*="contain"] { left: 8%; width: 84%; top: 8%; height: 52%; }
    .cat .flecha { display: none; }
    .cat .lema { display: none; }
  }

  /* ---------- tarjetas de producto ---------- */
  .productos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(40px, 4vw, 64px) clamp(18px, 2.2vw, 32px); }
  @media (max-width: 1000px) { .productos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .prod { display: flex; flex-direction: column; min-width: 0; }
  .prod .foto { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--noir-2); }
  .prod .foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
  .prod:hover .foto img { transform: scale(1.045); }
  .prod .meta { padding-top: 20px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
  .prod .origen { font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--oro); }
  .light .prod .origen { color: #b8955e; }
  .prod .nombre { font-family: var(--display); font-size: clamp(20px, 1.75vw, 27px); line-height: 1.16; }
  .prod .pie { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--linea); }
  .dark .prod .pie, .dark-2 .prod .pie { border-color: var(--linea-osc); }
  .prod .cat-nom { font-size: 13px; color: var(--gris); }
  .dark .prod .cat-nom, .dark-2 .prod .cat-nom { color: var(--gris-osc); }
  .prod .precio { font-size: 16px; font-weight: 500; letter-spacing: 0.02em; }
  .prod .precio small { display: block; font-size: 12px; font-weight: 400; color: var(--gris); letter-spacing: 0; }
  .prod .mini-btn { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; border-bottom: 1px solid currentColor; }
  .prod .mini-btn.caja { border: 1px solid currentColor; padding: 0 16px; }
  .prod .mini-btn:hover { color: var(--burdeos); }
  .dark .prod .mini-btn:hover, .dark-2 .prod .mini-btn:hover { color: var(--oro-2); }
  @media (max-width: 560px) {
    .productos { gap: 36px 14px; }
    .prod .nombre { font-size: 18px; }
    .prod .cat-nom { display: none; }
    .prod .pie { flex-direction: column; align-items: flex-start; gap: 4px; }
  }
  .dark .prod .meta, .dark-2 .prod .meta { color: var(--marfil); }

  /* ---------- temporada (portada) ---------- */
  .temp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
  .temp .foto-alta { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
  /* ---------- seccion con textura de mesa y adorno al margen ---------- */
  .sec-mesa { position: relative; overflow: hidden; }
  .sec-mesa::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
      background-image: url("../img/fondo-mesa.webp"); background-size: cover; background-position: center;
      opacity: 0.32;
      -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 20%, #000 80%, rgba(0,0,0,0) 100%);
      mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 20%, #000 80%, rgba(0,0,0,0) 100%); }
  .sec-mesa::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
      background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.42) 50%, rgba(0,0,0,0.6) 100%); }
  .sec-mesa > .wrap { position: relative; z-index: 3; }
  .ador { position: absolute; z-index: 2; margin: 0; pointer-events: none; }
  .ador img { width: 100%; display: block; }
  .ador-romero { right: -66px; top: -10px; width: clamp(230px, 23vw, 340px); transform: rotate(10deg); opacity: 0.9; }
  .ador-paquete { left: 4px; top: clamp(10px, 1.2vw, 22px); width: clamp(190px, 19vw, 285px); transform: rotate(-5deg); opacity: 0.95; }
  @media (max-width: 1150px) { .ador { display: none; } }

  /* ---------- carta de la fundadora ---------- */
  .carta-firma { max-width: 66ch; margin-inline: auto; text-align: left; }
  .carta-firma > p { font-size: clamp(16px, 1.15vw, 18px); line-height: 1.85; font-weight: 300; color: var(--gris); margin: 0 0 22px; }
  .carta-firma > p:last-of-type { margin-bottom: 30px; }

  /* ---------- la carta completa ---------- */
  .carta-zona { padding-block: clamp(70px, 8vw, 116px) clamp(80px, 9vw, 130px); }
  .carta-cabeza { max-width: 62ch; margin-bottom: clamp(44px, 5vw, 66px); }
  .carta-cabeza .display { margin: 20px 0 20px; }
  .carta-grupo + .carta-grupo { margin-top: clamp(40px, 4.5vw, 62px); }
  .carta-grupo h3 { margin: 0 0 20px; font-family: var(--texto); font-size: 11px; font-weight: 500;
      letter-spacing: 0.26em; text-transform: uppercase; color: var(--oro); }
  .carta-grupo ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: clamp(40px, 5vw, 80px); }
  .carta-grupo li { break-inside: avoid; padding: 13px 0; border-bottom: 1px solid var(--linea-osc); }
  .carta-grupo li b { display: block; font-weight: 400; font-size: 15.5px; color: var(--marfil); }
  .carta-grupo li span { display: block; margin-top: 5px; font-size: 12.5px; line-height: 1.6; color: #8a7a72; }
  @media (max-width: 820px) { .carta-grupo ul { columns: 1; } }

  /* ---------- rueda de temporada ---------- */
  .rueda { position: relative; width: 100%; aspect-ratio: 1 / 1; }
  .rd-svg { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; }
  .rueda::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
      width: 66%; aspect-ratio: 1 / 1; border-radius: 50%; pointer-events: none;
      background: radial-gradient(circle, rgba(184,149,94,0.13) 0%, rgba(184,149,94,0.05) 52%, rgba(184,149,94,0) 72%); }
  .rd-centro { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; width: 42%; }
  .rd-mes { font-family: var(--titulo); font-size: clamp(24px, 3vw, 40px); line-height: 1.1; color: var(--oro); margin-top: 10px; }
  .rd-grupo { position: absolute; z-index: 3; }
  .rd-grupo .rd-est { margin: 0 0 10px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #6f625d; }
  .rd-grupo ul { list-style: none; margin: 0; padding: 0; }
  .rd-grupo li { font-size: 12.5px; line-height: 1.65; color: #6f625d; }
  .rd-hoy .rd-est { color: var(--oro); }
  .rd-hoy li { font-size: 15.5px; line-height: 1.6; color: var(--marfil); }
  .rd-ai { top: 4%;    left: 0;  text-align: left;  max-width: 27%; }
  .rd-ad { top: 4%;    right: 0; text-align: right; max-width: 27%; }
  .rd-bd { bottom: 4%; right: 0; text-align: right; max-width: 27%; }
  .rd-bi { bottom: 4%; left: 0;  text-align: left;  max-width: 27%; }
  /* el tenedor va entero por delante del aro, con sombra propia */
  .rd-ten { position: absolute; z-index: 2; pointer-events: none;
      left: 50%; top: 49%; width: 34%; transform: translateX(-18.7%);
      filter: drop-shadow(-5px 14px 22px rgba(0,0,0,0.92)); }
  .rd-plato { position: absolute; z-index: 1; pointer-events: none;
      left: 50%; bottom: -8%; width: 64%; transform: translateX(-50%); }
  @media (max-width: 1100px) {
    .rd-grupo li { font-size: 11.5px; }
    .rd-hoy li { font-size: 13.5px; }
    .rd-grupo .rd-est { font-size: 10px; }
  }
  @media (max-width: 900px) {
    /* mas alto que ancho: el circulo se queda del ancho de la pantalla y
       sobra sitio arriba y abajo para los grupos, que si no pisan el aro */
    .rd-derecha, .rd-izquierda { max-width: 27%; }
    .rd-grupo li { font-size: 11px; line-height: 1.55; }
    .rd-hoy li { font-size: 13px; }
    .rd-mes { font-size: 26px; }
    .rd-centro { top: 43%; }
    .rd-plato { width: 58%; bottom: -19%; }
  }

  .lista-temp { margin: 34px 0 40px; border-top: 1px solid var(--linea-osc); }
  .lista-temp li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--linea-osc); }
  .lista-temp .n { font-family: var(--display); font-size: clamp(21px, 1.9vw, 27px); }
  .etiqueta { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--oro-2); border: 1px solid rgba(214,189,140,0.4); padding: 6px 10px; white-space: nowrap; }
  .light .etiqueta { color: var(--burdeos); border-color: rgba(92,27,36,0.35); }
  @media (max-width: 900px) { .temp { grid-template-columns: 1fr; } .temp .foto-alta { aspect-ratio: 16 / 11; order: -1; } }

  /* ---------- proceso ---------- */
  .pasos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px); }
  .paso { padding-top: 26px; border-top: 1px solid var(--linea); }
  .dark .paso, .dark-2 .paso { border-color: var(--linea-osc); }
  .paso .num { font-family: var(--display); font-size: 46px; line-height: 1; color: var(--oro); }
  .light .paso .num { color: #b8955e; }
  .paso h3 { font-family: var(--display); font-weight: 400; font-size: 25px; margin: 22px 0 12px; }
  .paso p { font-size: 15px; line-height: 1.7; color: var(--gris); font-weight: 300; }
  .dark .paso p, .dark-2 .paso p { color: var(--gris-osc); }
  @media (max-width: 900px) { .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 560px) { .pasos { grid-template-columns: 1fr; } }

  /* ---------- bloques partidos ---------- */
  .partido { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 640px; }
  .partido .foto-lado { position: relative; min-height: 420px; overflow: hidden; }
  .partido .foto-lado > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .partido .texto-lado { padding: clamp(56px, 8vw, 120px) clamp(28px, 6vw, 96px); display: flex; flex-direction: column; justify-content: center; }
  .partido .texto-lado .display { margin: 20px 0 22px; }
  .ocasiones { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 42px; }
  .ocasiones li { font-size: 13px; letter-spacing: 0.08em; padding: 10px 16px; border: 1px solid var(--linea-osc); color: var(--sal); }
  @media (max-width: 900px) { .partido { grid-template-columns: 1fr; } }

  .duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .duo > div { padding: clamp(36px, 4.4vw, 64px); display: flex; flex-direction: column; }
  .duo .claro { background: #000000; border: 1px solid var(--linea); }
  .duo .oscuro { background: var(--noir); color: var(--marfil); }
  .duo .display { margin: 18px 0 16px; font-size: clamp(28px, 2.8vw, 40px); }
  .duo p.txt { font-size: 16px; line-height: 1.75; font-weight: 300; color: var(--gris); margin-bottom: 34px; max-width: 46ch; }
  .duo .oscuro p.txt { color: var(--gris-osc); }
  .duo .abajo { margin-top: auto; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
  .tel-grande { font-family: var(--display); font-size: clamp(26px, 2.6vw, 36px); color: var(--oro-2); }
  @media (max-width: 860px) { .duo { grid-template-columns: 1fr; } }


  /* ---------- pie ---------- */
  .pie-web { color: var(--gris-osc); font-size: 14px; }
  .pie-web .rejilla { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 40px; padding-block: 88px 64px; }
  .pie-web .logo { display: inline-block; margin-bottom: 22px; }
  .pie-web .logo small { margin-top: 12px; }
  .pie-web h4 { margin: 0 0 20px; font-size: 11px; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--oro); }
  .pie-web li { margin-bottom: 11px; }
  .pie-web a:hover { color: var(--oro-2); }
  .pie-web .legal { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-block: 26px 90px; border-top: 1px solid var(--linea-osc); font-size: 12px; color: #7d6e69; }
  @media (max-width: 900px) { .pie-web .rejilla { grid-template-columns: 1fr 1fr; } .pie-web .rejilla > :first-child { grid-column: 1 / -1; } }

  /* ---------- cabecera de sección ---------- */
  .cabecera::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
      background-image: var(--fondo, url("../img/fondo-coleccion.webp")); background-size: cover; background-position: center;
      -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 66%, rgba(0,0,0,0) 100%);
      mask-image: linear-gradient(180deg, #000 0%, #000 66%, rgba(0,0,0,0) 100%); }
  .cab-temporada { --fondo: url("../img/fondo-temporada.webp"); }
  /* la cabecera de temporada cambia de foto con la estacion.
     la segunda url es la de reserva: si la foto de esa estacion aun no existe, se ve esta. */
  /* cuando haya foto propia de la estacion se añade delante: url("../img/fondo-temporada-invierno.webp"), */
  .est-invierno  { --fondo: url("../img/fondo-temporada.webp"); }
  .est-primavera { --fondo: url("../img/fondo-temporada.webp"); }
  .est-verano    { --fondo: url("../img/fondo-temporada.webp"); }
  .est-otono     { --fondo: url("../img/fondo-temporada-otono.webp"),     url("../img/fondo-temporada.webp"); }
  .cab-contacto { --fondo: url("../img/fondo-contacto.webp"); }
  .cab-casa { --fondo: url("../img/fondo-chef.webp"); }

  /* fondo fotografico dentro de una seccion normal */
  .sec-fondo { position: relative; overflow: hidden; }
  .sec-fondo::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
      background-image: var(--fondo); background-size: cover; background-position: center;
      opacity: 0.78;
      -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 14%, #000 80%, rgba(0,0,0,0) 100%);
      mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 14%, #000 80%, rgba(0,0,0,0) 100%); }
  .sec-fondo::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
      background: linear-gradient(90deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.36) 46%, rgba(0,0,0,0.2) 100%); }
  .sec-fondo > .wrap { position: relative; z-index: 2; }
  .casa-intro { --fondo: url("../img/fondo-casa.webp"); }
  /* la seccion de temporada: misma foto de la estacion, mas apagada,
     y el centro oscurecido bajo la rueda para que se lea */
  /* la seccion de la rueda: el bosque de la estacion, muy desenfocado y oscuro,
     con una luz calida encima. si la foto de esa estacion no existe, queda solo la luz. */
  .temp-luz { position: relative; overflow: hidden; }
  .temp-luz::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
      background-image: url("../img/fondo-mesa.webp"); background-size: cover; background-position: center;
      opacity: 0.5;
      -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 16%, #000 80%, rgba(0,0,0,0) 100%);
      mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 16%, #000 80%, rgba(0,0,0,0) 100%); }
  .temp-luz::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
      background:
        radial-gradient(52% 68% at 74% 50%, rgba(146,98,52,0.20) 0%, rgba(108,72,40,0.08) 48%, rgba(0,0,0,0) 76%),
        radial-gradient(42% 56% at 74% 50%, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.45) 58%, rgba(0,0,0,0) 100%),
        linear-gradient(90deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.6) 38%, rgba(0,0,0,0.4) 64%, rgba(0,0,0,0.3) 100%); }
  .temp-luz > .wrap { position: relative; z-index: 2; text-shadow: 0 2px 15px rgba(0,0,0,0.92); }
  @media (max-width: 900px) {
    /* en pantalla estrecha el aro se come el bosque: mas velo y menos foto */
    .temp-luz::after { opacity: 0.36; }
    .temp-luz::before { background:
        radial-gradient(70% 36% at 50% 72%, rgba(146,98,52,0.18) 0%, rgba(108,72,40,0.07) 50%, rgba(0,0,0,0) 80%),
        radial-gradient(62% 26% at 50% 72%, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 60%, rgba(0,0,0,0) 100%),
        linear-gradient(180deg, rgba(0,0,0,0.76) 0%, rgba(0,0,0,0.68) 46%, rgba(0,0,0,0.78) 100%); }
  }
  @media (max-width: 900px) {
    .sec-fondo::before { background-position: 12% center; }
    .sec-fondo::after { background: linear-gradient(180deg, rgba(0,0,0,0.52) 0%, rgba(0,0,0,0.6) 100%); }
  }
  .cabecera { position: relative; overflow: hidden; background: var(--noir); }
  .cabecera > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.42; }
  .cabecera::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,0.74) 0%, rgba(0,0,0,0.46) 46%, rgba(0,0,0,0.18) 100%); }
  .cabecera .wrap { position: relative; z-index: 2; padding-block: clamp(64px, 8vw, 118px); }
  .cabecera .display { margin: 20px 0 20px; }
  .cabecera .display, .cabecera .lede, .cabecera .migas, .cabecera .eyebrow { text-shadow: 0 2px 16px rgba(0,0,0,0.85); }
  @media (max-width: 900px) {
    .cabecera::before { background-position: 62% center; }
    .cab-casa::before { background-position: 84% 62%; }
    .cabecera::after { background: linear-gradient(180deg, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.58) 55%, rgba(0,0,0,0.76) 100%); }
  }
  .migas { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gris-osc); }
  .light .migas { color: var(--gris); }
  .migas a:hover { color: var(--oro-2); }
  .light .migas a:hover { color: var(--burdeos); }

  .chips { display: flex; flex-wrap: wrap; gap: 10px; padding: 36px 0 6px; scrollbar-width: none; }
  @media (max-width: 760px) { .chips { flex-wrap: nowrap; overflow-x: auto; } }
  .chips::-webkit-scrollbar { display: none; }
  .chips a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; border: 1px solid var(--linea); font-size: 13px; letter-spacing: 0.04em; transition: border-color 0.25s; }
  .chips a:hover { border-color: var(--tinta); }
  .chips a span { font-size: 11px; color: var(--gris); }
  .chips a.sel { background: var(--tinta); color: var(--marfil); border-color: var(--tinta); }
  .chips a.sel span { color: var(--sal); }
  .barra { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0 40px; font-size: 13px; color: var(--gris); }
  .barra select { background: transparent; border: 1px solid var(--linea); padding: 10px 14px; min-height: 44px; margin-left: 10px; color: var(--tinta); }

  /* ---------- ficha ---------- */
  .ficha-sec { padding-block: 36px clamp(80px, 9vw, 130px); }
  .ficha { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(36px, 5.5vw, 96px); align-items: start; margin-top: 34px; }
  .galeria .principal { position: relative; aspect-ratio: 5 / 4; overflow: hidden; background: var(--noir-2); }
  .galeria .principal img { width: 100%; height: 100%; object-fit: cover; transition: object-position 0.6s ease; }
  .miniaturas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
  .miniaturas button { aspect-ratio: 1; overflow: hidden; border: 1px solid transparent; opacity: 0.72; transition: opacity 0.25s, border-color 0.25s; }
  .miniaturas button img { width: 100%; height: 100%; object-fit: cover; }
  .miniaturas button.sel, .miniaturas button:hover { opacity: 1; border-color: var(--tinta); }
  .info { position: sticky; top: 124px; }
  .info .display { margin: 18px 0 22px; }
  .precio-grande { font-family: var(--display); font-size: 36px; margin-top: 30px; }
  .precio-grande small { font-family: var(--texto); font-size: 13px; color: var(--gris); margin-left: 10px; }
  .bloque { margin-top: 32px; }
  .etq { display: block; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gris); margin-bottom: 12px; }
  .formatos { display: flex; flex-wrap: wrap; gap: 10px; }
  .formatos button { min-height: 48px; padding: 0 20px; border: 1px solid var(--linea); font-size: 14px; transition: border-color 0.25s; }
  .formatos button:hover { border-color: var(--tinta); }
  .formatos button.sel { background: var(--tinta); color: var(--marfil); border-color: var(--tinta); }
  .cta { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
  .cta .btn { flex: 1 1 260px; }
  .cta .nota { flex-basis: 100%; font-size: 14px; color: var(--gris); }
  .cta .nota a { color: var(--tinta); border-bottom: 1px solid currentColor; }
  .cantidad { display: flex; align-items: center; border: 1px solid var(--linea); min-height: 54px; }
  .cantidad button { width: 48px; height: 52px; font-size: 20px; }
  .cantidad span { width: 34px; text-align: center; font-weight: 500; }
  .garantias { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 38px; padding-block: 24px; border-block: 1px solid var(--linea); }
  .garantias div { display: flex; flex-direction: column; gap: 10px; font-size: 13px; line-height: 1.45; color: var(--gris); }
  .garantias svg { color: #b8955e; }
  .acordeon { margin-top: 12px; }
  .acordeon details { border-bottom: 1px solid var(--linea); }
  .acordeon summary { display: flex; justify-content: space-between; align-items: center; min-height: 64px; cursor: pointer; list-style: none; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; }
  .acordeon summary::-webkit-details-marker { display: none; }
  .acordeon summary svg { transition: transform 0.3s; }
  .acordeon details[open] summary svg { transform: rotate(45deg); }
  .acordeon p { padding-bottom: 24px; font-size: 15.5px; line-height: 1.8; font-weight: 300; color: #4d4244; max-width: 58ch; }
  .acordeon dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 28px; padding-bottom: 24px; margin: 0; font-size: 15px; }
  .acordeon dt { color: var(--gris); }
  .acordeon dd { margin: 0; }
  @media (max-width: 900px) { .ficha { grid-template-columns: 1fr; } .info { position: static; } }
  @media (max-width: 560px) { .garantias { grid-template-columns: 1fr; } .garantias div { flex-direction: row; align-items: center; } }

  .maridaje .productos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  @media (max-width: 1000px) { .maridaje .productos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

  /* ---------- temporada (página) ---------- */
  .mes-grande { font-family: var(--display); font-size: clamp(48px, 7vw, 110px); line-height: 1; color: var(--oro-2); }
  .cab-temp { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px 60px; flex-wrap: wrap; }
  .cab-temp > div:first-child { flex: 1 1 560px; max-width: 860px; }
  .cab-temp .mes-bloque { text-align: right; }
  @media (max-width: 900px) { .cab-temp .mes-bloque { text-align: left; } }
  .ahora { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .ahora a, .ahora div.item { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 220px; padding: 30px; background: #000000; border: 1px solid var(--linea); transition: border-color 0.3s; }
  .ahora a:hover { border-color: var(--tinta); }
  .ahora .etiqueta { align-self: flex-start; }
  .ahora .n { font-family: var(--display); font-size: clamp(26px, 2.4vw, 34px); line-height: 1.12; }
  .ahora .m { font-size: 13px; color: var(--gris); }
  @media (max-width: 900px) { .ahora { grid-template-columns: 1fr; } .ahora a, .ahora div.item { min-height: 0; } }
  .cal { overflow-x: auto; margin-top: 20px; padding-bottom: 8px; }
  .cal-grid { min-width: 760px; display: grid; grid-template-columns: 240px repeat(12, minmax(0, 1fr)); gap: 5px; align-items: center; }
  .cal-mes { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; text-align: center; color: var(--gris); padding: 10px 0; }
  .cal-mes.hoy { color: var(--marfil); background: var(--tinta); }
  .cal-nombre { font-family: var(--display); font-size: 19px; padding-right: 18px; line-height: 1.2; }
  .cal-celda { height: 30px; background: var(--marfil-2); }
  .cal-celda.on { background: #b99a9a; }
  .cal-celda.hoy { outline: 1px solid var(--tinta); outline-offset: -1px; }
  .cal-celda.on.hoy { background: var(--oro); }
  .cal-leyenda { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 22px; font-size: 13px; color: var(--gris); }
  .cal-leyenda i { display: inline-block; width: 22px; height: 12px; margin-right: 9px; vertical-align: -1px; }
  .proximo { margin-top: 64px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding: 34px 38px; background: var(--noir); color: var(--marfil); }
  .proximo .display { font-size: clamp(24px, 2.4vw, 32px); margin-top: 10px; }
  .light .proximo .btn { border-color: var(--oro); color: var(--oro-2); background: transparent; }
  .light .proximo .btn:hover { background: var(--oro); color: var(--noir); }

  /* ---------- chef ---------- */
  .menu-ej { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 20px; }
  .carta { background: #000000; border: 1px solid var(--linea); padding: clamp(36px, 5vw, 72px); text-align: center; }
  .carta .display { font-size: clamp(34px, 3.4vw, 48px); margin: 16px 0 40px; }
  .carta .tiempo { margin-bottom: 30px; }
  .carta .tiempo span { display: block; font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: #b8955e; margin-bottom: 10px; }
  .carta .tiempo p { font-family: var(--display); font-size: clamp(19px, 1.7vw, 23px); line-height: 1.5; }
  .carta .filete { width: 60px; height: 1px; background: var(--oro); margin: 0 auto 30px; }
  .incluye { background: rgba(0,0,0,0.3); color: var(--marfil); padding: clamp(36px, 4vw, 56px); display: flex; flex-direction: column; gap: 34px; }
  .incluye h3 { font-size: 11px; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--oro); margin-bottom: 16px; }
  .incluye li { padding: 10px 0; border-bottom: 1px solid var(--linea-osc); font-size: 15px; color: var(--sal); font-weight: 300; }
  @media (max-width: 900px) { .menu-ej { grid-template-columns: 1fr; } }

  /* ---------- la casa ---------- */
  .origenes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--linea-osc); }
  .origenes li { padding: 26px 0; border-bottom: 1px solid var(--linea-osc); display: flex; flex-direction: column; gap: 6px; }
  .origenes li:not(:nth-child(3n+1)) { padding-left: 28px; border-left: 1px solid var(--linea-osc); }
  .origenes b { font-family: var(--display); font-weight: 400; font-size: clamp(22px, 2vw, 28px); }
  .origenes span { font-size: 13px; color: var(--gris-osc); }
  @media (max-width: 760px) { .origenes { grid-template-columns: 1fr; } .origenes li:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; } }

  /* ---------- contacto ---------- */
  .contacto { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
  .form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 24px; }
  .form .ancho { grid-column: 1 / -1; }
  .form label { display: block; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gris); margin-bottom: 8px; }
  .form input, .form select, .form textarea { width: 100%; background: transparent; border: 0; border-bottom: 1px solid #cdbdb4; padding: 12px 0; font-size: 16px; color: var(--tinta); outline: none; border-radius: 0; }
  .form input:focus, .form select:focus, .form textarea:focus { border-color: var(--tinta); }
  .form textarea { min-height: 120px; resize: vertical; }
  .form .check { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; color: var(--gris); text-transform: none; letter-spacing: 0; }
  .form .check input { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--burdeos); }
  .lateral { background: var(--noir); color: var(--marfil); padding: clamp(32px, 4vw, 52px); }
  .lateral .bloque-l { padding-block: 22px; border-bottom: 1px solid var(--linea-osc); }
  .lateral .bloque-l:last-child { border-bottom: 0; padding-bottom: 0; }
  .lateral p { font-size: 15px; color: var(--gris-osc); font-weight: 300; margin-top: 8px; }
  .gracias { grid-column: 1 / -1; padding: 48px; background: #000000; border: 1px solid var(--linea); }
  .gracias .display { font-size: clamp(30px, 3vw, 42px); margin: 14px 0 12px; }
  @media (max-width: 900px) { .contacto { grid-template-columns: 1fr; } }
  @media (max-width: 560px) { .form { grid-template-columns: 1fr; } }

  /* ---------- cesta, buscador y avisos ---------- */
  .velo { position: fixed; inset: 0; z-index: 65; background: rgba(0, 0, 0, 0.62); opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; }
  .velo.abierto { opacity: 1; visibility: visible; }
  .cesta { position: fixed; top: 0; right: 0; bottom: 0; z-index: 70; width: min(440px, 100%); background: var(--marfil); color: var(--tinta); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.4s cubic-bezier(.2,.7,.2,1); }
  .cesta.abierto { transform: none; }
  .cesta-top { display: flex; justify-content: space-between; align-items: center; padding: 26px 28px; border-bottom: 1px solid var(--linea); }
  .cesta-lista { flex: 1; overflow-y: auto; padding: 8px 28px; }
  .linea-c { display: grid; grid-template-columns: 72px 1fr auto; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--linea); align-items: center; }
  .linea-c .mini { width: 72px; height: 88px; position: relative; overflow: hidden; background: var(--noir-2); }
  .linea-c .mini img { width: 100%; height: 100%; object-fit: cover; }
  .linea-c .mini .pendiente .ini { font-size: 34px; }
  .linea-c .mini .pendiente .nota, .linea-c .mini .pendiente::before { display: none; }
  .linea-c b { display: block; font-family: var(--display); font-weight: 400; font-size: 18px; line-height: 1.2; }
  .linea-c small { display: block; color: var(--gris); font-size: 13px; margin-top: 4px; }
  .linea-c button { font-size: 12px; color: var(--gris); border-bottom: 1px solid currentColor; }
  .cesta-pie { padding: 24px 28px 30px; border-top: 1px solid var(--linea); }
  .cesta-pie .total { display: flex; justify-content: space-between; font-family: var(--display); font-size: 24px; margin-bottom: 8px; }
  .cesta-pie p { font-size: 13px; color: var(--gris); margin-bottom: 20px; }
  .cesta-pie .btn { width: 100%; }
  .vacia { padding: 60px 0; text-align: center; color: var(--gris); }

  .buscador { position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, 0.985); overflow-y: auto; }
  .buscador .wrap { padding-block: 34px 80px; }
  .busca-top { display: flex; justify-content: space-between; align-items: center; }
  .busca-campo { display: flex; align-items: center; gap: 18px; border-bottom: 1px solid var(--oro); margin-top: 60px; }
  .busca-campo input { flex: 1; min-width: 0; background: none; border: 0; outline: none; padding: 18px 0; font-family: var(--display); font-size: clamp(30px, 4vw, 54px); color: var(--marfil); }
  .busca-campo input::placeholder { color: rgba(233,210,198,0.3); }
  .resultados { margin-top: 30px; }
  .resultados a { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--linea-osc); }
  .resultados a:hover b { color: var(--oro-2); }
  .resultados b { font-family: var(--display); font-weight: 400; font-size: 24px; }
  .resultados span { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gris-osc); }

  .aviso { position: fixed; left: 50%; bottom: 84px; z-index: 95; transform: translate(-50%, 20px); background: var(--tinta); color: var(--marfil); padding: 14px 22px; font-size: 14px; opacity: 0; transition: opacity 0.3s, transform 0.3s; pointer-events: none; max-width: calc(100% - 40px); text-align: center; }
  .aviso.visible { opacity: 1; transform: translate(-50%, 0); }

  /* control del prototipo: deliberadamente fuera del diseño */
  .proto { position: fixed; left: 16px; bottom: 16px; z-index: 90; display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-radius: 999px; background: #ffffff; color: #262626; box-shadow: 0 10px 34px rgba(0, 0, 0, 0.38); font: 500 12px/1 system-ui, -apple-system, "Segoe UI", sans-serif; }
  .proto .seg { display: flex; background: #eeeeee; border-radius: 999px; padding: 3px; }
  .proto .seg button { font: inherit; padding: 9px 13px; border-radius: 999px; color: #555555; }
  .proto .seg button.sel { background: #262626; color: #ffffff; }
  .proto .ej { color: #8a8a8a; font-size: 11px; padding-right: 8px; }
  @media (max-width: 560px) { .proto { left: 50%; transform: translateX(-50%); bottom: 10px; } .proto .lbl { display: none; } }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  }

  /* ---------- tema oscuro en toda la web ---------- */
  .light, .dark, .dark-2, .portada, .tira-sellos, .pie-web, .cabecera { background-color: transparent; color: var(--marfil); }
  .light .lede, .light .prod .cat-nom, .light .barra, .light .migas, .light .paso p,
  .light .acordeon p, .light .acordeon dt, .light .ahora .m, .light .cal-mes, .light .cal-leyenda,
  .light .duo p.txt, .light .cta .nota, .light .form label, .light .form .check,
  .light .precio-grande small, .light .prod .precio small, .light .etq, .light .shot-cap { color: var(--gris-osc); }
  .light .btn { border-color: var(--oro); color: var(--oro-2); background: transparent; }
  .light .btn:hover { background: var(--oro); color: var(--noir); }
  .light .btn.solid { background: var(--oro); color: var(--noir); border-color: var(--oro); }
  .light .btn.solid:hover { background: var(--oro-2); border-color: var(--oro-2); }
  .light .prod .origen, .light .paso .num, .light .etiqueta, .light .migas a:hover { color: var(--oro); }
  .light .etiqueta { border-color: rgba(214,189,140,0.4); }
  .light .enlace { color: var(--oro-2); }
  .light .prod .mini-btn:hover, .light .tel-grande, .light .cta .nota a,
  .light .acordeon dd, .light .garantias div { color: var(--oro-2); }
  .light .garantias div { color: var(--gris-osc); }
  .light .garantias svg { color: var(--oro); }
  .duo .claro, .ahora a, .ahora div.item, .carta, .gracias { background: #000000; border-color: var(--linea-osc); color: var(--marfil); }
  .prod .pie, .paso, .garantias, .acordeon details, .chips a, .barra select, .formatos button,
  .cesta-top, .cesta-pie, .linea-c, .cal-nombre, .origenes li, .ficha .migas { border-color: var(--linea-osc); }
  .acordeon summary, .formatos button, .cantidad, .chips a, .barra select, .info, .ficha, .cal-nombre { color: var(--marfil); }
  .cantidad { border-color: var(--linea-osc); }
  .formatos button:hover { border-color: var(--oro); }
  .formatos button.sel, .chips a.sel { background: var(--oro); color: var(--noir); border-color: var(--oro); }
  .miniaturas button.sel, .miniaturas button:hover { border-color: var(--oro); }
  .miniaturas button { background: #000; border-radius: 10px; }
  .galeria .principal { background: transparent; }
  .cal-celda { background: #111111; }
  .cal-celda.on { background: #7a5a3c; }
  .cal-celda.hoy { outline-color: var(--oro); }
  .cal-mes.hoy { background: var(--oro); color: var(--noir); }
  .cesta { background: #000000; color: var(--marfil); }
  .cesta .display, .linea-c b { color: var(--marfil); }
  .linea-c small, .cesta-pie p, .vacia { color: var(--gris-osc); }
  .form input, .form select, .form textarea { color: var(--marfil); border-bottom-color: #3a352f; background: transparent; }
  .form input:focus, .form select:focus, .form textarea:focus { border-bottom-color: var(--oro); }
  .form select option { background: #000000; color: var(--marfil); }
  .light .gracias .lede { color: var(--gris-osc); }
  .carta .tiempo p, .carta .display { color: var(--marfil); }

  /* ---------- formato tipo carta ---------- */
  .btn, .chips a, .formatos button, .cantidad { border-radius: 999px; }
  .btn { letter-spacing: 0.14em; }
  .prod { background: linear-gradient(180deg, rgba(28,22,18,0.9) 0%, rgba(8,7,6,0.9) 100%);
      border: 1px solid rgba(255,255,255,0.07); border-radius: 18px; padding: 30px 22px 26px; text-align: center; align-items: center; }
  /* los recortes son apaisados (hasta 2,5:1): en caja cuadrada se quedaban diminutos */
  .prod .foto { width: 100%; height: clamp(140px, 15vw, 205px); aspect-ratio: auto;
      border-radius: 0; background: none; margin-bottom: 20px; }
  .prod .foto img { object-fit: contain !important; padding: 2%; }
  .prod .meta { align-items: center; padding-top: 0; }
  .prod .nombre { color: var(--oro-2); text-transform: uppercase; font-family: var(--texto); font-weight: 600;
      font-size: clamp(14px, 1.1vw, 16px); letter-spacing: 0.08em; line-height: 1.35; }
  .prod .origen { color: var(--gris-osc); letter-spacing: 0.12em; }
  .prod .pie { border-top: 0; justify-content: center; padding-top: 10px; }
  .prod .cat-nom { display: none; }
  .prod .mini-btn.caja, .prod .mini-btn { border: 1px solid rgba(255,255,255,0.16); border-radius: 999px; padding: 0 20px; min-height: 40px; }
  .light .prod .mini-btn:hover { border-color: var(--oro); color: var(--oro-2); }
  .cta-centro { display: flex; justify-content: center; margin-top: clamp(36px, 4vw, 56px); }
  .cabeza { justify-content: center; text-align: center; flex-direction: column; gap: 10px; }
  .cabeza .enlace { display: none; }
  .cat { border-radius: 18px; border: 1px solid rgba(255,255,255,0.06); }
  .pendiente { border-radius: 18px; }

  .portada::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
      background-image: url("../img/fondo-portada.webp"); background-size: cover; background-position: 100% 8%;
      -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 74%, rgba(0,0,0,0) 100%), linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 16%, #000 46%);
      -webkit-mask-composite: source-in;
      mask-image: linear-gradient(180deg, #000 0%, #000 74%, rgba(0,0,0,0) 100%), linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 16%, #000 46%);
      mask-composite: intersect; }
  .portada::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
      background:
      radial-gradient(54% 72% at 24% 50%, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.48) 58%, rgba(0,0,0,0) 100%),
      linear-gradient(90deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.3) 38%, rgba(0,0,0,0) 60%),
      linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 32%);
      -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 74%, rgba(0,0,0,0) 100%);
      mask-image: linear-gradient(180deg, #000 0%, #000 74%, rgba(0,0,0,0) 100%); }
  .portada { position: relative; overflow: visible; min-height: clamp(540px, 72vh, 800px); display: flex; align-items: center; padding-block: clamp(90px, 10vh, 140px) clamp(90px, 10vh, 140px); }
  .portada-rejilla { display: block; position: relative; z-index: 3; text-align: center; }
  .portada-texto { max-width: min(640px, 52%); margin-inline: 0 auto; }
  .portada-texto .eyebrow { display: inline-flex; align-items: center; gap: 18px; }
  .portada-texto .eyebrow::before, .portada-texto .eyebrow::after { content: ""; width: clamp(28px, 5vw, 64px); height: 1px; background: linear-gradient(90deg, rgba(184,149,94,0), var(--oro), rgba(184,149,94,0)); }
  .portada-texto .display { margin: 26px auto 26px; max-width: none; font-size: clamp(29px, 3.5vw, 50px); line-height: 1.14; text-wrap: initial; }
  .portada-texto .lede { text-wrap: balance; }
  @media (max-width: 760px) { .br-ancho { display: none; } }
  .portada-texto .lede { max-width: 50ch; margin-inline: auto; }
  .portada-texto .botones { justify-content: center; }
  .portada-texto .lede { max-width: 44ch; }
  .portada-texto .botones { display: flex; gap: 16px; margin-top: 34px; flex-wrap: wrap; }
  .portada-pieza { position: relative; }
  .portada-pieza img { width: 96%; max-width: none; margin-left: -2%;  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.8)); }
  .adornos { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
  .ad { position: absolute; margin: 0; opacity: 0.92; }
  .ad img { width: 100%;  }
  .ad1 { right: 2%; top: 2%; width: clamp(160px, 17vw, 265px); transform: rotate(-8deg); }
  .ad2 { left: -2%; bottom: 4%; width: clamp(95px, 10vw, 150px); transform: rotate(6deg); }
  .ad3 { right: 34%; bottom: 2%; width: clamp(130px, 14vw, 205px); transform: rotate(-4deg); }
  @media (max-width: 900px) {
    .portada::after { background-position: 76% 10%;
      -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, rgba(0,0,0,0) 100%);
      mask-image: linear-gradient(180deg, #000 0%, #000 72%, rgba(0,0,0,0) 100%); }
    .portada-texto .eyebrow::before, .portada-texto .eyebrow::after { display: none; }
    .portada::before { background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.72) 45%, rgba(0,0,0,0.82) 100%); }
    .portada-texto { max-width: none; text-align: center; }
    .portada-texto .display, .portada-texto .lede { max-width: none; margin-inline: auto; }
    .portada-texto .botones { justify-content: center; }
    .portada-pieza img { width: 100%; margin-left: 0; }
    .ad1 { left: -8%; top: 0; width: 34vw; } .ad2 { display: none; } .ad3 { right: -6%; bottom: -4%; width: 32vw; }
  }

  /* WhatsApp flotante, en todas las páginas */
  .wapp { position: fixed; right: clamp(18px, 2.2vw, 34px); bottom: clamp(18px, 2.2vw, 34px); z-index: 45;
      width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
      color: var(--oro-2); background: linear-gradient(155deg, rgba(214,189,140,0.14) 0%, rgba(0,0,0,0.6) 60%);
      border: 1px solid rgba(184,149,94,0.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
      box-shadow: 0 10px 28px rgba(0,0,0,0.65); transition: color 0.25s, border-color 0.25s, transform 0.25s; }
  .wapp:hover { color: var(--noir); background: var(--oro); border-color: var(--oro); transform: translateY(-2px); }
  @media (max-width: 760px) { .wapp { width: 50px; height: 50px; bottom: 74px; } }
  .movil-wapp { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; color: var(--oro-2);
      font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; }

  body { position: relative; }
  main, .strip, .pie-web { position: relative; z-index: 2; }
  /* la cabecera va por encima de main: si no, el desplegable queda tapado */
  .hd { position: sticky; top: 0; z-index: 40; }