/* =========================================================
   TIRIBON — hoja de estilos
   Tienda primero. Titulares con la misma letra de marcador
   que llevan las estampas. Color de la prenda en cada panel.
   ========================================================= */

/* Tipografías servidas desde el propio sitio (antes Google Fonts: dos
   servidores más antes de poder pintar texto). Solo el subset latino,
   que ya trae á, ñ, ¿. Schibsted es variable: un archivo cubre 400–800. */
@font-face{
  font-family:"Permanent Marker"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/permanent-marker-latin.woff2") format("woff2");
}
@font-face{
  font-family:"Schibsted Grotesk"; font-style:normal; font-weight:400 800; font-display:swap;
  src:url("fonts/schibsted-grotesk-latin.woff2") format("woff2");
}

:root{
  --paper:      #FFF7EA;
  --paper-2:    #FFEEDA;
  --paper-3:    #F3E3CC;
  --ink:        #14120F;
  --ink-70:     rgba(20,18,15,.72);
  --ink-50:     rgba(20,18,15,.62);
  --ink-15:     rgba(20,18,15,.16);

  --blue:       #2C6FB0;
  --blue-d:     #1A5F9E;
  --teal:       #12928B;
  --teal-d:     #075753;
  --pink:       #F2559C;
  --lemon:      #FBD84E;

  --on-dark:    #FFF7EA;
  --on-dark-70: rgba(255,247,234,.80);
  --on-dark-40: rgba(255,247,234,.70);
  --on-dark-15: rgba(255,247,234,.20);

  --navy:       #16243F;
  --sky:        #2F7DD1;
  --blob-b:     #C9E0F5;
  --blob-p:     #F9DBD1;
  --mint:       #DCEFE1;
  --rose:       #FBDCE1;
  --sky-l:      #D7E8F8;
  --sun:        #F6CE55;
  --cream:      #FDFBF6;

  --disp: "Permanent Marker", cursive;
  --text: "Schibsted Grotesk", system-ui, sans-serif;

  --gut: clamp(18px, 4.6vw, 72px);
  --maxw: 1440px;
  --hdr-h: 72px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--text);
  font-size:clamp(1rem,.96rem + .18vw,1.07rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
p{ margin:0; }
ul,ol,dl,dd{ margin:0; padding:0; list-style:none; }

/* la letra de las estampas: marcador, de un solo peso,
   así que la jerarquía la hacen tamaño y color */
h1,h2{
  margin:0; font-family:var(--disp); font-weight:400;
  line-height:1.08; letter-spacing:.005em;
}
h3,h4{ margin:0; font-family:var(--text); font-weight:700; letter-spacing:-.01em; }

:focus-visible{ outline:3px solid var(--blue); outline-offset:3px; }
.end :focus-visible{ outline-color:var(--lemon); }

section{ scroll-margin-top:calc(var(--hdr-h) + 10px); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--blue); color:#fff; padding:12px 18px; font-weight:700;
}
.skip:focus{ left:12px; top:12px; }

.kick{
  font-size:.74rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue-d);
}
.kick.inv{ color:var(--lemon); }

/* ---- botones ---- */
.btn-solid{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:var(--ink); color:var(--paper);
  font-family:var(--text); font-weight:700; font-size:1.02rem;
  padding:14px 26px; border-radius:4px;
  transition:background .18s, transform .14s;
}
.btn-solid:hover{ background:var(--blue); }
.btn-solid:active{ transform:translateY(1px); }
.btn-solid.lemon{ background:var(--lemon); color:var(--ink); }
.btn-solid.lemon:hover{ background:#fff; }
.btn-solid.big{ font-size:1.12rem; padding:17px 32px; }

.wa-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:var(--blue); color:#fff;
  font-family:var(--text); font-weight:700; font-size:1.02rem;
  padding:14px 24px; border-radius:4px;
  transition:background .18s, transform .14s;
}
.wa-btn:hover{ background:var(--pink); }
.wa-btn:active{ transform:translateY(1px); }
.wa-btn[disabled]{ background:var(--ink-15); color:var(--ink-70); cursor:not-allowed; }

/* =========================================================
   HEADER
   ========================================================= */
.hdr{
  position:fixed; inset:0 0 auto; z-index:90;
  background:var(--cream);
  border-bottom:1px solid transparent;
  transition:border-color .2s, box-shadow .2s;
}
.hdr.is-stuck{ border-bottom-color:rgba(22,36,63,.1); box-shadow:0 6px 24px -18px rgba(22,36,63,.55); }

.hdr-in{
  max-width:var(--maxw); margin:0 auto; min-height:var(--hdr-h);
  padding:10px var(--gut);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px;
}

.mark{ display:flex; align-items:center; flex:none; }
.mark img{
  display:block; height:50px; width:auto; max-width:100%;
  object-fit:contain;
}

.nav{ display:flex; gap:clamp(16px,2.4vw,40px); justify-self:center; }
.nav a{
  position:relative; font-size:1rem; font-weight:600; padding:6px 0;
  color:var(--navy); opacity:.7; transition:opacity .16s;
}
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:3px;
  border-radius:3px; background:var(--sky); transition:right .22s;
}
.nav a:hover{ opacity:1; }
.nav a:hover::after{ right:0; }
.nav a.is-active{ opacity:1; font-weight:700; }
.nav a.is-active::after{ right:0; }

.hdr-end{ display:flex; align-items:center; gap:12px; justify-self:end; }
.icon-btn{
  width:42px; height:42px; display:grid; place-items:center; border-radius:50%;
  color:var(--navy); transition:background .16s;
}
.icon-btn svg{ width:22px; height:22px; }
.icon-btn:hover{ background:var(--sky-l); }

.cart-btn{
  display:flex; align-items:center; gap:10px;
  background:var(--navy); color:#fff;
  padding:11px 16px 11px 18px; border-radius:999px;
  font-family:var(--text); font-size:1rem; font-weight:700;
  transition:background .18s;
}
.cart-btn svg{ width:20px; height:20px; }
.cart-btn:hover{ background:#22365c; }
.cart-n{
  min-width:26px; height:26px; padding:0 6px;
  display:grid; place-items:center; border-radius:50%;
  background:var(--lemon); color:var(--navy);
  font-size:.86rem; font-weight:800; font-variant-numeric:tabular-nums;
  transition:transform .3s cubic-bezier(.34,1.5,.64,1);
}
.cart-btn.is-bump .cart-n{ transform:scale(1.28); }

/* barra de busqueda */
.search-bar{ border-top:1px solid rgba(22,36,63,.1); background:var(--cream); }
.search-in{
  max-width:var(--maxw); margin:0 auto; padding:12px var(--gut);
  display:flex; align-items:center; gap:12px; color:var(--navy);
}
.search-in > svg{ width:20px; height:20px; flex:none; opacity:.55; }
.search-in input{
  flex:1; min-width:0; border:0; background:none; font:inherit; color:var(--navy);
  padding:6px 0; outline:none;
}
.search-in input::placeholder{ color:rgba(22,36,63,.66); }
#search-clear{
  font-size:.86rem; font-weight:700; color:var(--sky);
  border-bottom:2px solid currentColor; padding-bottom:1px;
}
.search-msg{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--gut) 12px;
  font-size:.86rem; color:var(--ink-50);
}
.search-msg:empty{ display:none; }
.prod[hidden]{ display:none; }

.burger{ display:none; width:30px; height:22px; position:relative; }
.burger span{
  position:absolute; left:0; right:0; height:3px; border-radius:3px; background:var(--navy);
  transition:transform .24s;
}
.burger span:nth-child(1){ top:4px; }
.burger span:nth-child(2){ bottom:4px; }
.sheet-open .burger span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.sheet-open .burger span:nth-child(2){ transform:translateY(-6px) rotate(-45deg); }

.sheet{
  position:fixed; inset:var(--hdr-h) 0 0; z-index:80;
  background:var(--cream);
  padding:min(7vh,52px) var(--gut) 36px;
  display:flex; flex-direction:column; justify-content:space-between;
  transform:translateY(-101%); transition:transform .34s cubic-bezier(.4,0,.2,1);
  visibility:hidden;
}
.sheet.is-open{ transform:translateY(0); visibility:visible; }
.sheet nav{ display:flex; flex-direction:column; }
.sheet nav a{
  font-family:var(--disp); font-size:clamp(1.9rem,8vw,2.6rem); line-height:1.35;
  color:var(--navy);
  padding:10px 0; border-bottom:2px solid rgba(22,36,63,.14);
}
.sheet nav a:first-child{ border-top:2px solid rgba(22,36,63,.14); }
.sheet-wa{
  margin-top:26px; align-self:flex-start;
  font-weight:700; font-size:1.05rem;
  background:var(--navy); color:#fff; padding:14px 24px; border-radius:999px;
}

/* =========================================================
   DRAWER + FICHA
   ========================================================= */
.scrim{
  position:fixed; inset:0; z-index:95; background:rgba(20,18,15,.58);
  opacity:0; visibility:hidden; transition:opacity .28s, visibility .28s;
}
.scrim.is-open{ opacity:1; visibility:visible; }

.drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:100;
  width:min(410px,100%); background:var(--paper);
  display:flex; flex-direction:column;
  transform:translateX(101%); transition:transform .34s cubic-bezier(.4,0,.2,1);
}
.drawer.is-open{ transform:translateX(0); }
.drawer-top{
  display:flex; align-items:center; justify-content:space-between;
  padding:15px 22px; background:var(--blue); color:#fff;
}
.drawer-top h2{ font-family:var(--disp); font-size:1.5rem; }
.x{ width:34px; height:34px; display:grid; place-items:center; transition:transform .18s; }
.x:hover{ transform:rotate(90deg); }
.x svg{ width:18px; height:18px; }

.drawer-body{ flex:1; min-height:0; overflow-y:auto; padding:6px 22px; }
.c-empty{ padding:34px 0; color:var(--ink-50); font-size:.94rem; }
.c-row{
  display:grid; grid-template-columns:58px 1fr auto; gap:13px; align-items:center;
  padding:15px 0; border-bottom:1px solid var(--ink-15);
}
.c-row img{ width:58px; height:72px; object-fit:cover; }
.c-row h4{ font-size:1rem; }
.c-row .c-sub{ font-size:.77rem; color:var(--ink-50); margin-top:1px; }
.stepper{ display:inline-flex; align-items:center; border:2px solid var(--ink); border-radius:4px; }
.stepper button{ width:30px; height:30px; display:grid; place-items:center; transition:background .16s, color .16s; }
.stepper button:hover{ background:var(--blue); color:#fff; }
.stepper span{ min-width:30px; text-align:center; font-size:.92rem; font-weight:700; font-variant-numeric:tabular-nums; }
.c-row .stepper{ margin-top:7px; }
.c-del{ font-size:.75rem; color:var(--ink-50); text-decoration:underline; align-self:start; padding-top:3px; }
.c-del:hover{ color:var(--blue); }

.drawer-foot{ flex:none; padding:16px 22px 22px; border-top:3px solid var(--ink); }

.cf{ margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid var(--ink-15); }
.cf-title{ font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-50); margin-bottom:10px; }
.cf-row{ display:flex; flex-direction:column; gap:5px; margin-bottom:10px; }
.cf-row:last-child{ margin-bottom:0; }
.cf-row label{ font-size:.8rem; font-weight:700; color:var(--ink-70); }
.cf input{
  font:inherit; font-size:.94rem; color:var(--ink);
  background:var(--paper-3); border:2px solid transparent; border-radius:8px;
  padding:9px 11px; transition:border-color .16s;
}
.cf input:focus{ outline:none; border-color:var(--blue); }
.cf-err{ margin-top:10px; font-size:.82rem; font-weight:700; color:var(--pink); }

.drawer-sum{ display:flex; justify-content:space-between; font-size:.91rem; font-weight:700; }
.dim{ color:var(--ink-50); font-weight:400; }
.drawer-note{ margin:8px 0 14px; font-size:.81rem; color:var(--ink-50); line-height:1.5; }
.drawer-foot .wa-btn{ width:100%; }

/* =========================================================
   PAGINA DE PRODUCTO
   ========================================================= */
.pdp{
  max-width:var(--maxw); margin:0 auto;
  padding:calc(var(--hdr-h) + clamp(18px,2.4vw,34px)) var(--gut) clamp(48px,6vw,86px);
}

.crumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:9px;
  font-size:.78rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-50); margin-bottom:clamp(20px,2.6vw,34px);
}
.crumb a{ color:var(--blue-d); }
.crumb a:hover{ text-decoration:underline; }
.crumb span[aria-current]{ color:var(--ink); }

.pdp-main{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(26px,3.6vw,64px); align-items:start;
}

/* ---- galeria ---- */
.pdp-gallery{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(10px,1.2vw,16px); }

.pdp-thumbs{ display:flex; flex-direction:column; gap:10px; }
.pdp-thumb{
  display:block; width:clamp(62px,5.6vw,84px); padding:0; cursor:pointer;
  border:2px solid var(--ink-15); background:var(--paper-3);
  transition:border-color .16s;
}
.pdp-thumb > span{ display:block; position:relative; overflow:hidden; aspect-ratio:1/1; }
.pdp-thumb img{ width:100%; height:100%; object-fit:cover; }
.pdp-thumb.is-art img{
  position:absolute; max-width:none; height:auto; object-fit:none;
  width:var(--w,220%); left:var(--x,-60%); top:var(--t,-115%);
}
.pdp-thumb:hover{ border-color:var(--ink-50); }
.pdp-thumb.is-on{ border-color:var(--blue); }

.pdp-shot{
  margin:0; position:relative; overflow:hidden;
  background:var(--paper-3); aspect-ratio:4/5;
}
.pdp-frame{ position:absolute; inset:0; overflow:hidden; }
.pdp-frame img{ width:100%; height:100%; object-fit:cover; }

/* Las coordenadas cw/cx/cy estan calculadas contra una caja CUADRADA
   (asi las usa la plancha de disenos). El marco es 4:5, asi que en la
   vista del dibujo lo cuadramos o el recorte se va de foco. */
.pdp-shot.show-art .pdp-frame{
  top:50%; bottom:auto; height:auto; aspect-ratio:1/1;
  transform:translateY(-50%);
}
.pdp-shot.show-art .pdp-frame img{
  position:absolute; max-width:none; height:auto; object-fit:none;
  width:var(--w,220%); left:var(--x,-60%); top:var(--t,-115%);
}

.pdp-cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  background:linear-gradient(transparent, rgba(20,18,15,.72) 58%);
  color:var(--paper); padding:30px 15px 12px;
  font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}
.pdp-shot.show-art .pdp-cap{ background:none; color:var(--ink-50); padding:12px 15px; }

/* ---- ficha ---- */
.pdp-kick{
  font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue-d);
}
.pdp-info h1{
  font-family:var(--disp); font-weight:400; line-height:1.08;
  font-size:clamp(1.9rem,3.4vw,3rem); margin:10px 0 0;
}
.pdp-desc{ margin:16px 0 0; color:var(--ink-70); font-size:1rem; max-width:52ch; }

.pdp-price{
  margin:22px 0 0; font-size:.86rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-50);
}

.pdp-buy{ display:flex; align-items:center; gap:12px; margin-top:14px; flex-wrap:wrap; }
.pdp-buy .wa-btn{ flex:1; min-width:190px; }
.pdp-buy .wa-btn.done{ background:var(--teal); }

.pdp-wa{
  display:inline-block; margin-top:14px;
  font-size:.9rem; font-weight:700; color:var(--blue-d);
  border-bottom:2px solid currentColor; padding-bottom:1px;
}
.pdp-wa:hover{ color:var(--pink); }

.pdp-sub{
  margin:clamp(26px,3vw,38px) 0 0; padding-top:16px;
  border-top:1px solid var(--ink-15);
  font-size:.74rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-50);
}
.pdp-specs{ margin-top:8px; }
.pdp-specs li{ font-size:.94rem; color:var(--ink-70); padding:6px 0 6px 20px; position:relative; }
.pdp-specs li::before{
  content:""; position:absolute; left:0; top:.92em; width:11px; height:2px; background:var(--blue);
}

.pdp-care{ margin-top:18px; border-top:1px solid var(--ink-15); padding-top:14px; }
.pdp-care summary{ font-size:.9rem; font-weight:700; cursor:pointer; color:var(--blue); }
.pdp-care ul{ margin-top:10px; }
.pdp-care li{ font-size:.88rem; color:var(--ink-70); padding:4px 0 4px 18px; position:relative; }
.pdp-care li::before{ content:""; position:absolute; left:0; top:.74em; width:8px; height:2px; background:var(--ink-15); }

/* ---- otros disenos ---- */
.pdp-more{ margin-top:clamp(54px,6.5vw,96px); }
.pdp-more h2{ font-size:clamp(1.5rem,2.4vw,2.1rem); }
.pdp-more-grid{
  margin-top:clamp(18px,2.2vw,30px);
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,26px);
}
.mini{ display:flex; flex-direction:column; gap:10px; }
.mini-img{ display:block; overflow:hidden; background:var(--paper-3); aspect-ratio:1/1; }
.mini-img img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.mini:hover .mini-img img{ transform:scale(1.05); }
.mini-name{ font-family:var(--disp); font-size:1.06rem; color:var(--ink); }
.mini:hover .mini-name{ color:var(--blue-d); }

.pdp-404{ padding:clamp(40px,7vw,90px) 0; max-width:46ch; }
.pdp-404 h1{ font-family:var(--disp); font-weight:400; font-size:clamp(1.9rem,3.4vw,2.8rem); }
.pdp-404 p{ margin:14px 0 24px; color:var(--ink-70); }




/* =========================================================
   PORTADA — logo grande, manchas de color, olas entre bandas.
   Los colores salen del logo: azul, turquesa y el amarillo
   de los rayos.
   ========================================================= */
:root{
  --logo-b:  #2F6BB5;   /* azul del logo, un punto más oscuro para texto blanco AA */
  --band:    #0B6B72;   /* turquesa profundo de la banda de toallas */
  --wave-h:  clamp(26px,4vw,60px);
}

.pill{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--text); font-weight:700; font-size:1.02rem;
  padding:15px 28px; border-radius:999px;
  transition:background .18s, color .18s, transform .14s;
}
.pill svg{ width:19px; height:19px; flex:none; }
.pill.dark{ background:var(--navy); color:#fff; }
.pill.dark:hover{ background:var(--logo-b); }
.pill.ghost{ background:#fff; box-shadow:inset 0 0 0 2px var(--navy); color:var(--navy); }
.pill.ghost:hover{ background:var(--navy); color:#fff; }
.pill.lemon{ background:var(--lemon); color:var(--navy); }
.pill.lemon:hover{ background:#fff; }
.pill.big{ font-size:1.08rem; padding:17px 30px; }
.pill:active{ transform:translateY(1px); }

.kick{ color:var(--logo-b); }
.kick.inv{ color:var(--lemon); }
.tow h2, .sec-head h2, .close h2{ text-wrap:balance; }

/* ola que une una banda con la siguiente */
.wave{
  position:absolute; left:0; width:100%; height:var(--wave-h);
  z-index:3; pointer-events:none;
}
.wave-top{ top:1px; transform:translateY(-100%); }
.wave-bot{ bottom:1px; transform:translateY(100%); }

/* ---------------- HERO ---------------- */
.fh{
  position:relative; overflow:hidden;
  background:var(--cream);
  min-height:clamp(640px,94vh,880px);
  padding:calc(var(--hdr-h) + clamp(20px,3vw,44px)) var(--gut) 0;
  /* ancho de los chicos, topeado por el alto del hero para que en pantallas
     bajas no suban hasta el header (1.54 = alto/ancho de la foto de Rockcat) */
  --kid-w:min(clamp(230px,24vw,400px), calc((clamp(640px,94vh,880px) - 260px) / 1.54));
  display:flex; flex-direction:column; align-items:center;
}

.fh-blob{ position:absolute; z-index:0; pointer-events:none; }
.fh-blob.b1{ fill:#4FB8C2; width:clamp(200px,24vw,380px); left:-9vw; top:-6vw; }
.fh-blob.b2{ fill:var(--sun); width:clamp(220px,25vw,400px); right:-6vw; top:clamp(110px,14vw,210px); }
.fh-blob.b3{ fill:#CDEDEE; width:clamp(260px,33vw,520px); left:-7vw; bottom:-4vw; }
.fh-blob.b4{ fill:#D3E6F8; width:clamp(260px,33vw,520px); right:-8vw; bottom:-6vw; }

.fh-note{
  position:absolute; z-index:1;
  font-family:var(--disp); text-transform:uppercase; color:var(--navy);
  font-size:clamp(.95rem,1.2vw,1.2rem); line-height:1.3;
  transform:rotate(-7deg);
}
.fh-note::after{
  content:""; display:block; width:64px; height:4px; border-radius:3px;
  background:var(--navy); margin-top:10px;
}
/* las notas van ancladas sobre la cabeza de cada chico, no al header:
   así nunca se pisan, sea cual sea la proporción de la pantalla */
.fh-note.n1{ left:max(var(--gut),3vw); bottom:calc(var(--kid-w) * 1.536 + 28px); }
.fh-note.n2{ right:max(var(--gut),3vw); bottom:calc(var(--kid-w) * 1.424 + 28px); }

.fh-center{
  position:relative; z-index:2;
  width:100%; max-width:820px; text-align:center;
}
.fh-logo{ position:relative; margin:0 auto; width:min(100%,780px); line-height:0; }
.fh-logo img{ width:100%; height:auto; }
.fh-rays{
  position:absolute; width:clamp(34px,4.4vw,58px);
  left:clamp(-66px,-5.6vw,-40px); top:6%;
}

.fh-tag{
  margin:clamp(10px,1.2vw,16px) 0 0;
  font-family:var(--disp); color:var(--logo-b);
  font-size:clamp(.95rem,1.35vw,1.25rem); line-height:1.3; letter-spacing:.02em;
  white-space:nowrap;
}

.fh-sub{
  margin:clamp(14px,1.6vw,20px) auto 0; max-width:44ch;
  font-size:clamp(1rem,1.05vw,1.1rem); line-height:1.55; color:rgba(22,36,63,.8);
}
.fh-sub b{ color:var(--navy); }

.fh-cta{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:clamp(20px,2.2vw,30px); }

/* los chicos entran por abajo y la ola de la banda les tapa los pies */
.fh-kid{
  position:absolute; bottom:0; z-index:2;
  width:var(--kid-w);
  transition:transform .3s cubic-bezier(.34,1.4,.64,1);
}
.fh-kid img{ width:100%; height:auto; }
.fh-kid.k1{ left:clamp(-10px,2vw,60px); transform-origin:bottom center; }
.fh-kid.k2{ right:clamp(-10px,2vw,60px); transform-origin:bottom center; }
.fh-kid:hover{ transform:rotate(-2deg) translateY(-6px); }
.fh-kid.k2:hover{ transform:rotate(2deg) translateY(-6px); }

/* ---------------- TOALLAS ---------------- */
.tow{ position:relative; background:var(--band); color:var(--on-dark); }
.tow .wave{ fill:var(--band); }
.tow-in{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(44px,5vw,76px) var(--gut) clamp(40px,4.6vw,68px);
  display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,2fr);
  gap:clamp(28px,4vw,64px); align-items:center;
}
.tow h2{
  margin:10px 0 0; color:var(--lemon);
  font-size:clamp(2.2rem,4.2vw,3.7rem); line-height:1;
}
.tow-lead{ margin:16px 0 26px; max-width:34ch; color:var(--on-dark-70); }

.tow-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,1.8vw,28px); }
.twl{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
/* cada toalla un poco torcida, como recién tendida */
.twl-art{
  display:block; width:100%; aspect-ratio:1/1; overflow:hidden;
  border-radius:14px; border:5px solid var(--cream); background:var(--cream);
  box-shadow:0 14px 26px -18px rgba(0,0,0,.55);
  transform:rotate(var(--r,-2deg));
  transition:transform .3s cubic-bezier(.34,1.4,.64,1);
  margin-bottom:10px;
}
.twl:nth-child(2) .twl-art{ --r:1.6deg; }
.twl:nth-child(3) .twl-art{ --r:-1deg; }
.twl:nth-child(4) .twl-art{ --r:2.2deg; }
.twl:hover .twl-art{ transform:rotate(0) scale(1.03); }
.twl-art img{ width:100%; height:100%; object-fit:cover; }
.twl-name{
  font-weight:800; font-size:.98rem; letter-spacing:.04em; text-transform:uppercase;
  color:var(--on-dark);
}
.twl-add{
  font-weight:700; font-size:.88rem; color:var(--lemon);
  border-bottom:2px solid currentColor; padding-bottom:1px;
  transition:color .16s;
}
.twl-add:hover, .twl-add.done{ color:#fff; }

/* ---------------- CAMISETAS ---------------- */
.tees{ position:relative; background:var(--sky-l); }
.tees .wave{ fill:var(--sky-l); }
.tees .kick{ color:var(--navy); }
.tees-in{
  max-width:var(--maxw); margin:0 auto;
  padding:calc(var(--wave-h) + clamp(40px,5vw,72px)) var(--gut) clamp(40px,4.6vw,68px);
}
.sec-head{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,auto);
  column-gap:clamp(24px,4vw,64px); align-items:end;
  margin-bottom:clamp(26px,3vw,44px);
}
.sec-head .kick{ grid-column:1 / -1; margin-bottom:10px; }
.sec-head h2{ color:var(--navy); font-size:clamp(2rem,3.6vw,3.2rem); max-width:17ch; }
.sec-lead{ max-width:36ch; color:var(--ink-70); padding-bottom:6px; }

.shop-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(16px,2vw,32px); }
.prod{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.prod[hidden]{ display:none; }
.prod-img{
  display:block; position:relative; width:100%; aspect-ratio:4/5;
  overflow:hidden; border-radius:22px; background:var(--tono);
  margin-bottom:10px;
}
.prod-img > img{
  width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 20%);
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.prod:hover .prod-img > img{ transform:scale(1.04); }
/* al pasar el mouse la foto deja ver el dibujo de cerca */
.prod-zoom{
  display:none; position:absolute; inset:0; overflow:hidden; background:var(--tono);
  opacity:0; transition:opacity .3s ease;
}
@media (hover:hover){ .prod-zoom{ display:block; } }
.prod-zoom img{
  position:absolute; max-width:none; height:auto;
  width:var(--w,220%); left:var(--x,-60%); top:var(--t,-115%);
  mix-blend-mode:multiply;
}
.prod:hover .prod-zoom, .prod-img:focus-visible .prod-zoom{ opacity:1; }

.prod-name{ font-family:var(--disp); font-size:clamp(1.3rem,1.7vw,1.6rem); line-height:1.1; color:var(--navy); }
.prod-name:hover{ color:var(--logo-b); }
.prod-meta{ font-size:.84rem; color:var(--ink-70); display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; }
.prod-color{
  font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  background:var(--tono); color:var(--navy); padding:3px 10px; border-radius:999px;
}
.prod-add{
  margin-top:8px;
  font-weight:700; font-size:.92rem;
  background:var(--navy); color:#fff; padding:10px 18px; border-radius:999px;
  transition:background .18s, color .18s;
}
.prod-add:hover{ background:var(--logo-b); }
.prod-add.done{ background:var(--lemon); color:var(--navy); }

/* ---------------- POR QUÉ ---------------- */
.why{ background:var(--cream); border-bottom:2px dashed rgba(22,36,63,.14); }
.why-in{
  max-width:var(--maxw); margin:0 auto;
  padding:calc(var(--wave-h) + clamp(22px,2.6vw,34px)) var(--gut) clamp(26px,3vw,40px);
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px clamp(18px,2.4vw,40px);
}
.why-in li{ display:flex; align-items:center; gap:14px; }

.why-in h3{ font-size:.98rem; font-weight:800; color:var(--navy); }
.why-in p{ font-size:.86rem; line-height:1.45; color:var(--ink-70); margin-top:2px; }

/* ---------------- ARTE + CONTACTO ---------------- */
.close{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(52px,6vw,96px) var(--gut);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(32px,5vw,90px); align-items:center;
}
.close-art h2{ color:var(--navy); font-size:clamp(1.9rem,3.2vw,2.8rem); margin:10px 0 16px; }
.close-art p{ max-width:46ch; color:var(--ink-70); }
.close-art b{ color:var(--navy); }

.close-wa{ position:relative; color:#fff; text-align:center; }
.close-blob{ position:absolute; inset:0; width:100%; height:100%; fill:var(--logo-b); z-index:0; }
.close-wa-in{ position:relative; z-index:1; padding:clamp(48px,6vw,84px) clamp(28px,5vw,72px); }
.close-wa h2{ color:var(--lemon); font-size:clamp(1.9rem,3.2vw,2.8rem); }
.close-wa p{ margin:14px auto 26px; max-width:32ch; color:rgba(255,255,255,.92); }
.close-wa :focus-visible{ outline-color:var(--lemon); }
.tow :focus-visible{ outline-color:var(--lemon); }

.foot{
  border-top:1px solid rgba(22,36,63,.12); background:var(--cream);
  max-width:none; padding:18px var(--gut) 22px;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 24px;
  font-size:.82rem; color:var(--ink-70);
}
.foot b{ color:var(--navy); }

/* ---------------- PORTADA: RESPONSIVE ---------------- */
@media (max-width:1180px){
  .fh-note{ display:none; }
  .fh-kid{ width:clamp(200px,22vw,300px); }
  .tow-in{ grid-template-columns:1fr; }
  .tow-lead{ max-width:52ch; }
}

@media (max-width:980px){
  .shop-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .close{ grid-template-columns:1fr; }
  .why-in{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* en angosto los chicos dejan de flanquear el logo: van juntos abajo,
   asomando sobre la ola */
@media (max-width:860px){
  .fh{ min-height:0; }
  .fh-kid{ position:relative; width:46%; max-width:300px; margin-top:28px; }
  .fh-kid.k1, .fh-kid.k2{ left:auto; right:auto; }
  .fh-kid.k2{ margin-left:-4%; }
  .fh{ flex-flow:row wrap; justify-content:center; align-items:flex-end; }
  .fh-center{ flex:1 1 100%; }
  .fh-rays{ display:none; }
  /* las manchas bajan con los chicos: detrás del logo le robaban contraste */
  .fh-blob.b1{ width:170px; left:-90px; top:auto; bottom:250px; }
  .fh-blob.b2{ width:190px; right:-100px; top:auto; bottom:300px; }
}

@media (max-width:620px){
  .fh-cta .pill{ flex:1 1 100%; }
  .tow-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 16px; }
  .sec-head{ grid-template-columns:1fr; row-gap:12px; }
  .shop-grid{ gap:26px 14px; }
  .prod-img{ border-radius:16px; }
  .prod-meta{ font-size:.78rem; }
  .prod-add{ align-self:stretch; font-size:.86rem; padding:10px 12px; }
  .why-in{ grid-template-columns:1fr; }
  .close-wa-in{ padding:56px 22px; }
  .close-wa .pill.big{ font-size:1rem; padding:15px 22px; white-space:nowrap; }
  .fh-kid{ width:48%; }
  .foot{ flex-direction:column; }
}

/* =========================================================
   RESPONSIVE — header, carrito y producto
   ========================================================= */
@media (max-width:980px){
  .pdp-main{ grid-template-columns:1fr; }
}

@media (max-width:860px){
  .nav{ display:none; }
  .burger{ display:block; }
  /* sin nav, los iconos van a la columna derecha, no pegados al logo */
  .hdr-end{ grid-column:3; }
}

@media (max-width:620px){
  :root{ --hdr-h:64px; }
  .mark img{ height:38px; }
  .cart-label{ display:none; }
  .icon-btn{ width:38px; height:38px; }
  .cart-btn{ font-size:.9rem; padding:8px 11px; gap:7px; }
  .hdr-end{ gap:8px; }
  .pdp-gallery{ grid-template-columns:1fr; }
  .pdp-thumbs{ order:2; flex-direction:row; }
  .pdp-shot{ order:1; aspect-ratio:1/1; }
  .pdp-buy .wa-btn{ flex:1 1 100%; }
  .pdp-more-grid{ grid-template-columns:repeat(2,1fr); }
  .drawer{ width:100%; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important; transition-duration:.01ms!important;
  }
}

/* footer de la página de producto */
.end{ background:var(--blue-d); color:var(--on-dark); overflow:hidden; }
.end-top{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(48px,6vw,86px) var(--gut) clamp(34px,4vw,54px);
  text-align:center;
}
.end-top h2{ font-size:clamp(2rem,4.4vw,3.6rem); color:var(--lemon); }
.end-top p{ margin:16px auto 28px; max-width:44ch; color:var(--on-dark-70); }


.end-base{
  max-width:var(--maxw); margin:0 auto;
  padding:15px var(--gut) 22px;
  border-top:1px solid var(--on-dark-15);
  display:flex; flex-wrap:wrap; gap:8px 26px; justify-content:space-between;
  font-size:.79rem; color:var(--on-dark-70);
}
/* eslogan del cierre */
.end-slogan{
  margin-top:clamp(26px,3vw,40px); padding-top:18px;
  border-top:1px solid var(--on-dark-15);
  font-family:var(--disp); font-size:clamp(.94rem,1.2vw,1.12rem);
  color:var(--lemon); max-width:none;
}
@media (max-width:620px){ .end-base{ flex-direction:column; text-align:center; } }

/* =========================================================
   Precio de toallas y camisetas «próximamente» (24/09/2026)
   ========================================================= */
/* un solo logo en la portada: el header va sin marca, así que
   nav e iconos se anclan a su columna */
.nav{ grid-column:2; }
.hdr-end{ grid-column:3; }

.twl-price{ font-weight:700; font-size:1.02rem; color:#fff; margin-top:-2px; }

.prod-soon{
  margin-top:8px;
  font-family:var(--disp); font-size:1rem; color:var(--navy);
  background:var(--sun); padding:6px 14px; border-radius:999px;
  transform:rotate(-2deg);
}

.pdp-price.is-price{ font-size:1.6rem; letter-spacing:0; color:var(--navy); }
.pdp-buy[hidden]{ display:none; }