/* =========================================================
   D’Marcos · Hoja de estilos
   Mobile-first: los estilos base son para móvil y las
   @media (min-width: …) añaden cambios para pantallas mayores.
   ========================================================= */

/* ---------- 1. Variables (colores, tipografía, espacios) ---------- */
:root {
  /* Paleta en torno al naranja eléctrico de la marca.
     Paleta en blanco y negro, como el logo de D'Marcos. Las variables conservan su nombre
     antiguo ("naranja", "albaricoque"...) para no tocar el resto de la hoja: cada una indica
     el papel que cumple, no el color.
     Reglas de contraste:
     - sobre los fondos negros (botones, Opiniones, pie, aviso legal) el texto va en blanco;
     - sobre los fondos blancos y grises el texto va en negro (más de 15:1);
     - las notas secundarias en gris (--color-tinta-suave) superan 6:1 en todos los fondos claros. */
  /* Toques de color: azul petróleo (enlaces, opciones elegidas, Opiniones) y plateado
     (filetes y nombre del pie). Petróleo con blanco: 9:1; sobre el gris claro: 8:1. */
  --color-petroleo: #0e4f5c;
  --color-petroleo-oscuro: #093a44;
  --color-plata: #b9bfc5;
  --degradado-plata: linear-gradient(100deg, #8e959c 0%, #e9ecef 35%, #b9bfc5 55%, #f4f6f7 75%, #9aa1a8 100%);

  --color-naranja: #111111;          /* color principal de marca: negro */
  --color-naranja-oscuro: #0e4f5c;   /* al pasar el ratón por un botón: azul petróleo */
  --color-naranja-titulos: #111111;  /* títulos grandes sobre fondo claro */
  --color-albaricoque: #e8e8e8;      /* campo gris claro de "Sobre nosotros" */
  --color-tostado: #1f1f1f;          /* bloque de la galería y opciones elegidas (blanco encima) */
  --color-pie: #000000;              /* pie negro (blanco encima: 21:1) */
  --color-fondo: #fafafa;            /* blanco roto del fondo */
  --color-superficie: #efefef;       /* gris muy claro: formulario y horario */
  --color-superficie-hover: #e2e2e2; /* un poco más intenso al pasar el ratón */
  --color-tinta: #111111;            /* negro: texto principal */
  --color-tinta-suave: #555555;      /* notas secundarias (contraste AA sobre los fondos claros) */
  --color-acento: #0e4f5c;           /* azul petróleo: enlaces, nombres de servicio y foco */
  --color-acento-oscuro: #093a44;    /* enlaces al pasar el ratón */
  --color-borde-campo: #8a8a8a;      /* borde de los campos del formulario (3,4:1 sobre blanco) */
  --color-claro: #ffffff;
  --color-error: #a3201b;
  --color-error-fondo: #fbe9e7;
  --color-exito: #1d6338;
  --color-exito-fondo: #e3f1e7;

  /* Tipografías: Bricolage Grotesque para el texto y Shrikhand para los títulos
     (letra de rótulo de tienda, redonda y alegre; solo tiene un grosor) */
  --fuente: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --fuente-titulos: "Shrikhand", Georgia, serif;

  /* Escala de tamaños (cinco como máximo) */
  --t-gigante: clamp(4rem, 17vw, 10.5rem);      /* el nombre en el pie */
  --t-nombre: clamp(2.75rem, 12vw, 4.5rem);      /* el nombre en el hero (móvil y tablet) */
  --t-titulo: clamp(1.875rem, 4vw, 3.5rem);     /* títulos de sección */
  --t-frase: clamp(1.375rem, 2.4vw, 2rem);      /* frases destacadas y nombres de servicio */
  --t-texto: clamp(1.0625rem, 1.1vw, 1.1875rem);/* texto corrido */
  --t-pequeno: 0.9375rem;                        /* notas y ayudas */

  /* Espacios */
  --margen: clamp(1rem, 3vw, 2rem);              /* margen exterior izquierdo y derecho */
  --hueco: clamp(1.25rem, 2.5vw, 2rem);          /* separación entre columnas */
  --entre-secciones: clamp(5rem, 11vw, 10rem);   /* aire entre secciones */
  --alto-cabecera: 4.25rem;
  --ancho-max: 90rem;

  /* Formas y movimiento */
  --radio-boton: 999px;   /* botones redondos del todo */
  --radio-campo: 0.375rem;
  --curva: cubic-bezier(0.23, 1, 0.32, 1); /* arranca rápido y frena suave (ease-out fuerte) */
  --duracion: 500ms;          /* entrada de las secciones al hacer scroll */
  --duracion-pulsar: 140ms;   /* respuesta al pulsar botones y pastillas */
  --duracion-color: 150ms;    /* cambios de color al pasar el ratón */
}

/* ---------- 2. Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Para que la cabecera fija no tape los títulos al saltar a un ancla */
  scroll-padding-top: calc(var(--alto-cabecera) + 1rem);
}

body {
  margin: 0;
  background: var(--color-fondo);
  color: var(--color-tinta);
  font-family: var(--fuente);
  font-size: var(--t-texto);
  line-height: 1.55;
  font-optical-sizing: auto;
  overflow-x: hidden;
}

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

h1, h2, h3, p, ul, dl, dd, figure {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

/* Foco visible para quien navega con teclado */
:focus-visible {
  outline: 3px solid var(--color-acento);
  outline-offset: 3px;
}

::selection {
  background: var(--color-acento);
  color: var(--color-claro);
}

.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--margen);
}

/* Enlace "Saltar al contenido": aparece solo al recibir el foco */
.saltar {
  position: absolute;
  left: var(--margen);
  top: -4rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--color-tinta);
  color: var(--color-claro);
  border-radius: var(--radio-campo);
}

.saltar:focus {
  top: 0.75rem;
}

/* ---------- 3. Piezas comunes ---------- */
/* Títulos de sección en naranja (sobre los campos naranjas se cambian a tinta más abajo) */
.titulo-seccion {
  color: var(--color-naranja-titulos);
  font-size: var(--t-titulo);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.035em;
  max-width: 16ch;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.frase {
  font-size: var(--t-frase);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  max-width: 28ch;
  margin-bottom: 1.25rem;
}

.enlace {
  color: var(--color-acento);
  font-weight: 600;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
  transition: color var(--duracion-color) ease;
}

/* Los :hover solo se aplican con ratón: en móvil, tocar dejaría el color "pegado" */
@media (hover: hover) and (pointer: fine) {
  .enlace:hover {
    color: var(--color-acento-oscuro);
  }
}

/* Botones: planos, de un solo color y redondos del todo */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: var(--radio-boton);
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--duracion-color) ease,
    color var(--duracion-color) ease,
    transform var(--duracion-pulsar) var(--curva);
}

/* Al pulsar, el botón se hunde un poco: confirma que te ha "oído" */
.boton:active {
  transform: scale(0.97);
}

/* Botón principal: negro de marca con texto blanco */
.boton--relleno {
  background: var(--color-naranja);
  color: var(--color-claro);
}

.boton--claro {
  background: var(--color-fondo);
  color: var(--color-tinta);
}

@media (hover: hover) and (pointer: fine) {
  .boton--relleno:hover {
    background: var(--color-naranja-oscuro);
  }

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

.boton--grande {
  min-height: 3.5rem;
  padding: 1rem 2rem;
  font-size: 1.0625rem;
}

/* Opciones tipo "pastilla" (radios con aspecto de botón) */
.pastilla {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.pastilla input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}

.pastilla span {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 1.25rem;
  border-radius: var(--radio-boton);
  background: var(--color-superficie);
  font-weight: 600;
  transition:
    background-color var(--duracion-color) ease,
    color var(--duracion-color) ease,
    transform var(--duracion-pulsar) var(--curva);
}

/* Las pastillas también son botones: se hunden un poco al pulsarlas */
.pastilla:active span {
  transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
  .pastilla:hover span {
    background: var(--color-superficie-hover);
  }
}

.pastilla input:checked + span {
  background: var(--color-petroleo);
  color: var(--color-claro);
}

.pastilla input:focus-visible + span {
  outline: 3px solid var(--color-acento);
  outline-offset: 3px;
}

/* ---------- 4. Cabecera fija ---------- */
.cabecera {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: var(--color-fondo);
  transition: background-color 300ms;
}

/* Al hacer scroll, la cabecera baja un tono (clase que añade main.js) */
.cabecera.con-scroll {
  background: var(--color-superficie);
  box-shadow: inset 0 -1px 0 var(--color-plata); /* filete plateado bajo la cabecera */
}

.cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--ancho-max);
  height: var(--alto-cabecera);
  margin-inline: auto;
  padding-inline: var(--margen);
}

.marca {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--color-naranja); /* logotipo en el naranja de la marca */
  text-decoration: none;
  white-space: nowrap;
}

.menu-boton {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.25rem 0.5rem 0.75rem;
  border: 0;
  background: none;
  color: var(--color-tinta);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.menu-boton__icono path {
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  transition: transform 200ms var(--curva);
  transform-origin: 12px 12px;
}

/* El icono se convierte en una X cuando el menú está abierto */
.menu-boton[aria-expanded="true"] .linea-arriba {
  transform: translateY(5px) rotate(45deg);
}

.menu-boton[aria-expanded="true"] .linea-abajo {
  transform: translateY(-5px) rotate(-45deg);
}

/* Menú en móvil: panel que ocupa la pantalla bajo la cabecera */
.menu {
  position: fixed;
  inset: var(--alto-cabecera) 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 2rem var(--margen);
  background: var(--color-fondo);
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-0.5rem);
  /* Cierre: rápido (140 ms), ya has elegido adónde ir. visibility espera a que acabe el fundido */
  transition: opacity 140ms ease-out, transform 140ms var(--curva), visibility 0s 140ms;
}

.menu.abierto {
  visibility: visible;
  opacity: 1;
  transform: none;
  /* Apertura: un poco más pausada (200 ms) para que se vea de dónde sale */
  transition: opacity 200ms var(--curva), transform 200ms var(--curva);
}

/* Enlaces grandes del menú móvil, en naranja */
.menu__lista a {
  display: block;
  padding: 0.35rem 0;
  color: var(--color-naranja-titulos);
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-decoration: none;
}

/* Al pasar el ratón, el enlace se subraya */
@media (hover: hover) and (pointer: fine) {
  .menu__lista a:hover {
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: 0.15em;
  }
}

.menu__accion {
  align-self: flex-start;
}

/* Sin JavaScript el botón no funcionaría: mostramos el menú tal cual */
html:not(.js) .menu-boton {
  display: none;
}

html:not(.js) .menu {
  position: static;
  visibility: visible;
  opacity: 1;
  transform: none;
  display: none;
}

/* ---------- 5. Portada (nombre en naranja y formulario centrado) ---------- */
.hero {
  position: relative;
  isolation: isolate;
  padding-top: calc(var(--alto-cabecera) + clamp(1.5rem, 3vw, 2.5rem));
}

/* Huellas de perro de fondo: un mosaico SVG en naranja, suave y difuminado, que se desvanece
   hacia abajo para no cortar en seco con la sección siguiente. Es decorativo (no lo leen los
   lectores de pantalla) y queda detrás del nombre y del formulario. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cdefs%3E%3Cg id='p'%3E%3Cellipse cx='-11' cy='-7' rx='3.8' ry='4.8' transform='rotate(-25 -11 -7)'/%3E%3Cellipse cx='-4' cy='-14' rx='4' ry='5.2' transform='rotate(-8 -4 -14)'/%3E%3Cellipse cx='4' cy='-14' rx='4' ry='5.2' transform='rotate(8 4 -14)'/%3E%3Cellipse cx='11' cy='-7' rx='3.8' ry='4.8' transform='rotate(25 11 -7)'/%3E%3Cpath d='M0 -2c5 0 11 6 11 11c0 4-3 6-6 6c-2 0-3-1-5-1s-3 1-5 1c-3 0-6-2-6-6c0-5 6-11 11-11z'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='%230e4f5c'%3E%3Cuse href='%23p' transform='translate(48 62) rotate(-22) scale(1.5)'/%3E%3Cuse href='%23p' transform='translate(96 22) rotate(-14) scale(1.1)'/%3E%3Cuse href='%23p' transform='translate(190 160) rotate(28) scale(1.35)'/%3E%3Cuse href='%23p' transform='translate(132 222) rotate(160) scale(0.95)'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 260px 260px;
  opacity: 0.1;
  filter: blur(1.5px);
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
  mask-image: linear-gradient(to bottom, #000 70%, transparent);
}

/* Nombre arriba, en horizontal, y debajo el formulario; todo centrado en la pantalla */
.hero__rejilla {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 56rem;
  margin-inline: auto;
}

.hero__texto {
  text-align: center;
}

/* El nombre, en el naranja eléctrico de la marca (es el logotipo) */
.hero__titulo {
  color: var(--color-naranja);
  font-size: var(--t-nombre);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.05em;
}

/* Logo del negocio: centrado y de tamaño contenido para que el formulario se vea pronto */
.hero__logo {
  display: block;
  width: clamp(12rem, 42vw, 20rem);
  height: auto;
  margin-inline: auto;
}

/* "¿Prefieres llamar?": discreto, en el tamaño del texto */
.hero__llamar {
  margin-top: 0.75rem;
  font-weight: 600;
}

/* ---------- 6. Servicios ---------- */
.servicios {
  padding-top: var(--entre-secciones);
}

.selector-tamano {
  margin: 0 0 2.5rem;
  padding: 0;
  border: 0;
}

.selector-tamano__leyenda {
  padding: 0;
  margin-bottom: 0.75rem;
  font-weight: 700;
}

.selector-tamano__opciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

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

.servicios__lista {
  display: grid;
  gap: 2.75rem;
}

.servicio {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 1rem;
  row-gap: 0.5rem;
  align-items: baseline;
}

.servicio__nombre {
  grid-column: 1 / -1;
  color: var(--color-acento);
  font-size: var(--t-frase);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.servicio__texto {
  grid-column: 1 / -1;
  max-width: 52ch;
}

.servicio__precio {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.precio {
  display: inline-block;
  transition: transform 300ms var(--curva), opacity 300ms;
}

/* Pequeño salto cuando cambia el precio (clase que pone main.js) */
.precio.cambia {
  opacity: 0;
  transform: translateY(-0.4em);
}

.servicio__reservar {
  justify-self: end;
  color: var(--color-acento);
  font-weight: 700;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
  transition: color var(--duracion-color) ease;
}

@media (hover: hover) and (pointer: fine) {
  .servicio__reservar:hover {
    color: var(--color-acento-oscuro);
  }
}

.servicios__foto img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 55% center;
}

figcaption {
  margin-top: 0.75rem;
  font-size: var(--t-pequeno);
  color: var(--color-tinta-suave);
}

.servicios__nota {
  margin-top: 3rem;
  font-size: var(--t-pequeno);
  color: var(--color-tinta-suave);
  max-width: 60ch;
}

/* ---------- 7. Sobre nosotros (campo caramelo) ---------- */
.nosotros {
  margin-top: var(--entre-secciones);
  padding-block: clamp(4rem, 9vw, 8rem);
  background: var(--color-albaricoque);
  color: var(--color-tinta);
}

.nosotros .titulo-seccion {
  color: var(--color-tinta);
}

/* En móvil: texto, "cómo lo hacemos" y la foto, uno debajo de otro */
.nosotros__rejilla {
  display: grid;
  gap: 3rem;
}

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

.nosotros__intro p + p {
  max-width: 48ch;
}

.nosotros__subtitulo {
  font-size: var(--t-frase);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}

.lista-como {
  display: grid;
  gap: 1.5rem;
}

.lista-como strong {
  display: block;
  font-size: 1.25rem;
  line-height: 1.2;
}

/* ---------- 8. Galería ---------- */
.galeria {
  padding-top: var(--entre-secciones);
}

.galeria__rejilla {
  display: grid;
  gap: var(--hueco);
}

.galeria__item img {
  width: 100%;
}

/* La foto del westie trae una franja oscura abajo: la recortamos */
.galeria__item--ancho img {
  aspect-ratio: 1125 / 1268;
  object-fit: cover;
  object-position: top;
}

/* El caniche mide 409 px de ancho: nunca lo mostramos más grande */
.galeria__item--estrecho {
  max-width: 409px;
}

.galeria__bloque {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  min-height: 18rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--color-tostado);
  color: var(--color-claro);
}

/* Sobre el tostado, el contorno de foco va en blanco para que se vea */
.galeria__bloque :focus-visible {
  outline-color: var(--color-claro);
}

.galeria__bloque-texto {
  font-size: var(--t-frase);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.galeria__bloque .boton {
  align-self: flex-start;
}

/* ---------- 9. Opiniones (campo azul petróleo, el único momento centrado) ---------- */
.opiniones {
  margin-top: var(--entre-secciones);
  padding-block: clamp(4rem, 8vw, 7rem);
  background: var(--color-petroleo);
  border-block: 3px solid;
  border-image: var(--degradado-plata) 1; /* filetes plateados arriba y abajo */
  color: var(--color-claro);
}

.opiniones__caja {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
}

.opiniones .titulo-seccion {
  color: var(--color-claro);
  margin-bottom: 0;
  max-width: 14ch;
}

.opiniones :focus-visible {
  outline-color: var(--color-claro);
}

/* Nota media de Google, con las estrellas en el amarillo de Google */
.opiniones__nota {
  font-size: 1.125rem;
}

.opiniones__estrellas,
.resena__estrellas {
  color: #fbbc04; /* amarillo de las estrellas de Google Maps */
  letter-spacing: 0.08em;
}

.opiniones__estrellas {
  display: block;
  font-size: 1.5rem;
  margin-bottom: 0.25rem;
}

/* Tres reseñas: una columna en móvil y tres en escritorio */
.resenas {
  display: grid;
  gap: var(--hueco);
  width: 100%;
  margin-block: 1.5rem 0.75rem;
  text-align: left;
}

/* Tarjeta como las de Google Maps: fondo blanco, esquinas suaves y texto gris oscuro */
.resena figure {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  height: 100%;
  margin: 0;
  padding: 1.25rem 1.25rem 1.5rem;
  background: #ffffff;
  color: #202124;
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.25), 0 2px 8px rgb(0 0 0 / 0.12);
}

/* Inicial del autor en un círculo de color, nombre y línea gris debajo */
.resena__cabecera {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.resena__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: #5e35b1;
  color: #ffffff;
  font-size: 1.125rem;
  font-weight: 600;
}

.resena__avatar--2 { background: #00796b; }
.resena__avatar--3 { background: #c2185b; }

.resena__autor {
  display: block;
  font-weight: 600;
  line-height: 1.3;
}

.resena__estrellas {
  display: block;
  font-size: 1rem;
  line-height: 1.3;
}

.resena__texto {
  flex: 1;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
}

/* Texto recortado a 5 líneas hasta pulsar "Más" (la clase la pone main.js) */
.resena__texto.recortado p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  overflow: hidden;
}

/* Botón "Más" / "Menos", como el enlace de Google */
.resena__mas {
  align-self: flex-start;
  margin-top: -0.25rem;
  padding: 0.25rem 0;
  border: 0;
  background: none;
  color: #1a5fb4; /* azul de enlace (6:1 sobre blanco) */
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .resena__mas:hover {
    text-decoration: underline;
  }
}

.resena :focus-visible {
  outline-color: var(--color-petroleo);
}

/* ---------- 10. Reservar ---------- */
/* Panel de reserva de la portada: título, frase y formulario sobre el mismo fondo */
/* Panel del formulario: un tono por encima del fondo para que se distinga */
.reservar {
  padding: clamp(1.25rem, 3vw, 2.5rem);
  background: var(--color-superficie);
  border-top: 4px solid;
  border-image: var(--degradado-plata) 1; /* filete plateado sobre el formulario */
}

.reservar__titulo {
  color: var(--color-naranja-titulos);
  font-size: clamp(1.75rem, 3vw, 2.625rem);
  line-height: 1.05;
  margin-bottom: 0.5rem;
}

.reservar__intro {
  max-width: 52ch;
  margin-bottom: 1.75rem;
}

.formulario {
  display: grid;
  gap: 1.5rem var(--hueco);
}

.campo {
  display: grid;
  align-content: start; /* que los campos no se estiren si su vecino de fila es más alto */
  gap: 0.4rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.campo label,
.campo legend {
  padding: 0;
  font-weight: 700;
}

.campo legend {
  margin-bottom: 0.4rem;
}

.obligatorio,
.opcional {
  font-weight: 400;
  font-size: var(--t-pequeno);
  color: var(--color-tinta-suave);
}

/* Los campos de formulario sí llevan borde: ayuda a ver dónde escribir */
.campo input[type="text"],
.campo input[type="tel"],
.campo input[type="email"],
.campo input[type="date"],
.campo select,
.campo textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.65rem 0.85rem;
  border: 2px solid var(--color-borde-campo);
  border-radius: var(--radio-campo);
  background: var(--color-claro);
  color: var(--color-tinta);
  font: inherit;
  font-size: 1rem;
  transition: border-color var(--duracion-color) ease;
}

.campo textarea {
  resize: vertical;
  min-height: 7rem;
}

@media (hover: hover) and (pointer: fine) {
  .campo input:hover,
  .campo select:hover,
  .campo textarea:hover {
    border-color: var(--color-tinta-suave);
  }
}

.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible {
  outline: 3px solid var(--color-acento);
  outline-offset: 1px;
  border-color: var(--color-acento);
}

.campo [aria-invalid="true"] {
  border-color: var(--color-error);
}

.campo__ayuda {
  font-size: var(--t-pequeno);
  color: var(--color-tinta-suave);
}

.campo__error {
  font-size: var(--t-pequeno);
  font-weight: 600;
  color: var(--color-error);
}

.campo__error:empty {
  display: none;
}

.opciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* En el formulario, las pastillas van sobre fondo blanco */
.formulario .pastilla span {
  background: var(--color-claro);
}

@media (hover: hover) and (pointer: fine) {
  .formulario .pastilla:hover span {
    background: var(--color-superficie-hover);
  }
}

.formulario .pastilla input:checked + span {
  background: var(--color-tinta);
}

.casilla {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-weight: 400 !important;
  cursor: pointer;
}

.casilla input {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  margin: 0.15rem 0 0;
  accent-color: var(--color-acento);
  cursor: pointer;
}

/* Selector de hora: rejilla de pastillas que se adapta al ancho */
.horas__lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
  gap: 0.5rem;
}

.horas__lista:empty {
  display: none;
}

.horas__lista .pastilla {
  display: flex;
}

.horas__lista .pastilla span {
  justify-content: center;
  width: 100%;
  padding-inline: 0.5rem;
  font-variant-numeric: tabular-nums;
}

.horas__duracion {
  margin-bottom: 0.25rem;
  font-weight: 600;
}

.horas__estado {
  font-size: var(--t-pequeno);
}

.horas__estado:empty {
  display: none;
}

.horas__estado p + .boton {
  margin-top: 0.75rem;
}

.horas__estado .boton {
  min-height: 2.75rem;
  padding: 0.5rem 1.25rem;
}

.horas__estado--error {
  color: var(--color-error);
  font-weight: 600;
}

/* Aviso sin JavaScript */
.horas__aviso {
  padding: 1rem 1.25rem;
  border-radius: var(--radio-campo);
  background: var(--color-fondo);
}

/* El grupo puede recibir el foco por script; el contorno marca dónde falta la hora */
.horas:focus {
  outline: 3px solid var(--color-acento);
  outline-offset: 6px;
}

/* Las horas libres entran todas a la vez con un fundido corto.
   @starting-style define cómo empieza un elemento recién creado;
   en navegadores que no lo entienden, las horas aparecen sin más. */
.horas__lista .pastilla {
  transition: opacity 180ms var(--curva), transform 180ms var(--curva);
}

/* Los mensajes de estado (buscando, sin huecos, error) solo funden, sin moverse */
.horas__estado > p {
  transition: opacity 150ms ease-out;
}

.horas__estado > .boton {
  transition:
    background-color var(--duracion-color) ease,
    opacity 150ms ease-out,
    transform var(--duracion-pulsar) var(--curva);
}

@starting-style {
  .horas__lista .pastilla {
    opacity: 0;
    transform: translateY(4px);
  }

  .horas__estado > p,
  .horas__estado > .boton {
    opacity: 0;
  }
}

/* Honeypot: fuera de la pantalla (no usar display:none, algunos bots lo detectan) */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulario__pie {
  display: grid;
  gap: 1rem;
  justify-items: start;
}

.boton[disabled] {
  opacity: 0.7;
  cursor: progress;
}

/* Mensajes de estado del envío */
.estado {
  width: 100%;
  padding: 1rem 1.25rem;
  border-radius: var(--radio-campo);
  font-weight: 600;
}

.estado--enviando {
  background: var(--color-fondo);
  color: var(--color-tinta);
}

.estado--exito {
  background: var(--color-exito-fondo);
  color: var(--color-exito);
}

.estado--error {
  background: var(--color-error-fondo);
  color: var(--color-error);
}

.estado p + p,
.estado p + button {
  margin-top: 0.5rem;
}

.estado .boton {
  margin-top: 0.75rem;
  min-height: 2.75rem;
  padding: 0.5rem 1.25rem;
}

/* Los mensajes de envío (enviando, éxito, error) entran con un fundido y suben 4 px.
   Se aplica a los hijos porque main.js los vuelve a crear en cada cambio de estado. */
.estado > p {
  transition: opacity 200ms var(--curva), transform 200ms var(--curva);
}

.estado > .boton {
  transition:
    background-color var(--duracion-color) ease,
    opacity 200ms var(--curva),
    transform 200ms var(--curva);
}

@starting-style {
  .estado > p,
  .estado > .boton {
    opacity: 0;
    transform: translateY(4px);
  }
}

/* ---------- 11. Contacto ---------- */
.contacto {
  padding-block: var(--entre-secciones);
}

/* En móvil: datos, mapa y horario, uno debajo de otro.
   Desde tablet: datos y horario a la izquierda y el mapa cuadrado a la derecha. */
.contacto__rejilla {
  display: grid;
  grid-template-areas: "datos" "mapa" "horario";
  gap: 3rem;
}

.contacto__datos { grid-area: datos; }
.contacto__mapa { grid-area: mapa; }
.horario { grid-area: horario; }

/* Mapa en un cuadrado, con un filete plateado arriba como el formulario */
.contacto__mapa iframe {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 0;
  border-top: 4px solid;
  border-image: var(--degradado-plata) 1;
  background: var(--color-superficie);
}

.contacto__como-llegar {
  margin-top: 0.75rem;
  font-weight: 600;
}

.contacto__telefono {
  font-size: var(--t-titulo);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 1.5rem;
}

.contacto__telefono a {
  color: var(--color-petroleo);
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .contacto__telefono a:hover {
    text-decoration: underline;
    text-decoration-thickness: 4px;
    text-underline-offset: 0.12em;
  }
}

.contacto__direccion {
  font-style: normal;
  font-size: var(--t-frase);
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 1rem;
}

.horario {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--color-superficie);
}

.horario__titulo {
  color: var(--color-acento);
  font-size: var(--t-frase);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}

.horario__lista {
  display: grid;
  gap: 1rem;
}

.horario__lista dt {
  font-weight: 700;
}

.horario__lista dd {
  font-variant-numeric: tabular-nums;
}

.horario__nota {
  margin-top: 1.5rem;
  color: var(--color-tinta-suave);
  font-size: var(--t-pequeno);
}

/* ---------- 12. Pie ---------- */
.pie {
  padding-block: clamp(3rem, 6vw, 5rem) 2rem;
  background: var(--color-pie);
  color: var(--color-claro);
}

/* Nombre del pie con la misma letra del logo: el rótulo "D'Marcos" recortado del logo
   (assets/nombre-dmarcos.png) se usa como máscara y se rellena con el degradado plateado.
   El texto del párrafo queda oculto; es decorativo (aria-hidden en el HTML). */
.pie__nombre {
  width: clamp(14rem, 58vw, 34rem);
  aspect-ratio: 659 / 161;
  font-size: 0;
  color: transparent;
  background: var(--degradado-plata);
  -webkit-mask: url("../assets/nombre-dmarcos.png") center / contain no-repeat;
  mask: url("../assets/nombre-dmarcos.png") center / contain no-repeat;
}

.pie {
  border-top: 3px solid;
  border-image: var(--degradado-plata) 1;
}

.pie__fila {
  display: grid;
  gap: 0.5rem;
  margin-top: 2rem;
  font-size: var(--t-pequeno);
}

.pie .enlace {
  color: var(--color-fondo);
}

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

.pie__demo {
  color: #cfcfcf;
}

/* ---------- Página de privacidad ---------- */
.legal {
  max-width: 46rem;
  padding-top: calc(var(--alto-cabecera) + 3rem);
  padding-bottom: 5rem;
}

.legal h2 {
  font-size: var(--t-frase);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 2.5rem 0 0.75rem;
}

.legal p + p {
  margin-top: 0.75rem;
}

.legal__aviso {
  padding: 1rem 1.25rem;
  background: var(--color-naranja);
  color: var(--color-claro);
}

.legal__lista {
  list-style: disc;
  padding-left: 1.25rem;
  margin: 0.75rem 0;
}

.legal__lista li + li {
  margin-top: 0.35rem;
}

.legal__fecha {
  margin-top: 2.5rem !important;
  color: var(--color-tinta-suave);
  font-size: var(--t-pequeno);
}

.pie--legal {
  padding-block: 2rem;
}

.pie--legal .pie__fila {
  margin-top: 0;
}

/* ---------- Tipografía de los títulos ---------- */
/* Va después de los estilos de cada pieza para sustituir su letra.
   Shrikhand solo tiene un grosor (400): si pidiéramos 800, el navegador
   inventaría una negrita falsa. Tampoco necesita interletrado negativo. */
.hero__titulo,
.titulo-seccion,
.reservar__titulo,
.marca,
.servicio__nombre,
.nosotros__subtitulo,
.horario__titulo,
.pie__nombre,
.menu__lista a,
.legal h2 {
  font-family: var(--fuente-titulos);
  font-weight: 400;
  letter-spacing: 0;
}

.hero__titulo,
.titulo-seccion,
.pie__nombre {
  line-height: 1.05;
}

/* ---------- 13. Entradas al hacer scroll ---------- */
/* Solo se ocultan si hay JavaScript (clase .js en <html>): sin script, todo se ve */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--duracion) var(--curva), transform var(--duracion) var(--curva);
  transition-delay: var(--retraso, 0ms);
}

.js [data-reveal].visible {
  opacity: 1;
  transform: none;
}

/* ---------- 14. Tablet (768 px o más) ---------- */
@media (min-width: 48rem) {
  .formulario {
    grid-template-columns: 1fr 1fr;
  }

  .campo--ancho {
    grid-column: 1 / -1;
  }

  .galeria__rejilla {
    grid-template-columns: 3fr 2fr;
    align-items: start;
  }

  .galeria__bloque {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    min-height: 0;
  }

  .galeria__bloque .boton {
    align-self: center;
    flex: none;
  }

  .nosotros__rejilla,
  .contacto__rejilla {
    grid-template-columns: 1fr 1fr;
    gap: var(--hueco) 3rem;
  }

  .contacto__rejilla {
    grid-template-areas: "datos mapa" "horario mapa";
    gap: 2rem 3rem;
  }

  .horario {
    align-self: end;
  }

  /* En tablet, la foto de "Sobre nosotros" ocupa todo el ancho bajo las dos columnas */
  .nosotros__foto {
    grid-column: 1 / -1;
  }

  .pie__fila {
    grid-template-columns: auto auto 1fr;
    gap: 2rem;
  }

  .pie__demo {
    text-align: right;
  }
}

/* ---------- 15. Escritorio (960 px o más) ---------- */
@media (min-width: 60rem) {
  /* El menú deja de ser panel y se coloca en la cabecera */
  .menu-boton {
    display: none;
  }

  .menu,
  html:not(.js) .menu {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2rem;
    padding: 0;
    background: none;
    overflow: visible;
    visibility: visible;
    opacity: 1;
    transform: none;
  }

  .menu__lista {
    display: flex;
    gap: 1.75rem;
  }

  /* En la cabecera de escritorio, los enlaces vuelven a la letra de texto */
  .menu__lista a {
    color: var(--color-tinta);
    font-family: var(--fuente);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
    padding: 0.25rem 0;
    text-underline-offset: 0.3em;
    text-decoration-thickness: 2px;
  }

  @media (hover: hover) and (pointer: fine) {
    .menu__lista a:hover {
      color: var(--color-tinta);
      text-decoration: underline;
    }
  }

  /* Nombre de la portada en escritorio: en horizontal, en una sola línea */
  .hero__titulo {
    font-size: clamp(3.5rem, 6.5vw, 7rem);
    white-space: nowrap;
  }


  .servicios .titulo-seccion {
    max-width: none;
  }

  /* Lista a la izquierda, foto fija a la derecha mientras se recorre la lista */
  .servicios__rejilla {
    grid-template-columns: 7fr 5fr;
    gap: 4rem;
    align-items: start;
  }

  .servicios__lista {
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem 3rem;
  }

  .servicios__foto {
    position: sticky;
    top: calc(var(--alto-cabecera) + 2rem);
  }

  /* Texto y "cómo lo hacemos" a la izquierda, foto a la derecha */
  .nosotros__rejilla {
    grid-template-columns: 7fr 5fr;
    grid-template-areas:
      "intro foto"
      "como  foto";
    gap: 3rem 5rem;
    align-items: start;
  }

  .nosotros__intro {
    grid-area: intro;
  }

  .nosotros__como {
    grid-area: como;
  }

  .nosotros__foto {
    grid-area: foto;
    grid-column: auto;
  }

  .nosotros__foto img {
    aspect-ratio: 4 / 5;
  }

  .galeria__rejilla {
    grid-template-columns: 6fr 3fr 3fr;
    align-items: end;
  }

  .galeria__item--ancho {
    max-width: 1125px;
  }

  .galeria__bloque {
    grid-column: auto;
    flex-direction: column;
    align-items: stretch;
    align-self: stretch;
    min-height: 0;
  }

  .galeria__bloque .boton {
    align-self: flex-start;
  }

  .contacto__rejilla {
    grid-template-columns: 7fr 5fr;
    gap: 2.5rem 5rem;
  }

  .resenas {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- 16. Movimiento reducido ---------- */
/* Si la persona ha pedido menos movimiento en su sistema:
   fuera todo desplazamiento, escala y zoom, pero se mantienen los fundidos
   de opacidad (no marean y ayudan a ver qué ha cambiado). */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  /* Sin animaciones con keyframes */
  *,
  *::before,
  *::after {
    animation: none !important;
  }

  /* Entradas al hacer scroll: solo fundido, sin subir y sin escalonado */
  .js [data-reveal] {
    transform: none;
    transition: opacity 250ms ease-out;
    transition-delay: 0ms;
  }

  /* Botones y pastillas: no se hunden al pulsar */
  .boton:active,
  .pastilla:active span {
    transform: none;
  }

  /* Menú móvil: aparece y desaparece fundiendo, sin bajar */
  .menu,
  .menu.abierto {
    transform: none;
  }

  /* El icono pasa a X sin girar */
  .menu-boton__icono path {
    transition: none;
  }

  /* Precios: sin salto */
  .precio,
  .precio.cambia {
    transform: none;
  }

  /* Horas y mensajes del formulario: solo fundido de 150 ms */
  .horas__lista .pastilla,
  .estado > p,
  .estado > .boton {
    transition: opacity 150ms ease-out;
  }

  @starting-style {
    .horas__lista .pastilla,
    .estado > p,
    .estado > .boton {
      transform: none;
    }
  }
}