/* ==========================================================================
   Frenoteca · Sistema de marca
   Rojo del logo nuevo (LOGO FRENOTECA.ai), un solo tono en todo el sitio.
   Tipografía Nunito: sans redondeada, cercana y muy legible. Ver README.
   ========================================================================== */

@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/nunito-400.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/nunito-600.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/nunito-700.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/nunito-800.woff2") format("woff2"); }

:root {
  /* Marca: valores exactos del sitio actual */
  --rojo:        #c52b2d;  /* rojo del logo nuevo (LOGO FRENOTECA.ai): cabecera, pie, títulos · blanco encima 5.6:1 */
  --negro:       #000000;  /* --black: letras F y A del logo */
  --blanco:      #ffffff;  /* --white: letras RENOTEC del logo */
  --gris-claro:  #f3f3f3;  /* --white-dark */
  --gris-medio:  #bcbcbc;  /* --gray-md */
  --gris:        #6a6a6a;  /* --gray-dark · 5.4:1 sobre blanco (AA) */
  --grafito:     #333a4d;  /* --dark-md */
  --verde-wa:    #25d366;  /* verde oficial del logo de WhatsApp */

  /* Derivados funcionales (solo negro/blanco con transparencia: el rojo nunca varía) */
  --negro-80:    rgb(0 0 0 / .8);
  --negro-60:    rgb(0 0 0 / .6);
  --negro-12:    rgb(0 0 0 / .12);
  --negro-06:    rgb(0 0 0 / .06);
  --blanco-80:   rgb(255 255 255 / .8);
  --blanco-16:   rgb(255 255 255 / .16);

  --text: #111;
  --text-soft: var(--grafito); /* más oscuro que el gris: 10.5:1, lectura cómoda para público mayor */
  --line: var(--negro-12);

  /* Tipografía: Nunito para todo (títulos, texto y etiquetas) */
  --font: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --fs-xs:   .8125rem;
  --fs-sm:   .9375rem;
  --fs-base: 1.125rem;  /* 18 px: público mayor */
  --fs-md:   clamp(1.25rem, 1.15rem + .4vw, 1.375rem);
  --fs-lg:   clamp(1.3125rem, 1.15rem + .7vw, 1.625rem);
  --fs-xl:   clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  --fs-2xl:  clamp(2rem, 1.55rem + 2.4vw, 3.25rem);
  --fs-3xl:  clamp(2.5rem, 1.7rem + 4.2vw, 4.75rem);

  --gutter: clamp(1rem, .6rem + 2vw, 2rem);
  --section: clamp(3.5rem, 2.5rem + 5vw, 7rem);
  --max: 1180px;
  --radius-sm: 5px;  /* botones del sitio actual */
  --radius: 10px;
  --radius-lg: 18px;

  --shadow-sm: 0 1px 2px var(--negro-06), 0 2px 8px var(--negro-06);
  --shadow: 0 10px 30px rgb(0 0 0 / .12);
  --shadow-lg: 0 24px 60px rgb(0 0 0 / .25);
  --ease-out: cubic-bezier(.22, 1, .36, 1);

  --tap: 52px;
  --header-h: 64px;   /* fila del logo */
  --header-total: 108px; /* en celular la cabecera suma la fila del teléfono */
}
@media (min-width: 960px) { :root { --header-h: 76px; --header-total: 76px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-total) + 12px); }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: .2em; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0 0 .5em; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; }
ul, ol { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
b, strong { font-weight: 600; color: var(--negro); }
.on-dark strong, .on-red strong { color: inherit; }

:focus-visible { outline: 3px solid var(--rojo); outline-offset: 3px; border-radius: 3px; }
.on-dark :focus-visible, .on-red :focus-visible { outline-color: var(--blanco); }

.skip { position: absolute; left: 1rem; top: -100px; z-index: 1000; background: var(--negro); color: var(--blanco); padding: .75rem 1rem; border-radius: var(--radius-sm); }
.skip:focus { top: 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.bg-gris { background: var(--gris-claro); }
.bg-negro { background: var(--negro); color: var(--blanco); }
.bg-rojo { background: var(--rojo); color: var(--blanco); }

/* Etiqueta y títulos de sección: mayúsculas como en el sitio actual */
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .9375rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--rojo); margin-bottom: .75rem;
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; }
.on-dark .eyebrow, .on-red .eyebrow { color: var(--blanco); }
.title { font-size: var(--fs-2xl); }
.title + .lead { margin-top: -.25rem; }
.title em { font-style: normal; color: var(--rojo); }
.on-red .title em { color: var(--negro); }
.lead { font-size: var(--fs-md); color: var(--text-soft); max-width: 46ch; line-height: 1.5; }
.on-dark .lead { color: var(--blanco); }
.on-red .lead { color: var(--blanco); }
.section-head { max-width: 760px; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: var(--tap); padding: .8rem 1.4rem;
  border: 2px solid transparent; border-radius: var(--radius-sm);
  font-family: var(--font); font-size: 1.125rem; font-weight: 600; letter-spacing: 0;
  text-decoration: none; cursor: pointer; line-height: 1.2; text-align: center;
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s, transform .15s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.97); }
.btn svg { width: 1.25em; height: 1.25em; flex: none; }
.btn-rojo { background: var(--rojo); color: var(--blanco); }
.btn-rojo:hover { box-shadow: 0 8px 22px rgb(0 0 0 / .22); transform: translateY(-1px); } /* el rojo no cambia de tono */
/* WhatsApp: acción principal. Verde con brillo que respira y un destello que lo recorre */
.btn-wa {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(135deg, #2bd46a 0%, #179c4b 100%); color: var(--blanco); font-weight: 700;
  border-color: rgb(255 255 255 / .25); text-shadow: 0 1px 1px rgb(0 0 0 / .25);
  box-shadow: 0 0 0 0 rgb(37 211 102 / .55), 0 8px 24px rgb(37 211 102 / .45);
  animation: wa-glow 2.4s ease-in-out infinite;
}
.btn-wa::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 35%, rgb(255 255 255 / .45) 50%, transparent 65%);
  transform: translateX(-120%); animation: wa-shine 3.6s ease-in-out infinite;
}
.btn-wa:hover { transform: translateY(-2px); box-shadow: 0 0 0 6px rgb(37 211 102 / .2), 0 14px 32px rgb(37 211 102 / .55); }
.btn-wa .icon-wa { color: var(--blanco); }
@keyframes wa-glow { 50% { box-shadow: 0 0 0 8px rgb(37 211 102 / 0), 0 10px 34px rgb(37 211 102 / .7); } }
@keyframes wa-shine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .btn-wa, .btn-wa::after { animation: none; } }
.btn-negro { background: var(--negro); color: var(--blanco); }
.btn-negro:hover { background: var(--grafito); }
.btn-blanco { background: var(--blanco); color: var(--negro); }
.btn-blanco:hover { background: var(--gris-claro); }
.btn-borde { border-color: currentColor; color: var(--negro); background: transparent; }
.btn-borde:hover { background: var(--negro); color: var(--blanco); border-color: var(--negro); }
.on-dark .btn-borde, .on-red .btn-borde { color: var(--blanco); }
.on-dark .btn-borde:hover, .on-red .btn-borde:hover { background: var(--blanco); color: var(--negro); border-color: var(--blanco); }
.btn-lg { min-height: 58px; padding: 1rem 1.75rem; font-size: 1.1875rem; }
.btn-xl { min-height: 64px; padding: 1rem 1.75rem; font-size: 1.3125rem; border-radius: 10px; }
.btn-xl svg { width: 1.4em; height: 1.4em; }
.btn-col { display: grid; gap: .75rem; }
@media (min-width: 700px) { .btn-col { display: flex; flex-wrap: wrap; } }
.btn-block { width: 100%; }

/* ---------- Iconos ---------- */
.icon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon-fill { fill: currentColor; stroke: none; }
/* Logo de WhatsApp en su verde original; en blanco solo sobre fondos de color */
.icon-wa { color: var(--verde-wa); }
.btn-rojo .icon-wa, .btn-negro .icon-wa, .wa-float-btn .icon-wa, .site-footer .icon-wa { color: var(--blanco); }

/* ---------- Revelado al hacer scroll ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}