/* ========================================================================== Riojika — "Cuaderno de recuerdos" Tema "Fiesta riojana": colores de la bandera de La Rioja (rojo, blanco, verde, amarillo) + burdeos de vino, banderines de fiesta. Hoja independiente de styles.css — pensada para ir sustituyendo página a página sin romper las que aún usan el sistema cálido/terracota original. ========================================================================== */ :root{ --paper:#fcf8f1; --paper-card:#fffefb; --dot:#eadccb; --ink:#2a171b; --ink-dim:#6c5458; --mustard:#f6c700; --mustard-dark:#9a7a00; --sky:#a3294c; --sky-dark:#6e1530; --coral:#d42a3c; --coral-dark:#b3122b; --sage:#2ea05a; --sage-dark:#00703a; --line:#ecdfd2; --font-display:'Fredoka', 'Segoe UI Rounded', sans-serif; --font-body:'Karla', system-ui, -apple-system, sans-serif; --font-hand:'Caveat', cursive; /* tokens adicionales — reskin de styles.css para el resto del sitio */ --paper-soft:#f5e9d9; --coral-darker:#850b1f; --on-coral:#ffffff; --error:#b3392a; --text-xs:0.8125rem; --text-sm:0.9375rem; --text-base:1rem; --text-md:1.125rem; --text-lg:1.375rem; --text-xl:1.75rem; --text-2xl:2.25rem; --text-3xl:2.85rem; --text-4xl:3.6rem; --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem; --space-5:1.5rem; --space-6:2rem; --space-7:3rem; --space-8:4rem; --space-9:6rem; --radius-sm:6px; --radius-md:8px; --radius-lg:3px; --radius-full:999px; --shadow-sm:0 1px 2px rgba(51,42,31,0.1), 0 1px 1px rgba(51,42,31,0.07); --shadow-md:0 8px 20px rgba(51,42,31,0.14), 0 2px 6px rgba(51,42,31,0.08); --shadow-lift:0 14px 30px rgba(51,42,31,0.2); --ease-out:cubic-bezier(0.23,1,0.32,1); --ease-in-out:cubic-bezier(0.77,0,0.175,1); --dur-fast:140ms; --dur-base:200ms; --dur-slow:280ms; --container-w:1320px; } *{box-sizing:border-box;} html{-webkit-font-smoothing:antialiased;} body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-body); line-height:1.55; background-image:radial-gradient(circle, var(--dot) 1px, transparent 1.6px); background-size:24px 24px; } h1,h2,h3{font-family:var(--font-display); text-wrap:balance; margin:0; font-weight:600; color:var(--ink);} p{margin:0;} a{color:inherit; text-decoration:none;} ul{list-style:none; margin:0; padding:0;} svg{max-width:100%; display:block;} button{font:inherit; color:inherit; background:none; border:none; cursor:pointer; padding:0;} input, select, textarea{font:inherit; color:inherit;} /* Evita el retraso de ~300ms del navegador y el doble-tap-zoom accidental en móvil al tocar botones/enlaces; el resaltado táctil nativo se sustituye por nuestros propios estados hover/focus. */ a, button{touch-action:manipulation; -webkit-tap-highlight-color:transparent;} /* El gutter lateral vive en .wrap/.container (no en body), para que las franjas de color a sangre (footer, admin) puedan llegar al borde real. */ .wrap{max-width:1320px; margin-inline:auto; padding-inline:20px;} img,.aspect{max-width:100%;} :focus-visible{outline:3px solid var(--coral-dark); outline-offset:2px; border-radius:4px;} .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .skip-link{ position:absolute; left:20px; top:-60px; background:var(--ink); color:var(--paper); padding:12px 20px; border-radius:10px; z-index:200; transition:top .25s ease; } .skip-link:focus{top:16px;} /* tape */ .tape{position:absolute; height:26px; width:74px; opacity:0.85; box-shadow:0 1px 2px rgba(0,0,0,0.08);} .tape.mustard{background:var(--mustard);} .tape.sky{background:var(--sky);} .tape.coral{background:var(--coral);} .tape.sage{background:var(--sage);} /* ---------- motion ---------- */ html:where(.js) .reveal{opacity:0; transform:translateY(22px) rotate(var(--tilt,0deg)) scale(.97); transition:opacity .6s ease, transform .6s cubic-bezier(.22,.9,.32,1);} html:where(.js) .reveal:where(.in-view){opacity:1; transform:translateY(0) rotate(var(--tilt,0deg)) scale(1);} .steps .step:nth-child(1){transition-delay:0s;} .steps .step:nth-child(2){transition-delay:.08s;} .steps .step:nth-child(3){transition-delay:.16s;} .catalog .cat-link:nth-child(1) .cat-card{transition-delay:0s;} .catalog .cat-link:nth-child(2) .cat-card{transition-delay:.06s;} .catalog .cat-link:nth-child(3) .cat-card{transition-delay:.12s;} .catalog .cat-link:nth-child(4) .cat-card{transition-delay:.18s;} .notes3 .stick:nth-child(1){transition-delay:0s;} .notes3 .stick:nth-child(2){transition-delay:.08s;} .notes3 .stick:nth-child(3){transition-delay:.16s;} .lined-notes .lined:nth-child(1){transition-delay:0s;} .lined-notes .lined:nth-child(2){transition-delay:.08s;} .lined-notes .lined:nth-child(3){transition-delay:.16s;} @keyframes fadeUp{from{opacity:0; transform:translateY(30px);} to{opacity:1; transform:translateY(0);}} @keyframes fadeUpKicker{from{opacity:0; transform:translateY(30px) rotate(-2deg);} to{opacity:1; transform:translateY(0) rotate(-2deg);}} @keyframes dropIn{ 0%{opacity:0; transform:translateY(-90px) rotate(calc(var(--tilt,0deg) * 4)) scale(.75);} 55%{opacity:1; transform:translateY(10px) rotate(calc(var(--tilt,0deg) * 0.6)) scale(1.05);} 75%{transform:translateY(-4px) rotate(calc(var(--tilt,0deg) * 1.1)) scale(0.99);} 100%{opacity:1; transform:translateY(0) rotate(var(--tilt,0deg)) scale(1);} } @keyframes stick{from{opacity:0; transform:translateX(-50%) rotate(0deg) scale(0);} to{opacity:.9; transform:translateX(-50%) rotate(var(--tape-rot,-3deg)) scale(1);}} @keyframes draw{to{stroke-dashoffset:0;}} @keyframes bob{0%,100%{transform:rotate(var(--tilt,0deg)) translateY(0);} 50%{transform:rotate(var(--tilt,0deg)) translateY(-3px);}} @keyframes float{ 0%{transform:translate(0,0) rotate(0deg);} 33%{transform:translate(6px,-16px) rotate(8deg);} 66%{transform:translate(-8px,-6px) rotate(-6deg);} 100%{transform:translate(0,0) rotate(0deg);} } @keyframes bump{0%{transform:scale(1);} 40%{transform:scale(1.35);} 100%{transform:scale(1);}} .hero .kicker{animation:fadeUpKicker .6s cubic-bezier(.2,.9,.25,1) both;} .hero h1{animation:fadeUp .65s cubic-bezier(.2,.9,.25,1) .1s both;} .hero .lead{animation:fadeUp .6s cubic-bezier(.2,.9,.25,1) .22s both;} .hero-cta .btn:nth-child(1){animation:fadeUp .55s cubic-bezier(.2,.9,.25,1) .32s both;} .hero-cta .btn:nth-child(2){animation:fadeUp .55s cubic-bezier(.2,.9,.25,1) .4s both;} .hero h1 .mark svg{stroke-dasharray:130; stroke-dashoffset:130; animation:draw .6s ease .68s forwards;} .board .p1{animation:dropIn .85s cubic-bezier(.32,1.7,.5,1) .2s both;} .board .p2{animation:dropIn .85s cubic-bezier(.32,1.7,.5,1) .4s both;} .board .polaroid.settled{animation:bob 4.5s ease-in-out infinite;} .board .polaroid .tape{animation:stick .35s ease both;} .p1 .tape{animation-delay:.75s;} .p2 .tape{animation-delay:.95s;} .cat-card, .big-polaroid, .step, .stick, .lined{transition:transform .25s ease, box-shadow .25s ease;} .cat-link:hover .cat-card, .cat-link:focus-visible .cat-card, .big-polaroid:hover, .step:hover, .stick:hover, .lined:hover{ transform:translateY(-6px) rotate(calc(var(--tilt,0deg) * 1.5)) scale(1.02); box-shadow:0 16px 28px rgba(51,42,31,0.22); } .btn:hover{transform:translate(-2px,-4px) rotate(-1deg);} .spotlight-list .dot-sticker{transition:transform .2s ease;} .spotlight-list li:hover .dot-sticker{transform:scale(1.35);} .cart-count.bump{animation:bump 260ms ease;} @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; } /* Excepción deliberada: estos dos son feedback funcional (confirman una acción real: "precio cambiado", "añadido al carrito"), no adorno de movimiento a gran escala. Con la regla general de arriba a 0.01ms quedaban completamente invisibles, no solo "menos suaves" — sin ninguna otra señal, el usuario no se enteraba de que la acción había surtido efecto. Se les da una duración corta y se excluyen de la supresión general; el resto de animaciones decorativas (parallax, paso a paso, subrayado, transición de página, confeti) siguen suprimidas como antes. */ #summary-total, .btn-primary.btn-added{ transition-duration:180ms !important; } } /* ---------- transición entre páginas (API nativa del navegador) ---------- Sin JS: al navegar a otra página del mismo sitio, el navegador cruza- difumina la página vieja con la nueva en vez del cambio seco de siempre. Solo la aplican los navegadores que la soportan (Chrome/Edge recientes); el resto navega exactamente igual que hasta ahora, sin fallback que mantener. Respeta prefers-reduced-motion igual que el resto del sitio (la regla general de arriba ya cubre navegadores que sí anticipan la duración de ::view-transition-* vía transition-duration). */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 240ms; animation-timing-function: var(--ease-out); } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: 0.01ms !important; } } /* ---------- header ---------- */ header.top{padding-block:22px;} .top-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; position:relative;} .brand{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:1.3rem; font-weight:700; text-decoration:none; color:var(--ink);} .brand-mark{width:36px; height:36px; background:var(--paper-card); border:2px solid var(--ink); border-radius:50%; display:flex; align-items:center; justify-content:center; transform:rotate(-6deg); flex:none;} .brand-mark svg{width:17px; height:17px; color:var(--coral-dark);} nav.top-nav{display:flex; gap:8px;} nav.top-nav a{ text-decoration:none; color:var(--ink); font-family:var(--font-body); font-weight:600; font-size:0.9rem; padding:8px 14px; border-radius:999px; } nav.top-nav a:hover, nav.top-nav a:focus-visible{background:var(--paper-card); box-shadow:0 1px 3px rgba(0,0,0,0.1);} nav.top-nav a[aria-current="page"]{background:var(--paper-card); box-shadow:0 1px 3px rgba(0,0,0,0.1);} .nav-toggle{display:none; background:var(--paper-card); border:2px solid var(--ink); border-radius:999px; padding:8px 10px; cursor:pointer; align-items:center; justify-content:center;} .nav-toggle svg{width:20px; height:20px; display:block; color:var(--ink);} .cart-link{ display:inline-flex; align-items:center; gap:6px; text-decoration:none; color:var(--ink); font-family:var(--font-hand); font-size:1.2rem; font-weight:600; background:var(--paper-card); border:2px solid var(--ink); border-radius:14px; padding:6px 14px; transform:rotate(2deg); } .cart-link svg{width:18px; height:18px;} @media (max-width:840px){ .nav-toggle{display:inline-flex;} nav.top-nav{ display:none; position:absolute; top:100%; left:0; right:0; margin-top:8px; z-index:30; background:var(--paper-card); border:1px solid var(--line); border-radius:16px; padding:10px; flex-direction:column; gap:4px; box-shadow:0 10px 20px rgba(51,42,31,.16); } nav.top-nav.open{display:flex;} } /* ---------- buttons (stickers) ---------- */ .btn{ font-family:var(--font-body); font-weight:700; font-size:0.95rem; text-decoration:none; display:inline-flex; align-items:center; gap:8px; padding:13px 24px; border-radius:999px; border:2px solid var(--ink); cursor:pointer; box-shadow:3px 3px 0 var(--ink); transition:transform .12s ease; } .btn:hover{transform:translate(-1px,-1px);} .btn-fill{background:var(--coral); color:#2a1a10;} .btn-fill:hover{background:#e88a70;} .btn-outline{background:var(--paper-card); color:var(--ink);} /* ---------- hero ---------- */ .hero{padding-block:52px 70px; display:grid; grid-template-columns:minmax(0,560px) minmax(0,580px); justify-content:center; gap:72px; align-items:center; position:relative; perspective:1000px;} .hero > div:not(.hero-doodles){position:relative; z-index:1;} .hero .kicker{ font-family:var(--font-hand); font-size:1.4rem; color:var(--sage-dark); display:inline-block; transform:rotate(-2deg); } .hero h1{font-size:clamp(2.3rem,5vw,3.6rem); line-height:1.06; margin-top:6px;} .hero h1 .mark{position:relative; white-space:nowrap;} .hero h1 .mark svg{position:absolute; left:-4%; top:-18%; width:108%; height:140%; color:var(--mustard); z-index:-1;} .hero .lead{margin-top:20px; max-width:46ch; color:var(--ink-dim); font-size:1.05rem;} .hero-cta{display:flex; gap:14px; margin-top:28px; flex-wrap:wrap;} .hero-doodles{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;} .hero-doodles svg{position:absolute; opacity:.55; animation:float 9s ease-in-out infinite;} .board{ position:relative; aspect-ratio:1/1; transform-style:preserve-3d; transform:translateY(var(--parallax-y,0px)) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg)); transition:transform .4s ease-out; } .polaroid{ position:absolute; background:var(--paper-card); border:1px solid var(--line); padding:12px 12px 40px; box-shadow:0 8px 18px rgba(51,42,31,0.14); } .polaroid .shot{aspect-ratio:4/3; background:var(--paper); border:1px solid var(--line); display:flex; align-items:center; justify-content:center;} .polaroid .shot svg{width:40%; color:var(--sage-dark);} .polaroid .cap{position:absolute; bottom:9px; left:14px; right:14px; font-family:var(--font-hand); font-size:1.15rem; color:var(--ink); text-align:center;} /* Zonas de "prueba tu foto" del hero — las dos polaroids son interactivas */ .hero-drop{ position:relative; overflow:visible; cursor:pointer; flex-direction:column; gap:6px; border:2px dashed var(--line); background-size:cover; background-position:center; transition:border-color .2s ease, background-color .2s ease; } .hero-drop svg{width:22%; color:var(--coral-dark);} .hero-drop .hero-drop-hint{font-family:var(--font-hand); font-size:1rem; color:var(--ink-dim); text-align:center; padding:0 10px;} .hero-drop:hover, .hero-drop:focus-visible{border-color:var(--coral);} .hero-drop.dragover{border-color:var(--coral); background-color:var(--paper-soft); transform:scale(1.02);} .hero-drop.has-photo{border-style:solid; border-color:var(--ink);} .hero-drop.has-photo svg, .hero-drop.has-photo .hero-drop-hint{display:none;} /* Mockup realista del hero: el fondo CSS es solo el primer pintado; encima va un canvas (js/mockup.js) que pinta la foto del visitante curvada, recortada a la zona imprimible y con las luces del producto. */ .hero-drop.mockup{border-style:solid; background-color:#efe9df; background-size:cover; background-position:center;} .hero-drop.mockup--copa{background-image:url(../img/mockups/copa-blanca.webp);} .hero-drop.mockup--camiseta{background-image:url(../img/mockups/camiseta-blanca.webp);} .hero-mockup-canvas{position:absolute; inset:0; width:100%; height:100%; display:block;} .drop-badge{ position:relative; display:flex; align-items:center; gap:6px; padding:5px 12px 5px 9px; border-radius:999px; background:rgba(255,253,246,0.92); box-shadow:0 2px 8px rgba(51,42,31,0.18); transition:transform .2s ease; } /* Selector con .polaroid .shot a propósito: ".polaroid .shot svg{width:40%}" es más específico y, sin esto, el icono se medía en % del propio globo y el texto se salía del recuadro. */ .polaroid .shot .drop-badge svg{width:18px; height:18px; flex:none;} .drop-badge{max-width:88%;} .drop-badge .hero-drop-hint{padding:0; color:var(--ink); font-size:.95rem; line-height:1.2; text-align:left;} .hero-drop.mockup:hover .drop-badge, .hero-drop.mockup:focus-visible .drop-badge{transform:scale(1.06);} .hero-drop.has-photo .drop-badge{display:none;} .confetti-bit{ position:absolute; top:50%; left:50%; width:8px; height:8px; border-radius:50%; transform:translate(-50%,-50%); pointer-events:none; z-index:5; animation:confetti-pop .7s ease-out forwards; } @keyframes confetti-pop{ 0%{transform:translate(-50%,-50%) scale(0); opacity:1;} 55%{opacity:1;} 100%{transform:translate(calc(-50% + var(--dx,20px)), calc(-50% + var(--dy,20px))) scale(1); opacity:0;} } @keyframes polaroid-land{ 0%{transform:translateY(0) rotate(var(--tilt,0deg)) scale(1);} 35%{transform:translateY(-6px) rotate(calc(var(--tilt,0deg) * 1.8)) scale(1.06);} 65%{transform:translateY(2px) rotate(calc(var(--tilt,0deg) * 0.6)) scale(0.99);} 100%{transform:translateY(0) rotate(var(--tilt,0deg)) scale(1);} } .polaroid.landed{animation:polaroid-land .5s cubic-bezier(.3,1.6,.5,1) both;} .p1{width:58%; left:0; top:6%; --tilt:-6deg; transform:rotate(var(--tilt)); z-index:2;} .p2{width:46%; right:0; bottom:2%; --tilt:5deg; transform:rotate(var(--tilt)); z-index:1;} .p1 .tape{top:-14px; left:38%; transform:translateX(-50%) rotate(-3deg);} .p2 .tape{top:-14px; left:32%; transform:translateX(-50%) rotate(4deg);} /* ---------- ticker de datos (antes: banda con scroll infinito — se veía "cortada" en el borde en vez de leerse como una cinta en movimiento; ahora son etiquetas sueltas que envuelven línea, nunca se recortan) ---------- */ .marquee{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; background:var(--mustard); border-block:2px solid var(--ink); padding:12px 20px; transform:rotate(-1deg); margin-block:8px 0; } .marquee span{ display:inline-flex; align-items:center; white-space:nowrap; font-family:var(--font-display); font-weight:600; font-size:1.02rem; color:var(--ink); } /* ---------- section shells ---------- */ section{padding-block:60px;} .section-head{text-align:center; margin-bottom:40px;} .section-head .kicker{font-family:var(--font-hand); font-size:1.3rem; transform:rotate(-1.5deg); display:inline-block;} .section-head h2{margin-top:8px; font-size:clamp(1.7rem,3.4vw,2.4rem);} /* steps as index cards */ .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; list-style:none; margin:0; padding:0;} .step{position:relative; background:var(--paper-card); border:1px solid var(--line); padding:26px 20px 22px; box-shadow:0 6px 14px rgba(51,42,31,0.08); transform:rotate(var(--tilt,0deg));} .step .tape{top:-12px; left:50%; transform:translateX(-50%) rotate(-3deg);} .step .circle-num{ width:36px; height:36px; border-radius:50%; border:2px solid var(--ink); display:flex; align-items:center; justify-content:center; font-family:var(--font-hand); font-size:1.3rem; font-weight:700; margin-bottom:12px; } /* Pequeño "pop" del número al aparecer el paso en el scroll — se apoya en la clase .in-view que ya pone Riojika.initScrollReveal(), sin JS propio ni riesgo de animationend (es una animación que se reproduce una vez, nadie necesita limpiarla después). */ .step.reveal.in-view .circle-num{animation:popIn 420ms var(--ease-out) both; animation-delay:120ms;} @keyframes popIn{from{transform:scale(.4) rotate(-10deg); opacity:0;} to{transform:scale(1) rotate(0deg); opacity:1;}} .step h3{font-size:1.1rem;} .step p{margin-top:8px; color:var(--ink-dim); font-size:0.92rem;} /* catalogue as polaroid grid */ .catalog{display:grid; grid-template-columns:repeat(4,1fr); gap:26px;} .cat-link{text-decoration:none; display:block;} .cat-card{position:relative; background:var(--paper-card); border:1px solid var(--line); padding:12px 12px 16px; box-shadow:0 6px 14px rgba(51,42,31,0.1); transform:rotate(var(--tilt,0deg));} .cat-shot{aspect-ratio:1; background:var(--paper); border:1px solid var(--line); display:flex; align-items:center; justify-content:center;} .cat-shot svg{width:36%; color:var(--sage-dark);} .cat-shot{overflow:hidden;} .card-media .card-photo, .cat-shot .card-photo, .big-polaroid .card-photo{width:100%; height:100%; object-fit:cover; display:block;} .cat-body{padding-top:12px; text-align:center;} .cat-body h3{font-size:1rem;} .cat-body .meta{margin-top:4px; font-size:0.78rem; color:var(--ink-dim);} .price-note{ margin-top:8px; display:inline-block; font-family:var(--font-hand); font-size:1.3rem; color:var(--coral-dark); border-bottom:2px solid var(--coral); } .cat-link:hover .cat-card, .cat-link:focus-visible .cat-card{box-shadow:0 10px 20px rgba(51,42,31,0.18);} /* spotlight */ .spotlight{display:grid; grid-template-columns:minmax(0,400px) minmax(0,540px); justify-content:center; gap:72px; align-items:center;} .spotlight-list{list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:10px;} .spotlight-list li{display:flex; align-items:center; gap:10px; color:var(--ink-dim); font-size:0.96rem;} .dot-sticker{width:12px; height:12px; border-radius:50%; flex:none;} .spotlight p.lead{margin-top:14px; color:var(--ink-dim); max-width:48ch;} .big-polaroid{position:relative; background:var(--paper-card); border:1px solid var(--line); padding:16px 16px 52px; box-shadow:0 10px 22px rgba(51,42,31,0.14); --tilt:-2deg; transform:rotate(var(--tilt)); max-width:380px; margin-inline:auto;} .big-polaroid .shot{aspect-ratio:1; overflow:hidden; background:var(--paper); display:flex; align-items:center; justify-content:center;} .big-polaroid .shot svg{width:44%; color:var(--coral-dark);} .big-polaroid .cap{position:absolute; bottom:16px; left:0; right:0; text-align:center; font-family:var(--font-hand); font-size:1.3rem;} .big-polaroid .tape{top:-14px; left:50%; transform:translateX(-50%) rotate(-4deg);} /* sticky-note features */ .notes3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;} .stick{padding:24px 20px; position:relative; box-shadow:0 6px 14px rgba(51,42,31,0.1); transform:rotate(var(--tilt,0deg));} .stick:nth-child(1){background:#fdf1c4;} .stick:nth-child(2){background:#dff1e4;} .stick:nth-child(3){background:#fbe1e3;} .stick h3{ font-size:1.08rem; display:inline-block; background-image:linear-gradient(var(--coral-dark),var(--coral-dark)); background-repeat:no-repeat; background-position:0 100%; background-size:0% 2px; } .stick p{margin-top:8px; color:var(--ink-dim); font-size:0.92rem;} /* El subrayado "se dibuja" bajo el título una vez la tarjeta ya se ha asentado — anima background-size, no transform, así no compite con la transición de .reveal que ya mueve/rota la tarjeta entera. */ .stick.reveal.in-view h3{animation:underlineGrow 480ms var(--ease-out) 260ms both;} @keyframes underlineGrow{to{background-size:100% 2px;}} /* testimonials as lined notes */ .lined-notes{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;} .lined{ position:relative; background: repeating-linear-gradient(var(--paper-card) 0 31px, var(--line) 31px 32px); border:1px solid var(--line); padding:20px 18px; box-shadow:0 6px 14px rgba(51,42,31,0.1); transform:rotate(var(--tilt,0deg)); } .lined .tape{top:-12px; right:20px; transform:rotate(4deg);} .lined p.text{font-family:var(--font-hand); font-size:1.35rem; line-height:1.35; color:var(--ink);} .lined .who{margin-top:14px; font-family:var(--font-body); font-weight:700; font-size:0.85rem; color:var(--ink-dim);} /* final cta */ .final{ background:var(--paper-card); border:1px solid var(--line); padding:56px 32px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:16px; box-shadow:0 8px 20px rgba(51,42,31,0.1); position:relative; } .final .tape{top:-13px; left:50%; transform:translateX(-50%) rotate(-2deg);} .final h2{font-size:clamp(1.8rem,4vw,2.6rem); max-width:22ch;} .final p{color:var(--ink-dim); max-width:46ch;} /* newsletter form */ .newsletter-form{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px;} .newsletter-form input{ flex:1; min-width:200px; font-family:var(--font-body); font-size:0.92rem; padding:11px 16px; border:2px solid var(--ink); border-radius:999px; background:var(--paper); color:var(--ink); } .newsletter-form input::placeholder{color:var(--ink-dim);} /* ---------- footer ---------- */ footer{border-top:2px dashed var(--line); padding-block:40px 26px; font-size:0.9rem;} .foot-grid{display:grid; grid-template-columns:1.3fr repeat(3,1fr); gap:30px;} .foot-grid h4{font-family:var(--font-display); font-size:0.95rem; margin-bottom:12px;} .foot-grid ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;} .foot-grid a{text-decoration:none; color:var(--ink-dim);} .foot-grid a:hover{color:var(--ink);} .foot-grid p{color:var(--ink-dim); max-width:30ch;} .foot-bottom{margin-top:30px; padding-top:16px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; color:var(--ink-dim); font-size:0.82rem;} /* ---------- toast ---------- */ .toast{ position:fixed; bottom:24px; left:50%; transform:translate(-50%,12px) scale(.97); background:var(--ink); color:var(--paper); padding:14px 22px; border-radius:999px; box-shadow:0 12px 24px rgba(51,42,31,.28); font-size:0.9rem; font-weight:700; display:inline-flex; align-items:center; gap:10px; opacity:0; pointer-events:none; transition:transform .3s ease, opacity .3s ease; z-index:300; max-width:90vw; } .toast svg{width:18px; height:18px; color:var(--mustard); flex:none;} .toast.show{opacity:1; transform:translate(-50%,0) scale(1);} @media (max-width:840px){ .hero{grid-template-columns:minmax(0,1fr); gap:32px;} .board{margin-top:20px;} .steps{grid-template-columns:1fr;} .catalog{grid-template-columns:repeat(2,1fr);} .spotlight{grid-template-columns:minmax(0,1fr); gap:32px;} .notes3{grid-template-columns:1fr;} .lined-notes{grid-template-columns:1fr;} .foot-grid{grid-template-columns:1fr 1fr;} } /* ========================================================================== Resto del sitio (catálogo, producto, carrito, checkout, cuentas, admin…) Mismas clases que styles.css — solo cambia el "traje" a juego con la home. ========================================================================== */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; color: var(--ink); text-wrap: balance; } h1 { font-size: var(--text-4xl); } h2 { font-size: var(--text-2xl); } h3 { font-size: var(--text-lg); } h4 { font-size: var(--text-md); font-family: var(--font-body); font-weight: 700; } p.lead, .lead { font-size: var(--text-md); color: var(--ink-dim); max-width: 48ch; } .container { width: 100%; max-width: var(--container-w); margin-inline: auto; padding-inline: 20px; } .section { padding-block: var(--space-8); } .section-tight { padding-block: var(--space-6); } .section-alt { background: var(--paper-soft); } .section-head { max-width: 44rem; margin-inline: auto; text-align: center; margin-bottom: var(--space-6); } .section-head.center { margin-inline: auto; text-align: center; } /* ---------------- Botones (variantes reutilizadas en toda la web) ---------------- */ .btn-primary { background: var(--coral); color: var(--on-coral); transition: background-color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .btn-primary:hover { background: var(--coral-darker); } /* Confirmación breve al añadir al carrito (initProductPage en main.js). */ .btn-primary.btn-added { background: var(--sage-dark); transform: scale(1.03); } .btn-secondary { background: var(--paper-card); color: var(--ink); } .btn-ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--coral-dark); padding-inline: var(--space-3); min-height: auto; } .btn-ghost:hover { text-decoration: underline; background: transparent; transform: none; } .btn-block { width: 100%; } .btn-sm { padding: 9px 18px; font-size: 0.85rem; } .btn[disabled] { opacity: 0.5; cursor: not-allowed; box-shadow: none; } /* ---------------- Cabecera (resto de páginas) ---------------- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(252, 248, 241, 0.94); backdrop-filter: blur(8px); border-bottom: 2px solid var(--line); padding-inline: 20px; } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: 14px; max-width: var(--container-w); margin-inline: auto; position: relative; } .logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: var(--ink); flex-shrink: 0; text-decoration: none; } .logo-mark { color: var(--coral-dark); } .site-nav { flex: 1; } .nav-menu { display: flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: 600; justify-content: center; list-style: none; margin: 0; padding: 0; } .nav-menu a { padding: 8px 14px; border-radius: var(--radius-full); display: inline-block; text-decoration: none; color: var(--ink); } .nav-menu a:hover { background: var(--paper-card); box-shadow: var(--shadow-sm); } .nav-menu a[aria-current='page'] { background: var(--paper-card); box-shadow: var(--shadow-sm); color: var(--coral-dark); } .nav-toggle { display: none; padding: 8px 10px; border-radius: var(--radius-full); background: var(--paper-card); border: 2px solid var(--ink); align-items: center; justify-content: center; } .nav-toggle svg { width: 20px; height: 20px; display: block; } .cart-link { position: relative; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; padding: 6px 14px; border-radius: 14px; font-weight: 700; font-size: 0.95rem; color: var(--ink); background: var(--paper-card); border: 2px solid var(--ink); transform: rotate(2deg); flex-shrink: 0; font-family: var(--font-hand); } .cart-link svg { width: 18px; height: 18px; color: var(--ink); } .cart-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding-inline: 4px; border-radius: var(--radius-full); background: var(--coral); color: var(--on-coral); font-size: 0.75rem; font-weight: 800; } .cart-count.bump { animation: bump 260ms var(--ease-out); } .header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .account-link { position: relative; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; padding: 6px 12px; border-radius: 14px; font-weight: 700; font-size: 0.85rem; color: var(--ink); background: var(--paper-card); border: 2px solid var(--ink); flex-shrink: 0; font-family: var(--font-body); } .account-link:hover { background: var(--paper-soft); } .account-link svg { width: 16px; height: 16px; color: var(--ink); flex-shrink: 0; } @media (max-width: 640px) { .account-link .account-link-label { display: none; } .account-link { padding: 8px; } } @media (max-width: 860px) { .nav-toggle { display: inline-flex; } .site-nav { order: 4; flex-basis: 100%; display: flex; flex-direction: column; } .nav-toggle { align-self: flex-end; } .nav-menu { flex-direction: column; align-items: flex-start; gap: 2px; max-height: 0; overflow: hidden; transition: max-height var(--dur-slow) var(--ease-in-out); } .nav-menu.open { max-height: 320px; padding-block: var(--space-3); } .nav-menu li { width: 100%; } .nav-menu a { display: block; width: 100%; } .header-inner { flex-wrap: wrap; } } /* ---------------- Migas de pan ---------------- */ .breadcrumbs { font-size: var(--text-xs); color: var(--ink-dim); padding-block: var(--space-4); } .breadcrumbs a { text-decoration: none; color: var(--ink-dim); } .breadcrumbs a:hover { color: var(--coral-dark); text-decoration: underline; } .breadcrumbs .sep { margin-inline: var(--space-2); opacity: 0.6; } /* ---------------- Rasgo diferencial (sobre nosotros) ---------------- */ .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } .feature-icon { width: 48px; height: 48px; border: 2px solid var(--ink); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-4); color: var(--coral-dark); background: var(--paper-card); } .feature-icon svg { width: 22px; height: 22px; } .feature h3 { margin-bottom: var(--space-2); } .feature p { color: var(--ink-dim); font-size: var(--text-sm); } @media (max-width: 780px) { .features { grid-template-columns: 1fr; } } /* ---------------- Tarjetas de categoría / producto ---------------- */ .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } @media (max-width: 980px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .grid-4 { grid-template-columns: 1fr; } .grid-3 { grid-template-columns: 1fr; } } .card { background: var(--paper-card); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); transform: rotate(var(--tilt, 0deg)); box-shadow: var(--shadow-sm); } .card-link { display: block; height: 100%; } .card-link:nth-child(4n+1) .card, .card-link:nth-child(4n+3) .card { --tilt: -1.2deg; } .card-link:nth-child(4n+2) .card, .card-link:nth-child(4n+4) .card { --tilt: 0.9deg; } /* Mismo cadencia de aparición escalonada que ya usan las secciones de la home (steps/catalog-teaser/notes3/lined-notes, más arriba) — aquí faltaba en la rejilla completa del catálogo, que es la que tiene más tarjetas y más se nota si todas aparecen de golpe en vez de en cascada. */ .grid-4 .card-link:nth-child(4n+1) .card { transition-delay: 0s; } .grid-4 .card-link:nth-child(4n+2) .card { transition-delay: .06s; } .grid-4 .card-link:nth-child(4n+3) .card { transition-delay: .12s; } .grid-4 .card-link:nth-child(4n+4) .card { transition-delay: .18s; } .card-link:hover .card, .card-link:focus-visible .card { transform: translateY(-6px) rotate(calc(var(--tilt, 0deg) * 1.4)); box-shadow: var(--shadow-md); } .card-media { aspect-ratio: 4 / 3; position: relative; display: flex; align-items: center; justify-content: center; color: #fff; overflow: hidden; } .card-media svg { width: 34%; height: 34%; opacity: 0.95; } .card-media .media-tag { position: absolute; top: var(--space-3); left: var(--space-3); background: rgba(255,253,246,0.92); color: var(--ink); font-size: var(--text-xs); font-weight: 700; padding: 3px var(--space-3); border-radius: var(--radius-full); } .media-copas { background: linear-gradient(145deg, #c2456a, var(--sky-dark)); } .media-panuelos { background: linear-gradient(145deg, #e8505f, var(--coral-dark)); } .media-llaveros { background: linear-gradient(145deg, #f7d23e, var(--mustard-dark)); } .media-camisetas { background: linear-gradient(145deg, #3cb56b, var(--sage-dark)); } /* Categorías creadas desde el panel admin, sin icono propio: letra inicial sobre un fondo de marca, hasta que el admin suba una foto real. */ .media-custom { background: linear-gradient(145deg, var(--sage), var(--sage-dark)); } .media-custom .media-letter { font-family: var(--font-hand); font-size: 2.6rem; color: #fff; opacity: 0.9; } .card-body { padding: var(--space-5); } .card-body h3 { margin-bottom: var(--space-1); } .card-eyebrow { font-size: var(--text-xs); color: var(--coral-dark); font-weight: 700; margin-bottom: var(--space-2); text-transform: uppercase; letter-spacing: 0.03em; } .card-price { margin-top: var(--space-3); font-family: var(--font-hand); font-size: 1.35rem; color: var(--coral-dark); } .card-price span { font-size: var(--text-xs); color: var(--ink-dim); font-family: var(--font-body); font-weight: 600; } .product-card { display: flex; flex-direction: column; height: 100%; } .product-card .card-body { display: flex; flex-direction: column; gap: var(--space-2); flex: 1; } .product-card p { font-size: var(--text-sm); color: var(--ink-dim); } /* ---------------- Pie de página (resto de páginas) ---------------- */ .site-footer { background: var(--ink); color: rgba(250,247,238,0.85); margin-top: var(--space-9); } .site-footer .container { padding-inline: 20px; } .footer-grid { display: grid; grid-template-columns: 1.4fr 0.8fr 0.8fr 1fr; gap: var(--space-6); padding-block: var(--space-8); } .footer-grid h2 { color: var(--paper); font-family: var(--font-body); font-size: var(--text-sm); margin-bottom: var(--space-4); text-transform: uppercase; letter-spacing: 0.04em; } .footer-grid p { color: rgba(250,247,238,0.72); font-size: var(--text-sm); } .footer-grid ul { display: flex; flex-direction: column; gap: var(--space-3); font-size: var(--text-sm); list-style: none; margin: 0; padding: 0; } .footer-grid a { color: inherit; text-decoration: none; } .footer-grid a:hover { color: var(--mustard); text-decoration: underline; } .footer-brand .logo { color: var(--paper); margin-bottom: var(--space-3); } .footer-brand .logo-mark { color: var(--mustard); } .footer-payments { margin-top: var(--space-4); font-size: var(--text-xs); letter-spacing: 0.02em; } .newsletter-form { display: flex; gap: var(--space-2); margin-top: var(--space-4); flex-wrap: wrap; } .newsletter-form input { flex: 1; min-width: 160px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-full); border: 1px solid rgba(250,247,238,0.3); background: rgba(250,247,238,0.08); color: var(--paper); } .newsletter-form input::placeholder { color: rgba(250,247,238,0.65); } .newsletter-form .btn-secondary { border-color: rgba(250,247,238,0.5); color: var(--paper); background: transparent; box-shadow: none; } .newsletter-form .btn-secondary:hover { background: var(--paper); color: var(--ink); } @media (max-width: 560px) { .newsletter-form { flex-direction: column; align-items: stretch; } .newsletter-form input { min-width: 0; } } .footer-bottom { border-top: 1px solid rgba(250,247,238,0.16); padding-block: var(--space-4); font-size: var(--text-xs); color: rgba(250,247,238,0.68); } .footer-bottom .container { padding-inline: 20px; } @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } } /* ---------------- Página de catálogo ---------------- */ .page-header { padding-block: var(--space-7) var(--space-5); } .page-header .lead { margin-top: var(--space-3); } .filter-bar { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-6); } .filter-chip { padding: 8px 20px; border-radius: var(--radius-full); border: 2px solid var(--ink); background: var(--paper-card); font-size: var(--text-sm); font-weight: 700; font-family: var(--font-body); transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } .filter-chip:hover { background: var(--paper-soft); } .filter-chip[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--paper); } /* ---------------- Página de producto ---------------- */ .product-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start; padding-block: var(--space-5) var(--space-8); } @media (max-width: 940px) { .product-layout { grid-template-columns: 1fr; } } .configurator-preview { position: sticky; top: 90px; background: var(--paper-card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); } @media (max-width: 940px) { .configurator-preview { position: static; } } .preview-stage { position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-md); background: var(--paper-soft); background-image: radial-gradient(circle, var(--dot) 1px, transparent 1.6px); background-size: 20px 20px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .preview-note { position: absolute; top: var(--space-3); left: var(--space-3); background: var(--ink); color: var(--paper); font-size: var(--text-xs); font-weight: 700; padding: 4px var(--space-3); border-radius: var(--radius-full); z-index: 5; } .silhouette { position: relative; width: 62%; } .silhouette .photo-window { position: absolute; overflow: hidden; background-size: cover; background-position: center; background-color: #e7dcc0; display: flex; align-items: center; justify-content: center; color: var(--ink-dim); } .silhouette .photo-window svg { width: 34%; height: 34%; opacity: 0.6; } .silhouette .photo-window .window-hint { font-size: 0.6875rem; font-weight: 700; color: var(--ink-dim); text-align: center; padding: 0 var(--space-2); } .silhouette .photo-window.has-photo svg, .silhouette .photo-window.has-photo .window-hint { display: none; } .shape-circulo { border-radius: 50% !important; } .shape-rectangular { border-radius: 14% !important; } .shape-corazon { border-radius: 0 !important; clip-path: polygon(50% 15%, 61% 4%, 75% 4%, 88% 15%, 88% 32%, 50% 70%, 12% 32%, 12% 15%, 25% 4%, 39% 4%); } .shape-hueso { border-radius: 45% 55% 55% 45% / 60% 60% 40% 40% !important; } .silhouette--mug { width: 58%; aspect-ratio: 1/1; } .silhouette--mug .mug-body { position: absolute; inset: 8% 18% 8% 4%; background: #fffdf6; border-radius: 10% / 8%; box-shadow: inset 0 0 0 1px rgba(51,42,31,0.1), var(--shadow-sm); } .silhouette--mug .mug-handle { position: absolute; right: 0; top: 28%; width: 22%; height: 44%; border: 7px solid #fffdf6; border-left: none; border-radius: 0 50% 50% 0; box-shadow: var(--shadow-sm); } .silhouette--mug .photo-window { inset: 16% 30% 16% 10%; border-radius: 6%; } .silhouette--case { width: 40%; aspect-ratio: 0.5/1; } .silhouette--case .case-body { position: absolute; inset: 0; background: #fffdf6; border-radius: 18% / 9%; box-shadow: var(--shadow-sm); } .silhouette--case .case-cam { position: absolute; top: 6%; left: 10%; width: 26%; height: 12%; border-radius: 30%; background: var(--ink); opacity: 0.85; z-index: 3; } .silhouette--case .photo-window { inset: 5% 5% 5% 5%; border-radius: 15% / 8%; } .silhouette--keychain { width: 34%; aspect-ratio: 1/1.15; } .silhouette--keychain .ring { position: absolute; top: -6%; left: 50%; transform: translateX(-50%); width: 26%; aspect-ratio: 1/1; border: 6px solid var(--mustard-dark); border-radius: 50%; background: transparent; } .silhouette--keychain .photo-window { inset: 14% 4% 4% 4%; border-radius: 50%; background-color: #fffdf6; } .silhouette--custom { width: 60%; aspect-ratio: 1/1; } .silhouette--custom .photo-window { inset: 4%; border-radius: var(--radius-md); } .silhouette--textile { width: 70%; aspect-ratio: 1/1.05; } .silhouette--textile .shirt-body { position: absolute; inset: 0; clip-path: polygon(30% 0%, 42% 8%, 58% 8%, 70% 0%, 100% 18%, 84% 34%, 76% 28%, 76% 100%, 24% 100%, 24% 28%, 16% 34%, 0% 18%); background: #fffdf6; box-shadow: var(--shadow-sm); } .silhouette--textile .photo-window { top: 30%; left: 32%; width: 36%; height: 32%; border-radius: var(--radius-sm); } .stage-controls { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-5); flex-wrap: wrap; } .color-dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .color-dot[aria-pressed='true'] { border-color: var(--ink); transform: scale(1.12); } .upload-zone { margin-top: var(--space-5); border: 2px dashed var(--line); border-radius: var(--radius-md); padding: var(--space-5); text-align: center; transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out); } .upload-zone.dragover { border-color: var(--coral); background: rgba(226,119,90,0.08); } .upload-zone svg { width: 26px; height: 26px; color: var(--coral-dark); margin: 0 auto var(--space-2); } .upload-zone p { font-size: var(--text-sm); color: var(--ink-dim); margin-inline: auto; } .upload-zone .btn { margin-top: var(--space-3); } .upload-filename { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--sage-dark); font-weight: 700; } .product-info h1 { margin-bottom: var(--space-2); } .product-category-tag { color: var(--coral-dark); font-weight: 700; font-size: var(--text-xs); margin-bottom: var(--space-2); display: block; text-transform: uppercase; letter-spacing: 0.03em; } .product-price { font-family: var(--font-hand); font-size: 2.2rem; color: var(--coral-dark); margin-block: var(--space-3) var(--space-5); } .product-price small { font-family: var(--font-body); font-size: var(--text-sm); color: var(--ink-dim); font-weight: 600; } .option-group { margin-bottom: var(--space-6); } .option-group h3 { font-size: var(--text-sm); margin-bottom: var(--space-3); font-family: var(--font-body); font-weight: 700; } .pill-options { display: flex; flex-wrap: wrap; gap: var(--space-3); } .pill-option { border: 2px solid var(--line); background: var(--paper-card); border-radius: var(--radius-full); padding: 8px 20px; font-size: var(--text-sm); font-weight: 600; font-family: var(--font-body); transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } .pill-option:hover { border-color: var(--coral); } .pill-option[aria-pressed='true'] { background: var(--coral); border-color: var(--coral); color: var(--on-coral); } .field { margin-bottom: var(--space-5); } .field label { display: block; font-size: var(--text-sm); font-weight: 700; margin-bottom: var(--space-2); } .field .hint { display: block; font-size: var(--text-xs); color: var(--ink-dim); font-weight: 400; margin-top: var(--space-1); } .field input[type="text"], .field input[type="password"], .field textarea, .field input[type="email"], .field input[type="tel"], .field input[type="number"], .field select { width: 100%; padding: 11px var(--space-4); border-radius: var(--radius-md); border: 2px solid var(--line); background: var(--paper-card); color: var(--ink); font-family: var(--font-body); font-size: var(--text-base); transition: border-color var(--dur-base) var(--ease-out); } .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--coral); } .field input:focus:not(:focus-visible), .field textarea:focus:not(:focus-visible), .field select:focus:not(:focus-visible) { outline: none; } .field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: 3px solid var(--coral-dark); outline-offset: 2px; } .field textarea { min-height: 90px; resize: vertical; } .field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--error); } .field-error { color: var(--error); font-size: var(--text-xs); font-weight: 700; margin-top: var(--space-1); display: none; } .field.has-error .field-error { display: block; } .qty-row { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); } .qty-stepper { display: inline-flex; align-items: center; border: 2px solid var(--ink); border-radius: var(--radius-full); overflow: hidden; background: var(--paper-card); } .qty-stepper button { width: 38px; height: 38px; font-size: var(--text-md); } .qty-stepper button:hover { background: var(--paper-soft); } .qty-stepper input { width: 42px; text-align: center; border: none; background: transparent; font-family: var(--font-body); } .purchase-actions { display: flex; gap: var(--space-4); flex-wrap: wrap; } .trust-row { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-block: var(--space-6); padding-block: var(--space-5); border-block: 2px dashed var(--line); } .trust-row li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: 700; color: var(--ink-dim); } .trust-row svg { width: 18px; height: 18px; color: var(--sage-dark); flex-shrink: 0; } /* Acordeón */ .accordion-item { border-bottom: 1px solid var(--line); } .accordion-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; padding-block: var(--space-4); font-weight: 700; text-align: left; font-family: var(--font-body); font-size: var(--text-base); color: var(--ink); } .accordion-trigger svg { width: 18px; height: 18px; transition: transform var(--dur-base) var(--ease-out); flex-shrink: 0; } .accordion-trigger[aria-expanded='true'] svg { transform: rotate(45deg); } .accordion-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-slow) var(--ease-in-out); } .accordion-panel[data-open='true'] { grid-template-rows: 1fr; } .accordion-panel-inner { overflow: hidden; } .accordion-panel-inner p, .accordion-panel-inner ul { font-size: var(--text-sm); color: var(--ink-dim); padding-bottom: var(--space-4); } .accordion-panel-inner ul { display: flex; flex-direction: column; gap: var(--space-2); } .related-strip { padding-block: var(--space-8); } /* ---------------- Carrito ---------------- */ .cart-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--space-8); align-items: start; padding-block: var(--space-5) var(--space-8); } @media (max-width: 900px) { .cart-layout { grid-template-columns: 1fr; } } .cart-list { display: flex; flex-direction: column; gap: var(--space-4); } .cart-item { display: grid; grid-template-columns: 88px 1fr auto; gap: var(--space-4); align-items: center; background: var(--paper-card); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-4); } .cart-item-thumb { width: 88px; height: 88px; border-radius: var(--radius-sm); background-size: cover; background-position: center; background-color: var(--paper-soft); display: flex; align-items: center; justify-content: center; color: var(--coral-dark); overflow: hidden; } .cart-item-thumb svg { width: 40%; height: 40%; } .cart-item-info h3 { font-size: var(--text-md); margin-bottom: 2px; } .cart-item-info p { font-size: var(--text-xs); color: var(--ink-dim); margin-bottom: var(--space-1); } .cart-item-meta { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-2); flex-wrap: wrap; } .cart-item-actions { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-3); } .cart-item-price { font-family: var(--font-hand); font-size: 1.3rem; color: var(--coral-dark); } .remove-btn { font-size: var(--text-xs); font-weight: 700; color: var(--error); background: none; } .remove-btn:hover { text-decoration: underline; } .cart-item { transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } .cart-item.removing { opacity: 0; transform: scale(.96) translateX(10px); pointer-events: none; } .empty-state { text-align: center; padding: var(--space-9) var(--space-5); background: var(--paper-card); border: 2px dashed var(--line); border-radius: var(--radius-lg); } .empty-state svg { width: 52px; height: 52px; color: var(--coral); margin: 0 auto var(--space-4); } .empty-state p { margin-inline: auto; margin-bottom: var(--space-5); color: var(--ink-dim); max-width: 42ch; } .summary-card { background: var(--paper-card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6); position: sticky; top: 90px; box-shadow: var(--shadow-sm); } .summary-row { display: flex; justify-content: space-between; font-size: var(--text-sm); padding-block: var(--space-2); gap: var(--space-3); } .summary-row.total { font-family: var(--font-hand); font-size: 1.4rem; border-top: 2px dashed var(--line); margin-top: var(--space-3); padding-top: var(--space-4); } #summary-total { display: inline-block; transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } #summary-total.value-flash { transform: scale(1.14); color: var(--coral-dark); } .summary-note { font-size: var(--text-xs); color: var(--ink-dim); margin-top: var(--space-4); } /* ---------------- Checkout ---------------- */ .checkout-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-8); padding-block: var(--space-5) var(--space-8); align-items: start; } @media (max-width: 900px) { .checkout-layout { grid-template-columns: 1fr; } } .checkout-section { background: var(--paper-card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6); margin-bottom: var(--space-5); } .checkout-section h2 { font-size: var(--text-lg); margin-bottom: var(--space-4); } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } @media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } } .payment-options { display: flex; flex-direction: column; gap: var(--space-3); } .payment-option { display: flex; align-items: center; gap: var(--space-3); border: 2px solid var(--line); border-radius: var(--radius-md); padding: var(--space-4); cursor: pointer; transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out); } .payment-option:has(input:checked) { border-color: var(--coral); background: rgba(226,119,90,0.07); } .payment-option svg { width: 22px; height: 22px; color: var(--coral-dark); flex-shrink: 0; } .payment-option strong { display: block; font-size: var(--text-sm); } .payment-option span { font-size: var(--text-xs); color: var(--ink-dim); } .gateway-note { display: flex; gap: var(--space-3); background: var(--paper-soft); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-4); font-size: var(--text-xs); color: var(--ink-dim); margin-top: var(--space-4); } .gateway-note svg { width: 20px; height: 20px; color: var(--mustard-dark); flex-shrink: 0; } .confirmation-panel { text-align: center; padding: var(--space-9) var(--space-6); background: var(--paper-card); border: 1px solid var(--line); border-radius: var(--radius-lg); } .confirmation-panel svg { width: 56px; height: 56px; color: var(--sage-dark); margin: 0 auto var(--space-5); } .confirmation-panel .order-number { font-family: var(--font-hand); font-size: 2rem; color: var(--coral-dark); margin-block: var(--space-3) var(--space-5); } .confirmation-panel p { margin-inline: auto; max-width: 46ch; } /* ---------------- Páginas de contenido ---------------- */ .content-page { padding-block: var(--space-6) var(--space-8); } .content-page .lead { margin-bottom: var(--space-6); } .prose { max-width: 68ch; display: flex; flex-direction: column; gap: var(--space-4); } .prose h2 { margin-top: var(--space-6); } .prose ul, .prose ol { display: flex; flex-direction: column; gap: var(--space-2); padding-left: var(--space-5); list-style: disc; } .prose ol { list-style: decimal; } .value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-block: var(--space-6); } @media (max-width: 780px) { .value-grid { grid-template-columns: 1fr; } } .faq-item { border-bottom: 1px solid var(--line); padding-block: var(--space-4); } /* ---------------- Utilidades ---------------- */ .stack { display: flex; flex-direction: column; gap: var(--space-4); } .mt-0 { margin-top: 0; } .text-center { text-align: center; } .badge-uv { display: inline-flex; align-items: center; gap: var(--space-2); background: var(--mustard); color: var(--ink); font-size: var(--text-xs); font-weight: 800; padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); } /* ---------------- Cuentas de cliente ---------------- */ .auth-layout { display: flex; justify-content: center; padding-block: var(--space-6) var(--space-9); } .auth-card { width: 100%; max-width: 440px; background: var(--paper-card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-7) var(--space-6); box-shadow: var(--shadow-sm); } .auth-card h1 { font-size: var(--text-xl); margin-bottom: var(--space-2); } .auth-card .lead { margin-bottom: var(--space-6); max-width: none; } .auth-card .btn-block { margin-top: var(--space-2); } .auth-switch { margin-top: var(--space-5); font-size: var(--text-sm); text-align: center; color: var(--ink-dim); } .auth-switch a { color: var(--coral-dark); font-weight: 700; } .btn-google { background: var(--paper-card); color: var(--ink); gap: 10px; } .btn-google:hover { background: var(--paper-soft); } .auth-divider { display: flex; align-items: center; gap: 12px; margin-block: var(--space-5); color: var(--ink-dim); font-size: var(--text-xs); } .auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); } .auth-error { display: none; background: rgba(179,57,42,0.08); border: 1px solid var(--error); color: var(--error); font-size: var(--text-sm); font-weight: 600; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); margin-bottom: var(--space-5); } .auth-error.show { display: block; } .auth-success { display: none; background: rgba(90,122,69,0.1); border: 1px solid var(--sage-dark); color: var(--sage-dark); font-size: var(--text-sm); font-weight: 600; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); margin-bottom: var(--space-5); } .auth-success.show { display: block; } /* ---------------- Mi cuenta ---------------- */ .account-layout { display: grid; grid-template-columns: 240px 1fr; gap: var(--space-8); padding-block: var(--space-5) var(--space-9); align-items: start; } @media (max-width: 860px) { .account-layout { grid-template-columns: 1fr; } } .account-nav { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4); background: var(--paper-card); } .account-nav button { text-align: left; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-weight: 700; color: var(--ink-dim); font-family: var(--font-body); } .account-nav button[aria-current='true'] { background: var(--paper-soft); color: var(--coral-dark); } .account-panel { display: none; } .account-panel.active { display: block; } .order-card { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5); margin-bottom: var(--space-4); background: var(--paper-card); } .order-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-3); } .order-card-head h3 { font-size: var(--text-md); } .order-card-meta { font-size: var(--text-xs); color: var(--ink-dim); } .order-items-mini { font-size: var(--text-sm); color: var(--ink-dim); display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-3); } .order-tracking { font-size: var(--text-sm); background: var(--paper-soft); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3); } .order-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; } .status-badge { display: inline-flex; align-items: center; font-size: var(--text-xs); font-weight: 800; padding: 4px var(--space-3); border-radius: var(--radius-full); text-transform: uppercase; letter-spacing: 0.02em; } .status-badge[data-status='pagado'] { background: rgba(217,166,60,0.22); color: var(--mustard-dark); } .status-badge[data-status='preparando'] { background: rgba(138,171,114,0.2); color: var(--sage-dark); } .status-badge[data-status='enviado'] { background: rgba(226,119,90,0.2); color: var(--coral-dark); } .status-badge[data-status='entregado'] { background: rgba(90,122,69,0.2); color: var(--sage-dark); } .status-badge[data-status='cancelado'] { background: rgba(179,57,42,0.14); color: var(--error); } .status-badge[data-status='abierta'] { background: rgba(179,57,42,0.14); color: var(--error); } .status-badge[data-status='respondida'] { background: rgba(138,171,114,0.2); color: var(--sage-dark); } .status-badge[data-status='cerrada'] { background: var(--paper-soft); color: var(--ink-dim); } .claim-card { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5); margin-bottom: var(--space-4); background: var(--paper-card); } .claim-thread { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); } .claim-message { border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: var(--text-sm); max-width: 90%; } .claim-message[data-author='cliente'] { background: var(--paper-soft); align-self: flex-start; } .claim-message[data-author='admin'] { background: rgba(226,119,90,0.14); align-self: flex-end; text-align: right; } .claim-message .who { display: block; font-size: var(--text-xs); font-weight: 800; margin-bottom: var(--space-1); color: var(--ink-dim); } /* ---------------- Panel de administración ---------------- */ .admin-shell { min-height: 100vh; background: var(--paper); background-image: radial-gradient(circle, var(--dot) 1px, transparent 1.6px); background-size: 24px 24px; } .admin-topbar { background: var(--ink); color: var(--paper); padding: var(--space-4) 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-3); } .admin-topbar .logo { color: var(--paper); } .admin-topbar .logo-mark { color: var(--mustard); } .admin-main { max-width: var(--container-w); margin-inline: auto; padding: var(--space-7) 20px; } .admin-tabs { display: flex; gap: var(--space-2); margin-bottom: var(--space-6); flex-wrap: wrap; } .admin-tabs button { padding: 8px 20px; border: 2px solid var(--line); border-radius: var(--radius-full); font-weight: 700; background: var(--paper-card); font-family: var(--font-body); } .admin-tabs button[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--paper); } .admin-filters { display: flex; gap: var(--space-3); align-items: center; margin-bottom: var(--space-5); flex-wrap: wrap; } .admin-filters select { padding: var(--space-2) var(--space-4); border: 2px solid var(--line); border-radius: var(--radius-md); background: var(--paper-card); font-family: var(--font-body); } .admin-table { width: 100%; border-collapse: collapse; background: var(--paper-card); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; display: block; overflow-x: auto; white-space: nowrap; } .admin-table th, .admin-table td { text-align: left; padding: var(--space-3) var(--space-4); font-size: var(--text-sm); border-bottom: 1px solid var(--line); } .admin-table th { background: var(--paper-soft); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.03em; font-family: var(--font-body); } .admin-table tbody tr:hover { background: rgba(226,119,90,0.06); cursor: pointer; } .admin-table tbody tr:last-child td { border-bottom: none; } .admin-detail { background: var(--paper-card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6); margin-top: var(--space-5); } .admin-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-bottom: var(--space-5); } @media (max-width: 700px) { .admin-detail-grid { grid-template-columns: 1fr; } } .admin-detail dl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); font-size: var(--text-sm); margin: 0; } .admin-detail dt { color: var(--ink-dim); font-weight: 700; } .admin-detail dd { margin: 0; } .admin-inline-form { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; margin-top: var(--space-4); } .admin-inline-form input, .admin-inline-form select, .admin-inline-form textarea { padding: var(--space-2) var(--space-4); border: 2px solid var(--line); border-radius: var(--radius-md); font-family: var(--font-body); font-size: var(--text-sm); } .admin-inline-form textarea { width: 100%; resize: vertical; } /* ---------------- Panel: Contenido / Secciones / Productos ---------------- */ .admin-card { background: var(--paper-card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6); margin-bottom: var(--space-6); } .admin-card > h3 { margin: 0 0 var(--space-2); } .admin-card > .admin-card-hint { font-size: var(--text-xs); color: var(--ink-dim); margin: 0 0 var(--space-4); } .admin-field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); margin-top: var(--space-4); white-space: normal; } .admin-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .admin-field-wide { grid-column: 1 / -1; } .admin-field label { font-size: var(--text-xs); font-weight: 700; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.03em; white-space: normal; } .admin-field input, .admin-field textarea, .admin-field select { padding: var(--space-2) var(--space-4); border: 2px solid var(--line); border-radius: var(--radius-md); font-family: var(--font-body); font-size: var(--text-sm); background: var(--paper); width: 100%; box-sizing: border-box; white-space: normal; } .admin-field textarea { resize: vertical; } /* Filas repetibles (testimonios / FAQ): cada una es un mini-formulario con su propio botón de quitar, para no obligar a nadie a escribir JSON. */ .admin-repeat-list { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); } .admin-repeat-row { display: grid; grid-template-columns: 1fr auto; gap: var(--space-3); align-items: start; background: var(--paper-soft); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-4); } .admin-repeat-row .admin-field-grid { margin-top: 0; } .admin-repeat-row .btn-remove-row { flex: none; } /* Secciones de la home: lista de filas con controles de orden/visibilidad, sin viñetas de