/* ==========================================================================
   Photoboothverhuur Giorgia C. — hoja de estilos unica
   Todos los colores estan en :root. Cambia un valor ahi y cambia toda la web.
   ========================================================================== */

:root {
  /* --- Colores de marca --- */
  --crema:        #FFF8EA;  /* fondo principal de toda la web */
  --crema-suave:  #F5EBD8;  /* lineas divisorias suaves */
  --menta:        #CDFFD8;  /* acento: franjas, precios, hover */
  --menta-borde:  #A8E8BC;  /* bordes y lineas divisorias */
  --azul:         #2B4C8C;  /* header, footer, botones, titulos */
  --azul-oscuro:  #1F3A6B;  /* hover de los botones azules */
  --marron:       #5F4E43;  /* texto de parrafo */
  --marron-claro: #786254;  /* texto secundario, pies de foto */
  --blanco:       #FFFFFF;

  /* --- Medidas repetidas --- */
  --ancho-max: 1100px;      /* ancho maximo del contenido */
  --radio:     12px;        /* redondeo de tarjetas y botones */
  --sombra:    0 2px 10px rgba(95, 78, 67, .12);
}

/* --------------------------------------------------------------------------
   1. Reset basico
   -------------------------------------------------------------------------- */

* {
  box-sizing: border-box;   /* el padding no agranda las cajas */
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;  /* scroll suave al pulsar enlaces internos */
}

body {
  background: var(--crema);   /* color de reserva, debajo del degradado */
  color: var(--marron);
  font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
  font-size: 17px;
  line-height: 1.65;
}

/* --- Degradado de fondo de toda la web ---
   Es una capa fija pegada a la ventana, detras de todo el contenido
   (z-index -1). Al ir fija, el degradado no se estira segun lo larga que
   sea cada pagina: se ve igual en la home que en el FAQ.

   Lleva tres capas superpuestas, de arriba a abajo:
     1. un brillo menta en la esquina superior izquierda
     2. un brillo azul claro en la derecha, mas abajo
     3. el degradado de fondo, de crema muy clara a crema calida
   Los dos brillos son los colores del logo, muy diluidos. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;   /* no debe interceptar ningun clic */

  background:
    radial-gradient(58rem 42rem at 8% -6%,  rgba(205, 255, 216, .34), transparent 60%),
    radial-gradient(52rem 46rem at 96% 42%, rgba(196, 216, 251, .26), transparent 58%),
    linear-gradient(168deg, #FFFDF7 0%, #FFF8EA 52%, #FAF6EC 100%);
}

img {
  display: block;
  max-width: 100%;          /* ninguna imagen se sale de su caja */

  /* Imprescindible: cada <img> lleva en el HTML sus medidas reales
     (width="560" height="560") para que el navegador reserve el hueco
     antes de descargarla y la pagina no de saltos. Pero si el ancho luego
     se adapta al contenedor y el alto se queda fijo en ese numero, la foto
     sale aplastada o estirada. Con height:auto el alto se recalcula solo
     y se respeta la proporcion original. */
  height: auto;
}

a {
  color: var(--azul);
}

/* --------------------------------------------------------------------------
   2. Piezas reutilizables
   -------------------------------------------------------------------------- */

/* Centra el contenido y le da aire a los lados */
.contenedor {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 0 24px;
}

/* Bloque vertical de una seccion */
.seccion {
  padding: 72px 0;
}

/* Seccion con fondo ligeramente distinto, para separar visualmente.
   Es un velo semitransparente, no un color opaco: asi aclara la banda
   pero deja pasar el degradado del fondo. Con un color solido, estas
   secciones taparian el degradado a franjas. */
.seccion-alterna {
  background: rgba(255, 248, 234, .55);
}

/* Seccion oscura, para el bloque final de llamada a la accion */
.seccion-azul {
  background: var(--azul);
  color: var(--crema);
}

.seccion-azul h2,
.seccion-azul h3 {
  color: var(--menta);
}

/* --- Titulos --- */

h1, h2, h3 {
  color: var(--azul);
  line-height: 1.25;
  font-weight: 700;
}

h1 { font-size: 2.6rem; margin-bottom: 16px; }
h2 { font-size: 2rem;   margin-bottom: 14px; }
h3 { font-size: 1.25rem; margin-bottom: 10px; }

/* Titulo de seccion centrado con su frase de apoyo */
.titulo-seccion {
  text-align: center;
  margin-bottom: 44px;
}

.titulo-seccion p {
  max-width: 620px;
  margin: 0 auto;
  color: var(--marron-claro);
}

p + p {
  margin-top: 14px;         /* espacio solo entre parrafos seguidos */
}

/* --- Botones --- */

.boton {
  display: inline-block;
  background: var(--azul);
  color: var(--crema);
  padding: 13px 28px;
  border-radius: 999px;     /* forma de pastilla */
  text-decoration: none;
  font-weight: 700;
  transition: background .2s;
}

.boton:hover {
  background: var(--azul-oscuro);
}

/* Version clara, para usar sobre fondo azul */
.boton-claro {
  background: var(--menta);
  color: var(--azul);
}

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

/* --------------------------------------------------------------------------
   3. Cabecera y menu
   -------------------------------------------------------------------------- */

.cabecera {
  background: var(--azul);
  position: sticky;         /* se queda pegada arriba al hacer scroll */
  top: 0;
  z-index: 100;
}

/* Franja fina con el degradado del logo (menta -> azul).
   Es un ::before, asi que no hace falta anadir nada al HTML. */
.cabecera::before {
  content: "";
  display: block;
  height: 5px;
  background: linear-gradient(90deg, #CDFFD8, #9FD8E8, #8FA6F0);
}

.cabecera .contenedor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Logo + nombre de la empresa */
.marca {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.marca img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
}

.marca span {
  color: var(--crema);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.2;
}

.marca small {
  display: block;
  color: var(--menta);
  font-weight: 400;
  font-size: .78rem;
}

/* Lista de enlaces del menu */
.menu {
  display: flex;
  gap: 6px;
  list-style: none;
}

.menu a {
  display: block;
  color: var(--crema);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: .95rem;
  transition: background .2s;
}

.menu a:hover {
  background: var(--azul-oscuro);
}

/* Marca la pagina en la que estas ahora mismo */
.menu a.activo {
  background: var(--menta);
  color: var(--azul);
  font-weight: 700;
}

/* Boton hamburguesa: oculto en ordenador, visible en movil */
.boton-menu {
  display: none;
  background: none;
  border: 2px solid var(--menta);
  color: var(--menta);
  font-size: 1.4rem;
  line-height: 1;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   4. Hero (la primera pantalla de la home)
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  /* Sin color propio: encima va la foto y su velo. Si le pusieramos un
     color solido, taparia el degradado del fondo mientras carga la foto. */
  padding: 64px 0;

  /* El fondo sobresale por arriba y por abajo; hay que recortarlo.
     Se declaran las dos: los navegadores viejos usan "hidden" y los
     modernos se quedan con "clip", que es la ultima que entienden.

     La diferencia importa: "hidden" convierte a .hero en un contenedor
     de scroll, y entonces el parallax de mas abajo lo tomaria a el como
     referencia en vez de a la pagina. "clip" recorta igual pero sin
     crear ese contenedor. */
  overflow: hidden;
  overflow: clip;
}

/* --- Fondo desenfocado con parallax ---
   La foto ya viene desenfocada desde el archivo, no se usa filter: blur().
   Asi el navegador no tiene que recalcular el desenfoque en cada fotograma. */
.hero-fondo {
  position: absolute;
  /* Sobresale 80px por arriba y por abajo. Ese sobrante es el recorrido
     que tiene la foto para moverse sin dejar huecos en los bordes. */
  inset: -80px 0;
  background: url("afbeeldingen/hero-fondo.jpg") center / cover no-repeat;

  /* Animacion movida por el scroll de la pagina, sin JavaScript.
     Se escribe en propiedades sueltas a proposito: en la forma abreviada
     (animation: ...) al omitir la duracion el navegador la pone en 0
     segundos y la animacion por scroll no llega a funcionar. */
  animation-name: fondo-lento;
  animation-timing-function: linear;
  animation-fill-mode: both;
  animation-duration: auto;

  /* scroll(root) = "sigue el scroll de la pagina entera".
     Escrito como scroll() a secas significa "el contenedor de scroll mas
     cercano", que aqui seria .hero, y como .hero no se desplaza por dentro
     la animacion se quedaba parada en el primer fotograma. */
  animation-timeline: scroll(root);
  animation-range: 0 500px;   /* el efecto ocurre en los primeros 500px de scroll */

  will-change: transform;     /* avisa al navegador: prepara la capa aparte */

  /* Firefox y los Chrome anteriores a la version 115 ignoran las cuatro
     lineas de arriba. Para esos casos, script.js hace lo mismo por su
     cuenta; ver el apartado 3 de ese archivo. */
}

@keyframes fondo-lento {
  from { transform: translateY(-70px); }
  to   { transform: translateY(70px); }
}

/* Velo crema por encima de la foto: sin el, el texto azul no se leeria.
   Va de izquierda a derecha: casi opaco donde esta el texto, y se abre
   hacia la derecha para que la photobooth se vea con nitidez. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
              rgba(255, 248, 234, .95) 0%,
              rgba(255, 248, 234, .92) 46%,
              rgba(255, 248, 234, .55) 72%,
              rgba(255, 248, 234, .40) 100%);
}

/* El contenido va por encima del fondo y del velo */
.hero .contenedor {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: 400px;        /* alto minimo para que la foto de fondo se aprecie */
}

/* El texto ocupa la mitad izquierda; la derecha queda libre para la booth */
.hero-texto {
  max-width: 520px;
}

.hero-texto .lema {
  display: inline-block;
  background: var(--menta);
  color: var(--azul);
  font-size: .85rem;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 999px;
  margin-bottom: 18px;
}

.hero-texto p {
  font-size: 1.1rem;
  margin-bottom: 26px;
}

/* Cabecera mas pequena para las paginas interiores.
   Velo semitransparente, por lo mismo que .seccion-alterna. */
.cabecera-pagina {
  background: rgba(255, 248, 234, .55);
  padding: 56px 0;
  text-align: center;
}

.cabecera-pagina p {
  max-width: 620px;
  margin: 0 auto;
  color: var(--marron-claro);
}

/* --------------------------------------------------------------------------
   5. Tarjetas (servicios, ventajas, contacto)
   -------------------------------------------------------------------------- */

/* Rejilla de 3 columnas que se adapta sola al ancho disponible */
.rejilla-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 26px;
}

.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--menta-borde);
  border-radius: var(--radio);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* La tarjeta se eleva al pasar el raton (ver regla mas abajo) */
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.tarjeta:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 22px rgba(95, 78, 67, .16);
  border-color: var(--azul);
}

.tarjeta img {
  width: 100%;
  height: 210px;
  object-fit: cover;        /* recorta la foto sin deformarla */
}

.tarjeta-cuerpo {
  padding: 22px;
  flex: 1;                  /* empuja el enlace al fondo de la tarjeta */
  display: flex;
  flex-direction: column;
}

.tarjeta-cuerpo p {
  color: var(--marron-claro);
  font-size: .95rem;
  flex: 1;
}

.tarjeta-cuerpo .enlace {
  margin-top: 16px;
  font-weight: 700;
  text-decoration: none;
}

.tarjeta-cuerpo .enlace:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   6. Bloques de servicio (pagina Diensten)
   -------------------------------------------------------------------------- */

.servicio {
  padding: 64px 0;
  border-bottom: 1px solid var(--menta-borde);
}

.servicio-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: center;
  margin-bottom: 40px;
}

.servicio-intro img {
  width: 100%;
  /* Las tres fotos de esta pagina son verticales y de proporciones
     distintas. Sin esto, cada seccion tendria una altura diferente y
     alguna quedaria larguisima. Con aspect-ratio todas ocupan lo mismo,
     y object-fit recorta sin deformar. */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

/* Lista de caracteristicas con check azul en lugar de punto */
.lista-check {
  list-style: none;
  margin-top: 16px;
}

.lista-check li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 9px;
}

.lista-check li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--azul);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   7. Paquetes de precio
   -------------------------------------------------------------------------- */

.paquetes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 22px;
}

.paquete {
  background: var(--blanco);
  border: 2px solid var(--menta-borde);
  border-radius: var(--radio);
  padding: 26px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.paquete:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 22px rgba(95, 78, 67, .16);
  border-color: var(--azul);
}

/* El paquete del medio se resalta con borde azul */
.paquete.destacado {
  border-color: var(--azul);
  position: relative;
}

.paquete.destacado::before {
  content: "Populair";
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--azul);
  color: var(--crema);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .5px;
  padding: 4px 14px;
  border-radius: 999px;
}

.paquete h3 {
  color: var(--marron-claro);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.paquete .precio {
  color: var(--azul);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 18px;
}

.paquete ul {
  list-style: none;
  text-align: left;
  flex: 1;
  font-size: .95rem;
}

.paquete ul li {
  padding: 9px 0;
  border-top: 1px solid var(--crema-suave);
}

.paquete .boton {
  margin-top: 20px;
}

/* Nota pequena bajo los paquetes */
.nota {
  text-align: center;
  color: var(--marron-claro);
  font-size: .9rem;
  margin-top: 20px;
}

/* --------------------------------------------------------------------------
   8. Galeria
   -------------------------------------------------------------------------- */

.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 26px;                /* mas hueco: las fotos van torcidas y necesitan aire */
}

/* --- Marco de polaroid ---
   Recoge el gesto del logo: foto blanca, ligeramente torcida, como pegada
   en un album. Al pasar el raton se endereza y se levanta. */
.polaroid {
  display: block;
  position: relative;       /* para poder colocar la cinta adhesiva encima */
  background: var(--blanco);
  padding: 10px 10px 34px;  /* el borde inferior mas ancho es lo que la hace polaroid */
  border-radius: 3px;
  box-shadow: 0 3px 12px rgba(95, 78, 67, .22);
  cursor: pointer;
  transition: transform .28s ease, box-shadow .28s ease;
}

/* Cada foto se tuerce un poco distinto, para que no parezca una rejilla rigida.
   nth-child(4n+1), (4n+2)... reparte cuatro angulos en bucle por toda la lista. */
.polaroid:nth-child(4n+1) { transform: rotate(-2.5deg); }
.polaroid:nth-child(4n+2) { transform: rotate(1.8deg); }
.polaroid:nth-child(4n+3) { transform: rotate(-1.2deg); }
.polaroid:nth-child(4n+4) { transform: rotate(2.2deg); }

.polaroid:hover {
  transform: rotate(0deg) translateY(-7px);
  box-shadow: 0 12px 26px rgba(95, 78, 67, .3);
}

/* Quien navega con el teclado tiene que ver donde esta.
   :focus-visible solo se activa con el teclado, no al hacer clic. */
.polaroid img:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 3px;
}

/* Y la foto tambien se endereza al recibir el foco, igual que con el raton */
.polaroid:focus-within {
  transform: rotate(0deg) translateY(-7px);
  box-shadow: 0 12px 26px rgba(95, 78, 67, .3);
}

/* Cinta adhesiva color menta en la parte de arriba */
.polaroid::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 58px;
  height: 18px;
  background: var(--menta);
  opacity: .9;
}

/* La ventana recorta la foto: sin esto el zoom se saldria del marco blanco */
.ventana {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}

/* <picture> es en linea por defecto y dejaria una rendija bajo la foto */
.ventana picture {
  display: block;
}

.ventana img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;      /* todas cuadradas, rejilla ordenada */
  object-fit: cover;
  transition: transform .4s ease;
}

.polaroid:hover .ventana img {
  transform: scale(1.07);   /* acercamiento lento dentro del marco */
}

/* Velo azul con la palabra "Bekijk", solo al pasar el raton */
.ventana::after {
  content: "Bekijk";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(43, 76, 140, .85);
  color: var(--menta);
  font-weight: 700;
  font-size: .95rem;
  opacity: 0;
  transition: opacity .3s ease;
  /* Sin esto el velo se comeria el clic y no se abriria la foto grande */
  pointer-events: none;
}

.polaroid:hover .ventana::after {
  opacity: 1;
}

/* Ventana grande que aparece al pulsar una foto */
.visor {
  display: none;            /* oculta hasta que JS le anade .abierto */
  position: fixed;
  inset: 0;                 /* ocupa toda la pantalla */
  background: rgba(31, 58, 107, .93);
  z-index: 200;
  padding: 30px;
  align-items: center;
  justify-content: center;
}

.visor.abierto {
  display: flex;
}

.visor img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 10px;
}

.visor-cerrar {
  position: absolute;
  top: 18px;
  right: 24px;
  background: none;
  border: none;
  color: var(--menta);
  font-size: 2.6rem;
  line-height: 1;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   9. Pagina Over mij
   -------------------------------------------------------------------------- */

.perfil {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 48px;
  align-items: start;
}

/* Segundo bloque: la foto pasa a ser la columna de la derecha.
   En el HTML el texto ya va primero, asi que solo hay que invertir
   los anchos de las columnas. */
.perfil-invertido {
  grid-template-columns: 1fr 320px;
}

.perfil img {
  width: 100%;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

/* --------------------------------------------------------------------------
   10. Pagina Contact
   -------------------------------------------------------------------------- */

/* Cada tarjeta lleva una foto desenfocada de fondo, con un velo crema
   encima para que el texto se siga leyendo. La foto ya viene desenfocada
   desde el archivo: el navegador no calcula nada.

   Las dos capas del background van de arriba a abajo: primero el velo,
   debajo la foto. La foto se indica por separado en cada tarjeta con la
   variable --foto-fondo, unas lineas mas abajo. */
.tarjeta-contacto {
  background-image:
    linear-gradient(rgba(255, 248, 234, .84), rgba(255, 248, 234, .90)),
    var(--foto-fondo, none);
  background-size: cover;
  background-position: center;
  background-color: var(--blanco);   /* por si la foto no carga */
  border: 1px solid var(--menta-borde);
  border-radius: var(--radio);
  padding: 30px 24px;
  text-align: center;
}

/* La foto de cada tarjeta. Para cambiarla, solo hay que poner
   otro nombre de archivo aqui. */
.tarjeta-telefoon     { --foto-fondo: url("afbeeldingen/kaart-telefoon.jpg"); }
.tarjeta-gebied       { --foto-fondo: url("afbeeldingen/kaart-gebied.jpg"); }
.tarjeta-boeken       { --foto-fondo: url("afbeeldingen/kaart-boeken.jpg"); }
.tarjeta-verplaatsing { --foto-fondo: url("afbeeldingen/kaart-verplaatsing.jpg"); }

/* El texto de la tarjeta va en marron normal, no en el claro:
   sobre una foto de fondo el tono claro no llegaba al contraste minimo. */
.tarjeta-contacto p {
  color: var(--marron);
  font-size: .95rem;
}

/* Se eleva al pasar el raton, igual que el resto de tarjetas */
.tarjeta-contacto {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.tarjeta-contacto:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 22px rgba(95, 78, 67, .16);
  border-color: var(--azul);
}

.tarjeta-contacto a {
  font-weight: 700;
  text-decoration: none;
  word-break: break-word;
}

.tarjeta-contacto a:hover {
  text-decoration: underline;
}

/* Bloque grande de WhatsApp.
   Igual que las tarjetas de abajo: foto desenfocada de fondo, pero aqui
   el velo es menta en vez de crema, para que el bloque siga destacando
   sobre el resto de la pagina. */
.bloque-whatsapp {
  background-image:
    linear-gradient(rgba(205, 255, 216, .84), rgba(205, 255, 216, .90)),
    url("afbeeldingen/kaart-whatsapp.jpg");
  background-size: cover;
  background-position: center;
  background-color: var(--menta);   /* por si la foto no carga */
  border-radius: var(--radio);
  padding: 44px 30px;
  text-align: center;
  margin-bottom: 44px;
}

.bloque-whatsapp p {
  max-width: 520px;
  margin: 0 auto 24px;
}

/* --- Preguntas frecuentes ---
   Se usa la etiqueta <details> de HTML, que abre y cierra sola.
   Aqui no hace falta nada de JavaScript. */

.faq {
  max-width: 780px;
  margin: 0 auto;
}

.faq details {
  background: var(--blanco);
  border: 1px solid var(--menta-borde);
  border-radius: var(--radio);
  padding: 4px 22px;
  margin-bottom: 12px;
}

/* La pregunta */
.faq summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--azul);
  padding: 15px 30px 15px 0;
  position: relative;
  list-style: none;         /* quita el triangulito por defecto */
}

.faq summary::-webkit-details-marker {
  display: none;            /* lo mismo, para Safari */
}

/* Nuestro propio signo + que gira hasta convertirse en x al abrir */
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  color: var(--marron-claro);
  transition: transform .25s ease;
}

.faq details[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}

/* La respuesta */
.faq details p {
  padding-bottom: 18px;
  font-size: .97rem;
}

/* --------------------------------------------------------------------------
   Pagina de error 404
   La idea: una polaroid vacia. Es literalmente lo que ha pasado, no se ha
   encontrado la foto. Reutiliza el marco blanco y la cinta de la galeria.
   -------------------------------------------------------------------------- */

.error404 {
  /* Ocupa toda la pantalla menos la cabecera, para que no quede un hueco
     blanco enorme debajo en monitores grandes */
  min-height: calc(100vh - 220px);
  display: flex;
  align-items: center;
  padding: 60px 0;
}

.error404 .contenedor {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 60px;
  align-items: center;
}

/* --- La polaroid vacia --- */

.error-foto {
  position: relative;
  background: var(--blanco);
  padding: 14px 14px 52px;
  border-radius: 3px;
  box-shadow: 0 6px 22px rgba(95, 78, 67, .26);
  transform: rotate(-4deg);
}

/* La cinta adhesiva, igual que en las fotos de la galeria */
.error-foto::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 76px;
  height: 22px;
  background: var(--menta);
  opacity: .9;
}

/* El hueco donde iria la foto */
.error-foto .marco {
  aspect-ratio: 1 / 1;
  border-radius: 2px;
  background: var(--azul-oscuro);
  display: grid;
  place-items: center;
}

.error-foto .numero {
  color: var(--menta);
  font-size: 4.6rem;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1;
}

/* El pie escrito a mano de la polaroid */
.error-foto .pie-foto {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  text-align: center;
  font-style: italic;
  font-size: .95rem;
  color: var(--marron-claro);
}

/* --- El texto de al lado --- */

.error404 h1 {
  font-size: 2.2rem;
}

.error404 .intro {
  max-width: 460px;
  margin-bottom: 26px;
}

.error-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 34px;
}

/* Lista de atajos a las paginas reales */
.error-enlaces {
  border-top: 1px solid var(--menta-borde);
  padding-top: 20px;
}

.error-enlaces h2 {
  font-size: .9rem;
  color: var(--marron-claro);
  margin-bottom: 10px;
}

.error-enlaces ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}

.error-enlaces a {
  font-weight: 700;
  text-decoration: none;
}

.error-enlaces a:hover {
  text-decoration: underline;
}

@media (max-width: 780px) {
  .error404 .contenedor {
    grid-template-columns: 1fr;
    gap: 38px;
    text-align: center;
  }

  /* La polaroid se centra y se hace algo mas pequena */
  .error-foto {
    max-width: 240px;
    margin: 0 auto;
  }

  .error404 .intro {
    margin-left: auto;
    margin-right: auto;
  }

  .error-botones,
  .error-enlaces ul {
    justify-content: center;
  }
}

/* --- Paginas legales (aviso legal y privacidad) --- */

.texto-legal {
  max-width: 780px;
  margin: 0 auto;
}

.texto-legal h2 {
  font-size: 1.35rem;
  margin-top: 38px;
  margin-bottom: 12px;
}

.texto-legal h2:first-child {
  margin-top: 0;
}

/* Lista de datos de la empresa: etiqueta a la izquierda, dato a la derecha */
.datos {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 10px 20px;
  background: var(--blanco);
  border: 1px solid var(--menta-borde);
  border-radius: var(--radio);
  padding: 24px 26px;
}

.datos dt {
  font-weight: 700;
  color: var(--azul);
}

.datos dd {
  margin: 0;
}

.texto-legal .fecha {
  margin-top: 40px;
  font-size: .9rem;
  color: var(--marron-claro);
  border-top: 1px solid var(--menta-borde);
  padding-top: 18px;
}

@media (max-width: 620px) {
  .datos {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .datos dd {
    margin-bottom: 12px;
  }
}

/* --------------------------------------------------------------------------
   11. Botones flotantes de redes sociales (en todas las paginas)
   -------------------------------------------------------------------------- */

.redes-flotantes {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 150;
  display: flex;
  flex-direction: column;   /* uno encima de otro, en columna */
  gap: 10px;
}

/* Cada boton es un circulo con el icono dentro */
.red {
  display: flex;
  align-items: center;
  justify-content: flex-end;  /* el icono queda pegado a la derecha */
  gap: 10px;
  width: 52px;                /* de ancho solo cabe el circulo... */
  height: 52px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--blanco);
  text-decoration: none;
  font-weight: 700;
  font-size: .9rem;
  white-space: nowrap;
  box-shadow: 0 3px 14px rgba(0, 0, 0, .25);
  transition: width .25s ease;
}

/* ...y al pasar el raton se ensancha y deja ver el nombre */
.red:hover {
  width: 148px;
}

.red svg {
  width: 24px;
  height: 24px;
  flex: none;               /* el icono nunca se encoge */
  fill: currentColor;
}

/* La etiqueta esta siempre en el HTML (para lectores de pantalla),
   pero solo se ve cuando el boton se ensancha */
.red .etiqueta {
  order: -1;                /* el texto va antes que el icono */
  opacity: 0;
  transition: opacity .2s ease;
}

.red:hover .etiqueta {
  opacity: 1;
}

/* Colores oficiales de cada red */
.red-whatsapp  { background: #25D366; }
.red-whatsapp:hover  { background: #1EBE5B; }

.red-facebook  { background: #1877F2; }
.red-facebook:hover  { background: #0F62D0; }

/* Instagram no tiene un color plano, su marca es este degradado */
.red-instagram { background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF); }
.red-instagram:hover { background: linear-gradient(45deg, #E0761F, #C41F68, #6E2A94); }

/* --- Botones de redes dentro de la pagina de Contacto --- */

.redes-fila {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin-bottom: 26px;
}

.red-grande {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 20px;
  border-radius: var(--radio);
  color: var(--blanco);
  text-decoration: none;
  font-weight: 700;
  transition: transform .2s ease, box-shadow .2s ease;
}

.red-grande:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 22px rgba(95, 78, 67, .22);
}

.red-grande svg {
  width: 26px;
  height: 26px;
  flex: none;
  fill: currentColor;
}

/* --------------------------------------------------------------------------
   12. Pie de pagina
   -------------------------------------------------------------------------- */

.pie {
  background: var(--azul);
  color: var(--crema);
  padding: 52px 0 26px;
}

.pie-columnas {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 36px;
  margin-bottom: 34px;
}

.pie h3 {
  color: var(--menta);
  font-size: 1rem;
  margin-bottom: 14px;
}

.pie ul {
  list-style: none;
}

.pie li {
  margin-bottom: 8px;
}

.pie a {
  color: var(--crema);
  text-decoration: none;
  font-size: .95rem;
}

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

.pie-abajo {
  border-top: 1px solid var(--azul-oscuro);
  padding-top: 20px;
  text-align: center;
  font-size: .85rem;
  color: var(--menta-borde);
}

/* Segunda linea del pie: enlaces legales y numero de empresa */
.pie-legal {
  margin-top: 8px;
  font-size: .82rem;
}

.pie-legal a {
  font-size: inherit;
}

/* --------------------------------------------------------------------------
   13. Respeto por quien no quiere animaciones
   Si el visitante activa "reducir movimiento" en su sistema (Windows, iOS,
   Android...), aqui apagamos los efectos. Las fotos quedan rectas y quietas.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  /* Sin transiciones ni animaciones en toda la web */
  * {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }

  /* Las polaroids se quedan rectas, sin torcer ni levantarse */
  .polaroid,
  .polaroid:nth-child(4n+1),
  .polaroid:nth-child(4n+2),
  .polaroid:nth-child(4n+3),
  .polaroid:nth-child(4n+4),
  .polaroid:hover {
    transform: none;
  }

  /* Las tarjetas no se elevan ni la foto se acerca */
  .tarjeta:hover,
  .paquete:hover,
  .polaroid:hover .ventana img {
    transform: none;
  }

  /* El fondo del hero se queda quieto (la foto sigue viendose) */
  .hero-fondo {
    animation: none;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   14. Movil y tablet
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {

  h1 { font-size: 2rem; }
  h2 { font-size: 1.6rem; }

  /* El menu pasa a ser una lista vertical oculta */
  .boton-menu {
    display: block;
  }

  .menu {
    display: none;
    flex-direction: column;
    width: 100%;
    gap: 4px;
    padding-bottom: 14px;
  }

  /* JS anade esta clase al pulsar la hamburguesa */
  .menu.abierto {
    display: flex;
  }

  .cabecera .contenedor {
    flex-wrap: wrap;
  }

  /* Todas las rejillas de dos columnas pasan a una */
  .servicio-intro,
  .perfil,
  .pie-columnas {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* En movil el texto ocupa todo el ancho y queda encima de la booth,
     asi que el velo pasa a ser parejo en vez de degradado hacia la derecha. */
  .hero::after {
    background: linear-gradient(rgba(255, 248, 234, .90), rgba(255, 248, 234, .94));
  }

  .hero .contenedor {
    min-height: 320px;
  }

  /* El fondo se encuadra a la derecha para que la booth siga viendose */
  .hero-fondo {
    background-position: 75% center;
  }

  .seccion,
  .servicio {
    padding: 48px 0;
  }

  /* En movil no hay raton, asi que los botones no se ensanchan nunca:
     se quedan como circulos con el icono, ocupando lo minimo. */
  .redes-flotantes {
    right: 14px;
    bottom: 14px;
    gap: 8px;
  }

  .red,
  .red:hover {
    width: 46px;
    height: 46px;
    padding: 0;
    justify-content: center;
  }

  .red .etiqueta {
    display: none;
  }
}