:root {
  /* Paleta corporativa exacta (RNF-8 criterio 9) */
  --petroleo: #094F51;
  --barbados: #BBC796;
  --salvia:   #AFB37F;
  --calido:   #FFFDF8;
  --blanco:   #FFFFFF;

  /* Contraste medido (RNF-R4):
       petróleo sobre cálido    9.19:1  AA
       blanco   sobre petróleo  9.34:1  AA
       petróleo sobre Barbados  5.21:1  AA
       blanco   sobre Barbados  1.79:1  NO CUMPLE -> prohibido
       petróleo sobre Salvia    4.26:1  solo texto grande
     Por eso el texto sobre Barbados es petróleo, y Salvia queda como acento
     decorativo: no sostiene texto de lectura con ningún color de la paleta. */
  --texto: #094F51;
  --texto-sobre-claro: #094F51;

  --radio: 14px;
  --ancho-max: 1200px;
}

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

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

body {
  margin: 0;
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--texto);
  background: var(--calido);
}

h1, h2, h3 { font-weight: 800; line-height: 1.15; text-wrap: balance; }

.superficie-clara    { background: var(--calido);   color: var(--texto); }
.superficie-petroleo { background: var(--petroleo); color: var(--blanco); }
.superficie-acento   { background: var(--barbados); color: var(--texto-sobre-claro); }

.contenedor {
  width: min(100% - 2.5rem, var(--ancho-max));
  margin-inline: auto;
}

.cabecera { border-bottom: 1px solid rgba(9, 79, 81, 0.12); }

.cabecera__interior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  padding-block: 0.75rem;
}

.cabecera__marca { flex: 0 0 auto; line-height: 0; }
.cabecera__marca img { display: block; height: 40px; width: auto; }

.cabecera__nav { flex: 1 1 100%; order: 3; }

.cabecera__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cabecera__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--texto);
  text-decoration: none;
  font-weight: 600;
}

.cabecera__nav a:hover,
.cabecera__nav a:focus-visible { text-decoration: underline; }

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.6rem 1.25rem;
  border-radius: var(--radio);
  background: var(--petroleo);
  color: var(--blanco);
  font-weight: 700;
  text-decoration: none;
}

.boton:hover { background: #073e40; }

:focus-visible {
  outline: 3px solid var(--petroleo);
  outline-offset: 3px;
}

@media (min-width: 820px) {
  .cabecera__nav { flex: 1 1 auto; order: 0; margin-inline-start: 1rem; }
}

.hero { padding-block: 2.5rem 3rem; }

.hero__interior { display: grid; gap: 2rem; }

.antetitulo {
  margin: 0 0 0.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.hero h1 { margin: 0 0 1rem; font-size: clamp(2rem, 7vw, 3.25rem); }

.hero__apoyo { margin: 0 0 1.5rem; max-width: 52ch; font-size: 1.125rem; }

.hero__expectativa { margin: 1.25rem 0 0; font-weight: 600; }

.hero__marca { display: none; }

@media (min-width: 820px) {
  .hero__interior {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: center;
  }
  .hero__marca { display: block; justify-self: center; }
  .hero__marca img { width: min(100%, 340px); height: auto; }
}

.mision { padding-block: 3rem; }
.mision h2 { margin: 0 0 1rem; font-size: clamp(1.6rem, 4.5vw, 2.25rem); }
.mision__manifiesto { margin: 0 0 2.5rem; max-width: 62ch; }

.compromisos {
  display: grid;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.compromiso {
  padding: 1.5rem;
  border-radius: var(--radio);
  background: var(--blanco);
  border: 1px solid rgba(9, 79, 81, 0.12);
}

.compromiso svg { color: var(--petroleo); display: block; }
.compromiso h3 { margin: 0.75rem 0 0.4rem; font-size: 1.1875rem; }
.compromiso p  { margin: 0; }

@media (min-width: 820px) {
  .compromisos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.sucursales { padding-block: 3rem; }
.sucursales h2 { margin: 0 0 1rem; font-size: clamp(1.6rem, 4.5vw, 2.25rem); }
.sucursales__intro { margin: 0 0 2rem; max-width: 60ch; }

.fichas { display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }

.ficha {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.5rem;
  border-radius: var(--radio);
  background: var(--blanco);
  box-shadow: 0 2px 10px rgba(9, 79, 81, 0.08);
}

.ficha__estado {
  align-self: flex-start;
  margin: 0;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: var(--petroleo);
  color: var(--blanco);
  font-size: 0.8125rem;
  font-weight: 700;
}

.ficha h3 { margin: 0.5rem 0 0; font-size: 1.25rem; }
.ficha__zona { margin: 0; }

.ficha__direccion { margin: 0.75rem 0 0; font-style: normal; }
.ficha__cta { margin-top: 1rem; text-align: center; gap: 0.4rem; }

.ficha__mapa {
  width: 100%;
  height: auto;
  margin-top: 1rem;
  border-radius: calc(var(--radio) - 6px);
}

.sucursales__atribucion { margin: 1.5rem 0 0; font-size: 0.9rem; }

/* El subrayado se conserva: al heredar el petróleo del párrafo, es lo único
   que distingue el enlace del texto que lo rodea. */
.sucursales__atribucion a { color: currentColor; }

.visualmente-oculto {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (min-width: 820px) {
  /* Dos columnas fijas, no auto-fit: con cuatro sucursales el auto-fit las
     ponía en fila y el mapa quedaba a ~235 px, ilegible. La ficha ancha es
     lo que hace utilizable el mapa en escritorio. */
  .fichas { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Las fichas de una misma fila se estiran a la misma altura (comportamiento
     por defecto del grid), pero una ficha con mapa tiene más contenido antes
     del CTA que una sin mapa. Sin esto el CTA de la ficha corta queda muy por
     encima del de sus vecinas, y el orden de tabulación retrocede visualmente
     (a11y.spec.js). Anclar el CTA abajo de la ficha estirada alinea los CTA
     de una misma fila. */
  .ficha__cta { margin-top: auto; }
}

.club { padding-block: 3.5rem; }
.club__interior { display: grid; gap: 2rem; align-items: center; }
.club h2 { margin: 0 0 1rem; font-size: clamp(1.6rem, 4.5vw, 2.25rem); }
.club p { margin: 0 0 1rem; max-width: 58ch; }
.club__cierre { font-weight: 700; margin-bottom: 0; }
.club__marca { display: none; }

.cierre { padding-block: 3rem; text-align: center; }
.cierre h2 { margin: 0 0 1.5rem; font-size: clamp(1.5rem, 4vw, 2rem); }

.pie { padding-block: 2.5rem; }
.pie__interior { display: grid; gap: 0.5rem; }
.pie img { height: 44px; width: auto; margin-bottom: 0.75rem; }
.pie p { margin: 0; }
.pie__derechos { margin-top: 1rem; font-size: 0.9375rem; }

@media (min-width: 820px) {
  .club__interior { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); }
  .club__marca { display: block; justify-self: center; }
  .club__marca img { width: min(100%, 220px); height: auto; }
}

/* Ninguna animación es requisito para ver contenido (RF-9 criterio 3):
   solo suavizamos estados de interacción. */
.boton { transition: background-color 160ms ease; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

img, svg { max-width: 100%; }

/* Evita que una URL larga o una palabra sin espacios rompa el layout al 200 % */
body { overflow-wrap: break-word; }

/* Los hijos de un grid llevan min-width:auto y se niegan a encogerse por debajo
   del ancho mínimo de su contenido. Sin esto, el texto largo del CTA de Maps
   desborda el contenedor al aumentar el texto al 200 % (RF-8 criterio 5). */
.fichas > *, .compromisos > * { min-width: 0; }

.ficha__cta { flex-wrap: wrap; }

.salto {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 0.75rem 1rem;
  background: #094F51;
  color: #FFFFFF;
}

.salto:focus {
  left: 0;
  z-index: 100;
}