/* Mora Group — reconstrucción exacta de la web de Wix de Sara.
   Ni un color ni una medida inventados: los colores salen de extraccion/tema.json y
   cada posición de extraccion/home-escritorio.json (estilos calculados del original).
   Se comprueba con `node verificar_igual.js`, que compara elemento a elemento.

   Referencia a 1440 px, con las coordenadas del original anotadas en cada bloque.
*/

:root {
  /* Tema de Wix, tal cual */
  --tinta: #1E1E1E;        /* color_1  */
  --terracota: #B46A2C;    /* color_2  */
  --crema: #F2EFEB;        /* color_11 */
  --gris: #888785;         /* color_13 */
  --marino-hondo: #152340; /* color_18 */
  --marino: #233559;       /* color_19 */

  /* Colores puestos a mano fuera del tema (medidos del render) */
  --dorado: #BFA678;       /* botón "Llamar ahora" */
  --gris-azulado: #DFE4E6; /* fondo de la sección de servicios */

  --ancho: 1280px;         /* contenido de 80 a 1360 */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--crema);
  color: var(--tinta);
  font-family: Manrope, sans-serif;   /* font_8 del tema */
  font-weight: 400;
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: Manrope, sans-serif; margin: 0; }

.contenedor { width: var(--ancho); max-width: calc(100% - 56px); margin-inline: auto; }
/* Rejillas que en el original ocupan TODO el ancho de pantalla, no el contenedor */
.ancho-total { width: 100%; }

/* --- Botones (sin redondear) ------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: Poppins, sans-serif; font-weight: 200; font-size: 14px;
  line-height: 25px; border: 0; cursor: pointer; transition: opacity .2s ease;
}
.btn:hover { opacity: .85; }
.btn span { display: inline-block; line-height: 25px; }
.btn--dorado     { background: var(--dorado); color: var(--tinta); width: 197px; height: 43px; }
.btn--negro      { background: var(--tinta);  color: var(--crema); width: 180px; height: 40px; }
.btn--negro-alto { background: var(--tinta);  color: var(--crema); width: 215px; height: 53px; }
.btn--crema      { background: var(--crema);  color: var(--tinta); height: 50px; }

/* --- Cabecera: logo en x=108, navegación acabando en x=1308 ------------------ */
.cabecera { position: sticky; top: 0; z-index: 20; background: var(--crema); height: 148px; }
.cabecera__fila {
  display: flex; align-items: center; justify-content: space-between;
  height: 100%; padding: 0 35px 0 28px;
}
.cabecera__logo img { width: 180px; height: 102px; object-fit: contain; }
.cabecera__nav a {
  display: inline-block;
  font-family: Poppins, sans-serif; font-weight: 200; font-size: 14px;
  line-height: 57px; padding: 0 11.6px; color: var(--tinta);
}
.cabecera__nav a.activo { color: var(--marino-hondo); }
.cabecera__nav a:hover { color: var(--marino); }

/* --- Héroe: foto 1440x860 desde y=148; H1 en y=596, p en 737, botón en 856 --- */
.heroe {
  position: relative; height: 860px;
  background: var(--tinta) image-set(url("/img/hero-poster-ancho.webp") type("image/webp"),
              url("/img/hero-poster-ancho.jpg") type("image/jpeg")) center/cover no-repeat;
  display: flex; align-items: flex-start;
  overflow: hidden;
}
/* El vídeo del original: 1920x1080, en bucle, mudo y con object-fit: cover */
.heroe__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center center;
}
/* Si el sistema pide menos animación, se queda el póster quieto */
@media (prefers-reduced-motion: reduce) {
  .heroe__video { display: none; }
}
.heroe::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.32) 45%, rgba(0,0,0,.5) 100%);
}
.heroe__caja { position: relative; z-index: 1; padding-top: 448px; }
.heroe h1 {
  font-weight: 800; font-size: 64px; line-height: 76.5px;   /* caja de 153 en 2 líneas */
  /* El margen era -12px para clavar la posición exacta del subtítulo en el original
     de Sara, donde la caja del titular tenía holgura de sobra. Con el titular nuevo
     eso dejaba el hueco óptico en -2px: se tocaban. 16px de caja = 26px ópticos. */
  color: var(--crema); max-width: 800px; margin: 0 0 16px;
}
.heroe p {
  font-size: 20px; line-height: 27px; color: var(--crema);
  max-width: 760px; margin: 0 0 92px;
}

/* --- Presentación: foto en y=1066, h2 en 1250, p en 1611, botón en 1715 ------ */
.presentacion { padding: 58px 0 0; }
.presentacion__rejilla {
  display: grid; grid-template-columns: 640px 1fr; gap: 90px; align-items: start;
}
.presentacion__foto { width: 640px; height: 1122px; object-fit: cover; }
.presentacion__texto { padding-top: 184px; }
.presentacion h2 {
  font-weight: 700; font-size: 40px; line-height: 55px; color: var(--marino);
  width: 470px; max-width: 100%; margin: 0 0 31px;
}
.presentacion p { margin: 0 0 57px; width: 345px; max-width: 100%; }

/* --- Por qué elegirnos: título en y=2271, tarjetas en 2393 ------------------- */
.porque { padding: 83px 0 73px; }
.titulo-seccion {
  font-family: Manrope, sans-serif; font-weight: 700; font-size: 40px; line-height: 54px;
  color: var(--tinta); text-align: center; margin: 0 0 67px;
}
/* Cuatro columnas de 360 px sobre el ancho completo: centros en 180/540/900/1260 */
.porque__rejilla { display: grid; grid-template-columns: repeat(4, 1fr); }
.porque__col { padding: 0 58px; text-align: center; }
.porque h3 {
  font-weight: 700; font-size: 22px; line-height: 31px; color: var(--marino-hondo);
  margin: 0 0 40px;
}
.porque p { margin: 0; }

/* --- Servicios: fondo desde y=2659, título 2774, fotos 2914, botón 3710 ------ */
.servicios { background: var(--gris-azulado); padding: 115px 0 150px; }
.servicios .titulo-seccion { margin-bottom: 85px; }
.servicios__rejilla { display: grid; grid-template-columns: 622px 623px; gap: 35px; }
.servicio { position: relative; display: block; }
.servicio img { width: 100%; height: 726px; object-fit: cover; }
.servicio span {
  position: absolute; left: 0; right: 0; top: 344px;
  font-family: Manrope, sans-serif; font-weight: 700; font-size: 22px; line-height: 31px;
  color: var(--crema); text-align: center;
}
.servicios__pie { text-align: center; padding-top: 70px; }

/* --- Testimonios: título en y=4031, citas en 4302, nombres en 4442 ----------- */
.testimonios { padding: 118px 0 220px; }
.testimonios .titulo-seccion { margin-bottom: 112px; }
/* Tres columnas de 360 px centradas: 180–1260 */
.testimonios__rejilla {
  display: grid; grid-template-columns: repeat(3, 360px);
  justify-content: center; width: 100%;
}
.testimonio { text-align: center; margin: 0; padding: 0 48px; }
/* Comillas decorativas: 40x30 en #1E1E1E, centradas sobre cada cita (y=4198) */
.testimonio__comillas { width: 40px; height: 30px; margin: 0 auto 74px; fill: var(--tinta); display: block; }
.testimonio p { margin: 0 0 34px; }
.testimonio cite {
  font-family: Poppins, sans-serif; font-weight: 600; font-size: 20px;
  font-style: normal; color: var(--marino-hondo);
}

/* --- Contacto: fondo desde y=4690; texto en x=128, formulario en x=836 ------- */
.contacto { background: var(--tinta); color: var(--crema); padding: 97px 0 74px; }
.contacto__rejilla {
  width: 1190px; max-width: calc(100% - 56px); margin-inline: auto;
  display: grid; grid-template-columns: 1fr 482px; gap: 26px;
}
.contacto__datos { padding-top: 20px; }
.contacto h2 {
  display: inline-block;
  font-weight: 700; font-size: 40px; line-height: 56px; color: var(--crema); margin: 0 0 32px;
}
.contacto__datos p { display: inline-block; margin: 0 0 22px; max-width: 460px; }
.contacto__datos p + p { display: block; }
.contacto__datos .separado { margin-top: 39px; }
.formulario { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 10px; align-content: start; padding: 0 11px; }
.formulario label { display: block; font-size: 15px; line-height: 15px; margin-bottom: 12px; }
/* Los siete campos del original son obligatorios y llevan asterisco rojo (#A01E1E) */
.obligatorio { color: #A01E1E; margin-left: 3px; }
.formulario .ancho { grid-column: 1 / -1; }
.formulario input, .formulario textarea {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--crema);
  color: var(--crema); font: inherit; padding: 4px 0;
}
.formulario textarea { resize: vertical; min-height: 74px; }
.formulario input:focus, .formulario textarea:focus { outline: none; border-bottom-color: var(--dorado); }
.formulario .btn { grid-column: 1 / -1; width: 100%; margin-top: 24px; }

/* --- Pie: 170 px; copyright en x=246, enlaces en x=771, redes en x=1098 ------ */
.pie { background: var(--crema); height: 170px; display: flex; align-items: center; }
.pie__fila {
  width: 100%; display: grid; grid-template-columns: 525px 327px 1fr;
  padding: 0 246px 0 246px; align-items: start;
}
.pie__enlaces { display: flex; flex-direction: column; gap: 4px; }
.pie__redes { display: flex; gap: 10px; padding-top: 15px; }
.pie__redes a { width: 23px; height: 23px; display: block; color: var(--tinta); }
.pie__redes svg { width: 23px; height: 23px; }

/* --- Widgets flotantes: botón de WhatsApp y burbuja de chat ------------------
   En el original son dos apps de Wix. La burbuja de Wix Inbox no se puede
   reproducir (es su plataforma), así que se deja con el mismo aspecto pero
   abriendo WhatsApp: se ve igual y encima funciona. */
.flotantes {
  position: fixed; right: 30px; bottom: 30px; z-index: 60;
  display: flex; flex-direction: column; align-items: flex-end; gap: 14px;
}
.flotantes__aviso {
  background: var(--crema); color: var(--tinta); font-size: 13px; line-height: 1.35;
  padding: 10px 14px; border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.18);
  max-width: 203px;
}
.flotantes__wa {
  width: 60px; height: 60px; border-radius: 50%; background: #25D366;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
}
.flotantes__wa svg { width: 32px; height: 32px; fill: #fff; }
.flotantes__wa:hover { filter: brightness(1.05); }

/* --- Móvil ------------------------------------------------------------------
   Medido de extraccion/home-movil.json (Wix sirve otra maqueta con UA de móvil).
   Su lienzo móvil es de 320 px centrados, no de ancho completo, y los cuerpos
   bajan a 14 px. Coordenadas del original anotadas al lado.
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
  body { font-size: 14px; }
  /* Un póster de 900 px en vez de uno de 2.880: es el elemento que marca el LCP */
  .heroe {
    background-image: image-set(url("/img/hero-poster-movil.webp") type("image/webp"),
                                url("/img/hero-poster-movil.jpg") type("image/jpeg"));
  }
  .contenedor { width: 320px; max-width: calc(100% - 40px); }

  /* Cabecera: logo 130x74 centrado en y=20 */
  .cabecera { height: 114px; }
  .cabecera__fila { padding: 0; justify-content: center; }
  .cabecera__logo img { width: 130px; height: 74px; }
  .cabecera__nav { display: none; }

  /* Héroe: h1 22px en y=307, p 12px en 378, botón 112x26 en 433 */
  .heroe { height: 450px; align-items: flex-end; }
  .heroe__caja { padding: 0 0 36px; }
  .heroe h1 { font-size: 22px; line-height: 26px; max-width: 240px; margin: 0 0 12px; }
  .heroe p { font-size: 12px; line-height: 21px; width: auto; max-width: 190px; margin: 0 0 22px; }
  .btn--dorado { width: 112px; height: 26px; font-size: 10px; }
  .btn span { line-height: normal; }

  /* Presentación: h2 24px en 534, p 14px en 746, botón 170x40 centrado en 827 */
  .presentacion { padding: 30px 0 0; }
  .presentacion__rejilla { grid-template-columns: 1fr; gap: 26px; }
  .presentacion__texto { padding-top: 0; order: -1; }
  .presentacion__foto { width: 100%; height: 400px; }
  .presentacion h2 { font-size: 24px; line-height: 33px; width: auto; margin-bottom: 20px; }
  .presentacion p { width: auto; margin-bottom: 22px; }
  .presentacion .btn { display: flex; margin: 0 auto; width: 170px; height: 40px; }

  /* Por qué elegirnos: título 25px en 1240, tarjetas 20px */
  .porque { padding: 40px 0 30px; }
  .titulo-seccion { font-size: 24px; line-height: 33px; margin-bottom: 46px !important; }
  .porque__rejilla { grid-template-columns: 1fr; gap: 42px; }
  .porque__col { padding: 0; }
  .porque h3 { font-size: 20px; line-height: 27px; margin-bottom: 16px; }

  /* Servicios: rótulos 18px sobre cada foto, botón centrado */
  .servicios { padding: 46px 0 60px; }
  .servicios .titulo-seccion { margin-bottom: 60px !important; }
  .servicios__rejilla { grid-template-columns: 1fr; gap: 30px; }
  .servicio img { height: 240px; }
  .servicio span { top: 50%; transform: translateY(-50%); font-size: 18px; line-height: 25px; padding: 0 20px; }
  .servicios__pie { padding-top: 40px; }
  .btn--negro-alto { width: 151px; height: 40px; font-size: 10px; }
  .btn--negro { width: 170px; height: 40px; font-size: 10px; }

  /* Testimonios: en móvil el NOMBRE va encima de la cita (2955 vs 2995) */
  .testimonios { padding: 44px 0 40px; }
  .testimonios .titulo-seccion { margin-bottom: 80px !important; }
  .testimonios__rejilla { grid-template-columns: 1fr; gap: 46px; }
  .testimonio { padding: 0; display: flex; flex-direction: column; }
  .testimonio__comillas { margin-bottom: 26px; }
  .testimonio cite { order: -1; font-size: 17px; margin-bottom: 16px; }
  .testimonio p { margin: 0; }

  /* Contacto: primero el formulario y después los datos, todo centrado */
  .contacto { padding: 40px 0 46px; }
  .contacto--pagina { padding: 40px 0 46px; }
  .contacto--clara { padding-bottom: 50px; }
  .contacto--clara .contacto__rejilla { width: auto; grid-template-columns: 1fr; }
  .contacto--clara h2 { font-size: 24px; line-height: 33px; }
  .contacto__rejilla { width: auto; grid-template-columns: 1fr; gap: 30px; }
  .contacto__datos { padding-top: 0; order: 2; text-align: center; }
  .contacto__datos p { width: auto; max-width: none; display: block; }
  .contacto h2 { display: block; font-size: 24px; line-height: 33px; text-align: left; }
  .contacto--pagina h2 { line-height: 33px; }
  .formulario { grid-template-columns: 1fr; gap: 22px; padding: 0; }
  .formulario label { font-size: 16px; line-height: 16px; }
  .formulario .btn { height: 42px; }

  /* Pie: copyright centrado, enlaces y "SIGUENOS" debajo */
  .pie { height: auto; padding: 34px 0; text-align: center; }
  .pie__fila { grid-template-columns: 1fr; gap: 16px; padding: 0 20px; justify-items: center; }
  .pie p { font-size: 12px; margin: 0; }
  .pie__enlaces { align-items: center; font-size: 12px; }
  .pie__redes { padding-top: 0; justify-content: center; }

  /* Páginas interiores */
  .portada { padding: 40px 0 26px; }
  .portada h1 { font-size: 24px; line-height: 33px; }
  .portada__foto { height: 380px; margin-bottom: 30px; }
  .galeria__rejilla { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tira__pista img { width: 80vw; height: 170px; }
  .valores__rejilla, .proceso__rejilla { grid-template-columns: 1fr; gap: 30px; }
  .valores h3, .proceso h3 { font-size: 20px; line-height: 27px; }
  .mosaico__rejilla { grid-template-columns: 1fr 1fr; }
  .mosaico__rejilla img { height: 200px; }
  .cierre-pagina { padding: 44px 0; }
  .cierre-pagina h2 { font-size: 18px; line-height: 26px; margin-bottom: 34px; }
  .columna-legal { width: auto; margin: 0 auto; }
  .texto-largo--legal { padding: 20px 0 40px; }

  .flotantes { right: 16px; bottom: 16px; }
  .flotantes__aviso { display: none; }
}

/* ============================================================================
   Páginas interiores. Medidas tomadas de los JSON de cada página:
   galerías de 412x412 en tres columnas, portadas con el título sobre crema,
   y el bloque de contacto sobre negro igual que en la home.
   ========================================================================== */

.portada { padding: 59px 0 54px; text-align: center; }
.portada h1 {
  font-weight: 700; font-size: 40px; line-height: 54px; color: var(--marino); margin: 0 0 28px;
}
.portada--simple h1 { color: var(--tinta); }
.portada p {
  max-width: 900px; margin: 0 auto; color: var(--tinta);
}
.portada--simple { padding: 60px 0 0; }
.portada--simple h1 { margin-bottom: 0; }

.portada--foto { padding: 0 0 54px; text-align: left; }
.portada__foto { width: 100%; height: 1000px; object-fit: cover; margin-bottom: 64px; }
.portada--foto h1 { text-align: left; }

.galeria { padding: 12px 0 40px; }
.galeria__rejilla {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
}
.galeria__rejilla img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

/* La página de servicios del original lleva una tira horizontal de fotos anchas */
.tira { padding: 0 0 40px; overflow-x: auto; }
.tira__pista { display: flex; gap: 0; width: max-content; }
.tira__pista img { width: 1280px; height: 261px; object-fit: cover; }

.texto-largo { padding: 24px 0 56px; }
.texto-largo p { max-width: 900px; margin: 0 auto 18px; }
.texto-largo .titulo-seccion { margin-bottom: 32px; }
/* Columna de texto legal: x=350, 770 px de ancho (medido del original) */
.columna-legal { width: 770px; max-width: calc(100% - 56px); margin: 0 0 0 350px; }
.texto-largo--legal { padding: 26px 0 60px; }
.texto-largo--legal p {
  font-size: 15px; line-height: 23.5px; margin: 0 0 4px; text-align: left;
}
.texto-largo--legal h2 {
  font-family: Manrope, sans-serif; font-weight: 700; font-size: 15px; line-height: 21px;
  color: var(--tinta); margin: 29px 0 5px;
}
.texto-largo--legal h2:first-child { margin-top: 0; }

.valores { background: var(--crema); padding: 70px 0; }
.valores__antetitulo {
  text-align: center; letter-spacing: .2em; text-transform: uppercase;
  font-size: 13px; color: var(--gris); margin: 0 0 10px;
}
.valores__rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.valores h3, .proceso h3 {
  font-weight: 700; font-size: 22px; line-height: 31px; color: var(--marino-hondo); margin: 0 0 16px;
}

.proceso { padding: 70px 0; }
.entradilla-centrada { max-width: 820px; margin: 0 auto 48px; text-align: center; color: var(--gris); }
.proceso__rejilla { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }

.mosaico { padding: 0 0 56px; }
.mosaico__rejilla { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.mosaico__rejilla img { width: 100%; height: 406px; object-fit: cover; }

.cierre-pagina { background: var(--tinta); padding: 91px 0 93px; text-align: center; }
.cierre-pagina h2 {
  font-weight: 700; font-size: 20px; line-height: 27.5px; color: var(--crema);
  max-width: 780px; margin: 0 auto 62px;
}
.cierre-pagina .btn { background: var(--crema); color: var(--tinta); width: 190px; height: 40px; }

/* La página de contacto es CLARA (medido): título #233559 en x=130, y=212;
   datos en tinta; el formulario empieza en x=843,y=201 y mide 473x546. */
.contacto--pagina { padding: 53px 0 0; }
.contacto--clara { background: var(--crema); color: var(--tinta); padding-bottom: 600px; }
.contacto--clara .contacto__rejilla {
  width: 1190px; grid-template-columns: 1fr 473px; gap: 50px;
}
.contacto--clara h2 { color: var(--marino); font-size: 40px; line-height: 55px; margin-bottom: 32px; }
.contacto--clara .contacto__datos { padding-top: 11px; }
.contacto--clara .contacto__datos p { color: var(--tinta); }
.contacto--clara .contacto__datos .separado { margin-top: 30px; }
.contacto--clara .formulario label { color: var(--tinta); }
.contacto--clara .formulario input,
.contacto--clara .formulario textarea { color: var(--tinta); border-bottom-color: rgba(30,30,30,.35); }
.contacto--clara .formulario .btn { background: var(--tinta); color: var(--crema); }

@media (max-width: 900px) {
  .portada { padding: 50px 0 30px; }
  .portada h1 { font-size: 28px; line-height: 38px; }
  .portada__foto { height: 420px; margin-bottom: 34px; }
  .galeria__rejilla { grid-template-columns: 1fr 1fr; gap: 12px; }
  .tira__pista img { width: 80vw; height: 180px; }
  .valores__rejilla, .proceso__rejilla { grid-template-columns: 1fr; gap: 32px; }
  .mosaico__rejilla { grid-template-columns: 1fr 1fr; }
  .mosaico__rejilla img { height: 220px; }
  .cierre-pagina { padding: 50px 0; }
  .cierre-pagina h2 { font-size: 24px; line-height: 34px; }
  .contacto--pagina { padding: 50px 0; }
  .columna-legal { width: auto; margin: 0 auto; }
  .texto-largo--legal { padding: 20px 0 40px; }
}

/* ============================================================================
   Añadidos nuestros (no están en el diseño de Sara). Son la capa de conversión:
   que a las 3 de la mañana se pueda llamar sin buscar el teléfono.
   ========================================================================== */

/* Botón de llamada en la cabecera, con el mismo dorado y la misma tipografía que el
   botón "Llamar ahora" que ya usaba ella. Va POSICIONADO, no en el flujo: metido en
   la fila empujaba su menú 50 px a la izquierda, y el menú tiene que quedarse donde
   ella lo puso. Aprovecha el hueco vacío que hay entre el logo y la navegación. */
.cabecera__fila { position: relative; }
.cabecera__llamar {
  position: absolute; left: 672px; top: 50%; transform: translateY(-50%);
  white-space: nowrap; width: auto; padding: 0 20px;
}

/* Barra fija de llamada, solo en móvil */
.barra-llamada { display: none; }
@media (max-width: 900px) {
  .barra-llamada {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    background: var(--dorado); box-shadow: 0 -6px 18px rgba(21, 35, 64, .18);
  }
  .barra-llamada a {
    display: block; text-align: center; padding: 15px 12px;
    font-family: Poppins, sans-serif; font-weight: 400; font-size: 15px;
    color: var(--tinta); min-height: 48px;
  }
  /* hueco para que la barra no tape el pie */
  .pie { padding-bottom: 74px; }
  /* los flotantes suben por encima de la barra */
  .flotantes { bottom: 74px; }
  /* en móvil el teléfono de la cabecera cabe justo, se deja solo el icono grande */
  .cabecera__llamar { display: none; }
}

/* Foco visible: sin esto no se puede navegar la web con el teclado */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--dorado); outline-offset: 2px;
}

/* ============================================================================
   Páginas de captación (zonas y averías) y bloques nuevos de la home.
   Mismo sistema visual que el resto: colores y tipografías del tema de Wix.
   ========================================================================== */

.portada--captacion { padding: 72px 0 60px; }
.portada--captacion h1 { max-width: 900px; margin-inline: auto; }
.portada--captacion p { font-size: 17px; max-width: 720px; }
.botonera--centrada { justify-content: center; margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; }
.botonera--centrada .btn { width: auto; padding: 0 26px; }

.seccion-clara { padding: 60px 0; }
.seccion-clara + .seccion-clara { padding-top: 0; }
.titulo-bloque {
  font-family: Manrope, sans-serif; font-weight: 700; font-size: 22px; line-height: 31px;
  color: var(--marino-hondo); margin: 0 0 18px;
}
.titulo-bloque + p + .titulo-bloque,
.lista-marcada + .titulo-bloque { margin-top: 40px; }
.dos-columnas-texto {
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start;
}

.etiquetas { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.etiquetas li {
  background: var(--crema); color: var(--marino); border-radius: 999px;
  padding: 6px 14px; font-size: 14px;
}

.lista-marcada { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.lista-marcada li { position: relative; padding-left: 26px; }
.lista-marcada li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 10px; height: 10px; background: var(--dorado); border-radius: 2px;
}

/* Lista de averías de la página de zona.
   Sara: "sí redirige, pero visualmente no se percibe que es un enlace". Tenía razón:
   estaba maquetada como ficha informativa. Ahora lo dice de tres formas a la vez —
   flecha siempre visible, un "Ver qué hacemos" bajo cada avería, y el titular
   subrayado — y al pasar por encima se levanta y la flecha avanza. */
.lista-servicios { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.lista-servicios a {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 18px 18px 20px; background: var(--crema);
  border: 1px solid rgba(21, 35, 64, .1); border-left: 3px solid var(--dorado);
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.lista-servicios a:hover,
.lista-servicios a:focus-visible {
  background: #E9E4DD; border-color: rgba(191, 166, 120, .55);
  border-left-color: var(--dorado); transform: translateX(3px);
}
.lista-servicios__texto { flex: 1; min-width: 0; }
.lista-servicios strong {
  display: inline-block; font-family: Manrope, sans-serif; font-weight: 700;
  color: var(--marino); margin-bottom: 4px;
  text-decoration: underline; text-decoration-color: rgba(191, 166, 120, .6);
  text-underline-offset: 4px;
}
.lista-servicios a:hover strong { text-decoration-color: var(--dorado); }
.lista-servicios__resumen { display: block; color: var(--tinta); font-size: 14px; }
.lista-servicios__mas {
  display: inline-block; margin-top: 8px;
  font-family: Manrope, sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: .03em; color: var(--marino);
}
.lista-servicios__flecha {
  width: 22px; height: 22px; flex: 0 0 22px; color: var(--dorado);
  transition: transform .15s ease;
}
.lista-servicios a:hover .lista-servicios__flecha { transform: translateX(4px); }

.lista-zonas { list-style: none; padding: 0; margin: 0 0 30px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.lista-zonas a {
  display: block; padding: 10px 20px; border: 1px solid var(--borde, rgba(21,35,64,.15));
  font-family: Manrope, sans-serif; font-weight: 700; font-size: 15px; color: var(--marino);
  transition: border-color .15s ease, color .15s ease;
}
.lista-zonas a:hover { border-color: var(--dorado); color: var(--tinta); }

.rejilla-zonas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px; }
.tarjeta-zona {
  display: block; padding: 28px; background: var(--crema);
  border-top: 3px solid var(--dorado); transition: transform .15s ease;
}
.tarjeta-zona:hover { transform: translateY(-3px); }
.tarjeta-zona h2 {
  font-weight: 700; font-size: 22px; line-height: 31px; color: var(--marino-hondo); margin-bottom: 10px;
}
.tarjeta-zona p { margin: 0 0 14px; }
.tarjeta-zona span { font-family: Manrope, sans-serif; font-weight: 700; font-size: 14px; color: var(--marino); }
.tarjeta-zona span::after { content: " →"; }

/* Qué hacer mientras llegamos: misma rejilla de cuatro columnas que "¿Por qué
   elegirnos?", para que la home no cambie de ritmo */
.mientras { padding: 0 0 73px; }

.presentacion__confianza { margin-top: -34px; margin-bottom: 40px; color: var(--gris); }

/* Preguntas frecuentes */
.faq { padding: 60px 0 70px; background: var(--crema); }
.faq__lista { max-width: 820px; margin: 0 auto; }
.faq__item { border-bottom: 1px solid rgba(21, 35, 64, .12); }
.faq__item summary {
  cursor: pointer; list-style: none; padding: 20px 34px 20px 0; position: relative;
  font-family: Manrope, sans-serif; font-weight: 700; font-size: 17px; color: var(--marino-hondo);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-size: 22px; color: var(--dorado); font-weight: 400;
}
.faq__item[open] summary::after { content: "–"; }
.faq__item p { margin: 0 0 20px; padding-right: 34px; }

@media (max-width: 900px) {
  .portada--captacion { padding: 40px 0 34px; }
  .portada--captacion p { font-size: 15px; }
  .botonera--centrada { flex-direction: column; align-items: stretch; }
  .botonera--centrada .btn { width: 100%; justify-content: center; }
  .seccion-clara { padding: 40px 0; }
  .dos-columnas-texto { grid-template-columns: 1fr; gap: 36px; }
  .mientras { padding-bottom: 40px; }
  .presentacion__confianza { margin-top: 0; }
  .faq { padding: 40px 0 46px; }
  .faq__item summary { font-size: 16px; padding: 16px 30px 16px 0; }
  .lista-zonas { justify-content: flex-start; }
}

/* Pie: cuarta columna con las zonas */
.pie__fila { grid-template-columns: 340px 240px 1fr auto; align-items: start; }
.pie__zonas { display: flex; flex-wrap: wrap; gap: 4px 14px; max-width: 420px; }
.pie__titulo {
  flex: 1 0 100%; font-family: Manrope, sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--gris); margin-bottom: 6px;
}
.pie__zonas a { font-size: 14px; color: var(--marino); }
.pie__zonas a:hover { color: var(--dorado); }
@media (max-width: 900px) {
  .pie__fila { grid-template-columns: 1fr; }
  .pie__zonas { justify-content: center; max-width: none; }
  .pie__titulo { text-align: center; }
}

/* ============================================================================
   Tramo intermedio (tablet y portátiles pequeños, 901-1339 px).
   Faltaba: la maqueta de escritorio está medida a 1440 con anchos fijos (columna
   de 640, fotos de 622+623, bloque de contacto de 1190) y por debajo de eso se
   salía de la pantalla. Se detectó midiendo el desbordamiento a 1024 px.
   ========================================================================== */
@media (min-width: 901px) and (max-width: 1339px) {
  .contenedor { width: calc(100% - 64px); }

  /* el teléfono de la cabecera iba anclado a 672 px: aquí estorba */
  .cabecera__llamar { position: static; transform: none; margin-left: auto; margin-right: 20px; }
  .cabecera__fila { padding: 0 24px; }

  .presentacion__rejilla { grid-template-columns: minmax(0, 46%) minmax(0, 1fr); gap: 44px; }
  .presentacion__foto { width: 100%; height: auto; aspect-ratio: 640 / 1122; }
  .presentacion h2 { width: auto; }
  .presentacion p { width: auto; max-width: 360px; }

  .porque__col { padding: 0 26px; }

  .servicios__rejilla { grid-template-columns: 1fr 1fr; gap: 24px; }
  .servicio img { height: auto; aspect-ratio: 622 / 726; }
  .servicio span { top: 50%; transform: translateY(-50%); }

  .testimonios__rejilla { grid-template-columns: repeat(3, 1fr); }
  .testimonio { padding: 0 22px; }

  .contacto__rejilla,
  .contacto--clara .contacto__rejilla { width: 100%; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 40px; }

  .columna-legal { width: auto; max-width: 770px; margin: 0 auto; }

  .pie__fila { padding: 0 40px; grid-template-columns: 1fr 1fr 1fr auto; gap: 24px; }

  .dos-columnas-texto { gap: 40px; }
  .galeria__rejilla { gap: 20px; }
  .mosaico__rejilla img { height: auto; aspect-ratio: 360 / 406; }
  .portada__foto { height: auto; aspect-ratio: 1440 / 1000; }
  .tira__pista img { width: 70vw; height: auto; aspect-ratio: 1280 / 261; }
}

/* La página de contacto se salía por la derecha en móvil: la regla de escritorio
   `.contacto--clara .contacto__rejilla { width: 1190px }` tiene más especificidad
   que la del bloque móvil `.contacto__rejilla`, y ganaba. Se corrige con la misma
   especificidad, y va al final para que además gane por orden. */
@media (max-width: 900px) {
  .contacto--clara .contacto__rejilla,
  .contacto--pagina .contacto__rejilla { width: auto; grid-template-columns: 1fr; gap: 30px; }
  .contacto--clara { padding-bottom: 50px; }
}

/* ============================================================================
   Banda de zonas bajo el héroe.
   Sara: "si estoy buscando una solución necesito saber rápido si atienden en mi
   zona". Tenía razón: la sección completa caía a 5,6 pantallas de scroll. En vez
   de subir la sección entera, va una línea justo debajo del héroe: responde la
   pregunta en el primer golpe de vista y no toca la composición del héroe.
   ========================================================================== */
.banda-zonas { background: var(--crema); border-bottom: 1px solid rgba(21, 35, 64, .1); }
.banda-zonas p {
  margin: 0; padding: 16px 0; display: flex; flex-wrap: wrap;
  align-items: center; gap: 6px 14px; font-size: 15px;
}
.banda-zonas strong {
  font-family: Manrope, sans-serif; font-weight: 700; color: var(--marino-hondo);
}
.banda-zonas a {
  color: var(--marino); text-decoration: underline;
  text-decoration-color: rgba(191, 166, 120, .55); text-underline-offset: 4px;
}
.banda-zonas a:hover { color: var(--tinta); text-decoration-color: var(--dorado); }
.banda-zonas__resto { color: var(--gris); }

@media (max-width: 900px) {
  .banda-zonas p { padding: 14px 0; font-size: 14px; gap: 5px 12px; }
}

/* En escritorio el héroe mide 860 px y se come la primera pantalla entera: la banda
   caía a 1,12 pantallas y seguía pidiendo scroll. Se sube SOBRE el borde inferior del
   héroe con un margen negativo — así se ve de un vistazo y no se toca ni la posición
   del titular, ni la del subtítulo, ni la del botón que puso Sara. */
@media (min-width: 901px) {
  .banda-zonas {
    margin-top: -60px; position: relative; z-index: 2;
    background: rgba(21, 35, 64, .82);
    backdrop-filter: blur(3px);
    border-bottom: 0; border-top: 1px solid rgba(191, 166, 120, .35);
  }
  .banda-zonas p { padding: 17px 0; }
  .banda-zonas strong { color: var(--crema); }
  .banda-zonas a { color: var(--crema); text-decoration-color: rgba(191, 166, 120, .8); }
  .banda-zonas a:hover { color: var(--dorado); text-decoration-color: var(--dorado); }
  .banda-zonas__resto { color: rgba(242, 239, 235, .7); }
}

/* El héroe medía 860 px FIJOS. En un portátil de 1366x768 el viewport ronda los
   640 px: no cabía ni el héroe, y la banda de zonas quedaba fuera de la pantalla
   pasara lo que pasara. Se hace fluido: nunca más alto que la pantalla menos la
   cabecera y la banda.

   El texto pasa a anclarse abajo (antes iba con padding-top: 448px). A 860 px de
   alto el resultado es IDÉNTICO al de Sara — el h1 sigue cayendo en y=596 y el botón
   en 856 — pero al encoger la pantalla la composición se mantiene en vez de salirse. */
@media (min-width: 901px) {
  .heroe {
    height: clamp(420px, calc(100vh - 148px - 62px), 860px);
    align-items: flex-end;
  }
  .heroe__caja { padding-top: 0; padding-bottom: 109px; }
}