/* Reformas Pedro Gonzalez III — hoja de estilos. Sin librerías.
   Dirección «obra / señalética» (la eligió el usuario el 2026-11-06): papel frío de plano, antracita, y el marino y el
   naranja del logo (medidos en logo-definido.png), con tipografía de cartel (Space Grotesk) y texto en Figtree. Nada
   de crema, serifas ni filetes finos. Texto a 18 px y nunca por debajo de 16; zonas táctiles de 44 px o más; enlaces
   sin subrayado (al usuario no le gustan): en el texto los distinguen el marino y el seminegrita. */

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/figtree-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/figtree-600.woff2') format('woff2');
}

:root {
  --papel: #f4f3ef; /* fondo: papel de plano, frío */
  --tinta: #161616; /* texto (16,3:1 sobre el papel) */
  --gris: #5c5a55; /* texto secundario (6,2:1) */
  --hormigon: #c8c4bc; /* bordes; nunca texto */
  --marino: #00026e; /* el fondo del logo: cabecera y bandas (blanco encima, 17:1) y enlaces (15,3:1) */
  --marino-oscuro: #000046; /* al pasar */
  --ambar: #fea002; /* la franja del logo: único acento, solo de fondo o sobre oscuro (marino encima, 8,3:1) */
  --ambar-claro: #ffb836; /* al pasar por un botón naranja (9,9:1) */
  --titulares: 'Space Grotesk', 'Arial Black', system-ui, sans-serif;
  --texto: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ancho: 1120px;
  --margen: clamp(20px, 4vw, 40px);
  --seccion: clamp(64px, 9vw, 128px);
  --aire-mapa: calc((1rem + var(--seccion)) / 2); /* en Contacto, encima y debajo de «Ver mapa de Google» */
}

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

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

body {
  margin: 0;
  color: var(--tinta);
  background: var(--papel);
  font-family: var(--texto);
  font-size: 1.125rem; /* 18 px */
  font-weight: 400;
  line-height: 1.6;
}

h1,
h2,
h3 {
  margin: 0 0 1rem;
  font-family: var(--titulares);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

h1 {
  font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);
  text-transform: uppercase;
}

h2 {
  font-size: clamp(1.875rem, 1.35rem + 2vw, 3rem);
}

h3 {
  font-size: 1.5rem;
}

p,
ul,
ol,
dl {
  margin: 0 0 1rem;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

[hidden] {
  display: none !important;
}

a {
  color: var(--marino);
  text-decoration: none;
}

main a {
  font-weight: 600;
}

a:hover {
  color: var(--marino-oscuro);
}

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

.cabecera :focus-visible,
.bloque--marino :focus-visible,
.portada__panel :focus-visible,
.pie :focus-visible,
.barra-movil :focus-visible {
  outline-color: var(--ambar);
}

.saltar {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 50;
  padding: 0.75rem 1rem;
  color: var(--marino);
  font-weight: 600;
  background: var(--ambar);
}

.saltar:focus {
  top: 1rem;
}

/* ---------- Cabecera: el logo sobre su mismo marino, menú y teléfono a la derecha, franja ámbar debajo ---------- */

.cabecera {
  color: #ffffff;
  background: var(--marino);
  border-bottom: 6px solid var(--ambar);
}

.cabecera__interior {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem 1rem;
  max-width: var(--ancho);
  margin-inline: auto;
  padding: 0.75rem var(--margen);
}

/* El logo del cliente, sin recolorear: su fondo es el marino de la cabecera */
.marca {
  display: block;
  width: 170px;
}

.marca img {
  width: 100%;
}

.menu-boton {
  min-height: 44px;
  padding: 0 1rem;
  color: #ffffff;
  font: 600 1.0625rem var(--texto);
  background: none;
  border: 2px solid var(--ambar);
  cursor: pointer;
}

/* En el móvil el menú se despliega bajo la cabecera al pulsar «Menú»; sin JavaScript queda siempre a la vista */
.menu {
  flex-basis: 100%;
}

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

.menu a {
  display: flex;
  align-items: center;
  min-height: 48px;
  color: #ffffff;
  font-weight: 600;
  font-size: 1.0625rem;
}

.menu a:hover,
.menu a[aria-current="page"] {
  color: var(--ambar);
}

.menu .menu__tel {
  color: var(--ambar);
}

.menu .menu__tel:hover {
  color: #ffffff;
}

.cabecera.con-menu .menu {
  display: none;
}

.cabecera.con-menu .menu.abierto {
  display: block;
  padding-bottom: 0.5rem;
}

@media (min-width: 900px) {
  .marca {
    width: 230px;
  }

  .menu-boton {
    display: none;
  }

  .menu,
  .cabecera.con-menu .menu {
    display: flex;
    flex-basis: auto;
    align-items: center;
    gap: 2.25rem;
  }

  .menu ul {
    display: flex;
    gap: 2rem;
  }
}

/* ---------- Portada: texto a la izquierda y, a la derecha, un panel marino a sangre con «REFORMAS» cortado ---------- */

.portada {
  position: relative;
  overflow: hidden;
}

.portada__interior {
  max-width: var(--ancho);
  margin-inline: auto;
  padding: clamp(36px, 5vw, 72px) var(--margen) clamp(44px, 5.5vw, 80px);
}

/* Titular contenido en el ordenador (el usuario lo vio «enorme» a 88 px el 2026-11-06): como mucho 64 px */
.portada h1 {
  max-width: 11ch;
  margin-bottom: 1.25rem;
  font-size: clamp(2.5rem, 1.25rem + 3.4vw, 4rem);
  line-height: 0.98;
}

.portada__entrada {
  max-width: 40ch;
  font-size: 1.1875rem;
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin: 2rem 0 0;
}

.portada__nota {
  margin: 1.25rem 0 0;
  color: var(--gris);
  font-size: 1rem;
}

/* El panel: una foto a sangre (de ambiente, de Pexels, desde el 2026-11-06; cuando haya fotos de obra suyas, una de
   ellas) y debajo una franja marina con «REFORMAS» cortado. En el móvil va bajo el texto; en el ordenador, a la
   derecha hasta el borde de la pantalla. La palabra mide lo que la franja (--franja) para que la corte por abajo */
.portada__panel {
  --franja: clamp(84px, 24vw, 130px);
  display: flex;
  flex-direction: column;
  background: var(--marino);
}

.portada__foto img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.portada__franja {
  position: relative;
  flex: none;
  height: var(--franja);
  overflow: hidden;
}

.portada__palabra {
  position: absolute;
  left: var(--margen);
  bottom: -0.17em;
  color: var(--ambar);
  font: 700 calc(var(--franja) * 1.3) / 1 var(--titulares);
  letter-spacing: -0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (min-width: 900px) {
  /* Sin aire debajo: la foto ya no llega al borde de la portada y el hueco hasta la sección siguiente lo pone su
     propio margen (con los dos se quedaban 200 px de papel en blanco) */
  .portada__interior {
    padding-bottom: 0;
  }

  .portada__texto {
    max-width: 58%;
    padding-right: 2.5rem;
  }

  /* En el ordenador, una columna lateral dentro del ancho de la página (el 36 %), a la altura del texto. Hasta el
     2026-11-06 era un panel a sangre hasta el borde de la pantalla; al usuario le pareció demasiado grande */
  .portada__panel {
    --franja: clamp(84px, 7vw, 112px);
    position: absolute;
    top: clamp(36px, 5vw, 72px);
    right: calc((100% - min(var(--ancho), 100%)) / 2 + var(--margen));
    bottom: 0;
    width: calc((min(var(--ancho), 100%) - 2 * var(--margen)) * 0.36);
  }

  .portada__foto {
    position: relative;
    flex: 1;
  }

  .portada__foto img {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
  }

  .portada__palabra {
    left: 20px;
  }
}

/* ---------- Botones y enlaces ---------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 1.5rem;
  font: 600 1.0625rem var(--texto);
  text-align: center;
  border: 2px solid transparent;
  cursor: pointer;
}

.boton--ambar {
  color: var(--marino);
  background: var(--ambar);
  border-color: var(--ambar);
}

.boton--ambar:hover {
  color: var(--marino);
  background: var(--ambar-claro);
  border-color: var(--ambar-claro);
}

.boton--marino {
  color: #ffffff;
  background: var(--marino);
  border-color: var(--marino);
}

.boton--marino:hover {
  color: #ffffff;
  background: var(--marino-oscuro);
  border-color: var(--marino-oscuro);
}

.boton--linea {
  color: var(--marino);
  background: none;
  border-color: var(--marino);
}

.boton--linea:hover {
  color: #ffffff;
  background: var(--marino);
}

/* enlaces de «seguir»: con la flecha del propio texto */
.enlace-flecha {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
}

.enlace-flecha::after {
  content: ' \2192';
  margin-left: 0.35em;
}

/* Teléfono y correo sueltos (fuera de una frase): zona táctil de 44 px o más sin mover nada */
.datos a,
.ficha-legal a {
  display: inline-block;
  padding-block: 0.6rem;
  margin-block: -0.6rem;
}

/* ---------- Bloques ---------- */

.bloque {
  padding: var(--seccion) var(--margen);
}

.bloque__interior {
  max-width: var(--ancho);
  margin-inline: auto;
}

.bloque--marino {
  color: #ffffff;
  background: var(--marino);
}

.bloque--marino a {
  color: var(--ambar);
}

.bloque--marino a:hover {
  color: #ffffff;
}

.bloque--ambar {
  color: var(--tinta);
  background: var(--ambar);
}

.bloque--ambar h2 {
  color: var(--marino);
}

.entrada {
  max-width: 46ch;
  font-size: 1.25rem;
}

.texto {
  max-width: 64ch;
}

.separacion {
  margin-top: clamp(48px, 7vw, 96px);
}

/* Dos columnas desiguales: una frase grande a la izquierda y el texto a la derecha */
.dos-columnas {
  display: grid;
  gap: 1.5rem 4rem;
}

.frase {
  margin: 0;
  font: 700 clamp(1.625rem, 1.2rem + 1.8vw, 2.5rem) / 1.15 var(--titulares);
  letter-spacing: -0.015em;
}

.frase::before {
  content: '';
  display: block;
  width: 72px;
  height: 8px;
  margin-bottom: 1.25rem;
  background: var(--ambar);
}

@media (min-width: 900px) {
  .dos-columnas {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }
}

/* ---------- Oficios: 01–05 con números de cartel, en dos columnas desiguales y escalonadas ---------- */

.oficios {
  display: grid;
  gap: 1.75rem;
  margin: 2.5rem 0 3rem;
  padding: 0;
  list-style: none;
}

.oficios li {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
}

.oficios__numero {
  flex: none;
  min-width: 1.6ch;
  color: var(--ambar);
  font: 700 clamp(4rem, 2.6rem + 5vw, 6.5rem) / 0.9 var(--titulares);
  letter-spacing: -0.05em;
}

.oficios__nombre {
  font: 700 clamp(1.625rem, 1.25rem + 1.4vw, 2.5rem) / 1.1 var(--titulares);
  letter-spacing: -0.015em;
}

@media (min-width: 900px) {
  .oficios {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 2.5rem 4rem;
  }

  .oficios li:nth-child(even) {
    margin-top: 4rem;
  }
}

/* En Servicios, cada oficio con su foto encima (de ambiente, de Pexels: no son obras suyas) */
.oficios--fotos li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: 1.25rem;
}

.oficios__foto {
  grid-column: 1 / -1;
  margin-bottom: 1rem;
}

.oficios__foto img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* En el ordenador, ordenados: todas las fotos del mismo tamaño, sin escalonar (el usuario vio desordenado el escalonado
   el 2026-11-06). Dos columnas en tableta y los cinco oficios en una fila a partir de 1000 px, el número encima del
   nombre */
@media (min-width: 600px) {
  .oficios--fotos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem 2rem;
  }

  .oficios--fotos li:nth-child(even) {
    margin-top: 0;
  }
}

@media (min-width: 1000px) {
  .oficios--fotos {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.5rem;
  }

  .oficios--fotos li {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.25rem;
  }

  .oficios--fotos .oficios__foto img {
    aspect-ratio: 4 / 5;
  }

  .oficios--fotos .oficios__numero {
    font-size: clamp(2.75rem, 1.5rem + 2vw, 3.75rem);
  }

  .oficios--fotos .oficios__nombre {
    font-size: 1.375rem;
  }
}

/* ---------- Banda de foto a sangre entre secciones (de ambiente, de Pexels, desde el 2026-11-06) ---------- */

.banda-foto img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

@media (min-width: 700px) {
  .banda-foto img {
    aspect-ratio: 21 / 9;
    max-height: min(70vh, 640px);
  }
}

/* ---------- Dónde trabajan: cuatro placas con la franja ámbar del logo encima ---------- */

.ambitos {
  display: grid;
  gap: 1.75rem 2rem;
  margin: 2.5rem 0;
  padding: 0;
  list-style: none;
}

.ambitos li {
  padding-top: 1rem;
  border-top: 8px solid var(--ambar);
  font: 700 1.5rem / 1.2 var(--titulares);
  letter-spacing: -0.01em;
}

@media (min-width: 600px) {
  .ambitos {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1000px) {
  .ambitos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---------- Cabecera de las páginas interiores ---------- */

/* Entre el título y lo que sigue: aire propio si sigue una banda de color; si sigue papel, ya lo pone el título */
.titular-pagina {
  padding-top: clamp(40px, 5vw, 72px);
  padding-bottom: clamp(36px, 4.5vw, 64px);
}

.titular-pagina + .bloque:not(.bloque--marino):not(.bloque--ambar) {
  padding-top: 0;
}

.titular-pagina h1 {
  margin-bottom: 1rem;
  font-size: clamp(2.25rem, 1.5rem + 2.4vw, 3.5rem);
}

/* En el ordenador, el título y la entrada en la misma franja, uno a cada lado (antes ocupaban una franja muy alta) */
@media (min-width: 900px) {
  .titular-pagina .bloque__interior {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem 4rem;
  }

  .titular-pagina h1 {
    flex: none;
    margin-bottom: 0;
  }

  .titular-pagina .entrada {
    margin-bottom: 0.3rem;
  }
}

/* ---------- Empresa: lo que ofrecen, en tres frases grandes ---------- */

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

.compromisos li {
  font: 700 clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem) / 1.15 var(--titulares);
  letter-spacing: -0.015em;
}

.compromisos li::before {
  content: '';
  display: block;
  width: 48px;
  height: 8px;
  margin-bottom: 0.75rem;
  background: var(--ambar);
}

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

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

.contacto {
  display: grid;
  gap: 3rem;
}

@media (min-width: 900px) {
  .contacto {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 4rem;
  }
}

.datos {
  margin: 0;
}

.datos > div + div {
  margin-top: 1.5rem;
}

.datos dt {
  color: var(--gris);
  font-weight: 600;
  font-size: 1rem;
}

.datos dd {
  margin: 0.15rem 0 0;
  font-size: 1.25rem;
}

/* Formulario: tres campos, como el de su web vieja, más la casilla de privacidad */
.formulario {
  padding: clamp(24px, 4vw, 40px);
  background: #ffffff;
  border-top: 8px solid var(--marino);
}

.formulario h2 {
  font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem);
}

.campo {
  margin-bottom: 1.25rem;
}

.campo label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 600;
}

.campo input,
.campo textarea {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 0.7rem 0.9rem;
  color: var(--tinta);
  font: 400 1.125rem var(--texto);
  background: #ffffff;
  border: 2px solid var(--gris);
  border-radius: 0;
}

.campo textarea {
  min-height: 180px;
  resize: vertical;
}

.campo input:focus,
.campo textarea:focus {
  border-color: var(--marino);
}

.casilla {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  font-size: 1rem;
}

.casilla input {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0.15rem 0 0;
  accent-color: var(--marino);
}

/* La trampa para robots: un campo que una persona no ve ni rellena */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulario__nota {
  margin: 1rem 0 0;
  color: var(--gris);
  font-size: 1rem;
}

/* Mapa: el plano propio (SVG con datos de OpenStreetMap, sin Google ni cookies) y, al pulsar, el mapa de Google */
.bloque--mapa {
  padding-bottom: 0;
}

.mapa__marco {
  position: relative;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  background: #fbfbf8;
  border: 2px solid var(--tinta);
}

.mapa__credito {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 14px 10px;
  color: var(--gris);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  background: rgba(251, 251, 248, 0.92);
}

.mapa__marco iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* «Ver mapa de Google», a todo el ancho y centrado en altura entre el plano y el pie (la sección no lleva aire abajo) */
.mapa__acciones {
  display: flex;
  margin: 0;
  padding-block: var(--aire-mapa);
}

.mapa__acciones .boton,
.mapa__acciones noscript {
  flex: 1;
}

.mapa__acciones noscript .boton {
  width: 100%;
}

@media (max-width: 599.98px) {
  .mapa__marco {
    aspect-ratio: 1;
  }

  .mapa__marco .plano {
    width: 200%;
    max-width: none;
    margin: 0 0 0 -79.9%;
  }

  .mapa__credito {
    right: auto;
    left: 0;
  }

  .plano__solo-escritorio {
    display: none;
  }
}

/* Plano de situación (herramientas/mapa.py). Las carreteras principales, en ámbar como en los mapas de carreteras */
.plano {
  display: block;
  width: 100%;
  height: auto;
}

.plano__parque {
  fill: #e1e6d8;
}

.plano__agua {
  fill: #d3dfe9;
}

.plano__acequia {
  fill: none;
  stroke: #c4d4e1;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.plano__tren {
  fill: none;
  stroke: #9b978f;
  stroke-width: 3;
  stroke-dasharray: 10 6;
}

.plano__calle {
  fill: none;
  stroke: #dedad2;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.plano__calle--peatonal {
  stroke-width: 1.8;
  stroke-dasharray: 3 5;
}

.plano__calle--principal {
  stroke: var(--ambar);
  stroke-width: 6;
}

.plano text {
  paint-order: stroke;
  stroke: #fbfbf8;
  stroke-width: 5px;
  stroke-linejoin: round;
}

.plano__rotulo {
  fill: var(--gris);
  font: 400 22px var(--texto);
}

.plano__rotulo--agua {
  fill: #4a627a; /* el río, en el azul grisáceo del agua oscurecido (6:1) */
}

.plano__tienda circle {
  fill: var(--marino);
  stroke: #ffffff;
  stroke-width: 3;
}

.plano__tienda .plano__tienda-centro {
  fill: #ffffff;
  stroke: none;
}

.plano__guia {
  fill: none;
  stroke: var(--tinta);
  stroke-width: 1.5;
}

.plano__etiqueta {
  fill: #ffffff;
  stroke: var(--tinta);
  stroke-width: 2;
}

.plano__nombre {
  fill: var(--marino);
  font: 700 34px var(--titulares);
}

.plano__dato {
  fill: var(--gris);
  font: 400 22px var(--texto);
}

.plano__escala path,
.plano__norte path {
  fill: none;
  stroke: var(--tinta);
  stroke-width: 1.5;
}

.plano__escala text,
.plano__norte text {
  fill: var(--tinta);
  font: 400 20px var(--texto);
}

/* ---------- Páginas legales, aviso de mensaje enviado y 404 ---------- */

.legal {
  max-width: 70ch;
  margin-inline: auto;
  padding: var(--seccion) var(--margen);
}

.legal h1 {
  font-size: clamp(2.25rem, 1.7rem + 2.4vw, 3.5rem);
}

.legal h2 {
  margin: 2.5rem 0 0.75rem;
  font-size: 1.5rem;
}

.ficha-legal {
  margin: 0 0 1rem;
}

.ficha-legal > div {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--hormigon);
}

.ficha-legal dt {
  color: var(--gris);
  font-weight: 600;
  font-size: 1rem;
}

.ficha-legal dd {
  margin: 0;
}

/* ---------- Pie ---------- */

.pie {
  padding: clamp(48px, 7vw, 80px) var(--margen) 112px;
  color: var(--papel);
  background: var(--tinta);
  border-top: 8px solid var(--ambar);
  font-size: 1rem;
}

.pie__interior {
  display: grid;
  gap: 2rem;
  max-width: var(--ancho);
  margin-inline: auto;
}

.pie p,
.pie ul {
  margin: 0;
}

.pie__nombre {
  margin-bottom: 0.75rem !important;
  font: 700 1.5rem / 1.15 var(--titulares);
}

.pie a {
  display: inline-block;
  padding-block: 0.6rem;
  margin-block: -0.2rem;
  color: var(--papel);
}

.pie a:hover {
  color: var(--ambar);
}

.pie__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  padding: 0;
  list-style: none;
}

.pie__copia {
  margin-top: 1rem !important;
  color: #c9c7c2;
}

@media (min-width: 900px) {
  .pie {
    padding-bottom: clamp(48px, 7vw, 80px);
  }

  .pie__interior {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  .pie__derecha {
    text-align: right;
  }

  .pie__derecha .pie__lista {
    justify-content: flex-end;
  }
}

/* ---------- Barra fija del móvil: llamar y WhatsApp ---------- */

.barra-movil {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--marino);
  border-top: 2px solid var(--marino);
}

.barra-movil a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  font-weight: 600;
}

.barra-movil__llamar {
  color: var(--marino);
  background: var(--ambar);
}

.barra-movil__llamar:hover {
  color: var(--marino);
  background: var(--ambar-claro);
}

.barra-movil__whatsapp {
  color: #ffffff;
}

.barra-movil__whatsapp:hover {
  color: var(--ambar);
}

@media (min-width: 900px) {
  .barra-movil {
    display: none;
  }
}