/* ============================================================
   FitEvents · COMPONENTES
   Piezas reutilizables definidas en el manual de marca.
   Se usan igual en todas las paginas; lo que cambie de una
   pagina a otra va en /assets/css/pages/*.css
   ============================================================ */

/* ---------- 02 · LOGOTIPO (wordmark) ----------
   100% tipografico, mayusculas, +14% de interletrado,
   sin cursiva ni inclinacion. "fit" medio / "events" fino. */
.wordmark{
  font-family:var(--font-sans);
  font-weight:var(--fw-regular);
  letter-spacing:var(--track-wordmark);
  text-transform:uppercase;
  display:inline-flex;
  white-space:nowrap;
}
.wordmark b{font-weight:var(--fw-semibold);}
.wordmark i{font-style:normal;font-weight:var(--fw-light);opacity:.82;}
.wordmark .dot{color:var(--malva-dark);}
.wordmark.on-dark .dot{color:var(--malva-tint);}

/* ---------- Eyebrow (Caption tracked del manual) ---------- */
.eyebrow{
  font-family:var(--font-sans);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--track-caption);
  text-transform:uppercase;
  font-size:var(--fs-caption);
  color:var(--malva-dark);
}
.eyebrow.on-dark{color:var(--malva-tint);}
.eyebrow.on-salvia{color:var(--salvia-dark);}

/* ---------- 05 · Puntos de firma (malva / salvia / arcilla) ---------- */
.dots{display:inline-flex;gap:7px;align-items:center;}
.dots span{width:6px;height:6px;border-radius:50%;}
.dots span:nth-child(1){background:var(--malva);}
.dots span:nth-child(2){background:var(--salvia);}
.dots span:nth-child(3){background:var(--arcilla);}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:16px 30px;border-radius:var(--radius-pill);border:none;
  font-family:var(--font-sans);font-weight:var(--fw-medium);font-size:14.5px;letter-spacing:.02em;
  text-decoration:none;transition:transform .15s ease, opacity .15s ease;
}
.btn:hover{transform:translateY(-1px);opacity:.92;}
.btn-primary{background:var(--ink);color:var(--cream);}
.btn-outline{background:transparent;color:var(--ink);border:1.5px solid var(--ink);}
.btn-outline.on-dark{color:var(--cream);border-color:rgba(251,248,242,.5);}
/* Malva sobre grafito: el acento primario del manual. Texto siempre en
   grafito, nunca color sobre color (regla del cap. 03). */
.btn-malva{background:var(--malva);color:var(--ink);}
.btn-block{width:100%;}
.btn-sm{padding:12px 22px;font-size:13px;}

/* ---------- Chips ---------- */
.chip-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px;}
.chip{
  padding:10px 20px;border-radius:var(--radius-pill);border:1.5px solid var(--line);
  font-size:13px;font-weight:var(--fw-medium);background:var(--cream);color:var(--ink);
}
.chip-dark-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.chip-dark{
  padding:8px 16px;border-radius:var(--radius-pill);background:var(--on-ink-fill);
  border:1px solid var(--on-ink-line);font-size:12px;font-weight:var(--fw-medium);
  color:rgba(251,248,242,.85);
}

/* ---------- Bloques de foto (placeholder de marca) ----------
   Sustituibles por fotografia real sin tocar el maquetado. */
.photo{
  border-radius:var(--radius-md);position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:4/5;
}
.photo svg{width:34%;height:34%;opacity:.9;}
.photo::after{
  content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(-45deg, rgba(46,42,36,.05) 0 1.5px, transparent 1.5px 12px);
}
.photo.has-video::after{display:none;}
.photo .creator-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.photo.malva{background:linear-gradient(155deg,var(--malva-tint),var(--malva));}
.photo.salvia{background:linear-gradient(155deg,var(--salvia-tint),var(--salvia));}
.photo.arcilla{background:linear-gradient(155deg,var(--arcilla-tint),var(--arcilla));}
.photo.ink{background:linear-gradient(155deg,#514a3f,var(--ink));}

/* ---------- Cabecera de seccion ---------- */
.section-head{max-width:600px;margin-bottom:44px;}
.section-head .eyebrow{margin-bottom:12px;display:block;}
.section-head h2{font-size:clamp(28px,4vw,40px);color:var(--ink);}

/* ---------- Hero ---------- */
.hero{padding-top:64px;padding-bottom:70px;position:relative;overflow:hidden;}
.hero .wrap{position:relative;z-index:2;}
.hero-blob{position:absolute;border-radius:50%;filter:blur(2px);opacity:.55;z-index:1;}
.hero h1{font-size:var(--fs-h1);max-width:820px;margin-top:22px;color:var(--ink);}
.hero .lede{
  font-family:var(--font-sans);font-weight:var(--fw-medium);
  font-size:clamp(16px,2vw,20px);color:var(--malva-dark);margin-top:14px;letter-spacing:.01em;
}
.hero p.desc{max-width:560px;margin-top:20px;font-size:var(--fs-body);color:var(--ink-soft);font-weight:var(--fw-regular);}
.hero-stack{margin-top:30px;font-size:15px;font-weight:var(--fw-medium);color:var(--ink);line-height:1.7;}
.hero-stack .fade{color:var(--ink-faint);}
.hero-cta{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
.hero-note{font-size:12.5px;color:var(--ink-faint);font-weight:var(--fw-medium);letter-spacing:.02em;}

/* ---------- Bandas de statement ---------- */
.statement{background:var(--paper);text-align:center;}
.statement .eyebrow{display:block;margin-bottom:10px;}
.statement h2{font-size:var(--fs-h2);max-width:760px;margin:0 auto;color:var(--ink);}
.statement h2 .strike{text-decoration:line-through;text-decoration-color:var(--malva);text-decoration-thickness:2px;opacity:.55;}
.statement p.expand{max-width:560px;margin:20px auto 0;font-size:15px;color:var(--ink-soft);font-weight:var(--fw-regular);}
.statement p.expand b{color:var(--ink);font-weight:var(--fw-semibold);}

/* ---------- Content Creator (banda grafito) ---------- */
.creator{background:var(--ink);color:var(--cream);}
.creator .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
@media (max-width:860px){ .creator .wrap{grid-template-columns:1fr;gap:36px;} }
.creator h2{font-size:clamp(26px,3.6vw,36px);color:var(--cream);margin-top:14px;}
.creator p{color:var(--on-ink-soft);font-size:15.5px;margin-top:16px;max-width:460px;}
.creator .payoff{margin-top:20px;font-size:var(--fs-body);font-weight:var(--fw-medium);color:var(--cream);}
.creator .payoff .fade{color:var(--on-ink-faint);font-weight:var(--fw-regular);}

/* ---------- Packs (tarjetas de experiencia) ---------- */
.packs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media (max-width:860px){ .packs-grid{grid-template-columns:1fr;max-width:440px;margin:0 auto;} }
.pack-card{
  background:var(--cream);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;
}
.pack-body{padding:26px 24px 28px;display:flex;flex-direction:column;flex:1;}
.pack-body .eyebrow{margin-bottom:10px;}
.pack-body h3{font-size:21px;font-weight:var(--fw-medium);color:var(--ink);letter-spacing:0;}
.pack-body .tagline{font-size:var(--fs-small);font-weight:var(--fw-medium);color:var(--malva-dark);margin-top:4px;}
.pack-body p.desc{font-size:var(--fs-small);color:var(--ink-soft);margin-top:14px;}
.pack-foot{margin-top:22px;}

/* ---------- Grupos ---------- */
.groups{background:var(--cream);}
.location-tag{
  margin-top:28px;display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:var(--fw-semibold);color:var(--ink);
}
.location-tag svg{width:16px;height:16px;}

/* ---------- Cierres ---------- */
.closing{background:linear-gradient(155deg,var(--malva-tint),var(--salvia-tint));text-align:center;}
.closing h2{font-size:clamp(26px,4vw,42px);color:var(--ink);}
.closing h2 .thin{font-weight:var(--fw-light);}

.brandclose{background:var(--ink);text-align:center;padding:110px 0;}
.brandclose .wordmark{font-size:clamp(30px,5vw,46px);color:var(--cream);}
.brandclose .tag{
  margin-top:16px;font-size:14px;letter-spacing:.24em;text-transform:uppercase;
  font-weight:var(--fw-semibold);color:var(--malva-tint);
}

/* ---------- Formulario de contacto ---------- */
.contact{background:var(--paper);color:var(--ink);}
.contact .wrap{max-width:640px;}
.contact .eyebrow{display:block;margin-bottom:10px;}
.contact h2{font-size:clamp(26px,3.6vw,36px);color:var(--ink);}
.contact p.lead{color:var(--ink-soft);font-size:15px;margin-top:14px;}

form{margin-top:38px;display:flex;flex-direction:column;gap:20px;}
.field{display:flex;flex-direction:column;gap:8px;}
.field label{
  font-size:11.5px;font-weight:var(--fw-semibold);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-faint);
}
.field input,.field select{
  background:var(--cream);border:1.5px solid var(--line);
  border-radius:var(--radius-sm);padding:14px 16px;color:var(--ink);
  font-family:var(--font-sans);font-size:15px;font-weight:var(--fw-regular);
  width:100%;
}
.field input::placeholder{color:var(--ink-faint);}
.field select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%232E2A24'%3E%3Cpath d='M5.5 7.5l4.5 5 4.5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;
}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media (max-width:560px){ .row-2{grid-template-columns:1fr;} }
.pill-group{display:flex;gap:10px;flex-wrap:wrap;}
.pill-choice{position:relative;}
.pill-choice input{position:absolute;opacity:0;inset:0;cursor:pointer;}
.pill-choice span{
  display:inline-flex;padding:11px 20px;border-radius:var(--radius-pill);border:1.5px solid var(--line);
  font-size:var(--fs-small);font-weight:var(--fw-medium);color:var(--ink-soft);background:var(--cream);
  transition:all .15s ease;
}
.pill-choice input:checked + span{background:var(--ink);border-color:var(--ink);color:var(--cream);}
.contact .btn-primary{margin-top:8px;}
.form-note{font-size:12px;color:var(--ink-faint);text-align:center;margin-top:4px;}

/* Variante del formulario sobre grafito (landings) */
.contact.is-dark{background:var(--ink);color:var(--cream);}
.contact.is-dark h2{color:var(--cream);}
.contact.is-dark p.lead{color:rgba(251,248,242,.7);}
.contact.is-dark .field label{color:rgba(251,248,242,.6);}
.contact.is-dark .field input,
.contact.is-dark .field select{
  background:var(--on-ink-fill);border-color:var(--on-ink-line);color:var(--cream);
}
.contact.is-dark .field input::placeholder{color:rgba(251,248,242,.4);}
.contact.is-dark .field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23FBF8F2'%3E%3Cpath d='M5.5 7.5l4.5 5 4.5-5z'/%3E%3C/svg%3E");
}
.contact.is-dark .field select option{color:#111;}
.contact.is-dark .pill-choice span{background:transparent;border-color:rgba(251,248,242,.3);color:rgba(251,248,242,.8);}
.contact.is-dark .pill-choice input:checked + span{background:var(--malva-tint);border-color:var(--malva-tint);color:var(--ink);}
.contact.is-dark .btn-primary{background:var(--malva-tint);color:var(--ink);}
.contact.is-dark .form-note{color:rgba(251,248,242,.45);}

/* ---------- Aparicion al hacer scroll ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1;transform:none;}

/* ---------- Formulario: campos anadidos ---------- */
.field textarea{
  background:var(--cream);border:1.5px solid var(--line);
  border-radius:var(--radius-sm);padding:14px 16px;color:var(--ink);
  font-family:var(--font-sans);font-size:15px;font-weight:var(--fw-regular);
  width:100%;resize:vertical;min-height:110px;line-height:1.5;
}
.field textarea::placeholder{color:var(--ink-faint);}
.field .opcional{text-transform:none;letter-spacing:0;font-weight:var(--fw-regular);color:var(--ink-faint);}

.field-check{display:flex;align-items:flex-start;gap:12px;}
.field-check input{
  appearance:none;flex:none;width:20px;height:20px;margin-top:2px;
  border:1.5px solid var(--line);border-radius:6px;background:var(--cream);
  cursor:pointer;transition:background .15s ease, border-color .15s ease;
}
.field-check input:checked{
  background:var(--ink);border-color:var(--ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23FBF8F2' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5l4 4 8-9'/%3E%3C/svg%3E");
  background-size:14px;background-position:center;background-repeat:no-repeat;
}
.field-check label{font-size:13px;color:var(--ink-soft);line-height:1.5;font-weight:var(--fw-regular);}
.field-check label a{color:var(--ink);text-underline-offset:3px;}

/* Errores de validacion */
.field.has-error input,
.field.has-error select,
.field.has-error textarea,
.field-check.has-error input{border-color:var(--malva-dark);}
.error-msg{font-size:12.5px;font-weight:var(--fw-medium);color:var(--malva-dark);}
.aviso-error{
  background:var(--malva-tint);border:1px solid var(--malva);
  border-radius:var(--radius-sm);padding:14px 18px;
  font-size:13.5px;font-weight:var(--fw-medium);color:var(--ink);
}
.aviso-error a{color:var(--ink);}

/* Trampa antispam: fuera de la vista y fuera del foco */
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ---------- Piezas de apoyo ---------- */
.hero-corto{padding-top:52px;padding-bottom:54px;}
.hero-corto h1{font-size:clamp(30px,4.6vw,50px);}
.cta-nota{margin-top:20px;font-size:12.5px;font-weight:var(--fw-medium);color:var(--ink-soft);}
.pack-titulo{font-size:21px;font-weight:var(--fw-medium);color:var(--ink);letter-spacing:0;line-height:1.2;}
.enlaces-relacionados{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;}

/* La opcion vacia del desplegable se ve como marcador, no como respuesta */
.field select:has(option[value=""]:checked){color:var(--ink-faint);}
.field select option{color:var(--ink);}

/* ---------- Campos que no se desbordan ----------
   El input de fecha se salia del ancho por dos motivos a la vez:
   en WebKit tiene un ancho intrinseco propio que ignora el width:100%,
   y los hijos de un grid no encogen por debajo de su contenido salvo
   que se les diga (min-width:auto es el valor por defecto). */
.row-2 > *{min-width:0;}
.field input,
.field select,
.field textarea{min-width:0;max-width:100%;}

.field input[type="date"]{
  -webkit-appearance:none;
  appearance:none;
}
/* iOS centra el valor dentro del campo y lo descuadra respecto al resto */
.field input[type="date"]::-webkit-date-and-time-value{text-align:left;}