/* ==========================================================================
   Emporium — hoja de estilos compartida
   Minimalista, escala de grises, esquinas cuadradas, grilla visible.
   Un solo color de acento por página, definido en body[data-page].
   ========================================================================== */

:root {
  /* Base neutra */
  --negro: #0F0F10;
  --grafito: #2B2B2E;
  --gris-medio: #6B6B6F;
  --gris-suave: #9A9AA0;   /* solo decorativo: nunca para texto legible */
  --gris-claro: #D9D9DB;
  --superficie: #F2F2F3;
  --blanco: #FAFAFA;

  /* Acento por defecto (se redefine por página más abajo) */
  --acento: #33455A;

  --fuente-titulo: "Archivo", "Arial Black", Arial, sans-serif;
  --fuente-cuerpo: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ancho: 1200px;
  --lateral: 40px;
  --seccion: 160px;
  --celda: 56px;
  --celda-amplia: 80px;
  --barra: 72px;
  --transicion: 150ms ease;
}

/* ---------- Acento por página (único lugar con los hex de los metales) ---------- */

body[data-page="inicio"],
body[data-page="contacto"]  { --acento: #33455A; }
body[data-page="servicios"] { --acento: #5C6B73; }  /* acero */
body[data-page="nosotros"]  { --acento: #5A6169; }  /* plomo */
body[data-page="aprende"]   { --acento: #3D4249; }

@media (max-width: 767px) {
  :root {
    --lateral: 24px;
    --seccion: 104px;
    --celda: 32px;
    --celda-amplia: 36px;
    --barra: 64px;
  }
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  border-radius: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--blanco);
  color: var(--negro);
  font-family: var(--fuente-cuerpo);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

body.menu-abierto { overflow: hidden; }

/* La barra fija no tapa el destino al saltar a un #id */
[id] { scroll-margin-top: 80px; }

h1, h2, h3 {
  text-wrap: balance;          /* reparte las palabras en líneas parejas */
  font-family: var(--fuente-titulo);
  font-weight: 800;
  margin: 0;
  color: var(--negro);
  overflow-wrap: break-word;
  hyphens: auto;
}

h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.5px;
}

h2 {
  font-size: clamp(1.625rem, 3.2vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.3px;
}

h3 {
  font-size: clamp(1.125rem, 1.6vw, 1.25rem);
  line-height: 1.3;
}

p {
  text-wrap: pretty;           /* evita una palabra sola en la última línea */
  margin: 0;
  max-width: 65ch;
  overflow-wrap: break-word;
}

p + p { margin-top: 1em; }

a {
  color: inherit;
  transition: color var(--transicion), background-color var(--transicion), border-color var(--transicion);
}

img {
  display: block;
  max-width: 100%;
  object-fit: cover;
}

:focus-visible {
  outline: 2px solid var(--negro);
  outline-offset: 2px;
}

.saltar {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 100;
  padding: 12px 16px;
  background: var(--negro);
  color: var(--blanco);
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}

.saltar:focus { top: 16px; }

/* ---------- Contenedor único y grilla ---------- */

.container {
  width: 100%;
  max-width: calc(var(--ancho) + var(--lateral) * 2);
  margin: 0 auto;
  padding: 0 var(--lateral);
}

.seccion { margin-top: var(--seccion); }
.seccion:first-child { margin-top: 40px; }
main { padding-bottom: var(--seccion); }

/* Las líneas salen del hueco de 1px sobre fondo gris claro: siempre miden
   1px, aunque la grilla cambie de columnas. Nunca bordes celda por celda. */
.grilla {
  display: grid;
  gap: 1px;
  background: var(--gris-claro);
  border: 1px solid var(--gris-claro);
}

.grilla > * {
  background: var(--blanco);
  min-width: 0;
}

/* Grillas apiladas: la segunda no repite la línea superior */
.grilla + .grilla { border-top: 0; }

.celda {
  display: flex;
  flex-direction: column;
  padding: var(--celda);
}

.g-una    { grid-template-columns: 1fr; }
.g-hero   { grid-template-columns: 1.4fr 1fr; }
.g-media  { grid-template-columns: 1fr 1.6fr; }
.g-par    { grid-template-columns: 1fr 1fr; }
.g-tres   { grid-template-columns: repeat(3, 1fr); }
.g-cuatro { grid-template-columns: repeat(4, 1fr); }

/* Bloque que ocupa la fila completa (títulos o el último impar) */
.completo { grid-column: 1 / -1; }

@media (max-width: 1023px) {
  .g-cuatro { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .g-hero,
  .g-media,
  .g-par,
  .g-tres,
  .g-cuatro { grid-template-columns: 1fr; }
}

/* ---------- Tipografía de apoyo ---------- */

.etiqueta {
  display: block;
  font-family: var(--fuente-cuerpo);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--gris-medio);
  margin-bottom: 16px;
}

/* Etiquetas que llevan el color de la página */
.etiqueta--acento { color: var(--acento); }

.bajada {
  color: var(--gris-medio);
  font-size: 19px;
  line-height: 1.6;
  margin-top: 20px;
}

@media (max-width: 767px) {
  .bajada { font-size: 17px; }
}

/* ---------- Encabezados de sección (al aire, fuera de la grilla) ---------- */

.seccion__cabeza {
  max-width: 760px;
  margin-bottom: 56px;
}

@media (max-width: 767px) {
  .seccion__cabeza { margin-bottom: 36px; }
}

.seccion__cabeza .bajada { margin-top: 16px; }

.seccion__pie { margin-top: 40px; }

/* Encabezado de página interior: título, bajada y (si hay) índice */
.cabeza-pagina { padding-top: 24px; }
.cabeza-pagina h1 { max-width: 18ch; }

/* Celdas con más aire para bloques de lectura */
.celda--amplia { padding: var(--celda-amplia); }

/* Texto largo: la primera frase manda, el resto acompaña */
.texto-largo { margin-top: 28px; }
.texto-largo p { color: var(--gris-medio); }
.texto-largo .entrada { color: var(--negro); font-size: 19px; line-height: 1.6; }

@media (max-width: 767px) {
  .texto-largo .entrada { font-size: 17px; }
}

.centrado-v { justify-content: center; }

/* ---------- Botones ---------- */

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 14px 24px;
  border: 1px solid var(--acento);
  background: var(--acento);
  color: var(--blanco);
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transicion), border-color var(--transicion), color var(--transicion);
}

.btn .ti { font-size: 18px; }

.btn--sec {
  background: transparent;
  border-color: var(--negro);
  color: var(--negro);
}

.btn--grande {
  padding: 18px 32px;
  font-size: 16px;
}

@media (hover: hover) {
  .btn:hover {
    background: var(--negro);
    border-color: var(--negro);
  }

  .btn--sec:hover {
    background: var(--superficie);
    border-color: var(--negro);
  }
}

.enlace {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 14px;
  color: var(--negro);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

@media (hover: hover) {
  .enlace:hover { text-decoration-thickness: 2px; }
}

/* En móvil, los botones del hero y de los cierres van a ancho completo */
@media (max-width: 767px) {
  .acciones { flex-direction: column; }
  .acciones .btn,
  .cierre .btn { width: 100%; }
}

/* ---------- Logo (siempre neutro) ---------- */

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  text-decoration: none;
  color: var(--negro);
}

.logo__marca {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  background: var(--negro);
  color: var(--blanco);
  font-family: var(--fuente-titulo);
  font-weight: 800;
  font-size: 15px;
  line-height: 1;
}

.logo__nombre {
  font-family: var(--fuente-titulo);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.5px;
  line-height: 1;
}

.logo--claro { color: var(--blanco); }
.logo--claro .logo__marca { background: var(--blanco); color: var(--negro); }

/* ---------- Navegación ---------- */

.barra {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--blanco);
  border-bottom: 1px solid var(--gris-claro);
}

.barra__fila {
  display: flex;
  align-items: center;
  gap: 32px;
  height: var(--barra);
}

.nav {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: auto;
}

.nav__lista {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__lista a {
  display: inline-block;
  padding: 6px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--gris-medio);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.nav__lista a[aria-current="page"] {
  color: var(--negro);
  border-bottom-color: var(--acento);
}

@media (hover: hover) {
  .nav__lista a:hover { color: var(--negro); }
}

.btn-menu {
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  margin-left: auto;
  padding: 10px 16px;
  background: transparent;
  border: 1px solid var(--negro);
  color: var(--negro);
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}

.btn-menu .ti { font-size: 18px; }

@media (max-width: 1023px) {
  .nav, .nav__lista { gap: 20px; }
}

@media (max-width: 767px) {
  .nav { display: none; }
  .btn-menu { display: inline-flex; }
}

/* Panel del menú móvil (pantalla completa) */

.panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;      /* respaldo */
  height: 100dvh;     /* cubre bien la pantalla en iPhone */
  z-index: 80;
  background: var(--blanco);
  overflow-y: auto;
}

.panel[hidden] { display: none; }

.panel__cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--barra);
  border-bottom: 1px solid var(--gris-claro);
}

.panel__cabeza .btn-menu { display: inline-flex; margin-left: 0; }

.panel__lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.panel__lista li { border-bottom: 1px solid var(--gris-claro); }

.panel__lista a {
  display: block;
  padding: 18px 0;
  font-family: var(--fuente-titulo);
  font-weight: 800;
  font-size: 28px;
  line-height: 1.2;
  color: var(--gris-medio);
  text-decoration: none;
}

.panel__lista a[aria-current="page"] { color: var(--negro); }

.panel__pie { padding: 32px 0 48px; }
.panel__pie .btn { width: 100%; }

/* ---------- Botón flotante de WhatsApp ---------- */

.wa-flotante {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  background: var(--acento);
  color: var(--blanco);
  text-decoration: none;
  transition: background-color var(--transicion);
}

.wa-flotante .ti { font-size: 26px; }

@media (hover: hover) {
  .wa-flotante:hover { background: var(--negro); }
}

/* ---------- Placeholders de imagen ---------- */

.ph {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: var(--superficie);
  color: var(--gris-suave);   /* ícono decorativo */
  object-fit: cover;
}

.ph .ti { font-size: 40px; }

.ph--4x5  { aspect-ratio: 4 / 5; }
.ph--1x1  { aspect-ratio: 1 / 1; }
.ph--16x9 { aspect-ratio: 16 / 9; }

/* Una foto real reemplaza al placeholder con la misma clase de proporción */
img.ph { height: 100%; object-fit: cover; }

.media { padding: 0; }

/* En móvil la imagen del hero va bajo el texto y más baja */
@media (max-width: 767px) {
  .g-hero .ph--4x5 { aspect-ratio: 4 / 3; }
}

/* ---------- Hero ---------- */

.hero__texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 72px var(--celda);
}

.hero__texto h1 { max-width: 14ch; }

@media (max-width: 767px) {
  .hero__texto { padding: 40px var(--celda); }
}

/* ---------- Tarjetas de pilar (Inicio) ---------- */

/* Toda la tarjeta es clicable: el enlace del título se estira sobre ella */
.pilar-tarjeta {
  position: relative;
  gap: 14px;
  padding-top: 40px;
  padding-bottom: 44px;
  transition: background-color var(--transicion);
}
.pilar-tarjeta .etiqueta { margin-bottom: 4px; }
.pilar-tarjeta .ti { font-size: 32px; line-height: 1; margin-bottom: 8px; }
.pilar-tarjeta h3 a::after { content: ""; position: absolute; inset: 0; }
.pilar-tarjeta h3 a:focus-visible { outline: none; }
.pilar-tarjeta:focus-within { outline: 2px solid var(--negro); outline-offset: -2px; }
.pilar-tarjeta p { color: var(--gris-medio); font-size: 16px; }
.pilar-tarjeta h3 a { text-decoration: none; }

@media (hover: hover) {
  .grilla > .pilar-tarjeta:hover { background: var(--superficie); }
  .pilar-tarjeta:hover h3 a { text-decoration: underline; text-underline-offset: 4px; }
}

.acento-icono { color: var(--acento); }

.pie-seccion {
  display: flex;
  align-items: center;
  padding: 24px var(--celda);
}

/* ---------- Cierre ---------- */

.cierre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 64px var(--celda-amplia);
  background: var(--superficie);
  border: 1px solid var(--gris-claro);
}

.cierre h2 { max-width: 22ch; }
.cierre .bajada { margin-top: 12px; }
.cierre .btn { flex-shrink: 0; }

@media (max-width: 767px) {
  .cierre {
    flex-direction: column;
    align-items: stretch;
    padding: 40px var(--celda-amplia);
  }
}

/* ---------- Servicios: índice de pilares ---------- */

.indice {
  list-style: none;
  margin: 56px 0 0;
  padding: 0;
}

.indice__item {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px 28px 28px;
  text-decoration: none;
  transition: background-color var(--transicion);
}

.indice__item .etiqueta { margin-bottom: 10px; }

.indice__nombre {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
  color: var(--negro);
}

.indice__nombre .ti { font-size: 24px; flex-shrink: 0; }

@media (hover: hover) {
  .indice__item:hover { background: var(--superficie); }
  .indice__item:hover .indice__nombre { text-decoration: underline; text-underline-offset: 4px; }
}

/* ---------- Servicios: bloques de pilar ---------- */

/* Cada pilar es un bloque aparte, con aire entre uno y otro.
   La línea interna de 1px sale del hueco sobre fondo gris claro. */
.pilares {
  display: grid;
  gap: 88px;
}

.pilar {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 1px;
  background: var(--gris-claro);
  border: 1px solid var(--gris-claro);
  border-left: 3px solid var(--acento);
}

.pilar__detalle { gap: 44px; }

.pilar > .celda { background: var(--blanco); }

.pilar__cabeza {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.pilar__cabeza .ti { font-size: 32px; line-height: 1; color: var(--acento); }
.pilar__cabeza .etiqueta { margin: 0; }

.pilar h2 { font-size: clamp(1.5rem, 2.8vw, 1.875rem); }
.pilar__texto { margin-top: 16px; color: var(--gris-medio); font-size: 18px; }

.subtitulo {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  margin: 0 0 12px;
  color: var(--negro);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.chips li {
  padding: 6px 10px;
  border: 1px solid var(--gris-claro);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--grafito);
}

.pilar__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  margin-top: auto;
  padding-top: 32px;
}

.enlace-discreto {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-size: 14px;
  font-weight: 500;
  color: var(--gris-medio);
  text-underline-offset: 4px;
}

@media (hover: hover) {
  .enlace-discreto:hover { color: var(--negro); }
}

.lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lista li {
  padding: 12px 0;
  border-top: 1px solid var(--gris-claro);
  font-size: 16px;
}

.lista li:last-child { border-bottom: 1px solid var(--gris-claro); }

@media (max-width: 767px) {
  .pilar { grid-template-columns: 1fr; }
  .pilares { gap: 56px; }
  .pilar__acciones .btn { width: 100%; }
}

/* ---------- Nosotros ---------- */

.valor h3 { margin-bottom: 10px; }
.valor p { color: var(--gris-medio); font-size: 16px; }

.paso__numero {
  display: block;
  font-family: var(--fuente-titulo);
  font-weight: 800;
  font-size: 48px;
  line-height: 1;
  color: var(--gris-claro);
  margin-bottom: 24px;
}

.paso .etiqueta { margin-bottom: 8px; }
.paso h3 { margin-bottom: 10px; }
.paso p { color: var(--gris-medio); font-size: 16px; }

.pasos {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ---------- Aprende ---------- */

.recurso {
  border-left: 3px solid var(--acento);
}

.recurso h2,
.recurso h3 { max-width: 28ch; }
.recurso h2 { font-size: clamp(1.5rem, 2.8vw, 1.875rem); }
.recurso p { margin-top: 14px; color: var(--gris-medio); }

/* El enlace se va al fondo: quedan alineados aunque los textos midan distinto */
.recurso .enlace { margin-top: auto; padding-top: 24px; align-self: flex-start; }

/* ---------- Contacto ---------- */

.datos {
  list-style: none;
  margin: 0;
  padding: 0;
}

.datos a {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 48px;
  padding: 14px 0;
  text-decoration: none;
  border-bottom: 1px solid var(--gris-claro);
}

.datos .ti { font-size: 24px; color: var(--acento); }

.datos__tipo {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--gris-medio);
  line-height: 1.3;
}

.datos__valor {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: var(--negro);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

@media (hover: hover) {
  .datos a:hover .datos__valor { text-decoration: underline; text-underline-offset: 4px; }
}

.faq { border-top: 1px solid var(--gris-claro); margin-top: 32px; }

.faq details { border-bottom: 1px solid var(--gris-claro); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 48px;
  padding: 22px 0;
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary .ti {
  flex-shrink: 0;
  font-size: 22px;
  transition: transform var(--transicion);
}

.faq details[open] summary .ti { transform: rotate(45deg); }

.faq details p {
  padding: 0 0 24px;
  color: var(--gris-medio);
}

/* ---------- Footer (siempre neutro) ---------- */

.pie {
  background: var(--grafito);
  color: var(--gris-claro);
  padding: 72px 0 0;
  font-size: 15px;
}

.pie__grilla {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 56px;
}

.pie__lema {
  margin-top: 20px;
  max-width: 28ch;
  color: var(--gris-claro);
}

.pie__titulo {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 14px;
  color: var(--blanco);
  margin: 0 0 16px;
}

.pie__lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pie__lista a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  color: var(--gris-claro);
  text-decoration: none;
}

.pie__lista .ti { font-size: 18px; }

@media (hover: hover) {
  .pie__lista a:hover { color: var(--blanco); text-decoration: underline; text-underline-offset: 4px; }
}

/* Botones sobre el footer: versión clara */
.pie .btn {
  background: var(--blanco);
  border-color: var(--blanco);
  color: var(--negro);
}

.pie :focus-visible { outline-color: var(--blanco); }

.pie__base {
  border-top: 1px solid #45454A;
  padding: 24px 0 32px;
  font-size: 13px;
  color: var(--gris-claro);
}

@media (max-width: 767px) {
  .pie { padding-top: 56px; }
  .pie__grilla { grid-template-columns: 1fr; gap: 36px; }
  /* Que el botón flotante no tape el final del footer */
  .pie { padding-bottom: 96px; }
}

/* ---------- Movimiento reducido ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   Inicio
   ========================================================================== */

body[data-page="inicio"] main { padding-bottom: 0; }

/* ---------- Barra transparente sobre el hero ----------
   Solo en Inicio. JS agrega .nav--solid al bajar más de 60px. */

body[data-page="inicio"] .barra {
  position: fixed;
  left: 0;
  right: 0;
  background: rgba(15, 15, 16, 0.78);
  border-bottom-color: rgba(250, 250, 250, 0.16);
  transition: background-color 200ms ease, border-color 200ms ease;
}

body[data-page="inicio"] .barra:not(.nav--solid) .logo { color: var(--blanco); }
body[data-page="inicio"] .barra:not(.nav--solid) .logo__marca { background: var(--blanco); color: var(--negro); }
body[data-page="inicio"] .barra:not(.nav--solid) .nav__lista a { color: var(--gris-claro); }
body[data-page="inicio"] .barra:not(.nav--solid) .nav__lista a[aria-current="page"] { color: var(--blanco); }
/* Sobre fondo oscuro, el botón de la barra va en blanco para destacar */
body[data-page="inicio"] .barra:not(.nav--solid) .nav .btn {
  background: var(--blanco);
  border-color: var(--blanco);
  color: var(--negro);
}
body[data-page="inicio"] .barra:not(.nav--solid) .nav__lista a[aria-current="page"] { border-bottom-color: var(--blanco); }
body[data-page="inicio"] .barra:not(.nav--solid) .btn-menu { color: var(--blanco); border-color: var(--blanco); }
body[data-page="inicio"] .barra:not(.nav--solid) :focus-visible { outline-color: var(--blanco); }

body[data-page="inicio"] .barra.nav--solid {
  background: var(--blanco);
  border-bottom-color: var(--gris-claro);
}

@media (hover: hover) {
  body[data-page="inicio"] .barra:not(.nav--solid) .nav__lista a:hover { color: var(--blanco); }
  body[data-page="inicio"] .barra:not(.nav--solid) .nav .btn:hover { background: var(--superficie); border-color: var(--superficie); }
}

/* ---------- Hero a sangre ---------- */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 88vh;    /* respaldo */
  min-height: 88svh;   /* no salta en iPhone al mostrar/ocultar la barra */
  padding-top: calc(var(--barra) + 32px);
  background: var(--grafito);
  color: var(--blanco);
}

.hero__media {
  position: absolute;
  inset: 0;
}

.hero__media picture { display: contents; }

.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;   /* el punto de interés, a la derecha */
}

/* Capa sólida para que el texto se lea sobre cualquier foto
   (si la foto real es muy clara, subir a 0.65) */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(15, 15, 16, 0.55);
}

/* Refuerzo inferior detrás del texto: único degradado del sitio (funcional) */
.hero__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(15, 15, 16, 0.75), transparent 60%);
}

/* Marca los 60px que decide el cambio de la barra */
.hero__umbral {
  position: absolute;
  top: 60px;
  left: 0;
  width: 1px;
  height: 1px;
}

.hero__contenido {
  position: relative;
  z-index: 2;
  padding-bottom: clamp(32px, 7svh, 64px);
}

.hero__etiqueta {
  display: block;
  margin-bottom: 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gris-claro);
}

.hero h1 {
  max-width: 13ch;
  /* Crece con el ancho, pero no más de lo que permite el alto:
     en notebooks bajos el bloque cabe completo sobre la franja */
  font-size: clamp(2.25rem, min(7vw, 9.5svh), 5.5rem);
  hyphens: manual;
  line-height: 1.02;
  letter-spacing: -1px;
  color: var(--blanco);
}

.hero__bajada {
  max-width: 46ch;
  margin-top: 24px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--blanco);
}

.hero .acciones { margin-top: clamp(24px, 4svh, 36px); }

.hero__nota {
  margin-top: 16px;
  font-size: 13px;
  color: var(--gris-claro);
}

/* Botones sobre imagen */
.btn--claro {
  background: var(--blanco);
  border-color: var(--blanco);
  color: var(--negro);
}

.btn--linea {
  background: transparent;
  border-color: var(--blanco);
  color: var(--blanco);
}

.hero :focus-visible { outline-color: var(--blanco); }

@media (hover: hover) {
  .btn--claro:hover { background: var(--superficie); border-color: var(--superficie); }
  .btn--linea:hover { background: var(--blanco); border-color: var(--blanco); color: var(--negro); }
}

/* Franja inferior: continúa la grilla técnica sobre la foto */
.hero__franja {
  position: relative;
  z-index: 2;
  background: rgba(15, 15, 16, 0.6);
  border-top: 1px solid rgba(250, 250, 250, 0.2);
}

.hero__pilares {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
  margin-top: 0;
  margin-bottom: 0;
}

.hero__pilares li {
  border-left: 1px solid rgba(250, 250, 250, 0.2);
}

.hero__pilares li:last-child { border-right: 1px solid rgba(250, 250, 250, 0.2); }

.hero__pilar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  height: 100%;
  padding: 18px 24px;
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
  color: var(--blanco);
  text-decoration: none;
  transition: background-color var(--transicion);
}

.hero__pilar .ti { font-size: 22px; flex-shrink: 0; }

@media (hover: hover) {
  .hero__pilar:hover { background: rgba(250, 250, 250, 0.1); }
}

@media (max-width: 767px) {
  .hero {
    min-height: 85vh;
    min-height: 85svh;
  }

  .hero__contenido { padding-bottom: 40px; }
  .hero__bajada { font-size: 17px; }

  /* La franja pasa a 2x2 y ocupa todo el ancho */
  .hero__pilares {
    grid-template-columns: 1fr 1fr;
    padding: 0;
  }

  .hero__pilares li { border-left: 0; }
  .hero__pilares li:nth-child(even) { border-left: 1px solid rgba(250, 250, 250, 0.2); }
  .hero__pilares li:nth-child(n+3) { border-top: 1px solid rgba(250, 250, 250, 0.2); }
  .hero__pilares li:last-child { border-right: 0; }
  .hero__pilar { padding: 14px 16px; font-size: 13px; }
}

/* ---------- ¿Te pasa esto? ---------- */

.dolores {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dolor { gap: 20px; padding-top: 48px; padding-bottom: 52px; }

.dolor__numero {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 14px;
  color: var(--acento);
}

.dolor p {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.35;
  color: var(--negro);
  max-width: 32ch;
}

@media (max-width: 767px) {
  .dolor p { font-size: 18px; }
}

/* ---------- Comparación ---------- */

.compara {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: var(--blanco);
}

.compara th,
.compara td {
  border: 1px solid var(--gris-claro);
  padding: 22px var(--celda);
  text-align: left;
  vertical-align: top;
}

.compara th {
  font-family: var(--fuente-titulo);
  font-weight: 800;
  font-size: 18px;
}

.compara th.compara__otro { color: var(--gris-medio); }

.compara th.compara__emporium {
  color: var(--negro);
  border-top: 3px solid var(--acento);
}

.compara td {
  font-size: 16px;
  line-height: 1.5;
}

/* Ícono a la izquierda y el texto alineado a su lado */
.compara td > .ti { float: left; margin: 1px 12px 0 0; font-size: 20px; }
.compara td > span { display: block; overflow-wrap: break-word; hyphens: auto; }

.compara td.compara__otro { color: var(--gris-medio); }

.compara td.compara__emporium {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  color: var(--negro);
}

.compara td.compara__emporium .ti { color: var(--acento); }

@media (max-width: 767px) {
  .compara th,
  .compara td { padding: 16px 14px; font-size: 14px; }
  .compara th { font-size: 15px; }
  .compara td > .ti { float: none; display: block; margin: 0 0 6px; }
}

/* ---------- Cómo funciona ---------- */

.paso__numero--grande { font-size: 56px; }

/* ---------- Quién está detrás ---------- */

.fundador__nombre {
  font-size: clamp(1.5rem, 2.8vw, 2rem);
}

.fundador__cargo {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--gris-medio);
}

/* ---------- Cierre oscuro ---------- */

.cierre-oscuro {
  margin-top: var(--seccion);
  background: var(--negro);
  color: var(--blanco);
}

.cierre-oscuro__grilla {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: center;
  padding-top: 96px;
  padding-bottom: 96px;
}

.cierre-oscuro h2 {
  max-width: 22ch;
  color: var(--blanco);
}

.cierre-oscuro__texto {
  margin-top: 16px;
  font-size: 19px;
  color: var(--gris-claro);
}

.cierre-oscuro__accion { display: flex; justify-content: flex-start; }

.cierre-oscuro :focus-visible { outline-color: var(--blanco); }

@media (hover: hover) {
  .cierre-oscuro .btn:hover { background: var(--blanco); border-color: var(--blanco); color: var(--negro); }
}

@media (max-width: 767px) {
  .cierre-oscuro__grilla {
    grid-template-columns: 1fr;
    padding-top: 64px;
    padding-bottom: 64px;
  }
  .cierre-oscuro__texto { font-size: 17px; }
  .cierre-oscuro .btn { width: 100%; }
}


/* ==========================================================================
   Fotos
   ========================================================================== */

/* Banda de imagen entre secciones: da respiro y muestra negocios reales */
.banda {
  margin: 0;
  border: 1px solid var(--gris-claro);
  background: var(--superficie);
}

.banda__img {
  width: 100%;
  height: auto;
  aspect-ratio: 12 / 5;
  object-fit: cover;
}

@media (max-width: 767px) {
  .banda__img { aspect-ratio: 4 / 3; }
}

/* Foto de cada pilar en Servicios, sobre el texto */
.pilar__principal {
  display: flex;
  flex-direction: column;
  background: var(--blanco);
}

.pilar__principal > .celda { flex: 1; }

.pilar__foto {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  background: var(--superficie);
  border-bottom: 1px solid var(--gris-claro);
}

/* Recursos de Aprende con miniatura arriba */
.recurso--foto {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.recurso--foto > .ph {
  height: auto;
  border-bottom: 1px solid var(--gris-claro);
}

.recurso--foto > .celda { flex: 1; }