/* ============================================================================
   Börrega Studio — Patagonia Marketing Summit 2026
   Tokens tomados del Design System oficial de Börrega Studio.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,700;1,900&family=Space+Mono:wght@400;700&display=swap');

:root{
  /* Color */
  --negro:#111111;
  --violeta:#7c3aed;
  --violeta-light:#a78bfa;
  --crema:#f7f5f0;
  --blanco:#ffffff;
  --amarillo:#f5d832;
  --rosa:#f472b6;
  --verde:#4ade80;
  --naranja:#fb923c;
  --rojo:#ef4444;
  --gray-900:#1a1a1a;
  --gray-700:#3f3f46;
  --gray-500:#6b7280;
  --gray-300:#d1d5db;
  --gray-200:#e5e7eb;
  --gray-100:#efede8;
  --on-dark-90:rgba(255,255,255,.90);
  --on-dark-60:rgba(255,255,255,.60);
  --on-dark-45:rgba(255,255,255,.45);
  --on-dark-30:rgba(255,255,255,.30);
  --on-dark-12:rgba(255,255,255,.12);
  --on-dark-06:rgba(255,255,255,.06);
  --on-light-60:rgba(17,17,17,.60);
  --on-light-12:rgba(17,17,17,.12);
  --on-light-06:rgba(17,17,17,.06);

  --bg-page:var(--crema);
  --bg-surface:var(--blanco);
  --bg-inverse:var(--negro);
  --text-strong:var(--negro);
  --text-body:var(--gray-700);
  --text-muted:var(--gray-500);
  --text-on-dark:var(--on-dark-90);
  --text-on-dark-muted:var(--on-dark-45);
  --brand:var(--violeta);
  --accent-highlight:var(--amarillo);
  --border-hairline:var(--on-light-12);
  --border-hairline-dark:var(--on-dark-12);
  --state-success:var(--verde);
  --state-error:var(--rojo);

  /* Type */
  --font-display:'Playfair Display',Georgia,'Times New Roman',serif;
  --font-body:'SF Pro Display',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --font-mono:'Space Mono','SF Mono',ui-monospace,Menlo,monospace;

  /* Spacing */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.5rem; --space-6:2rem; --space-7:2.5rem; --space-8:3rem;
  --space-10:4rem; --space-12:5rem; --space-16:7rem;
  --gutter:2px;
  --page-pad-x:5rem;
  --section-pad-y:7rem;
  --content-max:1280px;
  --measure:620px;
  --border-width:1px;
  --border-width-strong:2px;

  /* Radius */
  --radius-card:14px;
  --radius-card-lg:16px;
  --radius-input:12px;
  --radius-pill:100px;

  /* Shadow */
  --shadow-sm:0 1px 2px rgba(17,17,17,.06);
  --shadow-card:0 6px 24px rgba(17,17,17,.08);
  --shadow-pop:0 12px 40px rgba(17,17,17,.16);
  --shadow-violeta:0 8px 28px rgba(124,58,237,.28);

  /* Motion */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-standard:cubic-bezier(.4,0,.2,1);
  --dur-fast:.15s; --dur-base:.25s; --dur-slow:.6s;
  --press-scale:.97;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg-page:var(--negro);
    --bg-surface:#1a1a1a;
    --text-strong:var(--blanco);
    --text-body:var(--on-dark-90);
    --text-muted:var(--on-dark-45);
    --border-hairline:var(--on-dark-12);
    --brand:var(--violeta-light);
  }
}
:root[data-theme="dark"]{
  --bg-page:var(--negro);
  --bg-surface:#1a1a1a;
  --text-strong:var(--blanco);
  --text-body:var(--on-dark-90);
  --text-muted:var(--on-dark-45);
  --border-hairline:var(--on-dark-12);
  --brand:var(--violeta-light);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--crema);
  color:var(--text-strong);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:var(--brand);}

.container{
  max-width:var(--content-max);
  margin:0 auto;
  padding:0 1.25rem;
}
@media (min-width:900px){
  .container{padding:0 var(--page-pad-x);}
}

/* ---------------------------------------------------------------- Type */
h1,h2,h3,.display{
  font-family:var(--font-display);
  font-weight:900;
  letter-spacing:-0.03em;
  line-height:.98;
  margin:0 0 var(--space-4);
}
h1,.text-display{font-size:clamp(2rem,5.2vw,3.2rem);}
h2,.text-h1{font-size:clamp(1.7rem,4.2vw,2.4rem);}
h3,.text-h2{font-size:clamp(1.3rem,3vw,1.7rem);}
em,.accent-italic{font-style:italic;color:var(--brand);}
p{margin:0 0 var(--space-4);color:var(--text-body);}
.lead{max-width:var(--measure);font-size:1.1rem;color:var(--text-body);}
.label,.mono{
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.68rem;
  font-weight:700;
}

/* ---------------------------------------------------------------- Layout */
.section{padding:var(--space-10) 0;}
@media (min-width:900px){.section{padding:var(--space-16) 0;}}
.section--dark{background:var(--negro);color:var(--on-dark-90);--border-hairline:var(--on-dark-12);}
.section--dark h1,.section--dark h2,.section--dark h3{color:var(--blanco);}
.section--dark p{color:var(--on-dark-90);}
.section--cream{background:var(--crema);}
.hairline{border-top:var(--gutter) solid var(--on-light-12);}
.section--dark + .section--dark{border-top:var(--gutter) solid var(--on-dark-12);}

/* ---------------------------------------------------------------- Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--font-body);font-weight:600;font-size:1rem;
  padding:.95rem 1.9rem;border-radius:var(--radius-pill);
  border:var(--border-width) solid transparent;cursor:pointer;
  text-decoration:none;transition:transform var(--dur-fast) var(--ease-standard),
    background-color var(--dur-base) var(--ease-standard), opacity var(--dur-base);
  -webkit-tap-highlight-color:transparent;
}
.btn:active{transform:scale(var(--press-scale));}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;}
.btn-primary{background:var(--negro);color:var(--blanco);}
.btn-primary:hover{background:#000;}
.btn-accent{background:var(--amarillo);color:var(--negro);}
.btn-accent:hover{filter:brightness(.96);}
.btn-violeta{background:var(--violeta);color:var(--blanco);box-shadow:var(--shadow-violeta);}
.btn-outline{background:transparent;border-color:var(--on-light-12);color:var(--text-strong);}
.section--dark .btn-outline{border-color:var(--on-dark-30);color:var(--blanco);}
.btn-outline:hover{border-color:var(--brand);}
.btn-block{width:100%;}
.btn-sm{padding:.55rem 1.1rem;font-size:.85rem;}

/* ---------------------------------------------------------------- Tags / pills / bubbles */
.tag{
  display:inline-block;font-family:var(--font-mono);font-size:.68rem;
  text-transform:uppercase;letter-spacing:.14em;font-weight:700;
  padding:.4rem .9rem;border-radius:var(--radius-pill);
  border:var(--border-width) solid var(--border-hairline);color:var(--text-muted);
}
.section--dark .tag{color:var(--on-dark-60);}
.bracket{color:var(--violeta);font-weight:700;}
.bracket.amarillo{color:var(--amarillo);}
.speech-bubble{
  position:relative;display:inline-block;background:var(--amarillo);color:var(--negro);
  padding:.9rem 1.4rem;border-radius:18px;font-weight:600;max-width:420px;
}
.speech-bubble::after{
  content:'';position:absolute;left:28px;bottom:-10px;width:0;height:0;
  border:10px solid transparent;border-top-color:var(--amarillo);border-bottom:0;
}

/* ---------------------------------------------------------------- Cards */
.card{
  background:var(--bg-surface);border-radius:var(--radius-card);
  border:var(--border-width) solid var(--on-light-12);
  padding:var(--space-6);box-shadow:var(--shadow-sm);
  transition:transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base);
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-card);}

/* ---------------------------------------------------------------- Forms */
.field{margin-bottom:var(--space-5);}
.field label{display:block;font-weight:600;margin-bottom:.45rem;font-size:.92rem;}
.field .hint{font-size:.8rem;color:var(--text-muted);margin-top:.35rem;}
.field .error{font-size:.8rem;color:var(--state-error);margin-top:.35rem;display:none;}
.field.has-error .error{display:block;}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:var(--state-error);}

input[type="text"],input[type="email"],input[type="tel"],input[type="url"],
select,textarea{
  width:100%;font-family:var(--font-body);font-size:1rem;
  padding:.85rem 1rem;border-radius:var(--radius-input);
  border:var(--border-width) solid var(--on-light-12);background:var(--blanco);
  color:var(--text-strong);transition:border-color var(--dur-fast);
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);}
textarea{resize:vertical;min-height:110px;}

.checkbox-row{display:flex;align-items:flex-start;gap:.65rem;margin-bottom:var(--space-4);}
.checkbox-row input[type="checkbox"]{margin-top:.2rem;width:18px;height:18px;accent-color:var(--brand);flex-shrink:0;}
.checkbox-row label{font-size:.92rem;color:var(--text-body);}
.checkbox-row a{text-decoration:underline;}

.radio-pill-group{display:flex;flex-wrap:wrap;gap:.6rem;}
.radio-pill{position:relative;}
.radio-pill input{position:absolute;opacity:0;width:100%;height:100%;cursor:pointer;margin:0;}
.radio-pill span{
  display:inline-block;padding:.6rem 1.1rem;border-radius:var(--radius-pill);
  border:var(--border-width) solid var(--border-hairline);font-size:.88rem;
  transition:all var(--dur-fast);
}
.radio-pill input:checked + span{background:var(--negro);color:var(--blanco);border-color:var(--negro);}
.radio-pill input:focus-visible + span{outline:2px solid var(--brand);outline-offset:2px;}
.section--dark .radio-pill input:checked + span{background:var(--violeta);color:var(--blanco);border-color:var(--violeta);}

/* ---------------------------------------------------------------- Wizard */
.wizard-progress{display:flex;gap:.4rem;margin-bottom:var(--space-6);}
.wizard-progress .step{flex:1;height:4px;border-radius:2px;background:var(--border-hairline);}
.wizard-progress .step.done,.wizard-progress .step.active{background:var(--violeta);}
.wizard-step{display:none;}
.wizard-step.active{display:block;animation:borrega-fade-up var(--dur-slow) var(--ease-out);}
@keyframes borrega-fade-up{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
@media (prefers-reduced-motion: reduce){.wizard-step.active{animation:none;}}

.slot-grid{display:grid;grid-template-columns:1fr;gap:var(--space-6);}
@media (min-width:720px){.slot-grid{grid-template-columns:1fr 1fr;}}
.slot-day h4{font-family:var(--font-display);font-style:italic;font-size:1.3rem;margin-bottom:var(--space-3);}
.slot-list{display:flex;flex-direction:column;gap:.55rem;}
.slot-option{position:relative;}
.slot-option input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;}
.slot-option span{
  display:flex;align-items:center;justify-content:space-between;
  padding:.85rem 1.1rem;border-radius:var(--radius-input);
  border:var(--border-width) solid var(--border-hairline);font-size:.95rem;
  transition:all var(--dur-fast);
}
.slot-option input:checked + span{border-color:var(--violeta);background:rgba(124,58,237,.06);box-shadow:0 0 0 1px var(--violeta) inset;}
.slot-option input:checked + span::after{content:'✓';color:var(--violeta);font-weight:700;}
.slot-option input:focus-visible + span{outline:2px solid var(--brand);outline-offset:2px;}

/* ---------------------------------------------------------------- Confirmation */
.confirm-card{
  background:var(--negro);color:var(--blanco);border-radius:var(--radius-card-lg);
  padding:var(--space-8);text-align:left;--border-hairline:var(--on-dark-12);
}
.confirm-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.15rem 1rem;padding:.6rem 0;border-top:1px solid var(--border-hairline);font-size:.92rem;}
.confirm-row:first-of-type{border-top:none;}
.status-pill{display:inline-block;padding:.35rem .9rem;border-radius:var(--radius-pill);background:var(--amarillo);color:var(--negro);font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;}

/* ---------------------------------------------------------------- Misc */
.hidden{display:none !important;}
.text-center{text-align:center;}
.mt-8{margin-top:var(--space-8);}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}
.loading-dots::after{content:'…';}
.toast-error{
  background:rgba(239,68,68,.08);border:1px solid var(--state-error);
  color:#991b1b;border-radius:var(--radius-input);padding:1rem 1.2rem;margin-bottom:var(--space-5);
  font-size:.9rem;
}
.logo-mark{height:28px;}
.footer-note{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;color:var(--text-muted);}
.footer-brand{display:flex;flex-direction:column;align-items:flex-start;gap:.6rem;}
.footer-logo{height:20px;}
.footer-links{display:flex;flex-direction:column;align-items:flex-end;gap:.4rem;}
.footer-links a{color:var(--text-muted);text-decoration:underline;}
.footer-links a:hover{color:var(--brand);}
.footer-privacy{flex:1;display:flex;justify-content:center;align-items:flex-start;}
.footer-privacy a{color:var(--text-muted);text-decoration:none;}
.footer-privacy a:hover{color:var(--brand);}
.footer-row{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:1rem;}
@media (max-width:640px){
  .footer-row{flex-direction:column;align-items:center;text-align:center;}
  .footer-brand{align-items:center;}
  .footer-links{align-items:center;}
  .footer-privacy{flex:none;}
}

/* ---------------------------------------------------------------- Consent text (dark sections) */
.section--dark .checkbox-row label{color:var(--blanco);}

/* ---------------------------------------------------------------- Hero */
.hero{padding-top:var(--space-10);padding-bottom:var(--space-8);}
.hero--photo{
  background-image:url('../img/hero-sheep.webp');
  background-size:cover;
  /* Ancla la oveja (parte de abajo de la foto), no el vacío negro de
     arriba: en pantallas muy anchas, lo que se recorta es el espacio
     vacío, nunca la oveja. */
  background-position:center bottom;
  background-repeat:no-repeat;
  background-color:var(--negro);
  color:var(--blanco);
  min-height:clamp(420px, 44vw, 720px);
  padding-top:clamp(2.5rem, 7vw, 4.5rem);
  padding-bottom:0;
  display:flex;
  justify-content:center;
}
.hero--photo h1{color:var(--blanco);width:100%;}
.hero--photo .hero-logo{filter:brightness(0) invert(1);}
.hero-inner{max-width:1200px;margin:0 auto;text-align:center;}
.hero-title{white-space:nowrap;}
@media (max-width:860px){.hero-title{white-space:normal;}}
.hero-logo{height:34px;margin:0 auto var(--space-6);}
.hero-badges{display:flex;justify-content:center;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:var(--space-6);}
.tag-icon{width:14px;height:14px;flex-shrink:0;vertical-align:-2px;}
.tag-location{display:inline-flex;align-items:center;gap:.4rem;}
.tag-location .sep{opacity:.5;margin:0 .1rem;}
.hero-title{margin-bottom:var(--space-5);}
.hero-title .accent-italic{display:block;}
.hero-subtitle{max-width:580px;margin-left:auto;margin-right:auto;}
.hero-cta-wrap{margin:var(--space-6) 0 var(--space-4);}

@keyframes borrega-pulse-glow{
  0%,100%{box-shadow:0 0 0 0 rgba(124,58,237,.35),0 8px 24px rgba(17,17,17,.12);}
  50%{box-shadow:0 0 0 18px rgba(124,58,237,0),0 8px 24px rgba(17,17,17,.12);}
}
.btn-hero-cta{animation:borrega-pulse-glow 2.6s ease-in-out infinite;}
.btn-hero-cta:hover{animation-play-state:paused;background:#000;color:var(--amarillo);transform:translateY(-2px) scale(1.02);box-shadow:0 14px 36px rgba(124,58,237,.4);}
@media (prefers-reduced-motion: reduce){.btn-hero-cta{animation:none;}}

/* ---------------------------------------------------------------- Tags: paleta secundaria (colorida, "de qué hablamos") */
.tag-rosa{background:rgba(244,114,182,.14);color:#9d174d;border-color:rgba(244,114,182,.4);}
.tag-verde{background:rgba(74,222,128,.16);color:#166534;border-color:rgba(74,222,128,.42);}
.tag-naranja{background:rgba(251,146,60,.16);color:#9a3412;border-color:rgba(251,146,60,.42);}
.tag-amarillo{background:rgba(245,216,50,.22);color:#713f12;border-color:rgba(245,216,50,.5);}
.tag-violeta{background:rgba(124,58,237,.12);color:var(--violeta);border-color:rgba(124,58,237,.38);}