/* Supplemental styles for joelrequena.com — on the california theme tokens. */

/* ---- brand spacing fix ---- */
.brand{gap:.45rem}
.brand .bw{display:inline}

/* ---- WhatsApp glyph ---- */
.btn .ic{width:1.05em;height:1.05em;fill:currentColor;flex:none}

/* ---- hero: titular un poco más pequeño ---- */
.hero h1{font-size:clamp(2.1rem,1.55rem + 2.5vw,3.5rem)}
.hero{border-bottom:0}

/* ---- divisiones naturales: color, nunca líneas ---- */
.band-2{border-top:0;border-bottom:0}
.sec-2{background:var(--paper-2)}
.sec-3{background:var(--paper-3)}
.sec-accent{background:var(--accent-wash)}
.band-dark .lead{color:var(--on-dark-soft)}

/* ===== HERO: "tu parte online de un vistazo" (4 piezas) ===== */
.hero .stack-wrap{margin-top:clamp(2rem,1rem + 4vw,4.5rem);align-self:center;display:grid;gap:.7rem;justify-items:start}
.stack{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;width:100%}
.tile{background:var(--paper);border:1.5px solid var(--rule-ink);border-radius:var(--r-lg);padding:.85rem;
  box-shadow:0 1px 0 var(--rule-strong),0 16px 32px -30px #23110380;display:flex;flex-direction:column;gap:.55rem;min-height:120px}
.tile__lbl{font-family:var(--font-mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-faint);
  display:flex;align-items:center;gap:.4rem}
.tile__lbl:before{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--accent)}
.tile__art{flex:1;border-radius:var(--r-sm);background:var(--paper-2);border:1px solid var(--rule);padding:.55rem;
  display:flex;flex-direction:column;justify-content:center;gap:.32rem;overflow:hidden}
.tile .ln{height:5px;border-radius:3px;background:var(--rule-strong);display:block}
.tile .ln--90{width:90%}.tile .ln--80{width:80%}.tile .ln--70{width:70%}.tile .ln--60{width:60%}.tile .ln--55{width:55%}.tile .ln--50{width:50%}
.tw__bar{display:flex;gap:3px;margin-bottom:1px}
.tw__bar i{width:5px;height:5px;border-radius:50%;background:var(--rule-strong)}
.tw__btn{width:40%;height:9px;border-radius:3px;background:var(--accent);margin-top:2px}
.tg__stars{color:var(--accent-strong);font-size:.72rem;letter-spacing:1px;line-height:1}
.ta__chip{font-family:var(--font-mono);font-size:.52rem;text-transform:uppercase;letter-spacing:.04em;color:var(--accent-ink);
  background:var(--accent);border-radius:2px;padding:1px 4px;align-self:flex-start}
.bub{height:11px;border-radius:7px;display:block}
.bub--in{width:72%;background:var(--rule-strong);border-bottom-left-radius:2px}
.bub--out{width:60%;background:var(--accent);align-self:flex-end;border-bottom-right-radius:2px}

/* ===== EXPERIENCIA: carrusel a pantalla completa, una diapositiva a la vez =====
   MÓVIL (sin tocar): vertical, titular arriba, foto, descripción debajo.
   ORDENADOR: la MISMA diapositiva pero horizontal (foto izquierda, texto derecha).
   Siempre a todo el ancho y centrada: sin peek, sin recortes, sin scroll de más. */
.exp{margin-top:var(--s-4)}
.exp__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.exp__track::-webkit-scrollbar{display:none}
.exp-slide{flex:0 0 100%;scroll-snap-align:center;display:grid;justify-items:center;text-align:center;
  grid-template-columns:1fr;grid-template-areas:"claim" "img" "desc"}
.exp-claim{grid-area:claim;font-family:var(--font-display);font-weight:700;color:var(--on-dark);font-size:var(--t-h3);
  letter-spacing:var(--track-h3);line-height:1.12;max-width:24ch;margin:0 0 var(--s-3);
  min-height:2.5em;display:flex;align-items:flex-end;justify-content:center}
.exp-slide__img{grid-area:img;width:min(100%,400px);aspect-ratio:1/1;background:var(--paper);border:1px solid var(--rule);
  border-radius:var(--r-lg);display:grid;place-items:center;overflow:hidden;padding:.3rem}
.exp-slide__img img{max-width:100%;max-height:100%;object-fit:contain}
.exp-slide__img--logos{grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:.5rem;place-items:stretch;padding:.5rem}
.exp-slide__img--logos .lg{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;
  background:#fff;border:1px solid var(--rule);border-radius:var(--r-sm);padding:.5rem}
.exp-desc{grid-area:desc;color:var(--on-dark-soft);font-size:.94rem;line-height:1.5;max-width:40ch;margin:var(--s-3) 0 0}
.exp__nav{display:flex;align-items:center;justify-content:center;gap:1.1rem;margin-top:var(--s-5)}
.exp__dots{display:flex;gap:.42rem}
.exp__dots button{width:8px;height:8px;border-radius:50%;border:0;background:var(--dark-line);cursor:pointer;padding:0;transition:all var(--dur) var(--ease)}
.exp__dots button[aria-current="true"]{background:var(--accent);width:22px;border-radius:4px}
.exp__arrows{display:flex;gap:.5rem}
.exp__arrows button{width:40px;height:40px;border-radius:50%;border:1px solid var(--dark-line);background:transparent;
  color:var(--on-dark);cursor:pointer;display:grid;place-items:center}
.exp__arrows button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.exp__arrows button:hover{background:rgba(255,255,255,.08)}
@media(min-width:761px){
  .exp-slide{grid-template-columns:340px 1fr;grid-template-rows:1fr 1fr;
    grid-template-areas:"img claim" "img desc";justify-items:start;text-align:left;column-gap:2.6rem;align-items:stretch}
  .exp-slide__img{width:340px;height:340px;aspect-ratio:auto}
  .exp-claim{align-self:end;justify-content:flex-start;min-height:0;margin:0 0 .5rem;max-width:20ch}
  .exp-desc{align-self:start;margin:0;max-width:34ch}
}

/* ===== FINAL ===== */
.cta-final{margin-top:var(--s-5);display:flex;flex-direction:column;align-items:flex-start;gap:.85rem}
.cta-final .alt{font-family:var(--font-mono);font-size:var(--t-meta);color:var(--ink-faint)}
.cta-final .alt a{color:var(--accent-strong);text-decoration:none}

@media(max-width:860px){
  .hero .stack-wrap{margin-top:0}
}