/* ─────────────────────────────────────────────────────────────
   COLORTEX · Rediseño
   Paleta plena, tipografía display (Archivo Black) + Manrope,
   bordes negros y sombras duras. Los nombres de clase son los
   mismos de antes, así que el JS del sitio sigue funcionando.
   ───────────────────────────────────────────────────────────── */

:root {
  /* Paleta del rediseño */
  --yellow:#FFC400; --orange:#FF6B1A; --magenta:#E5177B;
  --purple:#7B2FF7; --cyan:#00B7C2;  --green:#35C46A;
  --wa:#35C46A; --wa-ink:#06240f;

  /* Neutros */
  --ink:#17140f;      /* negro tinta */
  --dark:#17140f;     /* alias heredado */
  --text:#17140f;
  --body:#4a443c;     /* texto de párrafo */
  --muted:#6b645a;
  --cream:#f7f3ec;    /* fondo general */
  --surface:#f7f3ec;
  --sand:#e9e2d6;     /* placeholder de imagen */
  --white:#ffffff;
  --card:#ffffff;

  --radius:12px; --radius-sm:8px;
  --display:'Archivo Black', 'Arial Black', sans-serif;
  --sans:'Manrope', system-ui, sans-serif;
  --maxw:1240px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--sans);background:var(--cream);color:var(--ink);overflow-x:hidden;
  -webkit-font-smoothing:antialiased;}
a{color:var(--magenta);text-decoration:none;}
img{max-width:100%;}

/* ── NAV ─────────────────────────────────────────────────── */
nav{position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:0;
  padding:0 24px;min-height:64px;
  background:linear-gradient(90deg,#D9480F 0%,#C2135F 34%,#5B1DBE 68%,#00747F 100%);}
section[id]{scroll-margin-top:104px;}

.nav-logo{display:flex;align-items:center;gap:10px;margin-right:18px;color:#fff;
  font-family:var(--display);font-size:17px;letter-spacing:-.5px;}
.nav-logo:hover{color:#fff;}
.nav-dot{width:24px;height:24px;border-radius:50%;flex:none;display:block;
  background:conic-gradient(#FFC400,#FF6B1A,#E5177B,#7B2FF7,#00B7C2,#35C46A,#FFC400);}
.nav-wa-dot{width:8px;height:8px;border-radius:50%;background:var(--wa-ink);display:block;flex:none;}

.nav-links{display:flex;gap:0;list-style:none;align-self:stretch;}
.nav-links a{display:flex;align-items:center;height:100%;padding:0 16px;color:#fff;
  font-size:12px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;
  border-bottom:5px solid rgba(255,255,255,0.28);transition:background .2s,border-color .2s;}
.nav-links a:hover{background:rgba(0,0,0,0.28);border-bottom-color:#fff;color:#fff;}

nav > div:last-child{margin-left:auto;display:flex;align-items:center;gap:8px;}

.nav-lang{display:flex;gap:4px;}
.lang-btn{background:transparent;border:2px solid rgba(255,255,255,0.5);color:#fff;
  font-family:var(--sans);font-size:11px;font-weight:800;letter-spacing:.5px;
  padding:5px 9px;border-radius:5px;cursor:pointer;transition:background .2s,color .2s;}
.lang-btn:hover{background:rgba(0,0,0,0.25);}
.lang-btn.active{background:#fff;border-color:#fff;color:var(--ink);}

.nav-ig{display:flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:6px;border:2px solid rgba(255,255,255,0.5);color:#fff;transition:background .2s;}
.nav-ig:hover{background:rgba(0,0,0,0.25);}

.nav-wa{display:flex;align-items:center;gap:7px;background:var(--green);color:var(--wa-ink);
  padding:9px 16px;border-radius:5px;font-size:12px;font-weight:800;letter-spacing:.6px;
  text-transform:uppercase;transition:background .2s;}
.nav-wa:hover{background:#2aa958;color:var(--wa-ink);}

.nav-burger{display:none;background:transparent;border:2px solid rgba(255,255,255,0.5);
  border-radius:5px;font-size:20px;line-height:1;color:#fff;cursor:pointer;padding:3px 8px;}

@media(max-width:900px){
  nav{padding:0 14px;flex-wrap:wrap;}
  .nav-burger{display:flex;align-items:center;}
  .nav-links{flex-direction:column;position:absolute;top:64px;left:0;right:0;
    background:var(--ink);max-height:0;overflow:hidden;transition:max-height .3s ease;z-index:101;}
  nav.menu-open .nav-links{max-height:400px;}
  .nav-links li{width:100%;}
  .nav-links a{display:block;padding:15px 18px;border-bottom:1px solid rgba(255,255,255,0.12);
    font-size:13px;}
}
/* En pantallas muy angostas se va el punto, no el texto. */
@media(max-width:430px){.nav-wa-dot{display:none;} .nav-wa{padding:9px 10px;font-size:11px;}}

/* ── CINTA DE AVISOS (ticker) ─────────────────────────────── */
.ticker{background:var(--yellow);border-bottom:3px solid var(--ink);overflow:hidden;
  position:sticky;top:64px;z-index:99;}
.ticker-track{display:flex;width:max-content;animation:ticker 34s linear infinite;}
.ticker-group{display:flex;align-items:center;gap:30px;padding:10px 15px;white-space:nowrap;
  font-size:12px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;color:var(--ink);}
.ticker-dot{width:7px;height:7px;border-radius:50%;background:var(--ink);flex:none;}
@keyframes ticker{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none;}}
@media(max-width:900px){.ticker{top:64px;}}

/* ── HERO ────────────────────────────────────────────────── */
#inicio{padding:0;}
.hero{position:relative;overflow:hidden;padding:56px 24px 0;background:var(--cream);}
/* max-content en la columna de texto: mide exactamente lo que necesita su
   línea más ancha (normalmente "ESTAMPADA"), nunca más. Antes la columna
   tenía un ancho fijo en fr que crecía con la pantalla aunque el texto no
   creciera, dejando un hueco de crema cada vez más grande a los dos lados
   (a la izquierda del texto, y entre el texto y la imagen). Con
   max-content el texto se pega al borde izquierdo y la imagen (1fr) se
   lleva TODO lo que sobra a la derecha — sin importar el idioma ni el
   ancho de pantalla, sin números mágicos que ajustar. */
.hero-inner{position:relative;z-index:1;margin:0;display:grid;
  grid-template-columns:minmax(0,max-content) minmax(0,1fr);gap:48px;align-items:stretch;
  min-height:480px;}
.hero-copy{position:relative;z-index:2;}
.hero-kicker{font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;
  color:var(--magenta);margin-bottom:20px;}
.hero-title{font-family:var(--display);font-size:clamp(44px,7.4vw,104px);line-height:.88;
  letter-spacing:-.035em;text-transform:uppercase;color:var(--ink);text-wrap:balance;
  margin:0 0 22px;}
.hero-title > span > span{display:block;}
.hero-title .hl{color:var(--magenta);}
.hero-lead{font-size:18px;line-height:1.55;max-width:46ch;color:var(--body);
  font-weight:500;margin:0 0 28px;}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:34px;}
/* Imagen principal (1600 × 1200 px). Se sube desde el panel admin y llega
   como background-image; mientras no haya foto se ve el degradado.

   Vuelve a ser un item normal del grid (columna 2, 1fr = todo lo que
   sobra). Como la columna de texto ya mide justo lo que necesita
   (max-content, ver arriba), la imagen empieza sola justo después de la
   línea más ancha del título — sin tocar las líneas más cortas de encima
   y debajo — y llega sin trucos al borde derecho real de la ventana
   (cancela los 24px de padding de .hero con margin-right:-24px; ya no
   hace falta la cuenta con vw de antes porque .hero-inner no tiene
   max-width que centre nada). El margin-left negativo la acerca un poco
   más a la última letra de "ESTAMPADA", y el degradado corto en su propio
   borde (no uno que cubra media imagen) evita que se vea un corte duro. */
.hero-visual{position:relative;align-self:stretch;z-index:1;overflow:hidden;
  margin:-56px -24px -10px -32px;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  background-color:var(--sand);
  background-image:
    radial-gradient(120% 90% at 18% 12%, rgba(255,196,0,.95) 0%, rgba(255,196,0,0) 55%),
    radial-gradient(110% 85% at 82% 8%,  rgba(255,107,26,.9) 0%, rgba(255,107,26,0) 55%),
    radial-gradient(120% 95% at 85% 88%, rgba(0,183,194,.95) 0%, rgba(0,183,194,0) 58%),
    radial-gradient(130% 95% at 12% 92%, rgba(53,196,106,.9) 0%, rgba(53,196,106,0) 58%),
    linear-gradient(140deg,#E5177B 0%,#7B2FF7 52%,#5B1DBE 100%);}
/* Con foto cargada no hace falta el degradado de relleno. */
.hero-visual.has-img{background-image:var(--hero-img);}
/* Fundido corto (no un velo grande): solo suaviza el borde propio de la
   imagen donde casi toca la "A" de "ESTAMPADA", no tapa nada del texto. */
.hero-visual::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, var(--cream) 0, rgba(247,243,236,0) 70px);}
.hero-stripe{display:flex;height:10px;max-width:var(--maxw);margin:0 auto;border-radius:3px;
  overflow:hidden;position:relative;z-index:1;}
.hero-stripe span{flex:1;}
@media(max-width:900px){
  .hero{padding:40px 18px 0;overflow:visible;}
  .hero-inner{grid-template-columns:1fr;gap:26px;min-height:0;}
  /* En móvil el texto y la foto ya no comparten espacio (van apilados), así
     que aquí no hace falta el fundido ni el sangrado lateral: vuelve a ser
     una imagen normal, de ancho completo, debajo del texto. */
  .hero-visual{margin:0 0 20px;aspect-ratio:4/3;border-radius:var(--radius);}
  .hero-visual::before{display:none;}
  .hero-title{font-size:clamp(40px,11vw,68px);}
  .hero-ctas{margin-bottom:26px;}
}

/* ── BOTONES ─────────────────────────────────────────────── */
.btn-main{display:inline-flex;align-items:center;gap:9px;background:var(--green);
  color:var(--wa-ink);border:none;padding:15px 26px;border-radius:6px;
  font-family:var(--sans);font-size:15px;font-weight:800;cursor:pointer;
  box-shadow:6px 6px 0 var(--ink);transition:transform .15s,box-shadow .15s,background .2s;}
.btn-main:hover{background:#2aa958;color:var(--wa-ink);
  transform:translate(2px,2px);box-shadow:4px 4px 0 var(--ink);}
.btn-outline-dark{display:inline-flex;align-items:center;gap:9px;background:var(--ink);
  color:#fff;border:none;padding:15px 26px;border-radius:6px;
  font-family:var(--sans);font-size:15px;font-weight:800;cursor:pointer;transition:background .2s;}
.btn-outline-dark:hover{background:var(--purple);color:#fff;}

/* ── SECCIONES ───────────────────────────────────────────── */
section{padding:72px 24px;}
.container{max-width:var(--maxw);margin:0 auto;}
.section-label{font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;
  color:var(--purple);margin-bottom:10px;}
.section-title{font-family:var(--display);font-size:clamp(34px,5vw,64px);line-height:.92;
  letter-spacing:-.03em;text-transform:uppercase;color:var(--ink);margin-bottom:12px;}
.section-sub{color:var(--body);font-size:15px;font-weight:600;line-height:1.55;
  margin-bottom:34px;max-width:46ch;}

/* ── CATÁLOGO ────────────────────────────────────────────── */
#catalogo{background:var(--cream);}
.cat-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  flex-wrap:wrap;margin-bottom:34px;}
.cat-head .section-title{margin-bottom:0;}
.cat-head-note{font-size:15px;color:var(--body);font-weight:500;line-height:1.5;
  margin:0;max-width:34ch;}

/* Tarjetas */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;}
.cat-card{--cc:var(--magenta);
  background:#fff;border:2px solid var(--ink);border-radius:var(--radius);overflow:hidden;
  cursor:pointer;display:flex;flex-direction:column;
  transition:transform .25s ease,box-shadow .25s ease;}
.cat-card::before{content:"";display:block;height:8px;background:var(--cc);}
.cat-card:hover{transform:translateY(-4px);}
.cat-card.open{box-shadow:5px 5px 0 var(--cc);}
/* height:auto es obligatorio: el <img> trae width/height en el HTML (para
   reservar el sitio mientras carga) y, sin esto, el alto del atributo gana
   y anula el aspect-ratio — las fotos salen casi cuadradas y las tarjetas
   con portada quedan más altas que las que no la tienen. */
.cat-card-img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;
  background:var(--sand);}
.cat-card-img-ph{width:100%;aspect-ratio:4/3;background:var(--sand);
  background-image:linear-gradient(135deg,rgba(0,0,0,.04) 25%,transparent 25%,transparent 50%,
    rgba(0,0,0,.04) 50%,rgba(0,0,0,.04) 75%,transparent 75%);
  background-size:16px 16px;}
.cat-card-body{padding:14px 14px 16px;flex:1;display:flex;align-items:center;
  justify-content:space-between;gap:10px;}
.cat-name{font-family:var(--display);font-size:16px;letter-spacing:-.02em;
  text-transform:uppercase;color:var(--ink);line-height:1.1;}
.cat-tag{font-size:12px;font-weight:700;color:var(--muted);margin-top:4px;}
.cat-sign{width:30px;height:30px;flex:none;border-radius:50%;background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;}

/* Ficha abierta (va arriba de la grilla) */
.cat-panel{margin-bottom:20px;border:3px solid var(--ink);border-radius:14px;overflow:hidden;
  background:var(--pc);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  animation:curtain .5s cubic-bezier(.2,.8,.2,1) both;}
.cat-panel-media{position:relative;aspect-ratio:4/3;align-self:start;background:rgba(0,0,0,.14);overflow:hidden;}
.cat-slide{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transform:scale(1.05);transition:opacity .9s ease,transform 1.2s ease;
  pointer-events:none;}
.cat-slide.on{opacity:1;transform:scale(1);pointer-events:auto;}
.cat-slide-ph{background:rgba(255,255,255,.18);}
.cat-dots{position:absolute;left:18px;bottom:16px;display:flex;gap:7px;z-index:3;}
.cat-dots button{width:9px;height:9px;border-radius:6px;border:0;padding:0;cursor:pointer;
  transition:width .3s ease,background .3s ease;}
.cat-dots button.on{width:22px;}
.cat-panel-info{padding:38px 34px 34px;}
.cat-panel-kicker{font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;
  margin-bottom:12px;}
.cat-panel-title{font-family:var(--display);font-size:clamp(30px,4vw,50px);line-height:.95;
  letter-spacing:-.03em;text-transform:uppercase;margin:0 0 16px;}
.cat-panel-lead{font-size:17px;line-height:1.5;margin:0 0 22px;max-width:42ch;font-weight:500;}
.cat-bullets{display:grid;gap:10px;margin-bottom:26px;}
.cat-bullet{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.45;
  padding-top:10px;}
.cat-bullet .k{font-family:var(--display);font-size:12px;padding-top:2px;flex:none;
  min-width:96px;text-transform:uppercase;}
.cat-bullet .v{font-weight:600;}
.cat-panel-actions{display:flex;gap:12px;flex-wrap:wrap;}
.cat-cta{display:inline-flex;align-items:center;font-weight:800;font-size:15px;
  padding:14px 22px;border-radius:6px;transition:background .2s,color .2s;}
.cat-ghost{background:transparent;border:2px solid currentColor;font-family:var(--sans);
  font-weight:800;font-size:15px;padding:14px 22px;border-radius:6px;cursor:pointer;
  transition:background .2s,color .2s;}

/* Color del texto según lo claro que sea el fondo de la ficha */
.cat-panel.on-dark{color:#fff;}
.cat-panel.on-dark .cat-bullet{border-top:1px solid rgba(255,255,255,.45);}
.cat-panel.on-dark .cat-cta{background:#fff;color:var(--ink);}
.cat-panel.on-dark .cat-ghost{color:#fff;}
.cat-panel.on-dark .cat-ghost:hover{background:#fff;color:var(--ink);}
.cat-panel.on-dark .cat-dots button{background:rgba(255,255,255,.5);}
.cat-panel.on-dark .cat-dots button.on{background:#fff;}
.cat-panel.on-light{color:var(--ink);}
.cat-panel.on-light .cat-bullet{border-top:1px solid rgba(23,20,15,.3);}
.cat-panel.on-light .cat-cta{background:var(--ink);color:#fff;}
.cat-panel.on-light .cat-ghost{color:var(--ink);}
.cat-panel.on-light .cat-ghost:hover{background:var(--ink);color:#fff;}
.cat-panel.on-light .cat-dots button{background:rgba(23,20,15,.35);}
.cat-panel.on-light .cat-dots button.on{background:var(--ink);}
.cat-cta:hover{background:var(--green);color:var(--wa-ink);}

@media(max-width:860px){
  .cat-panel{grid-template-columns:1fr;}
  .cat-panel-media{align-self:auto;}
  .cat-panel-info{padding:26px 20px 24px;}
  .cat-bullet .k{min-width:84px;}
}

/* ── PROCESO ─────────────────────────────────────────────── */
#proceso{background:var(--ink);color:#fff;}
#proceso .section-title{color:#fff;}
#proceso .section-sub{color:#b4ab9e;}
#proceso .section-label{color:var(--yellow);}
.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;}
.step-card{--sc:var(--yellow);border-top:6px solid var(--sc);padding:18px 0 0;background:none;}
.steps-grid .step-card:nth-child(1){--sc:var(--yellow);}
.steps-grid .step-card:nth-child(2){--sc:var(--orange);}
.steps-grid .step-card:nth-child(3){--sc:var(--cyan);}
.steps-grid .step-card:nth-child(4){--sc:var(--magenta);}
.step-num{font-family:var(--display);font-size:52px;line-height:1;letter-spacing:-.04em;color:var(--sc);}
.step-icon{display:none;}
.step-title{font-family:var(--display);font-size:17px;text-transform:uppercase;color:#fff;
  margin:14px 0 8px;letter-spacing:-.01em;}
.step-text{font-size:15px;color:#b4ab9e;font-weight:500;line-height:1.5;}

/* ── PROBADOR · PRUEBA TU DISEÑO ─────────────────────────── */
#probador{background:var(--cyan);color:#0b2e30;}
#probador .section-label{color:#0b2e30;}
#probador .section-title{color:#0b2e30;}
#probador .section-sub{color:#0b2e30;}
.pb-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:20px;align-items:start;}
@media(max-width:860px){.pb-grid{grid-template-columns:1fr;}}
.pb-box{background:var(--cream);border:3px solid #0b2e30;border-radius:var(--radius);padding:18px;}
.pb-side{display:grid;gap:16px;}
.pb-step{font-family:var(--display);font-size:13px;letter-spacing:1px;text-transform:uppercase;
  margin-bottom:12px;color:#0b2e30;}
.pb-sub{font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;
  color:#0b2e30;opacity:.75;margin:14px 0 8px;}

/* Escenario */
.pb-stage{--ax:32%; --ay:25%; --aw:36%; --ah:35%; --pb-ink:rgba(23,20,15,.45); --pb-z:1;
  position:relative;aspect-ratio:1/1;background:var(--sand);border-radius:var(--radius-sm);
  overflow:hidden;touch-action:none;}
/* isolation: encierra el mix-blend-mode del tinte para que no se mezcle
   con el fondo de la sección ni con los diseños de encima. */
/* Se escala prenda + diseños a la vez, para que las coordenadas de los
   diseños sigan siendo las del escenario sin acercar. */
.pb-zoom{position:absolute;inset:0;transition:transform .35s cubic-bezier(.2,.8,.2,1);}
.pb-garment{position:absolute;inset:0;isolation:isolate;}
.pb-stage svg{position:absolute;inset:0;width:100%;height:100%;display:block;}
/* Foto real de la prenda: se tiñe multiplicando el color elegido y se recorta
   con la misma foto como máscara, para no pintar el fondo. Por eso la foto
   debe ser PNG con fondo transparente y la prenda clara. */
.pb-photo{position:absolute;inset:0;background-image:var(--pb-photo);
  background-size:contain;background-position:center;background-repeat:no-repeat;}
.pb-tint{position:absolute;inset:0;display:none;background:var(--pb-color);
  mix-blend-mode:multiply;
  -webkit-mask-image:var(--pb-photo);mask-image:var(--pb-photo);
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;}
.pb-stage.tinted .pb-tint{display:block;}

/* Todo lo que es "interfaz" se divide por el zoom: si no, al acercar la
   manga los punteados y la ✕ se verían 3 veces más gruesos. */
.pb-area{position:absolute;left:var(--ax);top:var(--ay);width:var(--aw);height:var(--ah);
  border:calc(2px / var(--pb-z)) dashed var(--pb-ink);
  border-radius:calc(4px / var(--pb-z));pointer-events:none;}
.pb-hint{position:absolute;left:var(--ax);top:var(--ay);width:var(--aw);height:var(--ah);display:flex;
  align-items:center;justify-content:center;text-align:center;padding:10px;pointer-events:none;
  font-family:ui-monospace,monospace;font-size:calc(11px / var(--pb-z));color:var(--pb-ink);}
.pb-stage.has-img .pb-hint{display:none;}
.pb-stage.drop-over{outline:4px dashed var(--magenta);outline-offset:-6px;}

/* Diseños encima de la prenda */
.pb-designs{position:absolute;inset:0;}
/* Sin drop-shadow a propósito: la sombra lo hacía ver como una calcomanía
   flotando. Un estampado está EN la tela, no encima. */
.pb-design{position:absolute;aspect-ratio:1/1;background-size:contain;background-position:center;
  background-repeat:no-repeat;cursor:grab;touch-action:none;user-select:none;}
/* La tinta se recorta con su propia imagen; dentro, el mapa de pliegues de
   la foto se multiplica para que el diseño se doble con la tela. */
.pb-ink{position:absolute;inset:0;isolation:isolate;overflow:hidden;
  background-size:contain;background-position:center;background-repeat:no-repeat;
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;}
.pb-shade{position:absolute;display:none;pointer-events:none;
  background:var(--pb-shade) center/contain no-repeat;}
.pb-stage.shaded .pb-shade{display:block;}
.pb-ink-wrap{position:absolute;inset:0;}
/* Bordado: el hilo se levanta de la tela y deja una sombra corta. */
.pb-design.emb .pb-ink-wrap{filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.55));}
.pb-design.on{outline:calc(2px / var(--pb-z)) dashed rgba(11,46,48,.85);
  outline-offset:calc(4px / var(--pb-z));}
/* Diseños de otras zonas de la misma prenda: se ven, no se tocan. */
.pb-design.ghost{pointer-events:none;}
.pb-design:active{cursor:grabbing;}
.pb-design-x{position:absolute;top:calc(-11px / var(--pb-z));right:calc(-11px / var(--pb-z));
  width:calc(22px / var(--pb-z));height:calc(22px / var(--pb-z));border-radius:50%;
  border:calc(2px / var(--pb-z)) solid #0b2e30;background:var(--cream);color:#0b2e30;
  font-size:calc(11px / var(--pb-z));line-height:1;
  cursor:pointer;display:none;align-items:center;justify-content:center;padding:0;}
.pb-design.on .pb-design-x{display:flex;}

/* Botones de prenda, vista y color */
.pb-shirts{display:flex;gap:8px;flex-wrap:wrap;}
.pb-shirt{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-family:var(--sans);
  font-weight:800;font-size:13px;padding:10px 14px;border-radius:6px;border:2px solid #0b2e30;
  background:transparent;color:#0b2e30;transition:background .2s,color .2s;}
.pb-shirt:hover{background:rgba(11,46,48,.1);}
.pb-shirt.on{background:#0b2e30;color:#fff;}
.pb-dot{width:12px;height:12px;border-radius:50%;border:1.5px solid #0b2e30;display:block;flex:none;}
.pb-shirt.on .pb-dot{border-color:#fff;}
.pb-count{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;
  padding:0 4px;border-radius:9px;background:var(--magenta);color:#fff;font-size:11px;font-weight:800;}

/* Subida y miniaturas */
.pb-drop{display:block;border:2px dashed #0b2e30;border-radius:var(--radius-sm);padding:18px;
  text-align:center;cursor:pointer;font-weight:700;font-size:14px;color:#0b2e30;
  transition:background .2s;}
.pb-drop:hover{background:#eae4d8;}
.pb-drop input{display:none;}
.pb-thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
.pb-thumb{width:52px;height:52px;border-radius:6px;border:2px solid #0b2e30;background-color:#fff;
  background-size:contain;background-position:center;background-repeat:no-repeat;cursor:pointer;
  padding:0;opacity:.55;transition:opacity .2s,box-shadow .2s;}
.pb-thumb[data-tech]{position:relative;}
.pb-thumb[data-tech]::after{content:attr(data-tech);position:absolute;right:-6px;bottom:-6px;
  min-width:18px;height:18px;border-radius:9px;background:#0b2e30;color:#fff;
  font:800 10px/18px system-ui,sans-serif;text-align:center;}
.pb-thumb.on{opacity:1;box-shadow:3px 3px 0 var(--magenta);}
.pb-empty{font-size:12px;line-height:1.5;color:#4a443c;margin-top:12px;}

/* Sliders */
.pb-ctrls{display:grid;gap:12px;margin-top:16px;}
.pb-ctrl-head{display:flex;justify-content:space-between;font-size:12px;font-weight:800;
  text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;color:#0b2e30;}
.pb-ctrls input[type=range]{width:100%;accent-color:var(--magenta);}

.pb-actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap;}
.pb-wa{flex:1;min-width:150px;text-align:center;background:var(--green);color:var(--wa-ink);
  font-weight:800;font-size:15px;padding:13px 18px;border-radius:6px;transition:background .2s;}
.pb-wa:hover{background:#2aa958;color:var(--wa-ink);}
.pb-btn{background:transparent;border:2px solid #0b2e30;color:#0b2e30;font-family:var(--sans);
  font-weight:800;font-size:15px;padding:13px 18px;border-radius:6px;cursor:pointer;
  transition:background .2s,color .2s;}
.pb-btn:hover{background:#0b2e30;color:#fff;}
.pb-note{font-size:12px;line-height:1.5;color:#4a443c;margin-top:14px;}

/* ── RESEÑAS ─────────────────────────────────────────────── */
#resenas{background:var(--cream);}
#resenas .section-label{color:var(--orange);}
.grev-score{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:34px;}
.grev-score-num{font-family:var(--display);font-size:46px;line-height:1;letter-spacing:-.03em;}
.grev-score-stars{color:var(--yellow);font-size:24px;letter-spacing:3px;}
.grev-score-meta{font-size:13px;font-weight:700;color:var(--muted);}
.grev-more{display:flex;justify-content:center;margin-top:28px;}
.grev-more a{display:inline-flex;align-items:center;gap:10px;border:2px solid var(--ink);
  color:var(--ink);background:#fff;font-weight:800;font-size:15px;padding:14px 24px;
  border-radius:6px;transition:background .2s,color .2s;}
.grev-more a:hover{background:var(--ink);color:#fff;}
.grev-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;}
.grev-card{background:#fff;border:2px solid var(--ink);border-radius:var(--radius);padding:20px;
  display:flex;flex-direction:column;gap:10px;transition:transform .2s,box-shadow .2s;}
.grev-card:hover{transform:translateY(-3px);box-shadow:5px 5px 0 var(--yellow);}
.grev-header{display:flex;align-items:center;gap:12px;}
.grev-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;
  border:2px solid var(--ink);background:var(--sand);}
.grev-info{flex:1;min-width:0;}
.grev-name{font-size:15px;font-weight:800;color:var(--ink);line-height:1.3;}
.grev-meta{font-size:12px;color:var(--muted);font-weight:600;margin-top:1px;}
.grev-glogo{height:18px;width:auto;opacity:.9;margin-left:auto;flex-shrink:0;}
.grev-stars{color:var(--yellow);font-size:14px;letter-spacing:2px;display:flex;
  align-items:center;gap:10px;}
.grev-time{font-size:12px;color:var(--muted);font-weight:600;letter-spacing:0;}
.grev-text{font-size:14px;line-height:1.55;color:#3d382f;font-weight:500;margin:0;}
/* Bloques de reseñas heredados */
.reviews-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;}
.review-card{background:#fff;border:2px solid var(--ink);border-radius:var(--radius);padding:20px;}
.review-stars{color:var(--yellow);font-size:16px;letter-spacing:2px;margin-bottom:10px;}
.review-text{font-size:14px;color:#3d382f;font-weight:500;line-height:1.55;margin-bottom:14px;}
.review-author{display:flex;align-items:center;gap:10px;}
.review-avatar{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-family:var(--display);font-size:15px;color:#fff;background:var(--magenta);}
.review-name{font-size:14px;font-weight:800;}
.review-meta{font-size:12px;color:var(--muted);font-weight:600;}

/* ── FAQ ─────────────────────────────────────────────────── */
#faq{background:var(--purple);color:#fff;}
#faq .section-label{color:var(--yellow);}
#faq .section-title{color:#fff;}
#faq .container{max-width:900px;}
.faq-list{display:grid;gap:10px;max-width:900px;}
.faq-item{background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.35);
  border-radius:10px;overflow:hidden;}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  text-align:left;background:transparent;border:0;color:#fff;font-family:var(--sans);
  font-weight:800;font-size:16px;padding:17px 20px;cursor:pointer;}
.faq-q:hover{background:rgba(0,0,0,.12);}
.faq-q .arrow{font-family:var(--display);font-size:16px;flex:none;transition:transform .25s;}
.faq-q.open .arrow{transform:rotate(180deg);color:var(--yellow);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;}
.faq-a.open{max-height:460px;}
.faq-a-inner{padding:0 20px 20px;font-size:15px;line-height:1.6;color:rgba(255,255,255,.92);
  max-width:68ch;}

/* ── CONTACTO ────────────────────────────────────────────── */
#contacto{background:var(--ink);text-align:center;color:#fff;}
#contacto .section-label{color:var(--yellow);}
#contacto .section-title{color:#fff;font-size:clamp(38px,6vw,78px);}
#contacto .section-sub{margin-left:auto;margin-right:auto;}
.contact-sub{color:#b4ab9e;font-size:17px;font-weight:600;margin-bottom:28px;}
.contact-info{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:30px;}
.contact-chip{background:transparent;border:1px solid #3a352d;border-radius:6px;
  padding:12px 18px;font-size:14px;font-weight:700;color:#ded6c8;}
a.contact-chip:hover{border-color:var(--yellow);color:var(--yellow);}
.btn-wa-big{display:inline-flex;align-items:center;gap:10px;background:var(--green);
  color:var(--wa-ink);border:none;padding:18px 34px;border-radius:6px;font-size:17px;
  font-weight:800;cursor:pointer;box-shadow:6px 6px 0 rgba(53,196,106,.25);
  transition:background .2s,transform .15s;}
.btn-wa-big:hover{background:#2aa958;color:var(--wa-ink);transform:translateY(-2px);}

/* ── FOOTER ──────────────────────────────────────────────── */
footer{background:var(--ink);color:#fff;padding:0 24px 0;}
footer .container{padding-top:0;}
.footer-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px;
  border-top:1px solid #3a352d;padding:34px 0 30px;text-align:left;}
.footer-logo{font-family:var(--display);font-size:18px;text-transform:uppercase;color:#fff;
  letter-spacing:-.02em;margin-bottom:8px;}
.footer-about{color:#8d8579;font-size:13px;line-height:1.6;margin:0;}
.footer-title{font-size:12px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;
  margin-bottom:10px;}
.footer-links{display:grid;gap:6px;font-size:13px;color:#b4ab9e;}
.footer-links a{color:#b4ab9e;}
.footer-links a:hover{color:#fff;}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;border-top:1px solid #3a352d;padding:18px 0 20px;font-size:12px;color:#6f685d;}
.footer-stripe{display:flex;height:8px;margin:0 -24px;}
.footer-stripe span{flex:1;}

/* ── VOLVER ARRIBA ───────────────────────────────────────── */
.to-top{position:fixed;bottom:20px;right:20px;width:46px;height:46px;border-radius:50%;
  border:2px solid var(--ink);background:var(--yellow);color:var(--ink);font-size:20px;
  font-weight:800;cursor:pointer;box-shadow:4px 4px 0 var(--ink);z-index:90;display:flex;
  align-items:center;justify-content:center;opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .25s,transform .25s,visibility .25s,background .2s;}
.to-top.show{opacity:1;visibility:visible;transform:translateY(0);}
.to-top:hover{background:var(--magenta);color:#fff;}

/* ── ANIMACIONES ─────────────────────────────────────────── */
@keyframes fadeDown{from{opacity:0;transform:translateY(-20px);}to{opacity:1;transform:translateY(0);}}
@keyframes curtain{from{clip-path:inset(50% 0 50% 0);opacity:.4;}to{clip-path:inset(0 0 0 0);opacity:1;}}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
}

/* ── IDIOMA ──────────────────────────────────────────────── */
[data-lang="en"]{display:none;}
body.lang-en [data-lang="es"]{display:none;}
body.lang-en [data-lang="en"]{display:block;}
body.lang-en span[data-lang="en"]{display:inline;}
body.lang-en span[data-lang="es"]{display:none;}
span[data-lang="en"]{display:none;}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media(max-width:768px){
  section{padding:56px 18px;}
  .cat-grid{grid-template-columns:1fr 1fr;gap:10px;}
  .cat-card-body{padding:10px 11px 13px;}
  .cat-name{font-size:13px;}
  .grev-grid{grid-template-columns:1fr;}
  .hero-clean-inner{padding:40px 18px 26px;}
  .prod-view{padding:20px 18px 48px;}
}

/* El selector de color nativo, vestido como los demás puntitos de color. */
.pb-shirt input[type=color]{width:14px;height:14px;flex:none;padding:0;border:none;
  background:none;border-radius:50%;cursor:pointer;}
.pb-shirt input[type=color]::-webkit-color-swatch-wrapper{padding:0;}
.pb-shirt input[type=color]::-webkit-color-swatch{border:1.5px solid currentColor;border-radius:50%;}
.pb-shirt input[type=color]::-moz-color-swatch{border:1.5px solid currentColor;border-radius:50%;}

/* ── VISTA PREVIA DEL PROBADOR ────────────────────────────── */
.pb-preview{position:fixed;inset:0;z-index:300;background:rgba(9,7,4,.72);
  display:flex;align-items:center;justify-content:center;padding:20px;}
.pb-preview-box{background:var(--cream);border:3px solid var(--ink);border-radius:var(--radius);
  box-shadow:8px 8px 0 rgba(0,0,0,.35);padding:22px;width:min(1280px,100%);
  max-height:96vh;overflow:auto;}
.pb-preview-title{font-family:var(--display);font-size:clamp(20px,3.4vw,28px);line-height:1.05;
  letter-spacing:-.02em;text-transform:uppercase;color:var(--ink);margin-bottom:14px;}
.pb-preview-state{font-size:14px;font-weight:700;color:var(--body);padding:28px 0;text-align:center;}
/* La ficha se amplía ahí mismo (rueda, clic, arrastrar, pellizcar; ver
   initProbador), para revisar detalles sin descargarla. */
.pb-preview-wrap{position:relative;}
.pb-preview-art{background:var(--sand);border-radius:var(--radius-sm);padding:10px;
  display:flex;justify-content:center;align-items:center;overflow:hidden;
  height:min(74vh,1100px);cursor:zoom-in;touch-action:none;user-select:none;}
.pb-preview-art.zoomed{cursor:grab;}
.pb-preview-art img{max-width:100%;max-height:100%;object-fit:contain;display:block;
  -webkit-user-drag:none;pointer-events:none;}
.pb-pz{position:absolute;right:10px;bottom:10px;display:flex;gap:6px;}
.pb-pz button{width:38px;height:38px;border-radius:8px;border:2px solid var(--ink);
  background:var(--cream);color:var(--ink);font:800 18px/1 var(--display, system-ui);cursor:pointer;}
.pb-pz-hint{font-size:12px;color:var(--body);margin-top:6px;text-align:center;}
.pb-preview-note{font-size:13px;line-height:1.55;color:var(--body);margin-top:14px;}
.pb-preview-actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap;}
/* El aviso depende de si el aparato puede adjuntar solo. */
.pb-preview .pb-pv-share{display:none;}
.pb-preview.can-share .pb-pv-share{display:block;}
.pb-preview.can-share .pb-pv-manual{display:none;}
@media(max-width:600px){
  .pb-preview{padding:10px;}
  .pb-preview-art{height:62vh;}
  .pb-preview-box{padding:16px;}
  .pb-preview-actions .pb-wa,
  .pb-preview-actions .pb-btn{flex:1 1 100%;text-align:center;}
}

/* Agarradera para cambiar el tamaño sin ir al deslizador. Se divide por el
   zoom, igual que la ✕, para que no crezca al acercar la manga. */
.pb-design-size{position:absolute;right:calc(-11px / var(--pb-z));bottom:calc(-11px / var(--pb-z));
  width:calc(22px / var(--pb-z));height:calc(22px / var(--pb-z));border-radius:50%;
  border:calc(2px / var(--pb-z)) solid #0b2e30;background:var(--cream);
  cursor:nwse-resize;display:none;padding:0;touch-action:none;}
.pb-design-size::after{content:"";position:absolute;inset:calc(5px / var(--pb-z));
  border-right:calc(2px / var(--pb-z)) solid #0b2e30;
  border-bottom:calc(2px / var(--pb-z)) solid #0b2e30;}
.pb-design.on .pb-design-size{display:block;}
/* Al pasar el cursor, el diseño crece un pelo: pista de que se puede agarrar. */
.pb-design{transition:transform .15s ease;}
@media(hover:hover){
  .pb-design:not(.ghost):hover{--pb-hover:1.04;}
}
@media(prefers-reduced-motion:reduce){.pb-design{transition:none;}}

/* Logo subido desde el admin. Sin logo, el nav muestra el nombre escrito. */
.nav-logo img{height:38px;width:auto;max-width:190px;object-fit:contain;display:block;}