/* [cabecera] — hero a todo el ancho de pantalla con imagen de fondo:
   contenido (badge + H1 + descripción con checks + rating + botones) a la
   izquierda y card blanca del formulario CF7 a la derecha. */

html:has(.mr-cabecera) {
  scroll-behavior: smooth;
  overflow-x: clip; /* el truco full-bleed usa 100vw; evita scroll horizontal por la barra */
}

.mr-cabecera {
  --mrc-verde:  var(--mr-verde);                    /* verde vivo: botones, checks, badge */
  --mrc-ambar:  var(--mr-color2, #f5a623);  /* span del H1 y estrellas */
  --mrc-oscuro: var(--contrast, var(--mr-tinta));
  --mrc-texto:  var(--mr-texto);
  --mrc-blanco: #ffffff;
  --mrc-borde:  var(--mr-borde);

  /* full-bleed: ocupa todo el ancho del viewport aunque viva dentro del contenedor del tema */
  position: relative;
  left: 50%;
  width: 100vw;
  /* merge: sube el hero por detrás del logo y el menú (≈ altura de ambas barras;
     si queda franja blanca o se recorta de más, ajustar solo esta variable).
     156px = logo 96px + padding 30px arriba/abajo de .inside-header (logo y menú
     van en una sola fila en escritorio); +14 de margen (el header renderiza ~168px) para que no asome blanco. */
  --mr-merge: 170px;
  margin: calc(var(--mr-merge) * -1) 0 var(--mr-seccion) -50vw;
}

/* "Merge": en las páginas con [cabecera], el logo y el menú del sitio flotan
   transparentes sobre la foto del hero, y desaparecen los espaciados blancos
   que el tema mete encima del contenido. */

body:has(.mr-cabecera) .site-header,
body:has(.mr-cabecera) #site-navigation {
  position: relative;
  z-index: 50;
}

/* Solo el header pierde el fondo: el fondo del nav (la píldora glass)
   lo gobierna css/menu.css del plugin. */
body:has(.mr-cabecera) .site-header {
  background: transparent;
}

body:has(.mr-cabecera) .site-content,
body:has(.mr-cabecera) .site-main {
  margin-top: 0;
  padding-top: 0;
}

body:has(.mr-cabecera) .inside-article {
  padding-top: 0;
}

/* --- Hero con foto y overlay oscuro --- */

.mr-cabecera__hero {
  position: relative;
  overflow: hidden; /* recorta la <img> de fondo a la caja del hero */
  /* Red de seguridad: si algún render cae al fondo inline (background-image) en
     vez de la <img>.mr-cabecera__bg, que NUNCA se tesele en pantallas anchas. */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Imagen de fondo del hero como <img> (mejor LCP que background-image): llena la
   caja por detrás del overlay y del contenido. */
.mr-cabecera__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

.mr-cabecera__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1; /* overlay por encima de la <img> (z-index:0) y bajo el contenido (z-index:2) */
  /* capa vertical extra: oscurece la franja superior para que logo, menú y
     migas se lean bien sobre la foto */
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.65) 0%, rgba(15, 23, 42, 0) 260px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.82) 0%, rgba(15, 23, 42, 0.6) 55%, rgba(15, 23, 42, 0.42) 100%);
}

.mr-cabecera__inner {
  position: relative;
  z-index: 2; /* contenido por encima de la <img> de fondo y del overlay */
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  /* En escritorio es una sola fila (contenido | form); el row-gap solo separa
     contenido ↔ form cuando la rejilla cae a una columna (móvil). */
  row-gap: 1.75rem;
  column-gap: clamp(2rem, 4vw, 4rem);
  /* stretch (no center): la columna de contenido iguala la altura de la card del
     formulario, para que badge y botones queden alineados con sus bordes sup./inf. */
  align-items: stretch;
  width: min(100% - 2 * var(--mr-gutter), var(--mr-container));
  margin: 0 auto;
  /* padding-top holgado: deja sitio al logo y al menú flotantes. Sin aire lateral
     en el padding: el ancho ya lo limita width:min con --mr-gutter, así el
     contenido del hero queda alineado con el de las secciones de abajo. */
  padding: calc(var(--mr-merge) + clamp(1.5rem, 3vw, 2.75rem)) 0 clamp(2.25rem, 4vw, 3.5rem);
}

/* Las migas ocupan TODA la fila superior de la rejilla: si no, cuentan como un
   item de la grid y roban la celda izquierda, empujando el contenido (H1, texto,
   CTA) a la columna estrecha derecha y el formulario abajo. Con span completo, el
   contenido cae en la columna ancha izquierda (alineado al margen del sitio) y el
   formulario a la derecha. */
.mr-cabecera__migas {
  grid-column: 1 / -1;
}

.mr-cabecera__top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.85rem;
  margin-bottom: 1.25rem;
}

/* --- Columna de contenido --- */

/* Columna en flex vertical: el contenido arranca arriba (badge a la altura del
   borde superior de la card) y los botones se empujan al fondo (margin-top:auto)
   como posición de partida; Cabecera.js los sube hasta alinearlos con "Enviar". */
.mr-cabecera__contenido {
  display: flex;
  flex-direction: column;
}

.mr-cabecera__badge {
  display: inline-flex;
  align-self: start; /* no estirarse a lo ancho de la columna flex: el pill se ajusta al texto */
  align-items: center;
  gap: 0.5rem;
  margin: 0; /* la separación con el H1 la da .mr-cabecera__top */
  padding: 0.36rem 1rem; /* vertical -20% respecto al diseño Stitch (0.45rem) */
  border-radius: 999px;
  background: var(--mrc-verde);
  color: var(--mrc-blanco);
  font-size: 0.85rem;
  font-weight: 600;
}

.mr-cabecera__badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mrc-blanco);
}

.mr-cabecera__titulo {
  margin: 0 0 1.5rem;
  color: var(--mrc-blanco);
  font-size: clamp(2.2rem, 4.5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* La parte destacada salta a su propia línea → título en dos líneas.
   Ajuste visual heredado para titulos con <span>. */
.mr-cabecera__titulo span {
  display: block;
  color: var(--mrc-ambar);
}

.mr-cabecera__descripcion {
  /* el color va también en el contenedor: si el editor cuela texto fuera
     de <p> (shortcode multilínea), que nunca quede oscuro sobre la foto */
  color: rgba(255, 255, 255, 0.88);
}

.mr-cabecera__descripcion p {
  margin: 0 0 1rem;
  max-width: 58ch; /* líneas de ~85 caracteres cansan; medida de lectura cómoda */
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.05rem;
  line-height: 1.65;
}

/* Listas de la descripción: checks en dos columnas, como el diseño */

.mr-cabecera__descripcion ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem 1.75rem;
  margin: 1.25rem 0;
  padding: 0;
  list-style: none;
}

.mr-cabecera__descripcion li {
  position: relative;
  margin: 0;
  padding-left: 1.6rem;
  color: var(--mrc-blanco);
  font-size: 0.95rem;
  line-height: 1.5;
}

.mr-cabecera__descripcion li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--mrc-verde);
  font-weight: 700;
}

/* --- Botones --- */

.mr-cabecera__botones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: auto; /* empuja los botones al fondo, a la altura del botón "Enviar" */
}

.mr-cabecera__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem 1.6rem;
  border: 0; /* el <button> "Llámame" no debe pintar el borde nativo */
  border-radius: 999px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: filter 0.3s ease;
}

/* Botón de presupuesto: "Llámame" (abre el modal) en tablet/escritorio,
   "Solicitar Presupuesto" (ancla al formulario) en móvil. */
.mr-cabecera__btn--solo-movil { display: none; }
.mr-cabecera__btn--no-movil   { display: inline-flex; }

@media (max-width: 767px) {
  .mr-cabecera__btn--solo-movil { display: inline-flex; }
  .mr-cabecera__btn--no-movil   { display: none; }
}

.mr-cabecera__btn:hover {
  filter: brightness(1.12);
}

.mr-cabecera__btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  flex-shrink: 0;
}

/* GeneratePress pinta los enlaces con sus colores globales: forzamos los nuestros. */

.mr-cabecera__btn--whatsapp,
.mr-cabecera__btn--whatsapp:visited,
.mr-cabecera__btn--whatsapp:hover,
.mr-cabecera__btn--whatsapp:focus {
  background: var(--mrc-verde);
  color: var(--mrc-blanco);
}

.mr-cabecera__btn--presupuesto,
.mr-cabecera__btn--presupuesto:visited,
.mr-cabecera__btn--presupuesto:hover,
.mr-cabecera__btn--presupuesto:focus {
  background: var(--mrc-blanco);
  color: var(--mrc-oscuro);
}

/* --- Card del formulario (columna derecha, sobre la imagen) --- */

.mr-cabecera__form {
  position: relative;
  /* No se estira con la columna de texto: altura natural y "Enviar" en posición
     estable. Los botones de la izquierda se alinean a "Enviar" por JS
     (Cabecera.js), que funciona aunque las dos columnas tengan distinto alto. */
  align-self: start;
  padding: 1.75rem;
  border-radius: 1.25rem;
  background: var(--mrc-blanco);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.25);
  scroll-margin-top: 110px;
}

.mr-cabecera__form-titulo {
  margin: 0 0 0.5rem;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--mrc-oscuro);
}

.mr-cabecera__form-texto {
  margin: 0 0 1.25rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--mrc-texto);
}

/* Contact Form 7 dentro de la card */

.mr-cabecera__form form > p {
  margin: 0 0 1rem;
}

.mr-cabecera__form label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--mrc-oscuro);
}

.mr-cabecera__form input[type="text"],
.mr-cabecera__form input[type="tel"],
.mr-cabecera__form input[type="email"],
.mr-cabecera__form textarea {
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--mrc-borde);
  border-radius: 0.65rem;
  background: #fbfcfa;
  font-size: 0.95rem;
}

.mr-cabecera__form input:focus,
.mr-cabecera__form textarea:focus {
  outline: none;
  border-color: var(--mrc-verde);
}

.mr-cabecera__form textarea {
  height: 110px;
  resize: vertical;
}

.mr-cabecera__form input[type="submit"] {
  width: 100%;
  padding: 0.9rem 1rem;
  border: 0;
  border-radius: 999px;
  background: var(--mrc-verde);
  color: var(--mrc-blanco);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.3s ease;
}

.mr-cabecera__form input[type="submit"]:hover {
  filter: brightness(1.12);
}

/* La salida de CF7 (errores/confirmación) NO debe crecer la card ni empujar los
   botones izquierdos: flota justo debajo de la card (fondo blanco para que se
   lea sobre la foto del hero). */
.mr-cabecera__form .wpcf7-response-output {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 0.5rem 0 0;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  background: #fff;
  font-size: 0.85rem;
}

/* --- Móvil / tablet: una columna, formulario debajo del contenido --- */

@media (max-width: 900px) {
  .mr-cabecera {
    --mr-merge: 100px; /* en móvil solo flota la barra del logo (el menú va plegado) */
    /* El hero empieza pegado arriba: ya no se tira de él con margen negativo
       (eso dejaba franja blanca cuando la barra del logo mide más que --mr-merge). */
    margin-top: 0;
  }

  /* En móvil el header (logo + hamburguesa) flota FUERA del flujo, encima de la
     foto del hero: así nunca asoma el fondo blanco del body por arriba, mida lo
     que mida la barra. (El sticky es solo de escritorio, no se ve afectado.) */
  body:has(.mr-cabecera) .site-header {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
  }

  .mr-cabecera__inner {
    grid-template-columns: 1fr;
    /* en una columna el row-gap también separa contenido ↔ form: más aire */
    row-gap: 1.75rem;
    padding-top: calc(var(--mr-merge) + 1rem);
  }

  .mr-cabecera__descripcion ul {
    grid-template-columns: 1fr;
  }

  .mr-cabecera__btn {
    flex: 1 1 100%;
  }

  /* En una columna no hay que alinear con "Enviar": sin pie extra y la
     respuesta de CF7 vuelve al flujo normal (dentro de la card). */
  .mr-cabecera__contenido {
    padding-bottom: 0;
  }

  .mr-cabecera__form .wpcf7-response-output {
    position: static;
    margin: 0.75rem 0 0;
  }

  .mr-cabecera__form {
    padding: 1.5rem;
    scroll-margin-top: 80px;
  }
}

/* --- Móvil (≤767px): el hero llena la primera pantalla --- */

@media (max-width: 767px) {
  /* El contenido (badge, H1, ventajas y botones) ocupa todo el alto visible:
     los botones quedan abajo del todo y el formulario cae JUSTO por debajo del
     pliegue. Así lo último que se ve es el botón blanco "Solicitar Presupuesto"
     (que ancla al formulario, ya visible al pulsarlo). svh = alto con la barra
     del navegador a la vista, para que el formulario no asome al cargar; el
     100vh va como reserva para navegadores que no entiendan svh. */
  .mr-cabecera__contenido {
    min-height: calc(100vh - var(--mr-merge) - 2.5rem);
    min-height: calc(100svh - var(--mr-merge) - 2.5rem);
  }

  /* Separación contenido ↔ formulario algo mayor: refuerza que el formulario
     (y su sombra) arranquen por debajo del pliegue. */
  .mr-cabecera__inner {
    row-gap: 3rem;
  }

  /* H1 algo más grande en móvil. Es solo tamaño visual (CSS): el texto del H1
     no cambia, así que no afecta ni al SEO ni a la carga. */
  .mr-cabecera__titulo {
    font-size: clamp(2.4rem, 9vw, 3rem);
  }
}

/* --- Variante sin formulario (formulario="no"): hero informativo (p. ej. blog) --- */

/* Sin la card del formulario, el contenido (badge + H1 + descripción + botones)
   ocupa una sola columna a todo el ancho. */
.mr-cabecera--sin-form .mr-cabecera__inner {
  grid-template-columns: 1fr;
}

/* Medida de lectura cómoda para el H1 y el texto (no se estira de borde a borde). */
.mr-cabecera--sin-form .mr-cabecera__contenido {
  max-width: 820px;
}

@media (max-width: 767px) {
  /* Sin formulario debajo del pliegue, el hero no necesita llenar toda la
     pantalla del móvil: altura natural. */
  .mr-cabecera--sin-form .mr-cabecera__contenido {
    min-height: 0;
  }
}