/* =========================================================
   VELARYS — Hoja de estilos principal
   Fase 4: paleta, tipografía y tokens documentados en
   clientes/velarys_diseno_fase4.md (proyecto DIGITCORE)
   ========================================================= */

:root {
  --navy: #00172A;
  --cyan: #00B4B6;
  --white: #FFFFFF;
  --bg: #F7F9FA;
  --gray: #5A6B75;
  --line: #E3E8EA;

  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;

  --radius: 6px;
  --container-max: 1160px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--navy);
  background: var(--white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, .brand { font-family: var(--font-heading); }
a { color: inherit; }
img { max-width: 100%; display: block; }
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }

/* Skip link (accesibilidad) */
.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--navy); color: #fff;
  padding: 10px 16px; z-index: 100; border-radius: 0 0 4px 0;
}
.skip-link:focus { left: 0; }

/* Foco visible siempre (WCAG AA) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

/* ---------- Header ---------- */
.site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
  padding: 24px 0;
}
.site-header.solid {
  position: relative;
  background: var(--navy);
}
.header-row { display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { height: 42.5px; width: auto; }
.brand span.name { color: var(--white); font-weight: 700; letter-spacing: .06em; font-size: 18px; }
.brand span.name em { color: var(--cyan); font-style: normal; }
.y-accent { color: var(--cyan); font-style: normal; }

.main-nav { display: flex; gap: 28px; }
.main-nav a { color: var(--white); text-decoration: none; font-size: 14px; font-weight: 500; opacity: .92; }
.main-nav a:hover, .main-nav a[aria-current="page"] { opacity: 1; border-bottom: 2px solid var(--cyan); padding-bottom: 3px; }

.btn-outline {
  border: 1px solid var(--white); color: var(--white); padding: 9px 18px;
  border-radius: 2px; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.btn-outline:hover { background: rgba(255,255,255,.1); }

.nav-toggle { display: none; }

/* ---------- Botones ---------- */
.btn-primary {
  background: var(--cyan); color: var(--navy); padding: 14px 28px; border-radius: 2px;
  font-size: 14px; font-weight: 700; text-decoration: none; display: inline-block; border: none; cursor: pointer;
}
.btn-primary:hover { filter: brightness(1.06); }
.btn-secondary {
  font-size: 14px; font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--cyan);
  padding-bottom: 2px; display: inline-block; color: var(--navy);
}
.btn-secondary.on-dark { color: var(--white); }
.cta-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }

/* ---------- Hero (Inicio) ---------- */
.hero {
  position: relative; min-height: 775px; display: flex; align-items: center; overflow: hidden;
}
.hero picture, .hero img.hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; z-index: 0;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(0,23,42,.94) 20%, rgba(0,23,42,.68) 55%, rgba(0,23,42,.32) 100%);
}
.hero-inner { position: relative; z-index: 2; max-width: 640px; padding: 140px 0 80px; }
.eyebrow {
  color: var(--cyan); font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 600; margin-bottom: 16px; display: block;
}
.hero h1 { font-size: clamp(30px, 4.4vw, 46px); line-height: 1.15; font-weight: 700; margin: 0 0 20px; color: var(--white); }
.hero p { font-size: 17px; color: #C7D2D6; margin: 0 0 32px; max-width: 480px; }

/* ---------- Page hero (páginas internas, sin foto) ---------- */
.page-hero { position: relative; overflow: hidden; background: var(--navy); color: var(--white); padding: 150px 0 64px; }
.page-hero > .container { position: relative; z-index: 2; }
.page-hero h1 { font-size: clamp(28px, 3.6vw, 38px); margin: 0 0 12px; }
.page-hero p { color: #C7D2D6; max-width: 560px; margin: 0; font-size: 16px; }

/* ---------- Secciones genéricas ---------- */
section.block { padding: 80px 0; }

/* Sección con marca de agua del icono de marca, difuminado, a la derecha */
.section-watermark { position: relative; overflow: hidden; }
.section-watermark .watermark-icon {
  position: absolute;
  top: 50%; right: 30px; transform: translateY(-50%);
  width: 480px; height: auto;
  opacity: .07;
  filter: blur(1px);
  pointer-events: none;
  z-index: 0;
}
.section-watermark > :not(.watermark-icon) { position: relative; z-index: 1; }
@media (max-width: 860px) {
  .section-watermark .watermark-icon { width: 280px; opacity: .06; }
}
.section-title {
  font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan);
  font-weight: 700; margin-bottom: 14px;
}
.section-heading { font-size: clamp(22px, 2.6vw, 28px); margin: 0 0 40px; max-width: 560px; }

/* ---------- Pasos / grid de 3 ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.step-num {
  width: 36px; height: 36px; border-radius: 50%; background: var(--navy); color: var(--white);
  display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; margin-bottom: 16px;
}
.grid-3 h3 { font-size: 17px; margin: 0 0 8px; }
.grid-3 p { font-size: 14px; color: var(--gray); margin: 0; }

/* ---------- Por qué Velarys (fondo navy) ---------- */
.why { background: var(--navy); color: var(--white); }
.why h2 { font-size: 28px; margin: 0 0 40px; }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.why-item { border-left: 2px solid var(--cyan); padding-left: 16px; }
.why-item h3 { font-size: 16px; margin: 0 0 8px; color: var(--cyan); }
.why-item p { font-size: 14px; color: #B9C4CA; margin: 0; }

/* ---------- Tarjetas de segmento ---------- */
.segments-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.segment-card {
  border: 1px solid var(--line); padding: 28px; border-radius: var(--radius); transition: border-color .2s, transform .2s;
  text-decoration: none; color: var(--navy); display: block;
}
.segment-card:hover { border-color: var(--cyan); transform: translateY(-2px); }
.segment-card h3 { font-size: 16px; margin: 0 0 10px; }
.segment-card p { font-size: 13px; color: var(--gray); margin: 0 0 16px; }
.segment-card .go { font-size: 13px; font-weight: 700; color: var(--navy); border-bottom: 1px solid var(--cyan); }

/* ---------- Servicios: grid + feature ---------- */
.services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.service-card {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px;
}
.service-card h3 { font-size: 16px; margin: 0 0 10px; }
.service-card p { font-size: 14px; color: var(--gray); margin: 0; }

/* ---------- Índice editorial de servicios (números + divisores) ----------
   Referencia: uncommondesign.group, adaptado. Reutiliza la convención de
   numeración cian de .concept-item (Quiénes somos) en vez de inventar un
   patrón nuevo. Solo para listas de 4 servicios "de un vistazo" — los
   service-card individuales (baterías, aplazamiento) siguen en caja,
   porque son contenido destacado, no un índice. */
.services-index {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.services-index .service-item { padding: 32px 28px; border-left: 1px solid var(--line); }
.services-index .service-item:first-child { border-left: none; }
.services-index .num {
  font-family: var(--font-heading); color: var(--cyan); font-size: 13px; font-weight: 700;
  display: block; margin-bottom: 22px; transition: opacity .25s ease;
}
.services-index .icon { width: 38px; height: 38px; margin-bottom: 22px; transition: transform .3s var(--ease, ease); }
.services-index .icon svg { width: 100%; height: 100%; stroke: var(--cyan); }
.services-index .service-item:hover .icon { transform: translateY(-3px); }
.services-index .service-item:hover .num { opacity: .6; }
.services-index h3 { font-size: 17px; margin: 0 0 8px; line-height: 1.3; }
.services-index p { font-size: 14px; color: var(--gray); margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .services-index .icon, .services-index .num { transition: none; }
}
@media (max-width: 860px) {
  .services-index { grid-template-columns: 1fr; border-bottom: none; }
  .services-index .service-item { border-left: none; border-top: 1px solid var(--line); }
  .services-index .service-item:first-child { border-top: none; }
}

.service-feature {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 0; align-items: center;
  background: var(--bg); border-radius: var(--radius); overflow: hidden; margin: 40px 0;
}
.service-feature .text { padding: 48px; }
.service-feature .text h3 { font-size: 22px; margin: 0 0 14px; }
.service-feature .text p { font-size: 15px; color: var(--gray); margin: 0 0 20px; }
.service-feature .imgwrap { min-height: 320px; height: 100%; }
.service-feature .imgwrap img { width: 100%; height: 100%; object-fit: cover; }
.tag {
  display: inline-block; background: rgba(0,180,182,.12); color: var(--cyan); font-size: 12px;
  font-weight: 700; padding: 4px 10px; border-radius: 20px; margin-bottom: 14px;
}
.texture-strip { height: 140px; border-radius: var(--radius); overflow: hidden; margin: 40px 0; }
.texture-strip img { width: 100%; height: 100%; object-fit: cover; }

.pain-point {
  display: flex; gap: 24px; align-items: center; background: var(--bg); border-radius: var(--radius);
  padding: 28px; border: 1px solid var(--line); flex-wrap: wrap;
}
.pain-point img { width: 110px; height: 110px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.pain-point h3 { font-size: 16px; margin: 0 0 6px; }
.pain-point p { font-size: 13px; color: var(--gray); margin: 0; max-width: 60ch; }

/* ---------- Quiénes somos ---------- */
.about { background: var(--navy); color: var(--white); position: relative; overflow: hidden; }
.about .orbit { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 720px; height: auto; opacity: .12; pointer-events: none; }
.about-inner { position: relative; z-index: 2; max-width: 620px; }
.about h2 { font-size: clamp(24px, 3vw, 30px); margin: 0 0 24px; line-height: 1.3; }
.about p { font-size: 16px; color: #C7D2D6; margin: 0 0 20px; max-width: 540px; }
.concept-row {
  display: flex; gap: 24px; margin-top: 56px; border-top: 1px solid rgba(255,255,255,.15);
  padding-top: 32px; flex-wrap: wrap;
}
.concept-item { flex: 1 1 150px; }
.concept-item .num { font-family: var(--font-heading); color: var(--cyan); font-size: 13px; margin-bottom: 8px; display: block; }
.concept-item h4 { font-size: 15px; margin: 0 0 6px; }
.concept-item p { font-size: 12px; color: #93A5AC; margin: 0; }

/* ---------- Contacto ---------- */
.contact { background: var(--bg); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.contact-intro h2 { font-size: clamp(22px, 2.8vw, 28px); margin: 0 0 16px; max-width: 420px; }
.contact-intro p { font-size: 15px; color: var(--gray); margin: 0 0 32px; max-width: 420px; }
.contact-info { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.contact-info a { text-decoration: none; color: var(--navy); font-weight: 600; }

.contact-reasons { display: flex; flex-direction: column; gap: 20px; margin-top: 40px; }
.reason-item { display: flex; gap: 14px; align-items: flex-start; }
.reason-item .icon {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%;
  background: rgba(0,180,182,.12); display: flex; align-items: center; justify-content: center;
}
.reason-item .icon svg { width: 16px; height: 16px; stroke: var(--cyan); }
.reason-item strong { display: block; font-size: 14px; margin-bottom: 2px; }
.reason-item span { font-size: 13px; color: var(--gray); }

.segment-tabs { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.segment-tabs button {
  padding: 8px 16px; font-size: 13px; border-radius: 20px; border: 1px solid var(--line);
  background: #fff; cursor: pointer; font-family: var(--font-body);
}
.segment-tabs button[aria-selected="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }

.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; }
.form-card label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 6px; color: var(--navy); }
.form-card input[type="text"], .form-card input[type="email"], .form-card input[type="tel"], .form-card textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 4px;
  font-family: var(--font-body); font-size: 14px; margin-bottom: 16px; background: var(--bg);
}
.form-card textarea { min-height: 90px; resize: vertical; }
.consent { font-size: 12px; color: var(--gray); margin: 4px 0 20px; display: flex; gap: 8px; align-items: flex-start; }
.consent input { margin-top: 3px; }
.hp-field { position: absolute; left: -9999px; top: -9999px; }
.form-msg { font-size: 13px; margin-bottom: 16px; padding: 10px 14px; border-radius: 4px; display: none; }
.form-msg.error { background: #FDECEC; color: #A32020; display: block; }
.form-msg.success { background: #E4F7F0; color: #0B6B4E; display: block; }
.segment-fields { display: none; }
.segment-fields.active { display: block; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: #93A5AC; padding: 48px 0; font-size: 13px; }
.footer-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 24px; }
.footer-col h4 { color: #fff; font-size: 13px; margin: 0 0 12px; }
.footer-col a { color: #93A5AC; text-decoration: none; display: block; margin-bottom: 6px; font-size: 13px; }
.footer-col a:hover { color: var(--cyan); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 32px; padding-top: 20px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.footer-bottom span.b { color: #fff; }

/* ---------- Reveal on scroll (progresivo, ligero) ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Cascada opcional para grupos de .reveal ----------
   Añadir la clase "reveal-group" al contenedor de una grid/lista de
   tarjetas .reveal para que aparezcan escalonadas en vez de todas a
   la vez. No se aplica a ningún bloque por defecto — es infraestructura
   disponible, opt-in por HTML (ver nota Velarys — transiciones scroll,
   08/2026). Cubre hasta 4 elementos; grupos mayores caen al mismo delay
   que el 4º. */
.reveal-group .reveal:nth-child(2) { transition-delay: .12s; }
.reveal-group .reveal:nth-child(3) { transition-delay: .24s; }
.reveal-group .reveal:nth-child(4),
.reveal-group .reveal:nth-child(n+4) { transition-delay: .36s; }
@media (prefers-reduced-motion: reduce) {
  .reveal-group .reveal { transition-delay: 0s; }
}

/* ---------- Parallax sutil de fondo (capa decorativa) ----------
   No mueve contenido real, solo un resplandor cian decorativo detrás
   del texto. Requiere position:relative + overflow:hidden en el
   contenedor (.hero y .page-hero ya lo tienen/lo incorporan). El
   desplazamiento lo controla main.js con requestAnimationFrame; sin
   JS o con prefers-reduced-motion, la capa queda estática (no rompe
   nada). Ver nota Velarys — transiciones scroll, 08/2026. */
.parallax-layer {
  position: absolute;
  inset: -10%;
  z-index: 1;
  background:
    radial-gradient(circle at 20% 25%, rgba(0,180,182,.12), transparent 45%),
    radial-gradient(circle at 82% 75%, rgba(0,180,182,.07), transparent 50%);
  transform: translateY(calc(var(--parallax-y, 0) * 1px));
  pointer-events: none;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .parallax-layer { transform: none; }
}

/* ---------- Sheen en botón primario (aplicado solo a CTAs, no a "Aceptar" cookies) ----------
   Activo en: hero Inicio, "Habla con un asesor" (Servicios), envío del
   formulario de Contacto. Deliberadamente NO en el botón "Aceptar" del
   banner de cookies (mismo peso visual que "Rechazar" exigido por Doc 04).
   .btn-primary base no se toca — esto es aditivo vía la clase btn-sheen.
   Ver nota Velarys — transiciones scroll, 08/2026. */
.btn-primary.btn-sheen { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary.btn-sheen::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}
.btn-primary.btn-sheen:hover::after { transform: translateX(120%); }
@media (prefers-reduced-motion: reduce) {
  .btn-primary.btn-sheen::after { transition: none; transform: translateX(120%); opacity: 0; }
}

/* ---------- Responsive / mobile-first adjustments ---------- */
@media (max-width: 860px) {
  .main-nav { display: none; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center; background: none; border: 1px solid var(--white);
    color: var(--white); width: 38px; height: 38px; border-radius: 4px; cursor: pointer;
  }
  .main-nav.open {
    display: flex; flex-direction: column; position: absolute; top: 70px; right: 24px; left: 24px;
    background: var(--navy); padding: 20px; border-radius: 6px; gap: 16px; z-index: 30;
  }
  .grid-3, .why-grid, .segments-grid, .services-grid { grid-template-columns: 1fr; }
  .service-feature { grid-template-columns: 1fr; }
  .service-feature .imgwrap { min-height: 220px; order: -1; }
  .contact-grid { grid-template-columns: 1fr; }
  .about .orbit { width: 300px; right: 10px; opacity: .1; }
  .footer-row { flex-direction: column; }
}

/* ---------- Páginas legales (aviso legal, privacidad, cookies) ---------- */
.legal-page { padding: 56px 0 100px; max-width: 780px; }
.legal-page h1 { font-size: clamp(26px, 3.4vw, 34px); margin: 0 0 8px; }
.legal-page .legal-updated { color: var(--gray); font-size: 13px; margin: 0 0 40px; }
.legal-page h2 { font-size: 20px; margin: 40px 0 12px; }
.legal-page h3 { font-size: 16px; margin: 24px 0 8px; }
.legal-page p, .legal-page li { color: #33444C; font-size: 15px; line-height: 1.7; }
.legal-page ul, .legal-page ol { padding-left: 22px; margin: 0 0 16px; }
.legal-page li { margin-bottom: 6px; }
.legal-page table { width: 100%; border-collapse: collapse; margin: 16px 0 24px; font-size: 14px; }
.legal-page th, .legal-page td { text-align: left; padding: 10px 12px; border: 1px solid var(--line); vertical-align: top; }
.legal-page th { background: var(--bg); font-family: var(--font-heading); font-weight: 500; }
.legal-page .callout { background: var(--bg); border-left: 3px solid var(--cyan); padding: 14px 18px; border-radius: 4px; font-size: 14px; margin: 20px 0; }
.legal-page a { color: var(--cyan); text-decoration: underline; }
.review-banner {
  background: #FFF3CD; color: #664D03; padding: 14px 24px; font-size: 13.5px;
  text-align: center; line-height: 1.5;
}
.review-banner strong { display: inline; }

/* ---------- Banner de consentimiento de cookies ---------- */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
  background: var(--navy); color: var(--white);
  box-shadow: 0 -4px 24px rgba(0,0,0,.2);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner-inner {
  max-width: var(--container-max); margin: 0 auto; padding: 20px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.cookie-banner-inner p { margin: 0; font-size: 14px; color: #C7D2D6; max-width: 640px; }
.cookie-banner-inner p a { color: var(--cyan); }
.cookie-banner-actions { display: flex; gap: 12px; flex-shrink: 0; }
.cookie-banner-actions button { font-family: var(--font-body); appearance: none; cursor: pointer; }
.cookie-banner-actions .btn-secondary { background: none; padding: 10px 4px; font-size: 14px; border: none; border-bottom: 2px solid var(--cyan); border-radius: 0; }
.cookie-banner-actions .btn-primary { padding: 10px 20px; font-size: 14px; }
@media (max-width: 640px) {
  .cookie-banner-inner { flex-direction: column; align-items: stretch; text-align: center; }
  .cookie-banner-actions { justify-content: center; }
}