/* ==========================================================================
   1. CARGA DE FUENTES
   SUSTITUYE POR COMPLETO EL BLOQUE DE @font-face QUE HAY AHORA AL PRINCIPIO
   DE style.css (desde "1. FONT LOADING & BRANDING SETUP" hasta justo antes
   de "Global Reset & Base Canvas Styling").
   --------------------------------------------------------------------------
   Dos cambios respecto a lo anterior:

   1. Las rutas ya no apuntan al disco duro (file:///C:/...), que era el
      motivo de que ningún visitante viera las tipografías, sino a la carpeta
      "fuentes" que debe estar junto a style.css en el servidor.

   2. La familia que antes era Schnyder L (comercial, de Commercial Type)
      pasa a ser BODONI MODA, con licencia SIL Open Font License, libre
      también para uso comercial.

      IMPORTANTE: la familia sigue llamándose 'SchnyderL' a propósito. Así
      no hay que tocar ninguna de las decenas de reglas del archivo que
      dicen font-family: 'SchnyderL'. Solo cambia el archivo que carga.

   Contenido que debe tener la carpeta "fuentes" en el servidor:
       src: url('fuentes/BodoniModa700normal.woff2') format('woff2');
       src: url('fuentes/BodoniModa700italic.woff2') format('woff2');
       src: url('fuentes/BodoniModa600normal.woff2') format('woff2');
       src: url('fuentes/BodoniModa600italic.woff2') format('woff2');
       Poppins-Thin.woff2
       Poppins-Light.woff2
       Poppins-Regular.woff2
       Manrope-VariableFont_wght.woff2
   ========================================================================== */

/* Familia de títulos — Bodoni Moda (SIL OFL) */
@font-face {
  font-family: 'SchnyderL';
  src: url('fuentes/BodoniModa700normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SchnyderL';
  src: url('fuentes/BodoniModa700italic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

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

@font-face {
  font-family: 'SchnyderL';
  src: url('fuentes/BodoniModa600italic.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

/* Fuentes Poppins (SIL OFL) */
@font-face {
  font-family: 'PoppinsThin';
  src: url('fuentes/Poppins-Thin.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PoppinsLight';
  src: url('fuentes/Poppins-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

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

/* Fuente Manrope, variable (SIL OFL) */
@font-face {
  font-family: 'Manrope';
  src: url('fuentes/Manrope-VariableFont_wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}


/* Global Reset & Base Canvas Styling (Optimized for 1920px Desktop Canvas) */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  min-height: 100vh;
  background-color: #e6dfcf;
  color: #3D3B30;
  font-family: 'Manrope', sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* REGLA GLOBAL PARA TODO EL SITIO: Enlaces sin subrayado */
a {
  text-decoration: none;
}

/* ==========================================================================
   2. HEADER / NAVIGATION (Fixed Header Block)
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 1000;
  background: transparent;
  margin-top: 1.5em;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none; /* Container allows pass-through, links enable pointer events */
}

.nav {
  width: 100%;
  max-width: 1920px;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: auto;
}

.nav__group {
  display: flex;
  align-items: center;
}

.nav__group--left {
  gap: 5em;
}

.nav__group--right {
  gap: 5em;
}

.nav__link {
  font-family: 'Poppins-Regular', sans-serif;
  font-size: 2.5rem;
  color: #3D3B30;
  text-decoration: none;
  transition: color 0.3s ease;
}

.nav__link:hover,
.nav__link--active {
  color: #DE6B48;
}

/* Enlace central "IR A INICIO":
   - En páginas secundarias (Contacto, etc.): Color inicial #3d3b30, cambia a #de6b48 en hover.
   - En página Inicio: Permanece en #de6b48 (estado activo/página actual). */
.nav__home {
  font-family: 'Poppins-Regular', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: #3D3B30; /* Color inicial en reposo en páginas secundarias */
  text-decoration: none;
  letter-spacing: 0.03em;
  pointer-events: auto;
  margin-left: 8.5em;
  margin-right: 8.5em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  transition: color 0.3s ease;
}

.nav__home:hover {
  color: #DE6B48;
}

/* Estado activo únicamente en la página Inicio */
.nav__home--active,
body.home-page .nav__home,
.nav__home[aria-current="page"] {
  color: #DE6B48 !important;
  pointer-events: none;
}

/* ==========================================================================
   3. HOME HERO SECTION (Primera pantalla completa - 100vh / 100vw)
   --------------------------------------------------------------------------
   El hero se maqueta sobre un lienzo fijo de 1920 x 1340px (--hero-canvas-w /
   --hero-canvas-h) que se escala automaticamente para encajar entero en
   cualquier pantalla. Asi las medidas del diseno (76.5em, 17rem, 10.5rem...)
   se respetan siempre y nada queda fuera de la vista.
   ========================================================================== */

.hero-section {
  width: 100vw;
  height: 100vh;
  position: relative;
  background-color: #e6dfcf;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__canvas {
  --hero-canvas-w: 1920;   /* Ancho del lienzo de diseno, en px */
  --hero-canvas-h: 1340;   /* Alto del lienzo de diseno, en px  */
  position: relative;
  flex: none;
  width: calc(var(--hero-canvas-w) * 1px);
  height: calc(var(--hero-canvas-h) * 1px);
  transform-origin: center center;
  transform: scale(var(--hero-scale, 1));
}

/* Calculo del factor de escala (se ajusta al ancho o al alto, lo que sea menor) */
@supports (scale: tan(atan2(1px, 1px))) {
  .hero__canvas {
    --hero-scale: min(
      tan(atan2(100vw, calc(var(--hero-canvas-w) * 1px))),
      tan(atan2(100vh, calc(var(--hero-canvas-h) * 1px)))
    );
  }
}

/* Imagenes centradas vertical y horizontalmente (499x750px) */
.hero__image-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 499px;
  height: 750px;
  z-index: 1;
}

.hero__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 499px;
  height: 750px;
  object-fit: cover;
}

.hero__img--base {
  z-index: 1;
}

/* Imagen final: preparada para el futuro efecto de aparicion-desaparicion */
.hero__img--restored {
  z-index: 2;
  opacity: 0;
}

/* Titulo tipografico ("Miguel Lasierra"), delante de las imagenes */
.hero__title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15rem;
  font-family: 'SchnyderL', serif;
  font-weight: 700;
  font-size: 10.5rem;
  color: #f8f0e5;
  letter-spacing: 0.02em;
  z-index: 10;
  pointer-events: none;
  margin: 0;
  line-height: 1;
}

.hero__title-word {
  display: inline-block;
}

/* Bloque de servicios + reclamo, a 76.5em del borde superior del lienzo */
.hero__services-block {
  position: absolute;
  top: 72.5em;            /* Posicion modificable */
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 10;
}

.hero__services {
  font-family: 'SchnyderL', serif;
  font-weight: 700;
  font-size: 2.65rem;
  color: #a18669;
  letter-spacing: 0.01em;
  line-height: 1;
  margin: 0;
  white-space: nowrap;
}

/* Simbolo Wingdings centrado en el hueco de 2.65em que separa cada palabra
   (2.65em de 2.65rem = 7.02rem) */
.hero__symbol {
  --sym-size: 1.15rem;              /* Tamano del rombo (ajustable) */
  display: inline-block;
  width: 2.7rem;                   /* Mantener el valor que ya tengas */
  height: var(--sym-size);
  vertical-align: middle;
  font-size: 0;                     /* Oculta la "v" de respaldo del HTML */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23a18669' d='M50,2.5 L72,24.5 L50,46.5 L28,24.5 Z M75.5,28 L97.5,50 L75.5,72 L53.5,50 Z M50,53.5 L72,75.5 L50,97.5 L28,75.5 Z M24.5,28 L46.5,50 L24.5,72 L2.5,50 Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--sym-size) var(--sym-size);
}

.hero__tagline {
  margin: 1.5em 0 0 0;
  padding-left: 1em;      /* Compensa el espacio final del letter-spacing */
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 1rem;
  color: #a18669;
  letter-spacing: 1em;
  text-transform: uppercase;
  line-height: 1;
}

/* ==========================================================================
   4. (LIBRE) - La antigua seccion "BRAND STATEMENT" de la pagina de Inicio
   se ha retirado del diseno. Se conserva el numero para no alterar la
   numeracion del resto de secciones.
   ========================================================================== */

/* ==========================================================================
   5. SEGUNDA SECCION: AVISO + REJILLA ANTES/DESPUES
   ========================================================================== */

.portfolio-section {
  width: 100vw;
  background-color: #f8f0e5;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 6em;
}

/* El pie queda sobre el mismo fondo crema en la pagina de Inicio */
body.home-page .site-footer {
  background-color: #f8f0e5;
}

/* --------------------------------------------------------------------------
   5.1 BLOQUE "IMPORTANTE"
   -------------------------------------------------------------------------- */

.section-notice {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 8.5rem;    /* 8.5em desde el borde superior de la seccion */
}

.section-notice__rule {
  display: block;
  width: 5rem;            /* 5em de longitud */
  height: 0.5px;
  background-color: #3d3b30;
  flex: none;
}

.section-notice__title {
  font-family: 'SchnyderL', serif;
  font-weight: 700;
  font-size: 2rem;
  color: #de6b48;
  letter-spacing: 0.07em;
  line-height: 1;
  margin: 2rem 0 0 0;     /* 2em bajo la primera linea */
}

.section-notice__text {
  font-family: 'Manrope', sans-serif;
  font-weight: 300;
  font-size: 1rem;
  color: #3d3b30;
  letter-spacing: 0.02em;
  line-height: 1.6em;
  text-align: center;
  max-width: 850px;
  margin: 1.5rem 0 2rem 0; /* 1.5em bajo "IMPORTANTE" / 2em sobre la 2a linea */
}

/* --------------------------------------------------------------------------
   5.2 BLOQUES DE GALERIA (Restauracion, Coloreado, Retoque, Edicion)
   -------------------------------------------------------------------------- */

.portfolio-block {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

/* Primer bloque: 9em bajo la segunda linea horizontal */
.portfolio-block--restauracion {
  margin-top: 9rem;
}

/* Resto de bloques: 13em bajo la base de las dos ultimas fotografias */
.portfolio-block + .portfolio-block {
  margin-top: 7rem;
}

.portfolio-block__title {
  font-family: 'SchnyderL', serif;
  font-weight: 700;
  font-size: 4.5rem;
  color: #3D3B30;
  letter-spacing: 0.01em;
  text-align: center;
  margin: 0;
  line-height: 1;
}

.portfolio-block__paragraph {
  font-family: 'Manrope', sans-serif;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.6em;
  letter-spacing: 0.02em;
  color: #3D3B30;
  text-align: center;
  max-width: 850px;
  margin-top: 2.5rem;     /* 2.5em bajo el titulo */
  margin-bottom: 0;
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, 375px);
  gap: 5.5rem;            /* Separacion horizontal y vertical entre imagenes */
  justify-content: center;
  margin-top: 5.5rem;
}

.portfolio-grid__cell {
  overflow: hidden;
  position: relative;
}

.cell-375x375 {
  width: 375px;
  height: 375px;
}

.cell-375x500 {
  width: 375px;
  height: 500px;
}

.portfolio-grid__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   6. FOOTER BRANDING
   ========================================================================== */

.site-footer {
  width: 100vw;
  background-color: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-top: 2em;
  padding-bottom: 0.5em;
  position: relative;
}

.footer__content {
  width: 100%;
  max-width: 1920px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer__nav {
  display: flex;
  justify-content: center;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 3.5em;
  margin-bottom: 0.7em;
}

.footer__link {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
  color: #3D3B30;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer__link:hover {
  color: #DE6B48;
}

.footer__address {
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: 0.85rem;
  color: #3d3b30;
  letter-spacing: 0.02em;
  font-style: normal;
  margin-top: 0;
  margin-bottom: 0.9em;
}

.footer__copyright {
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: 0.7rem;
  color: #3D3B30;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0;
  padding-bottom: 1em;
  text-align: center;
}

/* Estado activo automático gestionado por JavaScript */
.footer__link--active {
  color: #DE6B48 !important;
}


/* ==========================================================================
   7. CONTACT PAGE STYLING (.contact-page & .contact-section)
   ========================================================================== */

body.contact-page {
  background-color: #f8f0e5;
  min-height: 100vh;
}

.contact-section {
  width: 100vw;
  min-height: auto;
  background-color: #f8f0e5;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  box-sizing: border-box;
}

.contact-wrapper {
  width: 100%;
  max-width: 1920px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  box-sizing: border-box;
  padding-bottom: 0;
}

/* 2. Main Title Line ("Deles una nueva vida a sus fotografías") */
.contact__title {
  font-family: 'SchnyderL', serif;
  font-weight: 600;
  font-size: 7rem;
  color: #3d3b30;
  text-align: center;
  margin-top: 2em;
  margin-bottom: 0;
  line-height: 1.1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.contact__title-accent {
  font-family: 'SchnyderL', serif;
  font-weight: 600;
  font-style: italic;
  color: #de6b48;
}

/* 3. Contact Email Link ("info@miguel-lasierra.com") */
.contact__email-block {
  margin-top: 7em; /* Positions top baseline cleanly at ~35em from viewport top */
  text-align: center;
}

.contact__email {
  display: inline-block;
  font-family: 'SchnyderL', serif;
  font-weight: 600;
  font-style: normal;
  font-size: 9.5rem;
  color: #de6b48;
  text-decoration: none;
  line-height: 1;
  position: relative;
  padding-bottom: 8px;
}

/* EFECTO HOVER DE EMAIL:
   Al entrar el puntero, se desliza de izquierda a derecha.
   Al salir el puntero, se retira hacia la derecha a la misma velocidad. */
.contact__email::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -0.05em;
  width: 100%;
  height: 5px;
  background-color: #de6b48;
  transform: scaleX(0);
  transform-origin: left center; /* Retiro a la izquierda al salir el puntero */
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.contact__email:hover::after {
  transform: scaleX(1);
  transform-origin: left center; /* Deslizamiento desde la izquierda al entrar */
}

/* 4. Contact Form ("FORMULARIO") */
.contact-form {
  width: 81.4em; /* En lienzo de 1920px (81.4em = 1302.4px), desde 19.25em hasta 100.65em */
  max-width: 90vw;
  margin-top: 9em; /* Alineación vertical de campos ~46em desde top */
  margin-bottom: 7em;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.form-row--two-cols {
  display: flex;
  justify-content: space-between;
  gap: 6.4em; /* Espacio entre campo Nombre (37.5em) y Email (37.5em) */
  width: 100%;
}

.form-field--nombre,
.form-field--email {
  width: 37.5em; /* 600px de longitud de línea cada uno */
  max-width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

.form-row--full {
  margin-top: 4.8em; /* Alineación vertical línea Pregunta/Consulta ~52em desde top */
  width: 100%;
}

.form-field--consulta {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

.form-label {
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  color: #3d3b30;
  letter-spacing: 0.03em;
  margin-bottom: 5px; /* Posición vertical: 5px sobre la línea de campo */
  display: block;
}

.form-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 0.5px solid #3d3b30; /* Altura 0.5px, color #3d3b30 */
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  color: #3d3b30;
  padding: 4px 0;
  outline: none;
  border-radius: 0;
  box-sizing: border-box;
}

.form-input:focus {
  border-bottom-color: #de6b48;
}

/* Fila Checkbox & Botón Enviar */
.form-row--actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 25px; /* Exactamente 25px bajo la línea de Pregunta/Consulta */
  width: 100%;
}

.form-checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}

.form-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 1em;
  height: 1em;
  background-color: #ffffff;
  border: 1px solid #3d3b30;
  border-radius: 0;
  cursor: pointer;
  display: inline-block;
  position: relative;
  margin: 0;
  flex-shrink: 0;
}

.form-checkbox:checked {
  background-color: #ffffff;
}

.form-checkbox:checked::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 4px;
  width: 4px;
  height: 8px;
  border: solid #3d3b30;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.form-checkbox-label {
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: 0.85rem;
  color: #3d3b30;
  letter-spacing: 0.03em;
}

.privacy-link {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  color: #3d3b30;
  font-size: 0.85rem;
  text-decoration: none;
  transition: color 0.3s ease;
}

.privacy-link:hover {
  color: #de6b48;
}

.form-submit {
  background: transparent;
  border: none;
  outline: none;
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  color: #3d3b30;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  padding: 0;
  transition: color 0.3s ease;
}

.form-submit:hover {
  color: #de6b48;
}

/* Adaptación responsive para pantallas más pequeñas / portátiles */
@media (max-width: 1400px) {
  .contact__title {
    font-size: 5.5rem;
    margin-top: 14em;
    white-space: normal;
  }
  .contact__email {
    font-size: 8rem;
  }
  .contact-form {
    width: 90vw;
  }
}

@media (max-width: 900px) {
  .contact__title {
    font-size: 3.2rem;
    white-space: normal;
    padding: 0 1em;
    margin-top: 8em;
  }
  .contact__email {
    font-size: 4.5rem;
    word-break: break-all;
  }
  .form-row--two-cols {
    flex-direction: column;
    gap: 2.5em;
  }
  .form-field--nombre,
  .form-field--email {
    width: 100%;
  }
  .form-row--actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5em;
  }
  .form-submit {
    align-self: flex-end;
  }
}

/* ==========================================================================
   AÑADIR AL FINAL DE LA SECCIÓN 7 (CONTACT PAGE STYLING) DE style.css
   ========================================================================== */

/* Campo trampa antispam: fuera de la pantalla, invisible para las personas
   pero presente en el código, que es donde lo encuentran los robots.
   No usar display:none — muchos robots ignoran los campos ocultos así. */
.form-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Mensaje de confirmación o de error tras enviar el formulario */
.form-message {
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.03em;
  line-height: 1.6em;
  text-align: center;
  max-width: 45em;
  margin: 4em auto 0;
  outline: none;
}

.form-message--ok {
  color: #3d3b30;
}

.form-message--error {
  color: #de6b48;
}

/* ==========================================================================
   8. AVISO LEGAL PAGE STYLING (.legal-page & .legal-section)
   Seamless integration with existing style.css & site architecture
   ========================================================================== */

/* Background Color */
body.legal-page {
  background-color: #f8f0e5;
  min-height: 100vh
}

.legal-section {
  width: 100%;
  min-height: 100vh;
  background-color: #f8f0e5;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  box-sizing: border-box;
}

/* Main Text Container (Desktop Layout) */
.legal-wrapper {
  width: 100%;
  max-width: 62em; /* Maximum width of exactly 62em */
  margin-top: 15em; /* Top layout spacing equivalent to 15em from top edge */
  margin-bottom: 8em;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  box-sizing: border-box;
}

/* Page Header & Main Title */
.legal-header {
  margin-bottom: 3.5em;
}

.legal__title {
  font-family: 'SchnyderL', Georgia, serif;
  font-weight: 700;
  font-size: 4.5rem;
  line-height: 1.1;
  color: #3D3B30;
  margin-bottom: 0.4em;
}

.legal__last-updated {
  font-family: 'Manrope', sans-serif;
  font-weight: 300;
  font-size: 1rem;
  color: #3D3B30;
  letter-spacing: 0.03em;
  margin-bottom: 1.5em; /* Reducido un 25% */
}

.legal__intro {
  font-family: 'Manrope', sans-serif;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.6em;
  color: #3D3B30;
  letter-spacing: 0.03em;
  margin-bottom: 1.5em; /* Reducido un 25% */
}

/* Legal Content Blocks & Subtitles */
.legal-block {
  margin-bottom: 3.5em;
}

.legal__subtitle {
  font-family: 'SchnyderL', Georgia, serif;
  font-weight: 700;
  font-size: 2.25rem;
  line-height: 1.2;
  color: #3D3B30;
  margin-bottom: 1.125em; /* Reducido un 50% (de 2.25em a 1.125em) */
}

/* Body Text & Paragraph Spacing */
.legal__content p {
  font-family: 'Manrope', sans-serif;
  font-weight: 300;
  font-size: 1rem;
  color: #3D3B30;
  line-height: 1.6em;
  letter-spacing: 0.03em;
  margin-bottom: 1.5em; /* Reducido un 25% (de 2em a 1.5em) */
}

.legal__content p:last-child {
  margin-bottom: 0;
}

.legal__content strong {
  font-weight: 500;
  color: #3D3B30;
}

/* Links in Text - Regla sin subrayado */
.legal__link,
.legal__content a {
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 1rem;
  color: #3D3B30;
  letter-spacing: 0.03em;
  text-decoration: none; /* Sin subrayado */
  transition: color 0.3s ease;
}

.legal__link:hover,
.legal__content a:hover,
.legal__link:focus-visible,
.legal__content a:focus-visible {
  color: #de6b48;
  text-decoration: none; /* Sin subrayado en hover */
}

/* Data List Paragraph Spacing (Section 01) */
.legal__data-list p {
  margin-bottom: 0.6em;
}

/* Lists Styling (Section 03, 05) */
.legal__list {
  list-style-type: none;
  margin-bottom: 1.5em; /* Reducido un 25% */
  padding-left: 0;
}

.legal__list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.6em;
  font-family: 'Manrope', sans-serif;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.6em;
  color: #3D3B30;
  letter-spacing: 0.03em;
}

.legal__list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: #3D3B30;
  font-weight: 300;
}

/* Header & Footer Position Adjustments for Legal Page
body.legal-page .site-header {
  position: absolute;
  top: 2.5em; /* Positioned 2.5em from top edge 
  margin-top: 0;
}*/

body.legal-page .site-footer {
  padding-bottom: 1em; /* Positioned 1em from bottom edge */
}

/* --------------------------------------------------------------------------
   RESPONSIVE / MOBILE & TABLET ADAPTATION
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
  .legal-wrapper {
    margin-top: 10em;
    padding-left: 5%;
    padding-right: 5%;
  }
}

@media screen and (max-width: 768px) {
  body.legal-page .site-header {
    top: 1.5em;
  }

  .legal-wrapper {
    margin-top: 7em;
    margin-bottom: 4em;
    padding-left: 6%;
    padding-right: 6%;
  }

  .legal__title {
    font-size: 2.5rem;
  }

  .legal__subtitle {
    font-size: 1.8rem;
    margin-bottom: 1em;
  }

  .legal-block {
    margin-bottom: 3em;
  }
}

@media screen and (max-width: 480px) {
  .legal-wrapper {
    margin-top: 5.5em;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .legal__title {
    font-size: 2.3rem;
  }
}

/* ==========================================================================
   9. PROCESO-TARIFAS PAGE STYLING (.proceso-tarifas-page & .proceso-tarifas-section)
   Seamless integration with existing style.css & site architecture
   ========================================================================== */

/* Background Color */
body.proceso-tarifas {
  background-color: #e6dfcf;
  min-height: 100vh
}

.proceso-tarifas-section {
  width: 100%;
  min-height: 100vh;
  background-color: #e6dfcf;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  box-sizing: border-box;
}

/* Main Text Container (Desktop Layout) */
.proceso-tarifas-wrapper {
  width: 100%;
  max-width: 62em; /* Maximum width of exactly 62em */
  margin-top: 15.6em; /* Top layout spacing equivalent to 15.6em from top edge */
  margin-bottom: 8em;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  box-sizing: border-box;
}

/* Page Header & Main Title */
.proceso-tarifas-header {
  margin-bottom: 3.5em;
}

.proceso-tarifas__title {
  font-family: 'SchnyderL', Georgia, serif;
  font-weight: 700;
  font-size: 4.5rem;
  line-height: 1.1;
  color: #3D3B30;
  margin-bottom: 0.4em;
  letter-spacing: 0.05em;
}

.proceso-tarifas__last-updated {
  font-family: 'Manrope', sans-serif;
  font-weight: 300;
  font-size: 1rem;
  color: #3D3B30;
  letter-spacing: 0.03em;
  margin-bottom: 1.5em; /* Reducido un 25% */
}

.proceso-tarifas__intro {
  font-family: 'Manrope', sans-serif;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.6em;
  color: #3D3B30;
  letter-spacing: 0.03em;
  margin-bottom: 1.5em; /* Reducido un 25% */
}

/* Proceso-tarifas Content Blocks & Subtitles */
.proceso-tarifas-block {
  margin-bottom: 3.5em;
}

.proceso-tarifas__subtitle {
  font-family: 'SchnyderL', Georgia, serif;
  font-weight: 700;
  font-size: 2.25rem;
  line-height: 1.2;
  color: #3D3B30;
  margin-bottom: 1.125em; /* Reducido un 50% (de 2.25em a 1.125em) */
}

/* Body Text & Paragraph Spacing */
.proceso-tarifas__content p {
  font-family: 'Manrope', sans-serif;
  font-weight: 300;
  font-size: 1rem;
  color: #3D3B30;
  line-height: 1.6em;
  letter-spacing: 0.03em;
  margin-bottom: 1.5em; /* Reducido un 25% (de 2em a 1.5em) */
}

.proceso-tarifas__content p:last-child {
  margin-bottom: 0;
}

.proceso-tarifas__content strong {
  font-weight: 500;
  color: #3D3B30;
}

/* Links in Text - Regla sin subrayado */
.proceso-tarifas__link,
.proceso-tarifas__content a {
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 1rem;
  color: #3D3B30;
  letter-spacing: 0.03em;
  text-decoration: none; /* Sin subrayado */
  transition: color 0.3s ease;
}

.proceso-tarifas__link:hover,
.proceso-tarifas__content a:hover,
.proceso-tarifas__link:focus-visible,
.proceso-tarifas__content a:focus-visible {
  color: #de6b48;
  text-decoration: none; /* Sin subrayado en hover */
}

/* Data List Paragraph Spacing (Section 01) */
.proceso-tarifas__data-list p {
  margin-bottom: 0.6em;
}

/* Lists Styling (Section 03, 05) */
.proceso-tarifas__list {
  list-style-type: none;
  margin-bottom: 1.5em; /* Reducido un 25% */
  padding-left: 0;
}

.proceso-tarifas__list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.6em;
  font-family: 'Manrope', sans-serif;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.6em;
  color: #3D3B30;
  letter-spacing: 0.03em;
}

.proceso-tarifas__list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: #3D3B30;
  font-weight: 300;
}

/* Header & Footer Position Adjustments for Proceso-tarifas Page */
body.proceso-tarifas-page .site-header {
  position: absolute;
  top: 1.5em; /* Positioned 1.5em from top edge */
  margin-top: 0;
}

body.proceso-tarifas-page .site-footer {
  padding-bottom: 1em; /* Positioned 1em from bottom edge */
}

/* --------------------------------------------------------------------------
   RESPONSIVE / MOBILE & TABLET ADAPTATION
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
  .proceso-tarifas-wrapper {
    margin-top: 10em;
    padding-left: 5%;
    padding-right: 5%;
  }
}

@media screen and (max-width: 768px) {
  body.proceso-tarifas-page .site-header {
    top: 1.5em;
  }

  .proceso-tarifas-wrapper {
    margin-top: 7em;
    margin-bottom: 4em;
    padding-left: 6%;
    padding-right: 6%;
  }

  .proceso-tarifas__title {
    font-size: 2.5rem;
  }

  .proceso-tarifas__subtitle {
    font-size: 1.8rem;
    margin-bottom: 1em;
  }

  .proceso-tarifas-block {
    margin-bottom: 3em;
  }
}

@media screen and (max-width: 480px) {
  .proceso-tarifas-wrapper {
    margin-top: 5.5em;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .proceso-tarifas__title {
    font-size: 2.3rem;
  }
}

/* ==========================================================================
   TABLA DE TARIFAS (Contenedor de 62em)
   ========================================================================== */

.table_component {
    width: 62em; /* Anchura total exacta solicitada */
    margin: 0 auto; /* Centra la tabla horizontalmente en la página */
}

.table_component table {
    width: 100%;
    table-layout: fixed; /* Fuerza a las 6 columnas a medir exactamente lo mismo */
    border-collapse: collapse; /* Une los bordes para que midan 0.5px reales */
    border: 0.5px solid #3d3b30; /* Borde exterior general oscuro */
}

/* Configuración de la Fila de Cabecera */
.table_component th {
    height: 3.5em; /* Altura de cabecera solicitada */
    background-color: #3d3b30;
    color: #f8f0e5;
    
    /* Tipografía Cabecera */
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    
    /* Centrado absoluto */
    text-align: center;
    vertical-align: middle;
    padding: 0;
    
    /* Bordes de separación verticales en crema y horizontales en oscuro */
    border: 0.5px solid #3d3b30;
    border-right: 0.5px solid #f8f0e5; 
}

/* Quita el borde crema a la última celda de la cabecera para que no toque el borde exterior */
.table_component th:last-child {
    border-right: 0.5px solid #3d3b30;
}

/* Configuración de las Celdas de Precios */
.table_component td {
    height: 2.2em; /* Altura de precios solicitada */
    background-color: #f8f0e5;
    color: #3d3b30;
    border: 0.5px solid #3d3b30; /* Bordes de separación oscuros */
    
    /* Tipografía Celdas */
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    font-size: 0.9rem;
    letter-spacing: 0.03em;
    
    /* Centrado absoluto */
    text-align: center;
    vertical-align: middle;
    padding: 0;
}

/* ==========================================================================
   ADAPTACIÓN DE LA TABLA PARA MÓVILES (Pantallas de menos de 768px)
   ========================================================================== */
@media screen and (max-width: 768px) {
    /* Rompe el contenedor fijo de 62em para que se adapte al ancho del móvil */
    .table_component {
        width: 100%;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        box-sizing: border-box;
    }

    /* Transforma la tabla en un bloque vertical */
    .table_component table, 
    .table_component thead, 
    .table_component tbody, 
    .table_component th, 
    .table_component td, 
    .table_component tr { 
        display: block; 
        width: 100%;
    }
    
    /* Esconde la cabecera horizontal original (no cabe en pantallas móviles) */
    .table_component thead tr { 
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    
    .table_component tr {
        border: 0.5px solid #3d3b30;
        margin-bottom: 1em;
    }
    
    /* Formatea cada celda de precio como una fila independiente con su título al lado */
    .table_component td { 
        border: none;
        border-bottom: 0.5px solid #3d3b30; 
        position: relative;
        padding-left: 50%; /* Deja la mitad izquierda para el nombre del servicio */
        text-align: right; /* Mueve el precio a la derecha */
        padding-right: 1.5rem;
        height: 3em; /* Un poco más de altura para que el dedo pueda pulsar bien */
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    
    .table_component td:last-child {
        border-bottom: none;
    }
    
    /* Inyecta de forma automática los títulos correspondientes en la parte izquierda */
    .table_component td:nth-of-type(1)::before { content: "RESTAURACIÓN"; }
    .table_component td:nth-of-type(2)::before { content: "COLOREADO"; }
    .table_component td:nth-of-type(3)::before { content: "RESTAURACIÓN Y COLOREADO"; }
    .table_component td:nth-of-type(4)::before { content: "RETOQUE"; }
    .table_component td:nth-of-type(5)::before { content: "EDICIÓN"; }
    .table_component td:nth-of-type(6)::before { content: "FOTOMONTAJE"; }
    
    /* Estilo para los títulos auto-inyectados a la izquierda */
    .table_component td::before { 
        position: absolute;
        left: 1.5rem;
        width: 45%; 
        padding-right: 10px; 
        white-space: nowrap;
        text-align: left;
        font-family: 'Manrope', sans-serif;
        font-weight: 500;
        font-size: 0.85rem;
        color: #3d3b30;
        letter-spacing: 0.03em;
        text-transform: uppercase;
    }
}

/* ==========================================================================
   10. MAQUETACIÓN EXACTA PÁGINA DE ENVÍO
   ========================================================================== */

body.envio-page {
    background-color: #e6dfcf !important;
}

.envio-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    padding-bottom: 6em;
}

/* Título de la página */
.envio__main-title {
    font-family: 'SchnyderL', Georgia, serif !important;
    font-weight: 700 !important;
    font-size: 4.5rem !important;
    color: #3D3B30 !important;
    letter-spacing: 0.02em !important;
    text-align: center;
    margin-top: 3em !important;
    margin-bottom: 0 !important;
}

/* Rejilla estructural de las dos columnas */
.envio-grid-container {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 8.15em !important; /* Separación solicitada */
    width: 100% !important;
    max-width: calc(31.25em * 2 + 8.15em) !important;
    margin-top: 5.5em !important;
}

.envio-col {
    width: 31.25em !important; /* Ancho exacto solicitado */
    display: flex;
    flex-direction: column;
}

.envio__subtitle {
    font-family: 'SchnyderL', Georgia, serif !important;
    font-weight: 700 !important;
    font-size: 2.5rem !important;
    color: #3D3B30 !important;
    letter-spacing: 0.02em !important;
    text-align: center;
    margin: 0 0 1em 0 !important;
}

.envio__img-wrapper {
    width: 100%;
    margin-bottom: 3em;
}

.envio__img-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

.envio-col p {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 300 !important;
    font-size: 1rem !important;
    color: #3D3B30 !important;
    line-height: 1.6em !important;
    letter-spacing: 0.02em !important;
    margin-bottom: 2em !important;
    text-align: justify;
}

.envio__inline-link {
    font-weight: 600 !important;
    color: #3D3B30 !important;
}

.envio__inline-link:hover {
    color: #DE6B48 !important;
}

/* Efecto hover para el texto "O SÚBALAS DESDE AQUÍ" al pasar el ratón por la caja */
.envio-dropzone:hover .dropzone__text-sub {
    color: #DE6B48 !important;
}

/* Efecto hover para el botón ENVIAR */
.envio-submit-btn:hover {
    color: #DE6B48 !important;
    transition: color 0.3s ease !important;
}


/* ==========================================================================
   ESTILOS DEL FORMULARIO INTERNO DE ENVÍO
   ========================================================================== */

.envio-form-block {
    margin-top: 4.5em;
    width: 100%;
}

.envio-form__title {
    font-family: 'SchnyderL', Georgia, serif !important;
    font-weight: 700 !important;
    font-size: 2rem !important;
    color: #3D3B30 !important;
    letter-spacing: 0.02em !important;
    margin-bottom: 2em;
}

.envio-form__field {
    display: flex;
    flex-direction: column;
    margin-bottom: 3.5em;
}

.envio-form__label {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 300 !important;
    font-size: 1rem !important;
    color: #3D3B30 !important;
    letter-spacing: 0.02em !important;
    margin-bottom: 5px;
}

.envio-form__input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 0.5px solid #3d3b30;
    font-family: 'Manrope', sans-serif !important;
    font-size: 1rem !important;
    color: #3d3b30 !important;
    padding: 6px 0;
    outline: none;
}

/* Caja de arrastrar archivos */
.envio-dropzone {
    width: 100%;
    height: 9.5em;
    background-color: #f8f0e5;
    border: 0.5px dashed #3D3B30;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-bottom: 2em;
}

.dropzone__text-main {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 300 !important;
    font-size: 1rem !important;
    color: #3D3B30 !important;
    letter-spacing: 0.02em !important;
}

.dropzone__text-sub {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    color: #3D3B30 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase;
}

.envio-file-input {
    display: none;
}

.envio-form__actions {
    display: flex;
    flex-direction: column;
    gap: 2.5em;
}

.envio-checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.envio-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 1em;
    height: 1em;
    background-color: #ffffff;
    border: 1px solid #3D3B30;
    cursor: pointer;
}

.envio-checkbox-label {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 300 !important;
    font-size: 0.9rem !important;
    color: #3D3B30 !important;
    letter-spacing: 0.02em !important;
}

.envio-privacy-link {
    font-weight: 600 !important;
    color: #3D3B30 !important;
}

.envio-privacy-link:hover {
    color: #DE6B48 !important;
}


.envio-submit-btn {
    background: transparent;
    border: none;
    font-family: 'Manrope', sans-serif !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
    color: #3D3B30 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em !important;
    cursor: pointer;
}

/* ADAPTABILIDAD EN MÓVILES */
@media screen and (max-width: 1024px) {
    .envio-grid-container {
        flex-direction: column !important;
        align-items: center !important;
        gap: 5em !important;
    }
    .envio-col {
        width: 100% !important;
        max-width: 31.25em !important;
    }
}

/* ==========================================================================
   AÑADIR AL FINAL DE LA SECCIÓN 10 (PÁGINA DE ENVÍO) DE style.css
   Requiere que ya estén en el archivo las reglas .form-hp y .form-message
   que se añadieron con el formulario de Contacto (sección 7).
   ========================================================================== */

/* El mensaje de estado, dentro de la columna del formulario, va alineado
   a la izquierda y pegado al bloque, no centrado como en Contacto. */
.envio-form-block .form-message {
  margin: 0 0 2.5em 0;
  max-width: 100%;
  text-align: left;
}

/* Realce del recuadro mientras se arrastran archivos encima */
.envio-dropzone.dragover {
  border-style: solid;
  border-color: #de6b48;
}

.envio-dropzone.dragover .dropzone__text-main,
.envio-dropzone.dragover .dropzone__text-sub {
  color: #de6b48 !important;
}

/* --------------------------------------------------------------------------
   MARCA DE VERIFICACIÓN DE LA CASILLA DE PRIVACIDAD
   .envio-checkbox oculta la casilla nativa con appearance:none, pero no
   dibujaba nada al marcarla: parecía que no se podía seleccionar.
   -------------------------------------------------------------------------- */

.envio-checkbox {
  position: relative;   /* Necesario para colocar la marca dentro */
}

.envio-checkbox:checked::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 4px;
  width: 4px;
  height: 8px;
  border: solid #3D3B30;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Visible también para quien navega con el teclado */
.envio-checkbox:focus-visible {
  outline: 2px solid #DE6B48;
  outline-offset: 2px;
}

/* ==========================================================================
   11. CONSULTAS PAGE STYLING (.consultas-page & .consultas-section)
   Acordeón de consultas frecuentes. Misma arquitectura que
   PROCESO-TARIFAS y AVISO LEGAL: contenedor de 62em, SchnyderL para los
   títulos, Manrope para el texto y paleta #3D3B30 / #DE6B48.
   ========================================================================== */

/* Fondo de página */
body.consultas-page {
  background-color: #e6dfcf;
  min-height: 100vh;
}

.consultas-section {
  width: 100%;
  min-height: 100vh;
  background-color: #e6dfcf;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  box-sizing: border-box;
}

/* Contenedor principal de texto (idéntico al de Proceso y tarifas) */
.consultas-wrapper {
  width: 100%;
  max-width: 62em;
  margin-top: 15.6em;
  margin-bottom: 8em;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   11.1 CABECERA DE LA PÁGINA
   -------------------------------------------------------------------------- */
.consultas-header {
  margin-bottom: 3.5em;
}

.consultas__title {
  font-family: 'SchnyderL', Georgia, serif;
  font-weight: 700;
  font-size: 4.5rem;
  line-height: 1.1;
  color: #3D3B30;
  letter-spacing: 0.05em;
  text-align: center;
  margin: 0 0 0.55em 0;
}

/* Texto introductorio: bloque centrado, texto alineado a la izquierda */
.consultas__intro {
  font-family: 'Manrope', sans-serif;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.6em;
  letter-spacing: 0.03em;
  color: #3D3B30;
  max-width: 45em;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   11.2 ACORDEÓN DE CATEGORÍAS
   -------------------------------------------------------------------------- */
.faq-accordion {
  margin-top: 4.5em;
  border-top: 1px solid rgba(61, 59, 48, 0.25);
}

.faq-item {
  border-bottom: 1px solid rgba(61, 59, 48, 0.25);
}

/* Reset del <h2> que envuelve el botón: la tipografía la define .faq-item__title */
.faq-item h2 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* Cabecera pulsable de cada categoría */
.faq-item__header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5em;
  padding: 1.75rem 0;
  margin: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  outline: none;
  box-shadow: none;
  cursor: pointer;
  text-align: left;
  color: #3D3B30;
  transition: color 0.3s ease;
  -webkit-appearance: none;
  appearance: none;
}

.faq-item__header:hover,
.faq-item__header:focus-visible {
  color: #DE6B48;
}

.faq-item__title {
  font-family: 'SchnyderL', Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 3vw, 2.9rem);
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: inherit;
}

/* Chevron: hereda el color de la cabecera y gira al abrirse */
.faq-item__chevron {
  width: 34px;
  height: 24px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}

.faq-item.is-open .faq-item__chevron {
  transform: rotate(180deg);
}

/* Cuerpo desplegable.
   Se anima con grid-template-rows (0fr -> 1fr): permite una transición
   suave sin necesidad de calcular alturas fijas desde JavaScript. */
.faq-item__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}

.faq-item.is-open .faq-item__panel {
  grid-template-rows: 1fr;
}

.faq-item__panel-inner {
  overflow: hidden;
  min-height: 0;
}

.faq-item__content {
  padding: 0 0 2.5em 1.75rem;
  border-left: 1px solid rgba(61, 59, 48, 0.18);
  opacity: 0;
  transition: opacity 0.35s ease 0.05s;
}

.faq-item.is-open .faq-item__content {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   11.3 PREGUNTAS Y RESPUESTAS
   -------------------------------------------------------------------------- */
.faq-question {
  margin-bottom: 2.5em;
}

.faq-question:last-child {
  margin-bottom: 0;
}

.faq-question__title {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: #3D3B30;
  margin: 0 0 0.7em 0;
}

.faq-question__answer p {
  font-family: 'Manrope', sans-serif;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.6em;
  letter-spacing: 0.03em;
  color: #3D3B30;
  margin-bottom: 1.2em;
}

.faq-question__answer p:last-child {
  margin-bottom: 0;
}

.faq-question__answer strong {
  font-weight: 500;
}

/* Enlaces dentro de las respuestas */
.faq-question__answer a {
  font-weight: 500;
  color: #3D3B30;
  text-decoration: none;
  transition: color 0.3s ease;
}

.faq-question__answer a:hover,
.faq-question__answer a:focus-visible {
  color: #DE6B48;
}

/* Cabecera y pie en la página de Consultas (igual que Proceso y tarifas) */
body.consultas-page .site-header {
  position: absolute;
  top: 1.5em;
  margin-top: 0;
}

body.consultas-page .site-footer {
  padding-bottom: 1em;
}

/* --------------------------------------------------------------------------
   RESPONSIVE / MOBILE & TABLET ADAPTATION
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
  .consultas-wrapper {
    margin-top: 10em;
    padding-left: 5%;
    padding-right: 5%;
  }
}

@media screen and (max-width: 768px) {
  body.consultas-page .site-header {
    top: 1.5em;
  }

  .consultas-wrapper {
    margin-top: 7em;
    margin-bottom: 4em;
    padding-left: 6%;
    padding-right: 6%;
  }

  .consultas__title {
    font-size: 2.5rem;
  }

  .consultas-header {
    margin-bottom: 2.5em;
  }

  .faq-accordion {
    margin-top: 3em;
  }

  .faq-item__header {
    padding: 1.25rem 0;
    gap: 1em;
  }

  .faq-item__chevron {
    width: 26px;
    height: 18px;
  }

  .faq-item__content {
    padding-left: 1.25rem;
    padding-bottom: 2em;
  }

  .faq-question__title {
    font-size: 1.15rem;
  }
}

@media screen and (max-width: 480px) {
  .consultas-wrapper {
    margin-top: 5.5em;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .consultas__title {
    font-size: 2.3rem;
  }
}

/* Respeta la preferencia del sistema de reducir animaciones */
@media (prefers-reduced-motion: reduce) {
  .faq-item__panel,
  .faq-item__chevron,
  .faq-item__content {
    transition: none;
  }
}

/* ==========================================================================
   12. CABECERA ADAPTABLE Y MENÚ DE MÓVIL
   --------------------------------------------------------------------------
   Dos comportamientos, con la frontera en 900px (el mismo valor que usa
   script.js para cerrar el menú al ensanchar la ventana):

     · Por encima de 900px  -> menú horizontal que encoge de forma fluida.
       Los tamaños y las separaciones se calculan con clamp(), de modo que a
       1920px se ven exactamente como se diseñaron y a partir de ahí menguan
       en proporción, sin desbordarse nunca.

     · Por debajo de 900px  -> barra fija de 4.5em con botón de tres rayas.
       Al pulsarlo, el menú ocupa toda la pantalla.

   El JavaScript ya existente añade la clase "is-open" a .site-header y
   "menu-abierto" al <body>. Aquí solo se define su aspecto.
   ========================================================================== */

/* Color de fondo de cada página, para la barra y el menú de móvil */
:root {
  --fondo-pagina: #e6dfcf;
}

body.contact-page,
body.legal-page {
  --fondo-pagina: #f8f0e5;
}

/* --------------------------------------------------------------------------
   12.1 ESCRITORIO: ESCALADO FLUIDO
   -------------------------------------------------------------------------- */

/* 2.5rem a 1920px de ancho; por debajo mengua sin bajar de 1.05rem */
.nav__link {
  font-size: clamp(1.05rem, 2.08vw, 2.5rem);
  white-space: nowrap;
}

/* 5em a 1920px */
.nav__group--left,
.nav__group--right {
  gap: clamp(1rem, 4.17vw, 5rem);
}

/* 8.5em de margen a cada lado y 1rem de texto, ambos a 1920px */
.nav__home {
  font-size: clamp(0.7rem, 0.83vw, 1rem);
  margin-left: clamp(1rem, 7.08vw, 8.5rem);
  margin-right: clamp(1rem, 7.08vw, 8.5rem);
  white-space: nowrap;
}

/* El botón de tres rayas no existe en escritorio */
.nav__toggle {
  display: none;
}

/* --------------------------------------------------------------------------
   12.2 MÓVIL Y TABLETA (hasta 900px)
   -------------------------------------------------------------------------- */

@media screen and (max-width: 900px) {

  /* La cabecera pasa a ser una barra fija, por delante de todo.
     Se repiten los selectores de las páginas que la recolocan
     (Proceso y tarifas, Consultas) para que también obedezcan aquí. */
  .site-header,
  body.proceso-tarifas-page .site-header,
  body.consultas-page .site-header,
  body.legal-page .site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4.5em;
    margin-top: 0;
    padding: 0 1.25rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background-color: var(--fondo-pagina);
    pointer-events: auto;
  }

  /* Botón de tres rayas */
  .nav__toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 2.75em;
    height: 2.75em;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    pointer-events: auto;
    position: relative;
    z-index: 1002;
    -webkit-tap-highlight-color: transparent;
  }

  .nav__toggle-bar {
    display: block;
    width: 26px;
    height: 2px;
    margin: 0 auto;
    background-color: #3D3B30;
    border-radius: 2px;
    transition: transform 0.35s ease, opacity 0.25s ease, background-color 0.3s ease;
  }

  .nav__toggle:hover .nav__toggle-bar {
    background-color: #DE6B48;
  }

  /* Con el menú abierto, las tres rayas se convierten en un aspa */
  .site-header.is-open .nav__toggle-bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .site-header.is-open .nav__toggle-bar:nth-child(2) {
    opacity: 0;
  }

  .site-header.is-open .nav__toggle-bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  /* El menú ocupa toda la pantalla y aparece con un fundido */
  .nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;          /* Altura real en móvil, sin contar la barra del navegador */
    max-width: none;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    background-color: var(--fondo-pagina);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-1.5rem);
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s;
    z-index: 1001;
    overflow-y: auto;
  }

  .site-header.is-open .nav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s;
  }

  .nav__group {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }

  .nav__group--left,
  .nav__group--right {
    gap: 2rem;
  }

  /* Todos los enlaces del menú, al mismo tamaño */
  .nav__link,
  .nav__home {
    font-size: clamp(1.35rem, 5.5vw, 2rem);
    letter-spacing: 0.02em;
  }

  .nav__home {
    margin: 0;
    order: 0;
  }

  /* Con el menú abierto no se puede desplazar la página de detrás */
  body.menu-abierto {
    overflow: hidden;
  }
}

/* --------------------------------------------------------------------------
   12.3 MÓVIL PEQUEÑO
   -------------------------------------------------------------------------- */

@media screen and (max-width: 480px) {
  .site-header {
    height: 4em;
    padding: 0 1rem;
  }

  .nav {
    gap: 1.5rem;
  }

  .nav__group--left,
  .nav__group--right {
    gap: 1.5rem;
  }
}

/* Respeta la preferencia del sistema de reducir animaciones */
@media (prefers-reduced-motion: reduce) {
  .nav,
  .nav__toggle-bar {
    transition: none;
  }
}

/* ==========================================================================
   13. PÁGINA DE INICIO ADAPTABLE — 13.1 HERO
   --------------------------------------------------------------------------
   Por encima de 1024px el hero sigue funcionando como hasta ahora: un lienzo
   de 1920x1340 que se escala entero y respeta el diseño al milímetro.

   Por debajo de 1024px el lienzo se desactiva y la composición se reordena:
   la fotografía se centra y las dos palabras del nombre se colocan sobre
   ella, "Miguel" pisando el borde superior y "Lasierra" el inferior. Las
   palabras y la imagen crecen y menguan con la pantalla.
   ========================================================================== */

@media screen and (max-width: 1024px) {

  /* La sección deja de ser una ventana rígida y puede crecer si hace falta */
  .hero-section {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
    padding: 6.5em 1.25rem 3.5em;   /* Hueco superior para la barra fija */
  }

  /* El lienzo escalado se desactiva y pasa a ser una rejilla de dos filas:
     fila 1 = fotografía y nombre superpuestos, fila 2 = servicios */
  .hero__canvas {
    width: 100%;
    height: auto;
    transform: none;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    justify-items: center;
    row-gap: clamp(2rem, 6vw, 3.5rem);
  }

  /* Fotografía: conserva su proporción original 499 x 750 */
  .hero__image-container {
    grid-row: 1;
    grid-column: 1;
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: min(74vw, 420px);
    height: auto;
    aspect-ratio: 499 / 750;
  }

  .hero__img {
    width: 100%;
    height: 100%;
  }

  /* El nombre ocupa la misma celda que la fotografía y se estira a su altura:
     una palabra arriba y otra abajo, ambas sobre la imagen */
  .hero__title {
    grid-row: 1;
    grid-column: 1;
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    align-self: stretch;
    width: min(88vw, 500px);
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 0;
    font-size: clamp(2.6rem, 12.5vw, 6.5rem);
    padding: 0.12em 0;
  }

  /* Servicios y reclamo, ya en flujo normal debajo de la fotografía */
  .hero__services-block {
    grid-row: 2;
    grid-column: 1;
    position: static;
    top: auto;
  }

  .hero__services {
    font-size: clamp(1.05rem, 3.8vw, 2.65rem);
    white-space: normal;
    text-align: center;
    line-height: 1.6;
  }

  .hero__symbol {
    width: clamp(1.4rem, 4.5vw, 2.7rem);
    --sym-size: clamp(0.6rem, 2vw, 1.15rem);
  }

  .hero__tagline {
    font-size: clamp(0.6rem, 2vw, 1rem);
    letter-spacing: clamp(0.3em, 1.5vw, 1em);
    padding-left: clamp(0.3em, 1.5vw, 1em);
    margin-top: clamp(1rem, 3vw, 1.5em);
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   Móvil pequeño: la fotografía cede algo de tamaño para que el conjunto
   siga cabiendo en una pantalla de teléfono sin obligar a desplazarse.
   -------------------------------------------------------------------------- */

@media screen and (max-width: 480px) {
  .hero-section {
    padding: 5.5em 1rem 2.5em;
  }

  .hero__image-container {
    width: min(80vw, 320px);
  }

  .hero__title {
    width: 94vw;
    font-size: clamp(2.2rem, 14vw, 4rem);
  }
}

/* ==========================================================================
   13.2 PÁGINA DE INICIO — AVISO Y GALERÍA ANTES/DESPUÉS
   --------------------------------------------------------------------------
   Aquí no hacen falta puntos de corte: en vez de medidas fijas se usan
   medidas con tope. Por encima de unos 1100px los valores coinciden
   exactamente con los del diseño original (rejilla de 838px, celdas de
   375px, títulos de 72px) y por debajo menguan de forma proporcional.

   Las parejas antes/después se mantienen siempre en dos columnas, también
   en el móvil, para no perder la comparación de un vistazo.
   ========================================================================== */

.portfolio-section {
  padding-inline: clamp(1rem, 4vw, 2rem);
  padding-bottom: clamp(3rem, 6vw, 6em);
}

/* --------------------------------------------------------------------------
   Bloque "IMPORTANTE"
   -------------------------------------------------------------------------- */

.section-notice {
  padding-top: clamp(4rem, 10vw, 8.5rem);
}

.section-notice__title {
  font-size: clamp(1.5rem, 4.5vw, 2rem);
  margin-top: clamp(1.25rem, 3vw, 2rem);
}

.section-notice__text {
  max-width: min(850px, 100%);
  margin-top: clamp(1rem, 2.5vw, 1.5rem);
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

/* --------------------------------------------------------------------------
   Bloques de galería
   -------------------------------------------------------------------------- */

.portfolio-block--restauracion {
  margin-top: clamp(3.5rem, 9vw, 9rem);
}

.portfolio-block + .portfolio-block {
  margin-top: clamp(3.5rem, 7vw, 7rem);
}

.portfolio-block__title {
  font-size: clamp(2.1rem, 7vw, 4.5rem);
}

.portfolio-block__paragraph {
  max-width: min(850px, 100%);
  margin-top: clamp(1.5rem, 3.5vw, 2.5rem);
}

/* --------------------------------------------------------------------------
   Rejilla de imágenes
   --------------------------------------------------------------------------
   Dos columnas iguales que nunca superan los 375px de las fotografías
   originales. Las celdas dejan de tener alto fijo y conservan su
   proporción, de modo que la imagen nunca se deforma ni se recorta.
   -------------------------------------------------------------------------- */

.portfolio-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: min(5.5rem, 8vw);
  /* Dos columnas de 375px como máximo, más la separación: así las
     fotografías nunca se amplían por encima de su tamaño real. */
  width: min(100%, calc(750px + min(5.5rem, 8vw)));
  margin-inline: auto;
  margin-top: clamp(2.5rem, 5.5vw, 5.5rem);
}

.portfolio-grid__cell {
  width: auto;
  height: auto;
}

.cell-375x375 {
  width: auto;
  height: auto;
  aspect-ratio: 1 / 1;
}

.cell-375x500 {
  width: auto;
  height: auto;
  aspect-ratio: 375 / 500;
}

/* --------------------------------------------------------------------------
   13.3 PIE DE PÁGINA
   Los ocho enlaces necesitan menos separación en pantallas estrechas para
   no convertirse en una columna interminable.
   -------------------------------------------------------------------------- */

.footer__nav {
  gap: clamp(0.9rem, 2.5vw, 3.5em);
  padding-inline: 1rem;
}

.footer__link {
  font-size: clamp(0.7rem, 0.65rem + 0.2vw, 0.85rem);
}

.footer__copyright {
  font-size: clamp(0.6rem, 1.4vw, 0.7rem);
  padding-inline: 1rem;
}

/* ==========================================================================
   14. PÁGINA DE CONTACTO ADAPTABLE
   --------------------------------------------------------------------------
   Sustituye en la práctica a los dos bloques @media (1400px y 900px) que hay
   en la sección 7: al ir después en el archivo, estas reglas mandan sobre
   aquellas. Los valores se han calculado midiendo los elementos reales:

     · El titular ocupa 17,5px de ancho por cada px de tamaño de letra.
     · El email ocupa 12,5px por cada px de tamaño de letra.

   De ahí salen los porcentajes de anchura de ventana usados abajo, que hacen
   que ninguno de los dos se salga nunca de la pantalla, en vez de dar saltos
   bruscos en dos puntos concretos.
   ========================================================================== */

.contact-section {
  padding-inline: clamp(1rem, 4vw, 2rem);
}

/* --------------------------------------------------------------------------
   14.1 TITULAR "Deles una nueva vida a sus fotografías"
   -------------------------------------------------------------------------- */

.contact__title {
  font-size: clamp(2rem, 5.4vw, 7rem);
  white-space: nowrap;
  margin-top: 2em;          /* Proporcional: 2 veces el tamaño de la letra */
  padding: 0;
}

/* Por debajo de 900px la frase deja de caber en una línea aunque encoja,
   así que se parte en varias y recupera un tamaño legible. */
@media screen and (max-width: 900px) {
  .contact__title {
    font-size: clamp(1.9rem, 7.2vw, 3.4rem);
    white-space: normal;
    max-width: 16ch;          /* Corta en 2 o 3 líneas, no en una tira larga */
    margin-inline: auto;
    margin-top: clamp(4.5rem, 16vw, 7rem);
    line-height: 1.15;
  }
}

/* --------------------------------------------------------------------------
   14.2 EMAIL
   --------------------------------------------------------------------------
   Se ajusta siempre a lo ancho de la pantalla, así que nunca hace falta
   partir la palabra. Se anula el word-break que había, que cortaba la
   dirección por cualquier letra y quedaba muy feo.
   -------------------------------------------------------------------------- */

.contact__email-block {
  margin-top: clamp(2.5rem, 6vw, 7em);
  width: 100%;
}

.contact__email {
  font-size: clamp(1.4rem, 7.4vw, 9.5rem);
  word-break: normal;
  overflow-wrap: normal;
  max-width: 100%;
}

/* El subrayado del efecto hover, proporcional al tamaño de la letra */
.contact__email::after {
  height: clamp(2px, 0.4vw, 5px);
}

/* --------------------------------------------------------------------------
   14.3 FORMULARIO
   -------------------------------------------------------------------------- */

.contact-form {
  width: min(100%, 1302px);
  max-width: 100%;
  margin-top: clamp(3rem, 7vw, 9em);
  margin-bottom: clamp(3rem, 6vw, 7em);
}

/* Mientras los dos campos van uno al lado del otro, se reparten el ancho
   disponible en vez de medir 600px fijos cada uno. */
@media screen and (min-width: 901px) {
  .form-row--two-cols {
    gap: clamp(1.5rem, 5vw, 6.4em);
  }

  .form-field--nombre,
  .form-field--email {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
  }
}

.form-row--full {
  margin-top: clamp(2.5rem, 5vw, 4.8em);
}

.form-row--actions {
  margin-top: clamp(1.5rem, 3vw, 25px);
  gap: 1.5em;
}

/* En móvil, la casilla y el botón se separan y el texto de la casilla
   necesita respirar. */
@media screen and (max-width: 620px) {
  .form-checkbox-label,
  .privacy-link {
    font-size: 0.8rem;
    line-height: 1.5;
  }

  .form-submit {
    align-self: flex-start;
    font-size: 1.05rem;
  }
}

/* ==========================================================================
   15. PÁGINA DE ENVÍO ADAPTABLE
   --------------------------------------------------------------------------
   La sección 10 declara casi todo con !important, así que estas reglas lo
   llevan también donde hace falta: si no, no llegarían a aplicarse.

   La sección 10 ya apila las dos columnas por debajo de 1024px y eso se
   respeta. Lo que falta es que los títulos y las separaciones dejen de ser
   medidas fijas pensadas para 1920px.
   ========================================================================== */

.envio-section {
  padding-inline: clamp(1rem, 4vw, 2rem);
  padding-bottom: clamp(3rem, 6vw, 6em);
}

/* --------------------------------------------------------------------------
   15.1 TÍTULOS
   --------------------------------------------------------------------------
   El margen superior se deja en 3em, que es proporcional al propio tamaño
   de la letra: al encoger el título, encoge con él, y siempre queda hueco
   suficiente por debajo de la barra fija del menú.
   -------------------------------------------------------------------------- */

.envio__main-title {
  font-size: clamp(2.1rem, 6vw, 4.5rem) !important;
  margin-top: 3em !important;
  padding-inline: 0.5rem;
}

.envio__subtitle {
  font-size: clamp(1.6rem, 4vw, 2.5rem) !important;
}

.envio-form__title {
  font-size: clamp(1.4rem, 3.4vw, 2rem) !important;
}

/* --------------------------------------------------------------------------
   15.2 LAS DOS COLUMNAS
   -------------------------------------------------------------------------- */

.envio-grid-container {
  gap: clamp(2.5rem, 6vw, 8.15em) !important;
  margin-top: clamp(2.5rem, 5vw, 5.5em) !important;
  padding-inline: 0;
}

.envio__img-wrapper {
  margin-bottom: clamp(1.5rem, 4vw, 3em);
}

.envio-col p {
  margin-bottom: clamp(1.25rem, 3vw, 2em) !important;
}

/* El texto justificado abre huecos feos entre palabras cuando la línea es
   corta, así que en pantallas estrechas se alinea a la izquierda. */
@media screen and (max-width: 700px) {
  .envio-col p {
    text-align: left;
    hyphens: auto;
  }
}

/* --------------------------------------------------------------------------
   15.3 FORMULARIO DE ENVÍO
   -------------------------------------------------------------------------- */

.envio-form-block {
  margin-top: clamp(2.5rem, 5vw, 4.5em);
}

.envio-form__field {
  margin-bottom: clamp(2rem, 4vw, 3.5em);
}

.envio-dropzone {
  height: clamp(7.5em, 16vw, 9.5em);
  padding-inline: 1rem;
  text-align: center;
}

.dropzone__text-main,
.dropzone__text-sub {
  font-size: clamp(0.85rem, 2.2vw, 1rem) !important;
}

.envio-form__actions {
  gap: clamp(1.5rem, 3vw, 2.5em);
}

@media screen and (max-width: 620px) {
  .envio-checkbox-label,
  .envio-privacy-link {
    font-size: 0.8rem !important;
    line-height: 1.5;
  }

  .envio-submit-btn {
    font-size: 1.05rem !important;
  }
}

/* ==========================================================================
   16. PÁGINAS DE TEXTO ADAPTABLES
   Aviso legal, Política de privacidad, Política de cookies, Proceso y
   tarifas y Consultas. Todas comparten el mismo contenedor de 62em.
   --------------------------------------------------------------------------
   Sus secciones (8, 9 y 11) ya traían ajustes en 1024, 768 y 480px, pero
   cambian los tamaños a saltos. Aquí pasan a ser continuos, y se corrige
   además el desbordamiento de la tabla de tarifas.
   ========================================================================== */

/* --------------------------------------------------------------------------
   16.1 CONTENEDORES
   -------------------------------------------------------------------------- */

.legal-wrapper,
.proceso-tarifas-wrapper,
.consultas-wrapper {
  max-width: 62em;
  margin-top: clamp(6.5rem, 14vw, 15.6em);
  margin-bottom: clamp(3.5rem, 8vw, 8em);
  padding-left: clamp(1.25rem, 5vw, 1.5rem);
  padding-right: clamp(1.25rem, 5vw, 1.5rem);
}

/* --------------------------------------------------------------------------
   16.2 TÍTULOS Y SUBTÍTULOS
   -------------------------------------------------------------------------- */

.legal__title,
.proceso-tarifas__title,
.consultas__title {
  font-size: clamp(2.1rem, 6vw, 4.5rem);
  line-height: 1.1;
}

.legal__subtitle,
.proceso-tarifas__subtitle {
  font-size: clamp(1.5rem, 3.6vw, 2.25rem);
  margin-bottom: clamp(0.9em, 2vw, 1.125em);
}

.legal-block,
.proceso-tarifas-block {
  margin-bottom: clamp(2.25rem, 5vw, 3.5em);
}

.legal-header,
.proceso-tarifas-header,
.consultas-header {
  margin-bottom: clamp(2.25rem, 5vw, 3.5em);
}

/* --------------------------------------------------------------------------
   16.3 TABLA DE TARIFAS
   --------------------------------------------------------------------------
   El problema: medía 62em (992px) fijos y solo se transformaba en lista por
   debajo de 768px, así que entre esas dos medidas se salía de la pantalla.

   Estas reglas van dentro de una consulta de anchura a propósito: por debajo
   de 768px manda la transformación en lista que ya existe en la sección 9,
   y no hay que estorbarla.
   -------------------------------------------------------------------------- */

@media screen and (min-width: 769px) {
  .table_component {
    width: min(100%, 62em);
  }

  .table_component th {
    height: auto;
    min-height: 3.5em;
    padding: 0.8em 0.35em;
    font-size: clamp(0.72rem, 1.3vw, 1rem);
    line-height: 1.25;
  }

  .table_component td {
    height: auto;
    padding: 0.7em 0.3em;
    font-size: clamp(0.78rem, 1.15vw, 0.9rem);
  }
}

/* En móvil, los títulos que el CSS inyecta a la izquierda de cada precio
   llevaban white-space: nowrap y "RESTAURACIÓN Y COLOREADO" no cabía. */
@media screen and (max-width: 480px) {
  .table_component td {
    padding-left: 55%;
  }

  .table_component td::before {
    white-space: normal;
    width: 50%;
    line-height: 1.25;
    font-size: 0.78rem;
  }
}

/* --------------------------------------------------------------------------
   16.4 CONSULTAS: ACORDEÓN
   -------------------------------------------------------------------------- */

.consultas__intro {
  max-width: 45em;
}

.faq-accordion {
  margin-top: clamp(2.5rem, 5vw, 4.5em);
}

.faq-item__header {
  padding: clamp(1rem, 2.5vw, 1.75rem) 0;
}

.faq-item__chevron {
  width: clamp(22px, 3vw, 34px);
  height: clamp(16px, 2.2vw, 24px);
}

.faq-item__content {
  padding-left: clamp(1rem, 2.5vw, 1.75rem);
  padding-bottom: clamp(1.5rem, 3.5vw, 2.5em);
}

.faq-question__title {
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
}

.faq-question {
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5em);
}

/* ==========================================================================
   17. SEPARACIÓN UNIFORME DEL PIE
   El hueco hasta el borde inferior lo formaban dos rellenos sumados, el del
   pie y el del texto de copyright, y cada grupo de páginas usaba un valor
   distinto. Ahora lo define un único valor, igual en todas.
   ========================================================================== */

.site-footer,
body.legal-page .site-footer,
body.proceso-tarifas-page .site-footer,
body.consultas-page .site-footer {
  padding-bottom: 1.5em;
}

.footer__copyright {
  padding-bottom: 0;
}

/* ==========================================================================
   18. TRANSICIÓN ENTRE PÁGINAS
   --------------------------------------------------------------------------
   Fundido cruzado al pasar de una página a otra, con la API nativa de
   transiciones de vista. No necesita JavaScript, no retrasa la navegación y
   si el navegador no la soporta simplemente no ocurre nada raro: la página
   cambia como siempre.

   Compatible con Chrome, Edge y Safari. Firefox aún no la implementa, así
   que para él se deja un fundido de entrada equivalente.

   Requisito que ya se cumple: todas las páginas están en el mismo dominio.
   ========================================================================== */

@view-transition {
  navigation: auto;
}

/* Duración y suavizado del fundido. El cruce en sí ya es el comportamiento
   por defecto: aquí solo se ajusta el ritmo para que resulte elegante y no
   se note lento. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 420ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   Repuesto para navegadores sin transiciones de vista (Firefox)
   La página entra con un fundido al cargarse. No hay fundido de salida,
   porque eso obligaría a retener la navegación con JavaScript.
   -------------------------------------------------------------------------- */

@supports not (view-transition-name: none) {
  body {
    animation: ml-entrada 380ms ease both;
  }
}

@keyframes ml-entrada {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Quien tenga activado "reducir movimiento" en su sistema no ve ningún
   fundido: la página cambia de forma instantánea.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }

  @supports not (view-transition-name: none) {
    body {
      animation: none;
    }
  }
}

/* ==========================================================================
   19. PIE ANCLADO AL FONDO EN PÁGINAS CORTAS
   --------------------------------------------------------------------------
   Contacto es la única página cuyo contenido puede no llegar a llenar la
   pantalla. El min-height: 100vh estiraba el cuerpo hasta abajo, pero el pie
   se quedaba donde acababa el contenido y dejaba un hueco vacío debajo: con
   una ventana de 1400px de alto, 419 píxeles.

   Con el cuerpo convertido en columna flexible, el pie se lleva el espacio
   sobrante y queda siempre abajo. En las páginas largas no cambia nada,
   porque no hay espacio sobrante que repartir.
   ========================================================================== */

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;   /* Altura real en móvil, descontando la barra del navegador */
}

body > main {
  flex: 1 0 auto;       /* Ocupa todo el espacio disponible, sin encogerse */
}

.site-footer {
  margin-top: auto;     /* Empuja el pie hasta el fondo */
  flex-shrink: 0;
}

/* ==========================================================================
   20. SCROLL SUAVE Y APARICIÓN DE ELEMENTOS
   --------------------------------------------------------------------------
   Sustituye por completo a la versión anterior de esta sección.

   Tres piezas:
     · El desplazamiento suave lo aporta Lenis (JavaScript), pero necesita
       que el navegador no aplique su propio suavizado. De eso se ocupa la
       primera regla.
     · Los textos entran con un recorrido largo y una curva de salida muy
       progresiva: empiezan rápido y frenan despacio.
     · Las fotografías entran estiradas en vertical y se asientan con un
       pequeño rebote elástico.

   Seguridad: el estado oculto depende de la clase "js-revelar", que añade
   el JavaScript al arrancar. Si el script falla, todo se ve con normalidad.
   ========================================================================== */

/* Lenis necesita gobernar él el desplazamiento */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   20.1 TEXTOS
   Recorrido de 34px y un segundo largo de duración, con una curva que frena
   muy despacio al final: es lo que hace que se perciba como un movimiento y
   no como un parpadeo.
   -------------------------------------------------------------------------- */

html.js-revelar [data-revelar] {
  opacity: 0;
  transform: translateY(34px);
}

html.js-revelar [data-revelar].es-visible {
  opacity: 1;
  transform: none;
  transition:
    opacity 1.05s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.15s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   20.2 FOTOGRAFÍAS
   La celda recorta, así que la imagen entra estirada en vertical y se
   comprime hasta su altura real. La curva sobrepasa ligeramente el 1 y
   vuelve: de ahí la sensación elástica.
   -------------------------------------------------------------------------- */

html.js-revelar [data-revelar-img] {
  opacity: 0;
}

html.js-revelar [data-revelar-img] img {
  transform: scaleY(1.22);
  transform-origin: center center;
}

html.js-revelar [data-revelar-img].es-visible {
  opacity: 1;
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

html.js-revelar [data-revelar-img].es-visible img {
  transform: scaleY(1);
  transition: transform 1.4s cubic-bezier(0.22, 1.28, 0.36, 1);
}

/* --------------------------------------------------------------------------
   20.3 MOVIMIENTO REDUCIDO
   Ni scroll suave, ni apariciones, ni estiramientos.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html.js-revelar [data-revelar],
  html.js-revelar [data-revelar].es-visible,
  html.js-revelar [data-revelar-img],
  html.js-revelar [data-revelar-img].es-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  html.js-revelar [data-revelar-img] img,
  html.js-revelar [data-revelar-img].es-visible img {
    transform: none;
    transition: none;
  }
}

.whatsapp-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background-color: #25d366;
  color: white;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  z-index: 99999;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.whatsapp-btn svg {
  width: 32px !important;
  height: 32px !important;
  fill: #ffffff !important;
  display: block;
}

.whatsapp-btn:hover {
  transform: scale(1.1);
}