/* =====================================================================
   TCM SPORTS — Sistema de diseño web 2026
   Brand: Confident Blue · Energic Blue · Power Pink · Winter Calm
   Type:  Oswald (titulares, mayúsculas) · Montserrat (cuerpo)
   ===================================================================== */

/* ---------- Tokens ---------- */
:root{
  /* Colores de marca (hex exactos del brandbook) */
  --navy:      #141B4D;   /* Confident Blue */
  --navy-deep: #0C1236;   /* navy más profundo para capas */
  --royal:     #234FB8;   /* Energic Blue */
  --pink:      #E31C79;   /* Power Pink */
  --pink-dark: #C2155F;
  --gray:      #E6E6E6;   /* Winter Calm */
  --gray-2:    #F4F4F6;
  --white:     #FFFFFF;
  --ink:       #0B0B0B;   /* casi negro, bloques foto */

  --text-dark:  #141B4D;
  --text-body:  #2C3357;
  --text-mute:  #6A6F89;
  --text-on-dark:        rgba(255,255,255,.92);
  --text-on-dark-mute:   rgba(255,255,255,.62);

  /* Tipografía */
  --f-head: "Oswald", "Arial Narrow", sans-serif;
  --f-body: "Montserrat", system-ui, sans-serif;

  /* Radios / sombras / capas */
  --r-sm: 4px;
  --r:    8px;
  --r-lg: 16px;
  --shadow:    0 18px 50px -22px rgba(20,27,77,.45);
  --shadow-sm: 0 8px 24px -14px rgba(20,27,77,.5);

  /* Layout */
  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--f-body);
  color:var(--text-body);
  background:var(--white);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

/* ---------- Tipografía ---------- */
.h-eyebrow{
  font-family:var(--f-body);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--pink);
  margin:0 0 1.1rem;
}
.h-eyebrow.is-royal{ color:var(--royal); }
.h-eyebrow.is-mute{ color:var(--text-mute); }

h1,h2,h3,h4{ font-family:var(--f-head); font-weight:600; line-height:.98; margin:0;
  text-transform:uppercase; letter-spacing:.005em; color:var(--text-dark); }
.display{ font-size:clamp(2.8rem, 7vw, 5.6rem); font-weight:700; line-height:.92; }
.h1{ font-size:clamp(2.2rem, 5vw, 3.8rem); font-weight:600; }
.h2{ font-size:clamp(1.8rem, 3.6vw, 2.9rem); }
.h3{ font-size:clamp(1.3rem, 2.2vw, 1.7rem); }
.h4{ font-size:1.05rem; letter-spacing:.06em; }
.on-dark, .on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4{ color:#fff; }

.lead{ font-size:clamp(1.05rem,1.5vw,1.22rem); line-height:1.6; color:var(--text-body); }
.on-dark .lead, .on-dark p{ color:var(--text-on-dark); }
.muted{ color:var(--text-mute); }
.pink-word{ color:var(--pink); }
.royal-word{ color:var(--royal); }

p{ margin:0 0 1rem; text-wrap:pretty; }

/* ---------- Layout helpers ---------- */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(56px, 8vw, 110px); position:relative; overflow:hidden; }
.section.tight{ padding-block:clamp(40px,5vw,64px); }
.bg-light{ background:var(--white); color:var(--text-body); }
.bg-gray{ background:var(--gray-2); color:var(--text-body); }
.bg-navy{ background:var(--navy); color:#fff; }
.bg-navy-deep{ background:var(--navy-deep); color:#fff; }
.bg-ink{ background:var(--ink); color:#fff; }
.grid{ display:grid; gap:clamp(20px,3vw,40px); }
.center{ text-align:center; }
.measure{ max-width:54ch; }
.measure-sm{ max-width:42ch; }
.stack-sm > * + *{ margin-top:.6rem; }

/* ---------- Botones ---------- */
.btn{
  font-family:var(--f-head); font-weight:500; text-transform:uppercase;
  letter-spacing:.05em; font-size:.95rem;
  display:inline-flex; align-items:center; gap:.6em;
  padding:.85em 1.7em; border-radius:999px; border:2px solid transparent;
  cursor:pointer; transition:transform .15s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
  line-height:1; white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--pink); color:#fff; box-shadow:0 10px 26px -12px rgba(227,28,121,.8); }
.btn-primary:hover{ background:var(--pink-dark); transform:translateY(-2px); }
.btn-outline{ background:transparent; border-color:currentColor; color:var(--navy); }
.on-dark .btn-outline{ color:#fff; }
.btn-outline:hover{ background:var(--navy); color:#fff; border-color:var(--navy); }
.on-dark .btn-outline:hover{ background:#fff; color:var(--navy); border-color:#fff; }
.btn-ghost{ background:rgba(255,255,255,.1); color:#fff; }
.btn-ghost:hover{ background:rgba(255,255,255,.2); }
.btn-lg{ padding:1.05em 2.1em; font-size:1.05rem; }
.btn .arrow{ font-size:1.1em; transition:transform .2s ease; }
.btn:hover .arrow{ transform:translateX(3px); }

/* ---------- Logo (isotipo + wordmark) ---------- */
.logo{ display:inline-flex; align-items:center; gap:.6rem; }
.logo svg{ height:38px; width:auto; flex:none; }
.logo .wordmark{ font-family:var(--f-head); font-weight:700; font-style:italic; line-height:.8;
  letter-spacing:.01em; }
.logo .wordmark .tcm{ font-size:1.6rem; display:block; color:var(--navy); }
.logo .wordmark .sports{ font-size:.62rem; letter-spacing:.42em; color:var(--pink); padding-left:.12em;
  font-weight:600; font-style:normal; font-family:var(--f-head); }
.logo.on-dark .wordmark .tcm{ color:#fff; }
.logo.lg svg{ height:84px; }
.logo.lg .wordmark .tcm{ font-size:3.4rem; }
.logo.lg .wordmark .sports{ font-size:1.2rem; letter-spacing:.5em; }

/* ---------- Recurso gráfico: curvas ---------- */
.curve-deco{ position:absolute; pointer-events:none; z-index:0; opacity:.95; }
.curve-deco svg{ width:100%; height:100%; display:block; overflow:visible; }
.curve-tr{ top:-6%; right:-4%; width:min(46%,520px); aspect-ratio:1.2; }
.curve-bl{ bottom:-10%; left:-6%; width:min(50%,560px); aspect-ratio:1.6; }
.curve-band{ inset:0; opacity:.9; }

/* ---------- Tarjetas / cards ---------- */
.card{ background:#fff; border-radius:var(--r-lg); padding:clamp(22px,3vw,34px);
  box-shadow:var(--shadow-sm); border:1px solid rgba(20,27,77,.06); height:100%; }
.card.on-dark{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.1); }

/* placeholder de imagen (estilo brandbook: oscuro + label mono) */
.ph{
  position:relative; background:var(--ink); color:rgba(255,255,255,.55);
  display:flex; align-items:flex-end; justify-content:flex-start;
  overflow:hidden; border-radius:var(--r-lg);
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.05) 0 1px, transparent 1px 11px),
    linear-gradient(180deg, rgba(20,27,77,.25), rgba(11,11,11,.92));
  background-size:16px 16px, 100% 100%;
}
.ph::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 70% 20%, rgba(35,79,184,.28), transparent 60%);
  mix-blend-mode:screen;
}
.ph .ph-label{ position:relative; z-index:1; font-family:"SFMono-Regular",ui-monospace,Menlo,Consolas,monospace;
  font-size:.72rem; letter-spacing:.04em; padding:14px 16px; line-height:1.4;
  text-transform:uppercase; }
.ph .ph-label b{ color:rgba(255,255,255,.85); font-weight:600; }

/* overlay navy sobre fotos con texto encima */
.photo-overlay{ position:relative; }
.photo-overlay::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(11,16,40,.92) 0%, rgba(11,16,40,.55) 50%, rgba(11,16,40,.15) 100%); }
.photo-overlay > .overlay-content{ position:relative; z-index:2; }

/* ---------- Iconos de valores (lineales) ---------- */
.value-ico{ width:46px; height:46px; flex:none; }
.value-ico svg{ width:100%; height:100%; display:block; }

/* divider con curva fina */
.rule{ height:1px; background:linear-gradient(90deg,transparent, rgba(20,27,77,.16), transparent); border:0; }

/* chips / tags */
.chip{ display:inline-flex; align-items:center; gap:.4em; font-family:var(--f-body); font-weight:600;
  font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; padding:.4em .9em; border-radius:999px;
  background:rgba(35,79,184,.1); color:var(--royal); }
.chip.pink{ background:rgba(227,28,121,.12); color:var(--pink); }

/* utilidades */
.flex{ display:flex; }
.aic{ align-items:center; }
.jcb{ justify-content:space-between; }
.gap-sm{ gap:.6rem; } .gap{ gap:1rem; } .gap-lg{ gap:2rem; }
.wrap-flex{ flex-wrap:wrap; }
.relative{ position:relative; }
.z1{ position:relative; z-index:1; }

@media (max-width:860px){
  body{ font-size:16px; }
}