/* ══════════════════════════════════════════════════════════════
   RAW DROP — OTOÑO  (v3)
   Capa estacional que se carga DESPUÉS de styles.css. Sólo cambia
   paleta, luz y ambiente; la estructura es la misma. Quitarla =
   borrar el <link> de otono.css y el <script> de otono.js.
   Criterio: ambiente de campaña editorial — tierra, bronce, luz
   baja de tarde. El otoño se siente en el fondo; la interfaz se
   mantiene sobria y las fotos conservan su color real.
   ══════════════════════════════════════════════════════════════ */
:root {
  color-scheme:dark;
  --bg:#0f0a07;
  --bg-card:rgba(30,20,13,0.62);
  --bg-card-hover:rgba(40,26,16,0.72);
  --text:#f1e6d8;
  --text-secondary:#ad9c8b;
  --text-muted:#85766a;
  --silver:#d99a4e;
  --silver-bright:#efd2a4;
  --border:rgba(240,190,120,0.08);
  --border-hover:rgba(240,190,120,0.18);
  --copper-text:linear-gradient(135deg, #b07a48 0%, #efd6b0 42%, #c9955e 66%, #8a5530 100%);
}
::selection { background:rgba(217,154,78,0.36); color:#fff6e8; }

/* ── Canvas de hojas (otono.js): detrás del contenido, nunca encima.
   100vh = viewport grande en móvil (la barra del navegador no lo
   redimensiona); capa propia en el compositor. */
.leaves {
  position:fixed; top:0; left:0; width:100%; height:100vh; z-index:0; pointer-events:none;
  transform:translateZ(0); backface-visibility:hidden; contain:strict;
}

/* ── Un solo haz de luz de tarde, diagonal y muy suave ──
   inset:0 (antes -20vmax): una capa fija más grande que la pantalla
   puede alterar la escala inicial en Safari iOS / WebViews de Instagram. */
body::after {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(118deg,
    transparent 22%, rgba(255,200,140,0.030) 34%, rgba(255,200,140,0.060) 43%,
    rgba(255,200,140,0.030) 52%, transparent 64%);
  -webkit-mask:radial-gradient(110% 95% at 20% 10%, #000 0%, rgba(0,0,0,.4) 55%, transparent 90%);
          mask:radial-gradient(110% 95% at 20% 10%, #000 0%, rgba(0,0,0,.4) 55%, transparent 90%);
  will-change:opacity;
}
/* Bruma baja: calienta el suelo sin dibujar nada */
html::after {
  content:''; position:fixed; z-index:0; pointer-events:none;
  left:0; right:0; bottom:0; height:34vh;
  background:
    radial-gradient(70% 90% at 30% 100%, rgba(150,66,28,0.16), transparent 72%),
    radial-gradient(60% 80% at 78% 100%, rgba(180,100,44,0.13), transparent 72%);
}
@media (prefers-reduced-motion:no-preference) {
  body::after { animation:haz 18s ease-in-out infinite alternate; }
}
@keyframes haz { from { opacity:.65; } to { opacity:1; } }
html.is-scrolling body::after { animation-play-state:paused; }

/* ── Luz ambiental: sol bajo de tarde ── */
.ambient-a { background:radial-gradient(circle at 50% 50%, rgba(233,140,50,0.2), rgba(233,140,50,0.07) 42%, transparent 68%); }
.ambient-b { background:radial-gradient(circle at 50% 50%, rgba(184,71,31,0.18), rgba(184,71,31,0.06) 45%, transparent 70%); }
.ambient-spot { background:radial-gradient(circle at 50% 50%, rgba(255,190,110,0.11), rgba(255,170,90,0.03) 42%, transparent 70%); }
.ambient::before { background:radial-gradient(125% 88% at 50% 2%, transparent 34%, rgba(10,4,1,0.62) 100%); }
.ambient::after { opacity:.05; mix-blend-mode:overlay; }

.scroll-progress { background:rgba(227,154,54,0.06); }
.scroll-progress span { background:linear-gradient(90deg, rgba(217,154,78,0.35), #efd2a4); }

/* ── Banner + navegación ── */
.promo-banner {
  background:linear-gradient(90deg, rgba(120,62,30,0.34) 0%, rgba(160,96,48,0.18) 100%);
  border-bottom:1px solid rgba(227,154,54,0.22); color:#f6dfbd;
}
.promo-close { color:#c9a37a; }
.promo-close:hover { color:#fff3e0; }

.nav-desktop { background:rgba(16,10,7,0.9); border-bottom:1px solid rgba(227,154,54,0.12); }
.nav-desktop::after {
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(217,154,78,0.45) 50%, transparent);
}
.nav-desktop.is-scrolled { background:rgba(16,10,7,0.8); box-shadow:0 10px 30px -14px rgba(0,0,0,0.95); }
.nav-brand {
  background:var(--copper-text); background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.nav-tab { color:#a08f7f; }
.nav-tab.active, .nav-tab:hover:not(.active) { color:#fff3e2; }
.nav-tab::after { background:linear-gradient(90deg, transparent, rgba(243,207,143,0.8), transparent); }
.nav-links .pill-ind {
  background:linear-gradient(180deg, rgba(227,154,54,0.26), rgba(184,71,31,0.10));
  border:1px solid rgba(227,154,54,0.34);
  box-shadow:inset 0 1px 0 rgba(255,220,160,0.25), 0 8px 20px -10px rgba(184,71,31,0.7);
}
.nav-mobile { background:rgba(18,11,7,0.95); border-top:1px solid rgba(227,154,54,0.14); }
.nav-mobile-btn { color:#8a7a6c; }
.nav-mobile-btn.active { color:#f3cf8f; }
.nav-mobile-btn::after { background:linear-gradient(90deg, #b8471f, #f3cf8f); }

/* ── Cabecera ── */
.logo-container { border-color:rgba(227,154,54,0.45); box-shadow:0 0 38px rgba(227,140,50,0.18); }
.logo-container::after {
  background:conic-gradient(from 0deg, transparent 0deg, rgba(239,210,164,0.7) 50deg, transparent 120deg, transparent 360deg);
  opacity:.7;
}
.logo-container:hover { box-shadow:0 0 56px rgba(227,140,50,0.3); }

.brand-name {
  background:linear-gradient(120deg, #9a6a40 0%, #d6a870 24%, #f2dcb8 42%, #c79460 60%, #8e5a32 80%, #c89868 100%);
  background-size:240% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 12px 28px rgba(0,0,0,0.6));
  cursor:default;
}
.tagline { color:#c2ab92; }

@media (prefers-reduced-motion:no-preference) {
  .brand-name { animation:wordmark-shine 14s ease-in-out 1s infinite; }
}


.trust-badge {
  background:linear-gradient(180deg, rgba(227,154,54,0.10), rgba(227,154,54,0.02));
  border-color:rgba(227,154,54,0.2); color:#dcc6aa;
  box-shadow:inset 0 1px 0 rgba(255,220,160,0.12), 0 10px 26px -18px rgba(0,0,0,1);
}
.trust-badge svg { color:#e39a36; }
.trust-badge::after { background:linear-gradient(105deg, transparent 40%, rgba(255,220,160,0.3) 50%, transparent 60%); }

.social-label { color:#8a7766; }
.social-link, .social-link:nth-child(1), .social-link:nth-child(2),
.social-link:nth-child(3), .social-link:nth-child(4) {
  background:linear-gradient(180deg, rgba(227,154,54,0.07), rgba(227,154,54,0.015));
  border:1px solid rgba(227,154,54,0.14); color:#b09a84;
  box-shadow:inset 0 1px 0 rgba(255,220,160,0.08);
}
.social-link span { color:#958170; }

/* ── Buscador y filtros ── */
.search-bar {
  background:linear-gradient(180deg, rgba(36,24,16,0.92), rgba(20,13,9,0.92));
  border-color:rgba(227,154,54,0.16);
  box-shadow:inset 0 1px 0 rgba(255,220,160,0.07), 0 16px 34px -26px rgba(0,0,0,1);
}
.search-bar:focus-within {
  background:linear-gradient(180deg, rgba(42,27,17,0.95), rgba(24,15,10,0.95));
  border-color:rgba(227,154,54,0.5);
  box-shadow:inset 0 1px 0 rgba(255,220,160,0.1), 0 0 0 3px rgba(227,154,54,0.1), 0 18px 36px -24px rgba(0,0,0,1);
}
.search-icon { color:#9b7a55; }
.search-bar:focus-within .search-icon { color:#f3cf8f; }
.search-bar input::placeholder { color:#7d6a59; }
.search-clear { color:#a88d70; }

.filter-btn, .brand-btn {
  color:#cdb69c;
  background:linear-gradient(180deg, rgba(227,154,54,0.07), rgba(227,154,54,0.015));
  border-color:rgba(227,154,54,0.15);
  box-shadow:inset 0 1px 0 rgba(255,220,160,0.06);
}
.filter-btn:hover, .brand-btn:hover { color:#fff3e2; border-color:rgba(227,154,54,0.45); }
.filter-btn.active {
  background:linear-gradient(180deg, #f6d69a 0%, #e39a36 55%, #c0621f 100%);
  color:#1c0f06; border-color:rgba(246,214,154,0.95);
  box-shadow:inset 0 1px 0 rgba(255,240,210,0.9), 0 12px 26px -12px rgba(217,120,40,0.7);
}
.brand-btn.active, .brand-btn.active:hover {
  background:linear-gradient(180deg, rgba(227,154,54,0.3), rgba(184,71,31,0.12));
  border-color:rgba(227,154,54,0.55); color:#fff3e2;
  box-shadow:inset 0 1px 0 rgba(255,220,160,0.22);
}
.fb-n { background:rgba(227,154,54,0.14); color:#f0d5ad; }
.filter-btn.active .fb-n, .brand-btn.active .fb-n { background:rgba(40,16,4,0.2); color:#1c0f06; }
.brand-btn.active .fb-n { color:#fff3e2; background:rgba(255,220,160,0.14); }
.filter-btn.is-empty:hover, .brand-btn.is-empty:hover { border-color:rgba(227,154,54,0.15); }
.sort-select {
  background-color:rgba(26,17,11,0.92); border-color:rgba(227,154,54,0.15); color:#cdb69c;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23e39a36' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.sort-select:hover { border-color:rgba(227,154,54,0.45); color:#fff3e2; }
.sort-select:focus { border-color:rgba(227,154,54,0.5); }
.sort-select option { background:#1c120b; color:#f1e6d8; }
.product-count { color:#a8958a; }

/* ── Tarjeta de producto ── */
.product-card { background:var(--bg-card); border-color:rgba(227,154,54,0.08); }
.product-card:hover {
  border-color:rgba(227,154,54,0.32);
  box-shadow:0 24px 54px -18px rgba(0,0,0,0.9), 0 0 0 1px rgba(227,154,54,0.06), 0 18px 40px -26px rgba(227,120,40,0.45);
}
@media (hover:hover) and (pointer:fine) {
  .product-card.is-tilt {
    border-color:rgba(227,154,54,0.36);
    box-shadow:0 30px 64px -22px rgba(0,0,0,0.92), 0 20px 44px -28px rgba(227,120,40,0.55), inset 0 1px 0 rgba(255,220,160,0.08);
  }
  .product-card:not(.vendido) .product-img::after { color:#f6dfbd; }
}

/* ── Las fotos se ven con su color real ──
   Nada cálido pasa por encima de una imagen: los velos, brillos y
   destellos sobre fotos son neutros (blanco/negro) y los filtros se anulan.
   El tema sólo vive en marcos, texto y fondo. */
.product-img img, .detail-main-img img, .detail-thumb img, .variant-chip:not(.agotado) img,
.delivery-photo img, .founder-photo img, .logo-container img {
  filter:none !important; mix-blend-mode:normal !important;
}
.product-img::before { background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,0.1) 50%, transparent 62%); }
.product-card.vendido .product-img::after { background:rgba(0,0,0,0.15); }
@media (hover:hover) and (pointer:fine) {
  .product-card::after { background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.10), rgba(255,255,255,0) 62%); }
  .product-card:not(.vendido) .product-img::after { background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.72) 100%); }
}
/* Las hojas de primer plano no cruzan por encima de la ficha abierta */
.detail-overlay { isolation:isolate; }
.product-badge { background:rgba(30,12,4,0.62); color:#f6dfbd; }
.product-tag { background:rgba(30,12,4,0.55); color:#f6dfbd; }
.product-tag.tag-variantes { background:rgba(30,12,4,0.66); color:#f0d5ad; border-color:rgba(227,154,54,0.3); }
.sold-badge { background:rgba(24,10,4,0.86); color:#ecd3b0; border-color:rgba(227,154,54,0.24); }
.product-name { color:#f1e6d8; }
.product-info:hover .product-name { color:#fff6e8; }
.product-price { background:linear-gradient(135deg, #e39a36 0%, #f8dca4 50%, #c0621f 100%); background-size:210% 100%; -webkit-background-clip:text; background-clip:text; }
.product-price .cur, .detail-price .cur { color:#9e8672; -webkit-text-fill-color:#9e8672; }
.product-info::after { background:linear-gradient(90deg, #e39a36, rgba(184,71,31,0)); }
.product-sizes .sz { color:#cfb99e; border-color:rgba(227,154,54,0.17); background:rgba(227,154,54,0.035); }
.product-card:hover .product-sizes .sz { color:#fff3e2; border-color:rgba(227,154,54,0.42); background:rgba(227,154,54,0.11); }
.carousel-dot { background:rgba(255,226,180,0.3); }
.carousel-dot:hover { background:rgba(255,226,180,0.6); }
.carousel-dot.active { background:#f3cf8f; }

.sold-divider { border-top-color:rgba(227,154,54,0.16); }
.sold-divider span { color:#f1e6d8; }
.sold-toggle { color:#ecd3b0; border-color:rgba(227,154,54,0.34); }
.sold-toggle:hover { border-color:#e39a36; color:#fff3e2; background:rgba(227,154,54,0.08); }

.loading-spinner { border-color:rgba(227,154,54,0.12); border-top-color:#e39a36; }
.sk-img, .sk-line { background:linear-gradient(100deg, #1a110b 40%, #2b1c11 50%, #1a110b 60%); background-size:200% 100%; }
.no-products .np-sub { color:#a08f7f; }
.error-msg a { color:#f3cf8f; }

/* ── Títulos: bronce y filo fino ── */
.nosotros-title, .faq-title {
  background:var(--copper-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.nosotros-title::after, .faq-title::after { background:linear-gradient(90deg, rgba(217,154,78,0.9), rgba(217,154,78,0)); }

/* ── Nosotros ── */
.founder-photo { border-color:rgba(227,154,54,0.38); }
.founder:hover .founder-photo { border-color:rgba(246,214,154,0.7); box-shadow:0 18px 40px -14px rgba(0,0,0,0.85), 0 0 30px -6px rgba(227,120,40,0.35); }
.founder-name { color:#f1e6d8; }
.founder-ig { color:#c7ae93; }
.story-block { background:rgba(26,17,11,0.82); border-color:rgba(227,154,54,0.12); }
.story-text { color:#dac9b4; }
.story-highlight { color:#f6d69a; }
.story-block:hover .story-highlight { text-shadow:0 0 18px rgba(246,214,154,0.35); }
.shopper-title { color:#f1e6d8; }
.shopper-text { color:#c7b49d; }
.delivery-counter { background:rgba(26,17,11,0.88); border-color:rgba(227,154,54,0.16); }
.counter-number { background:var(--copper-text); -webkit-background-clip:text; background-clip:text; }
.counter-label { color:#c7b49d; }
.zones-title, .carousel-title { color:#d0ad82; }
.zone-tag { background:rgba(26,17,11,0.88); border-color:rgba(227,154,54,0.16); color:#ecdcc6; }
.zone-tag:hover { border-color:rgba(227,154,54,0.5); color:#fff3e2; }
.delivery-photo { border-color:rgba(227,154,54,0.1); }
.delivery-photo:hover { border-color:rgba(227,154,54,0.4); }

/* ── FAQ / términos ── */
.faq-item { background:rgba(24,16,10,0.74); border-color:rgba(227,154,54,0.09); }
.faq-item[open] { background:rgba(32,21,13,0.8); border-color:rgba(227,154,54,0.28); }
.faq-question { color:#dfcbb2; }
.faq-question:hover, .faq-item[open] .faq-question { color:#fff3e2; }
.faq-question::after { color:#b8864f; }
.faq-item[open] .faq-question::after { color:#f3cf8f; }
.faq-answer { color:#bba892; }
.faq-answer strong { color:#f6dfbd; }
.terms-details { background:rgba(24,16,10,0.74); border-color:rgba(227,154,54,0.09); }
.terms-summary { color:#b39c84; }
.terms-summary::after { color:#b8864f; }
.terms-content { color:#ad9a86; }
.footer { color:#85766a; }

/* ── Detalle de producto ── */
.detail-overlay { background:linear-gradient(180deg, rgba(15,9,5,0.45) 0%, rgba(15,9,5,0.74) 100%); }
.detail-content { background:rgba(26,17,11,0.7); border-color:rgba(227,154,54,0.13); }
.detail-back { background:rgba(26,17,11,0.9); border-color:rgba(227,154,54,0.18); color:#dcc6aa; }
.detail-back:hover { background:rgba(40,26,16,0.95); border-color:rgba(227,154,54,0.45); color:#fff3e2; }
.detail-main-img, .detail-thumb { border-color:rgba(227,154,54,0.1); }
.detail-thumb { border-color:transparent; }
.detail-thumb.active { border-color:#e39a36; }
.detail-brand { color:#e39a36; }
.detail-name { color:#fff1de; }
.detail-fit, .detail-size-label { color:#a8958a; }
.detail-price { background:var(--copper-text); -webkit-background-clip:text; background-clip:text; }
.size-pill { border-color:rgba(227,154,54,0.22); background:rgba(227,154,54,0.045); color:#f1e6d8; }
.size-pill:hover { border-color:rgba(227,154,54,0.5); background:rgba(227,154,54,0.1); }
.size-pill.selected {
  background:linear-gradient(180deg, #f8dca4, #e39a36); border-color:#f8dca4; color:#1c0f06;
  box-shadow:0 12px 26px -12px rgba(227,120,40,0.75);
}
.size-pill.unavailable { color:#6e5f53; border-color:rgba(227,154,54,0.08); }
.size-pill.upcoming { color:#a08f7f; border-color:rgba(227,154,54,0.16); }
.detail-upcoming { color:#f3cf8f; background:rgba(227,154,54,0.08); border-color:rgba(227,154,54,0.22); }
.detail-status { background:rgba(227,154,54,0.05); border-color:rgba(227,154,54,0.12); color:#b39c84; }
.detail-share { color:#948170; }
.detail-share-btn { background:rgba(26,17,11,0.9); border-color:rgba(227,154,54,0.16); color:#dcc6aa; }
.detail-share-btn:hover { border-color:rgba(227,154,54,0.45); color:#fff3e2; }
.detail-variants { border-top-color:rgba(227,154,54,0.12); }
.detail-variants-label { color:#a8958a; }
.detail-variants-label b { color:#f0d5ad; background:rgba(227,154,54,0.1); border-color:rgba(227,154,54,0.22); }
.variant-chip.current { border-color:#e39a36; }
.variant-name { color:#a08f7f; }
.vchip-tag { background:rgba(30,12,4,0.78); }
.detail-tienda.es-casa { background:rgba(227,154,54,0.04); border-color:rgba(227,154,54,0.12); }

/* ── Tienda aliada: se respeta su rojo, sólo se calienta el fondo ── */
.tienda-hero { background:rgba(22,14,9,0.84); }
.tienda-drop { background:rgba(26,17,11,0.78); border-color:rgba(227,154,54,0.1); border-left-color:var(--fiitlab-red); }
.tienda-back { background:rgba(26,17,11,0.9); border-color:rgba(227,154,54,0.16); color:#dcc6aa; }
.tienda-btn-ig { background:rgba(227,154,54,0.06); border-color:rgba(227,154,54,0.18); color:#ecdcc6; }
.tienda-cta { background:linear-gradient(135deg, rgba(214,36,48,0.16) 0%, rgba(184,71,31,0.06) 42%, rgba(22,14,9,0.94) 100%); }

/* ── Flotantes ── */
.float-top { background:rgba(30,19,12,0.92); border-color:rgba(227,154,54,0.22); }
.float-top:hover { background:rgba(46,29,18,0.95); border-color:rgba(227,154,54,0.5); }
.float-top svg { color:#f3cf8f; }

/* ── Foco de teclado en ámbar ── */
.filter-btn:focus-visible, .brand-btn:focus-visible, .nav-tab:focus-visible,
.nav-mobile-btn:focus-visible, .size-pill:focus-visible, .sort-select:focus-visible,
.detail-back:focus-visible, .carousel-dot:focus-visible, .promo-close:focus-visible,
.search-clear:focus-visible, .detail-share-btn:focus-visible, .float-top:focus-visible,
.float-wa:focus-visible, .faq-question:focus-visible, .terms-summary:focus-visible,
.detail-thumb:focus-visible, .variant-chip:focus-visible, .sold-toggle:focus-visible {
  outline:2px solid #e39a36; outline-offset:2px;
}

/* ── Blindaje de tamaño: la capa estacional nunca ensancha la página ── */
html, body { overflow-x:clip; }
.leaves { max-width:100vw; }

/* ── Teléfono: el otoño tiene que notarse ──
   En pantalla chica las tarjetas cubren casi todo el fondo. La capa
   .leaves-front (otono.js) lleva unas pocas hojas por ENCIMA del
   contenido: z-index 2 = sobre .app (1), bajo flotantes (50), menú
   (55/60) y ficha de producto (70). Nunca recibe toques. */
.leaves-front { z-index:2; }
@media (max-width:599px) {
  body::after {
    background:linear-gradient(118deg,
      transparent 18%, rgba(255,196,130,0.05) 32%, rgba(255,196,130,0.10) 43%,
      rgba(255,196,130,0.05) 54%, transparent 68%);
  }
  html::after {
    height:42vh;
    background:
      radial-gradient(80% 90% at 25% 100%, rgba(170,74,30,0.26), transparent 72%),
      radial-gradient(70% 80% at 80% 100%, rgba(200,112,48,0.2), transparent 72%);
  }
  .ambient-a { background:radial-gradient(circle at 50% 50%, rgba(233,140,50,0.3), rgba(233,140,50,0.1) 42%, transparent 68%); }
  .ambient-b { background:radial-gradient(circle at 50% 50%, rgba(184,71,31,0.26), rgba(184,71,31,0.09) 45%, transparent 70%); }
}

:root { --rd-otono-version:"2026-09-23-h"; }