/* =====================================================================
   Fotomatón Murcia - Hoja de estilos
   ---------------------------------------------------------------------
   INDICE
     1.  Variables (colores, tipografias, medidas)  <- CAMBIA AQUI LOS COLORES
     2.  Reset y base
     3.  Utilidades (contenedor, botones, titulos)
     4.  Cabecera y navegacion
     5.  Hero / portada
     6.  Carta de servicios (Que ofrecemos)
     7.  Pasos "Como funciona"
     8.  Galeria
     9.  Zona de cobertura
     10. Presupuesto
     11. Acordeon de preguntas frecuentes
     12. Formulario de contacto
     13. Pie de pagina
     14. Boton flotante de WhatsApp
     15. Animaciones al hacer scroll
     16. Paginas legales
   ===================================================================== */


/* =====================================================================
   1. VARIABLES
   Cambia un color aqui y cambia en toda la web.
   ===================================================================== */
:root {
  /* --- Colores --- */
  --crema:          #FAF6F0;   /* fondo principal */
  --crema-alt:      #F3ECE2;   /* fondo de secciones alternas */
  --blanco:         #FFFFFF;
  --tinta:          #2E2A26;   /* texto principal (negro suave) */
  --tinta-suave:    #6B6259;   /* texto secundario */
  --acento:         #AE5E39;   /* terracota: fondo de botones y detalles */
  --acento-texto:   #8F4A2C;   /* terracota oscuro: para TEXTO sobre fondo claro */
  --acento-oscuro:  #8F4A2C;   /* terracota al pasar el raton */
  --dorado:         #C2A25C;   /* dorado envejecido: filetes y adornos */
  --borde:          #E4DACB;
  --sombra:         rgba(46, 42, 38, .10);
  --verde-wa:       #25D366;   /* verde oficial de WhatsApp */
  --verde-wa-osc:   #1EA952;
  --error:          #B3261E;
  --exito:          #2E6B4F;

  /* --- Tipografias --- */
  --fuente-titulo: "Playfair Display", Georgia, "Times New Roman", serif;
  --fuente-texto:  "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* --- Medidas --- */
  --ancho-max:      1140px;
  --ancho-estrecho: 780px;
  --radio:          4px;
  --radio-grande:   10px;
  --alto-cabecera:  68px;
  --transicion:     .25s ease;
}


/* =====================================================================
   2. RESET Y BASE
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background-color: var(--crema);
  color: var(--tinta);
  font-family: var(--fuente-texto);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--acento-oscuro); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 {
  font-family: var(--fuente-titulo);
  font-weight: 500;
  line-height: 1.2;
  color: var(--tinta);
  margin: 0 0 .5em;
  letter-spacing: .2px;
}

h1 { font-size: 2.15rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1.1em; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

/* Foco visible para navegacion con teclado (accesibilidad) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Enlace "saltar al contenido": solo se ve al tabular */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--acento);
  color: #fff;
  padding: .8rem 1.2rem;
  font-weight: 700;
}
.skip-link:focus { left: 8px; top: 8px; }


/* =====================================================================
   3. UTILIDADES
   ===================================================================== */
.container {
  width: 100%;
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 0 20px;
}
.container-estrecho { max-width: var(--ancho-estrecho); }
.container-medio { max-width: 940px; }

.seccion {
  padding: 64px 0;
  /* Deja hueco bajo la cabecera fija al saltar con los enlaces del menu */
  scroll-margin-top: var(--alto-cabecera);
}
/* FONDOS ALTERNOS AUTOMATICOS
   Una seccion de cada dos lleva el fondo crema mas oscuro, para que la pagina
   no sea una plancha lisa. Se calcula solo: no hay que poner ninguna clase.
   Asi, si activas o desactivas una seccion entera (por ejemplo la galeria),
   la alternancia se recoloca sola y nunca quedan dos bloques grises seguidos. */
main > section.seccion:nth-of-type(odd) { background-color: var(--crema-alt); }

.seccion-cabecera {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 40px;
}

.seccion-antetitulo {
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--acento-texto);
  font-weight: 700;
  margin-bottom: .6em;
}

/* Filete decorativo dorado bajo los titulos de seccion */
.seccion-cabecera h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 1px;
  background: var(--dorado);
  margin: .7em auto 0;
}

.seccion-intro { color: var(--tinta-suave); margin-bottom: 0; }

.nota-discreta {
  font-size: .92rem;
  color: var(--tinta-suave);
  font-style: italic;
  text-align: center;
}

.cta-centrado { text-align: center; margin-top: 36px; }

/* --- Botones --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .8em 1.6em;
  border: 1px solid transparent;
  border-radius: var(--radio);
  font-family: var(--fuente-texto);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--transicion), color var(--transicion),
              transform var(--transicion), box-shadow var(--transicion);
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primario {
  background-color: var(--acento);
  color: #fff;
  box-shadow: 0 2px 10px var(--sombra);
}
.btn-primario:hover { background-color: var(--acento-oscuro); color: #fff; }

.btn-whatsapp { background-color: var(--verde-wa); color: #10321f; }
.btn-whatsapp:hover { background-color: var(--verde-wa-osc); color: #fff; }

.btn-sm { padding: .6em 1.1em; font-size: .82rem; }
.btn-lg { padding: .95em 1.9em; font-size: 1rem; }
.btn-bloque { width: 100%; }

.icono-mini { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; }


/* =====================================================================
   4. CABECERA Y NAVEGACION
   ===================================================================== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background-color: rgba(250, 246, 240, .96);
  border-bottom: 1px solid var(--borde);
  backdrop-filter: blur(8px);
}
.site-header.con-sombra { box-shadow: 0 2px 14px var(--sombra); }

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

.logo { display: block; color: var(--tinta); line-height: 1.15; }
.logo:hover { text-decoration: none; }

/* El logo en imagen. Si el archivo img/logo-fotomaton-murcia.png no existe,
   el JavaScript de la etiqueta onerror añade la clase "sin-logo" al enlace
   y entonces se muestra el nombre escrito en texto. */
.logo-img {
  height: 40px;
  width: auto;
  display: block;
}
.logo-texto { display: none; }
.logo.sin-logo .logo-img { display: none; }
.logo.sin-logo .logo-texto { display: block; }

.logo-nombre {
  display: block;
  font-family: var(--fuente-titulo);
  font-size: 1.3rem;
  font-weight: 600;
}
.logo-claim {
  display: block;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

/* --- Boton hamburguesa (solo movil) --- */
.nav-toggle {
  width: 44px; height: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 0 10px;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-toggle-bar {
  display: block;
  height: 2px;
  background-color: var(--tinta);
  transition: transform var(--transicion), opacity var(--transicion);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Menu desplegable en movil --- */
.nav {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background-color: var(--crema);
  border-bottom: 1px solid var(--borde);
  padding: 8px 20px 22px;
  display: none;
  box-shadow: 0 12px 22px var(--sombra);
}
.nav.abierto { display: block; }

.nav-lista li { border-bottom: 1px solid var(--borde); }
.nav-lista a {
  display: block;
  padding: .85em .2em;
  color: var(--tinta);
  font-weight: 700;
  font-size: .95rem;
}
.nav-lista a:hover { color: var(--acento-texto); text-decoration: none; }

.nav-acciones {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 18px;
}
.nav-tel {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  color: var(--tinta);
  font-weight: 700;
  font-size: .95rem;
}
.nav-tel:hover { color: var(--acento-texto); text-decoration: none; }


/* =====================================================================
   5. HERO / PORTADA
   ---------------------------------------------------------------------
   PARA PONER TU FOTO DE PORTADA:
   guarda la imagen en  /img/hero-fotomaton-boda-murcia.jpg  (1920 x 1280 px)
   El degradado de debajo se mantiene como respaldo por si la foto no carga.
   ===================================================================== */
.hero {
  position: relative;
  margin-top: var(--alto-cabecera);
  min-height: 88vh;
  display: flex;
  align-items: center;
  text-align: center;
  background-color: #4a4038;
  background-image: url("../img/hero-fotomaton-boda-murcia.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* Capa oscura para que el texto blanco se lea siempre bien sobre la foto */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(30,25,20,.62) 0%, rgba(30,25,20,.52) 45%, rgba(30,25,20,.72) 100%);
}

.hero-contenido {
  position: relative;
  z-index: 1;
  padding-top: 72px;
  padding-bottom: 72px;
  color: #fff;
}

.hero-antetitulo {
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dorado);
  font-weight: 700;
  margin-bottom: 1em;
}

.hero h1 {
  color: #fff;
  font-size: clamp(2rem, 7.5vw, 3.6rem);
  margin-bottom: .45em;
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
}

.hero-texto {
  max-width: 620px;
  margin: 0 auto 2em;
  font-size: 1.05rem;
  color: #F4EFE8;
}

.hero-botones {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 380px;
  margin: 0 auto;
}

.hero-nota {
  margin: 1.6em 0 0;
  font-size: .85rem;
  letter-spacing: .06em;
  color: #E4DACB;
}


/* =====================================================================
   6. CARTA DE SERVICIOS
   Un panel de papeleria de boda: doble filete dorado, medallones en los
   bordes y los servicios listados con filetes punteados entre ellos.
   ===================================================================== */
.carta {
  position: relative;
  background-color: var(--blanco);
  border: 1px solid var(--dorado);
  padding: 34px 20px 30px;
  box-shadow: 0 10px 34px var(--sombra);
}

/* Filete interior fino, el segundo trazo del marco */
.carta::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid var(--borde);
  pointer-events: none;
}

/* Rombos que se apoyan sobre el marco, arriba y abajo */
.carta-medallon {
  position: absolute;
  left: 50%;
  width: 12px;
  height: 12px;
  background-color: var(--crema);
  border: 1px solid var(--dorado);
  transform: translate(-50%, -50%) rotate(45deg);
}
.carta-medallon-arriba { top: 0; }
.carta-medallon-abajo  { top: 100%; }

.carta-lista {
  display: grid;
  grid-template-columns: 1fr;
  position: relative;
  z-index: 1;
}

.carta-item {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 14px;
  align-items: start;
  padding: 19px 2px;
}
/* Filete punteado de separacion entre servicios */
.carta-item + .carta-item { border-top: 1px dotted var(--borde); }

.carta-icono { display: block; margin-top: 3px; }
.carta-icono svg { width: 22px; height: 22px; fill: var(--acento); display: block; }

.carta-detalle h3 {
  font-size: 1.08rem;
  margin-bottom: .25em;
}
.carta-detalle p {
  margin: 0;
  color: var(--tinta-suave);
  font-size: .95rem;
  line-height: 1.6;
}

.carta-nota {
  position: relative;
  z-index: 1;
  margin: 0;
  padding-top: 22px;
  border-top: 1px solid var(--borde);
  text-align: center;
  font-style: italic;
  font-size: .92rem;
  color: var(--tinta-suave);
}


/* =====================================================================
   7. PASOS "COMO FUNCIONA"
   ===================================================================== */
.pasos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  counter-reset: paso;
}

.paso {
  position: relative;
  background-color: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio-grande);
  padding: 30px 24px 26px;
  text-align: center;
}

.paso-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  margin-bottom: 14px;
  border-radius: 50%;
  background-color: var(--acento);
  color: #fff;
  font-family: var(--fuente-titulo);
  font-size: 1.3rem;
  font-weight: 600;
}

.paso h3 { margin-bottom: .4em; }
.paso p { margin: 0; color: var(--tinta-suave); font-size: .96rem; }


/* =====================================================================
   8. GALERIA
   Los recuadros grises son los "huecos" de las fotos que faltan.
   Al guardar las imagenes reales en /img/ desaparecen solos.
   ===================================================================== */
.galeria {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.galeria-item { margin: 0; }

.marco-foto {
  position: relative;
  margin: 0;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--borde);
  border-radius: var(--radio-grande);
  overflow: hidden;
  /* Relleno gris con textura suave mientras no haya foto real */
  background-color: #DCD5CC;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,.35) 0 12px,
    rgba(255,255,255,0) 12px 24px
  );
}

/* Etiqueta que indica que ahi va una foto y de que medidas */
.marco-foto::after {
  content: attr(data-ph);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #5F564E;
}

/* La foto real, cuando existe, tapa el relleno gris */
.marco-foto img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.marco-foto:hover img { transform: scale(1.04); }


/* =====================================================================
   9. ZONA DE COBERTURA
   ===================================================================== */
.zona-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
.zona-texto h2::after {
  content: "";
  display: block;
  width: 56px; height: 1px;
  background: var(--dorado);
  margin: .7em 0 0;
}
.zona-texto p { color: var(--tinta-suave); }
.zona-texto strong { color: var(--tinta); font-weight: 700; }
.zona-nota { text-align: left; margin-bottom: 1.6em; }

.zona-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-content: flex-start;
}
.zona-lista li {
  background-color: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: .5em 1.1em;
  font-size: .9rem;
  font-weight: 700;
  color: var(--tinta);
}


/* =====================================================================
   10. PRESUPUESTO
   ===================================================================== */
.precios-caja {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  background-color: var(--blanco);
  border: 1px solid var(--borde);
  border-top: 3px solid var(--dorado);
  border-radius: var(--radio-grande);
  padding: 44px 26px;
  box-shadow: 0 8px 28px var(--sombra);
}
.precios-caja h2::after {
  content: "";
  display: block;
  width: 56px; height: 1px;
  background: var(--dorado);
  margin: .7em auto 0;
}
.precios-caja p { color: var(--tinta-suave); }
.precios-caja .btn { margin-top: 10px; }


/* =====================================================================
   11. ACORDEON DE PREGUNTAS FRECUENTES
   ===================================================================== */
.acordeon {
  border-top: 1px solid var(--borde);
  background-color: var(--blanco);
  border-radius: var(--radio-grande);
  overflow: hidden;
  border: 1px solid var(--borde);
}
.acordeon-item + .acordeon-item { border-top: 1px solid var(--borde); }

.acordeon-titulo { margin: 0; font-size: inherit; }

.acordeon-boton {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 20px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--fuente-titulo);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--tinta);
  transition: background-color var(--transicion), color var(--transicion);
}
.acordeon-boton:hover { background-color: var(--crema-alt); color: var(--acento-oscuro); }

/* Signo + / - dibujado con CSS, sin imagenes */
.acordeon-signo {
  position: relative;
  flex-shrink: 0;
  width: 20px; height: 20px;
}
.acordeon-signo::before,
.acordeon-signo::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  background-color: var(--acento);
  transform: translate(-50%, -50%);
  transition: transform var(--transicion), opacity var(--transicion);
}
.acordeon-signo::before { width: 16px; height: 2px; }
.acordeon-signo::after  { width: 2px;  height: 16px; }
.acordeon-boton[aria-expanded="true"] .acordeon-signo::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

.acordeon-panel { padding: 0 20px 22px; }
.acordeon-panel p { margin: 0; color: var(--tinta-suave); font-size: .98rem; }


/* =====================================================================
   12. FORMULARIO DE CONTACTO
   ===================================================================== */
.contacto-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }

.formulario {
  background-color: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio-grande);
  padding: 26px 20px;
  box-shadow: 0 6px 22px var(--sombra);
}

.campo { margin-bottom: 18px; }
.campo-fila { display: grid; grid-template-columns: 1fr; gap: 0; }

.campo label {
  display: block;
  margin-bottom: .4em;
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--tinta);
}
.req { color: var(--acento-texto); }

.campo input,
.campo textarea {
  width: 100%;
  padding: .78em .9em;
  font-family: var(--fuente-texto);
  font-size: 1rem;
  color: var(--tinta);
  background-color: var(--crema);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  transition: border-color var(--transicion), background-color var(--transicion);
}
.campo input:focus,
.campo textarea:focus { background-color: var(--blanco); border-color: var(--acento); }
.campo textarea { resize: vertical; min-height: 120px; }

.campo input.invalido,
.campo textarea.invalido { border-color: var(--error); background-color: #FDF3F2; }

.error {
  margin: .35em 0 0;
  min-height: 0;
  font-size: .84rem;
  font-weight: 700;
  color: var(--error);
}
.error:empty { display: none; }

/* Casilla de la politica de privacidad */
.campo-check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  margin-top: 22px;
}
.campo-check input {
  width: 20px; height: 20px;
  margin-top: 3px;
  accent-color: var(--acento);
  cursor: pointer;
}
.campo-check label {
  margin: 0;
  font-size: .88rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--tinta-suave);
  cursor: pointer;
}
.campo-check label a { text-decoration: underline; }
.error-check { grid-column: 1 / -1; }

/* Campo trampa antispam: invisible pero presente en el HTML */
.campo-trampa {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

#btnEnviar { margin-top: 8px; }
#btnEnviar[disabled] { opacity: .65; cursor: progress; transform: none; }

/* Mensaje de confirmacion o de error tras enviar */
.form-aviso {
  display: none;
  margin: 16px 0 0;
  padding: 14px 16px;
  border-radius: var(--radio);
  font-size: .95rem;
  font-weight: 700;
  border: 1px solid transparent;
}
.form-aviso.visible { display: block; }
.form-aviso.exito {
  display: block;
  color: var(--exito);
  background-color: #EAF3EE;
  border-color: #C6E0D2;
}
.form-aviso.fallo {
  display: block;
  color: var(--error);
  background-color: #FDF3F2;
  border-color: #F0D2CF;
}

.form-legal { text-align: left; margin: 14px 0 0; font-size: .82rem; }

/* --- Columna de datos de contacto --- */
.contacto-datos h3 {
  font-size: 1.15rem;
  margin-bottom: 1em;
}
.contacto-lista { margin-bottom: 30px; }
.contacto-lista li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--borde);
}
.contacto-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: 50%;
  background-color: var(--crema-alt);
  border: 1px solid var(--borde);
}
.contacto-icono svg { width: 20px; height: 20px; fill: var(--acento); }
.contacto-dato { display: block; line-height: 1.4; }
.contacto-dato strong {
  display: block;
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  font-weight: 700;
}
.contacto-dato a { font-weight: 700; color: var(--tinta); }
.contacto-dato a:hover { color: var(--acento-texto); }

.contacto-zona {
  background-color: var(--crema-alt);
  border: 1px solid var(--borde);
  border-radius: var(--radio-grande);
  padding: 22px;
}
.contacto-zona h3 { font-size: 1.05rem; margin-bottom: .5em; }
.contacto-zona p { margin: 0; font-size: .93rem; color: var(--tinta-suave); }


/* =====================================================================
   13. PIE DE PAGINA
   ===================================================================== */
.site-footer {
  background-color: #2E2A26;
  color: #D9D0C5;
  padding: 52px 0 0;
  margin-top: 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  padding-bottom: 36px;
}
.footer-col { min-width: 0; }
.footer-logo {
  font-family: var(--fuente-titulo);
  font-size: 1.35rem;
  color: #fff;
  margin-bottom: .4em;
}
.footer-desc { font-size: .93rem; margin: 0; }

.footer-titulo {
  font-family: var(--fuente-texto);
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dorado);
  font-weight: 700;
  margin-bottom: 1em;
}
.footer-lista li { margin-bottom: .55em; }
.footer-lista a { color: #D9D0C5; font-size: .94rem; }
.footer-lista a:hover { color: #fff; }

.footer-abajo {
  border-top: 1px solid rgba(255,255,255,.12);
  padding-top: 20px;
  padding-bottom: 90px; /* hueco para que el boton de WhatsApp no tape el texto */
}
.footer-abajo p { margin: 0; font-size: .85rem; color: #A79C90; }


/* =====================================================================
   14. BOTON FLOTANTE DE WHATSAPP
   ===================================================================== */
.wa-flotante {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  width: 58px; height: 58px;
  justify-content: center;
  border-radius: 999px;
  background-color: var(--verde-wa);
  color: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  transition: transform var(--transicion), background-color var(--transicion);
}
.wa-flotante:hover {
  background-color: var(--verde-wa-osc);
  transform: scale(1.06);
  text-decoration: none;
}
.wa-flotante svg { width: 30px; height: 30px; fill: #fff; }
.wa-texto {
  display: none;
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .03em;
}


/* =====================================================================
   15. ANIMACIONES SUAVES AL HACER SCROLL
   Los elementos con class="reveal" aparecen con un fundido al llegar.
   ===================================================================== */
/* Solo se ocultan si el navegador tiene JavaScript activado (clase js-activo).
   Asi, si alguien navega sin JavaScript, ve todo el contenido igualmente. */
.js-activo .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.js-activo .reveal.visible { opacity: 1; transform: none; }

/* Respeta a quien tiene desactivadas las animaciones en su sistema */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .js-activo .reveal { opacity: 1; transform: none; }
}


/* =====================================================================
   16. PAGINAS LEGALES (aviso-legal.html y politica-privacidad.html)
   ===================================================================== */
.legal {
  margin-top: var(--alto-cabecera);
  padding: 52px 0 72px;
}
.legal h1 { font-size: 2rem; margin-bottom: .3em; }
.legal .legal-fecha {
  font-size: .88rem;
  color: var(--tinta-suave);
  margin-bottom: 2.2em;
}
.legal h2 {
  font-size: 1.3rem;
  margin-top: 1.8em;
  padding-top: 1.2em;
  border-top: 1px solid var(--borde);
}
.legal h3 { font-size: 1.05rem; margin-top: 1.4em; }
.legal p, .legal li { color: var(--tinta-suave); font-size: .97rem; }
.legal ul { margin: 0 0 1.2em; padding-left: 1.2em; }
.legal ul li { list-style: disc; margin-bottom: .5em; }
.legal table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.4em;
  font-size: .92rem;
}
.legal th, .legal td {
  border: 1px solid var(--borde);
  padding: .7em .8em;
  text-align: left;
  vertical-align: top;
}
.legal th { background-color: var(--crema-alt); color: var(--tinta); }

.volver {
  display: inline-block;
  margin-top: 2.4em;
  font-weight: 700;
}


/* =====================================================================
   RESPONSIVE - Tablet (a partir de 640 px)
   ===================================================================== */
@media (min-width: 640px) {
  .hero-botones { flex-direction: row; justify-content: center; max-width: none; }
  .campo-fila { grid-template-columns: 1fr 1fr; gap: 16px; }
  .carta { padding: 44px 34px 36px; }
  .pasos { grid-template-columns: repeat(2, 1fr); }
  .galeria { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .formulario { padding: 34px 30px; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 34px; }
  .seccion { padding: 80px 0; }

  .wa-flotante {
    width: auto; height: auto;
    padding: .8em 1.3em;
    right: 20px; bottom: 20px;
  }
  .wa-texto { display: inline; }
}


/* =====================================================================
   RESPONSIVE - Escritorio (a partir de 960 px)
   ===================================================================== */
@media (min-width: 960px) {
  body { font-size: 17px; }

  :root { --alto-cabecera: 82px; }

  .logo-img { height: 52px; }

  /* La cabecera pasa a menu horizontal */
  .nav-toggle { display: none; }
  .nav {
    position: static;
    display: flex !important;
    align-items: center;
    gap: 28px;
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    width: auto;
  }
  .nav-lista { display: flex; gap: 24px; }
  .nav-lista li { border: 0; }
  .nav-lista a { padding: .2em 0; font-weight: 400; font-size: .92rem; }
  .nav-lista a:hover { color: var(--acento-texto); }
  .nav-acciones { flex-direction: row; align-items: center; gap: 16px; margin: 0; }
  .nav-tel { font-size: .92rem; }

  .seccion { padding: 96px 0; }
  h2 { font-size: 2.1rem; }

  /* En escritorio la carta pasa a dos columnas, como un menu impreso */
  .carta { padding: 54px 48px 42px; }
  .carta-lista { grid-template-columns: 1fr 1fr; column-gap: 48px; }
  /* En dos columnas, el filete lo llevan todos menos la primera fila */
  .carta-lista .carta-item { border-top: 1px dotted var(--borde); }
  .carta-lista .carta-item:nth-child(1),
  .carta-lista .carta-item:nth-child(2) { border-top: 0; }
  .carta-item-ancho { grid-column: 1 / -1; }
  .pasos { grid-template-columns: repeat(4, 1fr); }

  .zona-grid { grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }

  .contacto-grid { grid-template-columns: 1.25fr .75fr; gap: 46px; align-items: start; }

  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }

  .acordeon-boton { font-size: 1.12rem; padding: 24px 26px; }
  .acordeon-panel { padding: 0 26px 26px; }
}