/* ==================================================================
   ÍNDICE
   1. Variables (colores, tipografías, espaciados)
   2. Base y utilidades
   3. Botones
   4. Cabecera y menú
   5. Hero
   6. Secciones comunes
   7. Servicios
   8. Sobre nosotros
   9. Galería
   10. Formulario
   11. Contacto
   12. Pie de página
   13. Página de privacidad
   14. Animaciones
   15. Tablet (desde 768px)
   16. Escritorio (desde 1200px)

   El diseño es "mobile-first": primero se escribe la versión móvil y
   los bloques @media del final añaden los cambios para pantallas grandes.
   ================================================================== */


/* ------------------------------------------------------------------
   1. VARIABLES
   Cambiando estos valores cambias el aspecto de toda la web.
   ------------------------------------------------------------------ */
:root {
  /* Colores de marca */
  --color-principal: #6e2b3a;        /* Burdeos: botones y títulos destacados */
  --color-principal-oscuro: #54202c; /* Burdeos oscuro: botones al pasar el ratón */
  --color-acento: #b8893e;           /* Dorado: solo detalles, no texto sobre crema */
  --color-acento-claro: #e3c58f;     /* Dorado claro: texto sobre fondo oscuro */

  /* Fondos */
  --color-fondo: #faf5ee;            /* Crema: fondo general */
  --color-fondo-suave: #f2e9dd;      /* Crema más oscuro: secciones alternas */
  --color-superficie: #ffffff;       /* Blanco: tarjetas y formulario */

  /* Texto y líneas */
  --color-texto: #2e2623;            /* Marrón casi negro: texto principal */
  --color-texto-suave: #625650;      /* Marrón medio: texto secundario */
  --color-linea: #e2d6c6;            /* Bordes decorativos */
  --color-borde-campo: #857568;      /* Borde de los campos del formulario */

  /* Estados del formulario */
  --color-error: #a3231f;
  --color-error-fondo: #fbeceb;
  --color-exito: #27613f;
  --color-exito-fondo: #e8f3ec;

  /* Tipografías */
  --fuente-titulos: 'Fraunces', Georgia, serif;
  --fuente-texto: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Espaciados */
  --espacio-xs: 0.5rem;
  --espacio-s: 1rem;
  --espacio-m: 1.5rem;
  --espacio-l: 2.5rem;
  --espacio-xl: 4.5rem;              /* Separación vertical entre secciones */

  /* Otros */
  --ancho-maximo: 1160px;
  --ancho-estrecho: 720px;
  --gutter: 1.25rem;                 /* Margen lateral de la página */
  --alto-cabecera: 4.25rem;
  --radio: 0.875rem;
  --sombra: 0 10px 30px rgba(46, 38, 35, 0.08);
  --transicion: 0.25s ease;
}


/* ------------------------------------------------------------------
   2. BASE Y UTILIDADES
   ------------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box; /* El ancho incluye padding y borde */
}

html {
  scroll-behavior: smooth;
  /* Evita que la cabecera fija tape el título al saltar a una sección */
  scroll-padding-top: var(--alto-cabecera);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--fuente-texto);
  font-size: 1.0625rem;
  line-height: 1.65;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--fuente-titulos);
  font-weight: 500;
  line-height: 1.15;
}

h1 { font-size: clamp(2.6rem, 11vw, 4.5rem); }
h2 { font-size: clamp(2rem, 7vw, 2.75rem); }
h3 { font-size: 1.375rem; }

p { margin: 0 0 var(--espacio-s); }

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

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

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

/* Contorno visible al navegar con teclado */
:focus-visible {
  outline: 3px solid var(--color-principal);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Centra el contenido y deja margen en los laterales */
.contenedor {
  width: 100%;
  max-width: calc(var(--ancho-maximo) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.contenedor--estrecho {
  max-width: calc(var(--ancho-estrecho) + var(--gutter) * 2);
}

/* Texto invisible en pantalla pero disponible para lectores de pantalla */
.solo-lector {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Enlace "Saltar al contenido": aparece solo al llegar con el tabulador */
.saltar {
  position: fixed;
  top: var(--espacio-xs);
  left: var(--espacio-xs);
  z-index: 100;
  padding: var(--espacio-xs) var(--espacio-s);
  background: var(--color-principal);
  color: #fff;
  border-radius: var(--radio);
  transform: translateY(-200%);
}

.saltar:focus {
  color: #fff;
  transform: none;
}

/* Pequeño texto sobre los títulos */
.antetitulo {
  margin-bottom: var(--espacio-xs);
  color: var(--color-principal);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}


/* ------------------------------------------------------------------
   3. BOTONES
   ------------------------------------------------------------------ */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.75rem 1.75rem;
  border: 2px solid var(--color-principal);
  border-radius: 999px;
  background: var(--color-principal);
  color: #fff;
  font: inherit;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion), border-color var(--transicion);
}

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

.boton--secundario {
  background: transparent;
  color: var(--color-principal);
}

.boton--ancho { width: 100%; }

/* Aspecto del botón mientras se envía el formulario */
.boton:disabled {
  opacity: 0.7;
  cursor: wait;
}


/* ------------------------------------------------------------------
   4. CABECERA Y MENÚ
   ------------------------------------------------------------------ */
.cabecera {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  background: var(--color-fondo);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}

/* js/main.js añade esta clase al hacer scroll */
.cabecera--con-sombra {
  border-color: var(--color-linea);
  box-shadow: 0 4px 16px rgba(46, 38, 35, 0.06);
}

.cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--alto-cabecera);
}

.logo {
  color: var(--color-texto);
  font-family: var(--fuente-titulos);
  font-size: 1.25rem;
  font-weight: 500;
  text-decoration: none;
}

.logo span { color: var(--color-principal); }

/* Botón hamburguesa: tres líneas que forman una X al abrirse */
.hamburguesa {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 0;
  background: none;
  cursor: pointer;
}

.hamburguesa span {
  width: 100%;
  height: 2px;
  background: var(--color-texto);
  transition: transform var(--transicion), opacity var(--transicion);
}

.hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Menú móvil: panel desplegable bajo la cabecera */
.menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  padding: var(--espacio-xs) var(--gutter) var(--espacio-m);
  background: var(--color-fondo);
  border-bottom: 1px solid var(--color-linea);
  box-shadow: 0 12px 20px rgba(46, 38, 35, 0.08);
  /* visibility: hidden evita que el teclado entre en el menú cerrado */
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--transicion), transform var(--transicion), visibility var(--transicion);
}

.menu--abierto {
  visibility: visible;
  opacity: 1;
  transform: none;
}

.menu a {
  padding: 0.75rem 0;
  color: var(--color-texto);
  font-weight: 500;
  text-decoration: none;
}

.menu a:hover { color: var(--color-principal); }


/* ------------------------------------------------------------------
   5. HERO
   ------------------------------------------------------------------ */
.hero {
  padding-top: calc(var(--alto-cabecera) + var(--espacio-l));
  padding-bottom: var(--espacio-xl);
}

.hero__rejilla {
  display: grid;
  gap: var(--espacio-l);
}

.hero__subtitulo {
  max-width: 34rem;
  margin: var(--espacio-m) 0 var(--espacio-l);
  color: var(--color-texto-suave);
  font-size: 1.1875rem;
}

/* Foto con forma de arco, con una línea dorada decorativa detrás */
.hero__foto {
  position: relative;
  margin-left: var(--espacio-xs);
}

.hero__foto::before {
  content: "";
  position: absolute;
  inset: var(--espacio-xs) var(--espacio-xs) calc(var(--espacio-xs) * -1) calc(var(--espacio-xs) * -1);
  border: 1px solid var(--color-acento);
  border-radius: 200px 200px var(--radio) var(--radio);
}

.hero__foto img {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 45% center;
  border-radius: 200px 200px var(--radio) var(--radio);
}


/* ------------------------------------------------------------------
   6. SECCIONES COMUNES
   ------------------------------------------------------------------ */
.seccion { padding-block: var(--espacio-xl); }

.seccion--suave { background: var(--color-fondo-suave); }

.seccion__titulo {
  max-width: 40rem;
  margin: 0 auto var(--espacio-l);
  text-align: center;
}

.seccion__titulo p:last-child:not(.antetitulo) {
  margin: var(--espacio-s) 0 0;
  color: var(--color-texto-suave);
}


/* ------------------------------------------------------------------
   7. SERVICIOS
   ------------------------------------------------------------------ */
.tarjetas {
  display: grid;
  gap: var(--espacio-m);
}

.tarjeta {
  display: flex;
  flex-direction: column;
  padding: var(--espacio-m);
  background: var(--color-superficie);
  border: 1px solid var(--color-linea);
  border-radius: var(--radio);
  transition: box-shadow var(--transicion), transform var(--transicion);
}

.tarjeta:hover {
  box-shadow: var(--sombra);
  transform: translateY(-3px);
}

.tarjeta h3 { margin-bottom: var(--espacio-xs); }

.tarjeta p { color: var(--color-texto-suave); }

/* margin-top: auto empuja el precio al final para alinearlo entre tarjetas */
.tarjeta__precio {
  margin: auto 0 0;
  padding-top: var(--espacio-xs);
  color: var(--color-principal) !important;
  font-weight: 700;
}

/* Iconos SVG: el trazo usa el color de la marca */
.icono {
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: var(--espacio-s);
  fill: none;
  stroke: var(--color-principal);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icono--mini {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0.1rem 0 0;
}


/* ------------------------------------------------------------------
   8. SOBRE NOSOTROS
   ------------------------------------------------------------------ */
.sobre {
  display: grid;
  gap: var(--espacio-l);
  align-items: center;
}

.sobre__foto img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radio);
}

.sobre__texto h2 { margin-bottom: var(--espacio-m); }


/* ------------------------------------------------------------------
   9. GALERÍA
   ------------------------------------------------------------------ */
.galeria {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--espacio-xs);
}

.galeria li {
  overflow: hidden; /* Recorta la imagen cuando crece con el ratón encima */
  border-radius: var(--radio);
}

.galeria img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.galeria li:hover img { transform: scale(1.04); }


/* ------------------------------------------------------------------
   10. FORMULARIO
   ------------------------------------------------------------------ */
.formulario {
  display: grid;
  gap: var(--espacio-m);
  padding: var(--espacio-m) var(--gutter);
  background: var(--color-superficie);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

.formulario__nota {
  margin: 0;
  color: var(--color-texto-suave);
  font-size: 0.9375rem;
}

.obligatorio { color: var(--color-error); }

.campo {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.campo label:not(.opcion):not(.casilla),
.campo legend {
  display: block;
  margin-bottom: 0.375rem;
  padding: 0;
  font-weight: 700;
}

.campo__opcional {
  color: var(--color-texto-suave);
  font-weight: 400;
}

.campo input:not([type="radio"]):not([type="checkbox"]),
.campo select,
.campo textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--color-borde-campo);
  border-radius: 0.5rem;
  background: var(--color-superficie);
  color: var(--color-texto);
  font: inherit;
}

.campo textarea { resize: vertical; }

/* Los mensajes de ayuda y de error solo ocupan sitio si tienen texto */
.campo__ayuda {
  margin: 0.375rem 0 0;
  color: var(--color-texto-suave);
  font-size: 0.9375rem;
}

.campo__error {
  margin: 0.375rem 0 0;
  color: var(--color-error);
  font-size: 0.9375rem;
  font-weight: 500;
}

.campo__error:empty { display: none; }

/* Campo con error: lo pone js/main.js mediante aria-invalid */
.campo [aria-invalid="true"] {
  border-color: var(--color-error) !important;
  box-shadow: 0 0 0 1px var(--color-error);
}

/* Botones de opción: mañana / tarde */
.opciones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--espacio-xs);
}

.opcion {
  position: relative;
  cursor: pointer;
}

/* La opción real queda invisible encima de la "píldora" y sigue funcionando con teclado */
.opcion input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.opcion span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  border: 1px solid var(--color-borde-campo);
  border-radius: 0.5rem;
  transition: background var(--transicion), color var(--transicion);
}

.opcion input:checked + span {
  border-color: var(--color-principal);
  background: var(--color-principal);
  color: #fff;
  font-weight: 700;
}

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

/* Casilla de privacidad */
.casilla {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  cursor: pointer;
}

.casilla input {
  flex-shrink: 0;
  width: 1.375rem;
  height: 1.375rem;
  margin: 0.15rem 0 0;
  accent-color: var(--color-principal);
}

/* Honeypot: fuera de la vista, pero sin display:none, que algunos bots detectan */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Mensajes de resultado del envío */
.aviso {
  padding: var(--espacio-s);
  border-radius: 0.5rem;
  font-weight: 500;
}

.aviso p { margin: 0; }

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

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

.aviso .boton { margin-top: var(--espacio-s); }


/* ------------------------------------------------------------------
   11. CONTACTO
   ------------------------------------------------------------------ */
.contacto {
  display: grid;
  gap: var(--espacio-m);
}

.contacto__bloque {
  padding: var(--espacio-m);
  background: var(--color-superficie);
  border: 1px solid var(--color-linea);
  border-radius: var(--radio);
}

.contacto__bloque h3 { margin-bottom: var(--espacio-s); }

.datos {
  display: grid;
  gap: var(--espacio-s);
  margin-bottom: var(--espacio-m);
}

.datos li {
  display: flex;
  gap: 0.75rem;
}

.horario {
  width: 100%;
  border-collapse: collapse;
}

.horario th,
.horario td {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-linea);
}

.horario tr:last-child th,
.horario tr:last-child td { border-bottom: 0; }

.horario th {
  font-weight: 500;
  text-align: left;
}

.horario td {
  color: var(--color-texto-suave);
  text-align: right;
}


/* ------------------------------------------------------------------
   12. PIE DE PÁGINA
   ------------------------------------------------------------------ */
.pie {
  padding-block: var(--espacio-l) var(--espacio-m);
  background: var(--color-texto);
  color: var(--color-fondo);
}

.pie a {
  color: var(--color-fondo);
  text-decoration: none;
}

.pie a:hover {
  color: var(--color-acento-claro);
  text-decoration: underline;
}

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

.pie__fila {
  display: grid;
  gap: var(--espacio-m);
}

.pie__logo {
  margin-bottom: 0.125rem;
  font-family: var(--fuente-titulos);
  font-size: 1.375rem;
}

.pie__enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-xs) var(--espacio-m);
}

.pie__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 var(--espacio-m);
  margin-top: var(--espacio-m);
  color: #d3c8bc;
  font-size: 0.875rem;
}

.pie__legal p {
  margin: var(--espacio-s) 0 0;
}


/* ------------------------------------------------------------------
   13. PÁGINA DE PRIVACIDAD
   ------------------------------------------------------------------ */
.legal-cabecera {
  padding-block: var(--espacio-s);
  border-bottom: 1px solid var(--color-linea);
}

.legal {
  padding-block: var(--espacio-l) var(--espacio-xl);
}

.legal h1 {
  margin-bottom: var(--espacio-m);
  font-size: clamp(2.25rem, 8vw, 3rem);
}

.legal h2 {
  margin: var(--espacio-l) 0 var(--espacio-xs);
  font-size: 1.5rem;
}

.legal__aviso {
  padding: var(--espacio-s);
  background: var(--color-fondo-suave);
  border-left: 3px solid var(--color-acento);
  border-radius: 0.25rem;
}


/* ------------------------------------------------------------------
   14. ANIMACIONES
   Los bloques con .aparecer entran suavemente al llegar a ellos.
   Solo se ocultan si hay JavaScript (clase .js en <html>).
   ------------------------------------------------------------------ */
.js .aparecer {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.js .aparecer.visible {
  opacity: 1;
  transform: none;
}

/* Si la persona ha pedido menos movimiento en su sistema, se desactiva todo */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .js .aparecer {
    opacity: 1;
    transform: none;
  }

  .tarjeta:hover { transform: none; }
  .galeria li:hover img { transform: none; }
}


/* ------------------------------------------------------------------
   15. TABLET (desde 768px)
   ------------------------------------------------------------------ */
@media (min-width: 768px) {
  :root {
    --gutter: 2rem;
    --espacio-xl: 6rem;
  }

  /* El menú deja de ser desplegable y se muestra en línea */
  .hamburguesa { display: none; }

  .menu {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: var(--espacio-m);
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: none;
  }

  .menu a { padding: 0.25rem 0; }

  /* Hero en dos columnas: texto y foto */
  .hero__rejilla {
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
  }

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

  .tarjetas { grid-template-columns: repeat(2, 1fr); }

  .sobre { grid-template-columns: 1.15fr 1fr; }

  .galeria {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--espacio-s);
  }

  .formulario {
    grid-template-columns: 1fr 1fr;
    padding: var(--espacio-l);
  }

  /* Estos elementos ocupan las dos columnas del formulario */
  .formulario > .formulario__nota,
  .formulario > .campo:nth-of-type(1),
  .formulario > .campo:has(textarea),
  .formulario > .campo:has(.casilla),
  .formulario > .boton,
  .formulario > .aviso {
    grid-column: 1 / -1;
  }

  .contacto { grid-template-columns: 1fr 1fr; }

  .pie__fila {
    grid-template-columns: auto 1fr;
    align-items: center;
  }

  .pie__enlaces { justify-content: flex-end; }
}


/* ------------------------------------------------------------------
   16. ESCRITORIO (desde 1200px)
   ------------------------------------------------------------------ */
@media (min-width: 1200px) {
  :root { --espacio-xl: 7.5rem; }

  .hero__rejilla {
    grid-template-columns: 1.15fr 1fr;
    gap: 5rem;
  }

  .hero__foto::before,
  .hero__foto img {
    border-radius: 260px 260px var(--radio) var(--radio);
  }

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

  .tarjeta { padding: var(--espacio-l); }

  .sobre { gap: 5rem; }

  .contacto__bloque { padding: var(--espacio-l); }
}