/* [cc_hero_form] — hero: texto + tarjeta de formulario.
   Reescrito el 2026-08-28. Tres decisiones que conviene no deshacer sin leer:

   1) CF7 mete TODOS los campos dentro de UN ÚNICO <p> separados por <br>. El CSS
      anterior daba por hecho un <p> por campo (`p { flex: 1 1 210px }`), así que
      la maquetación en columnas no se aplicaba NUNCA: salían 7 campos apilados a
      ancho completo y el hero medía ~1200px de alto. Aquí se maqueta ese <p>
      único como rejilla y se ocultan sus <br> separadores.
   2) El campo "Mensaje" se oculta en el hero: es opcional, era lo que más alto
      añadía y el formulario largo (con Mensaje) sigue vivo en /contacto/, que usa
      otro componente.
   3) La foto solo aparece por debajo de 1024px. El banco de imágenes tiene 940px
      de ancho como máximo, así que no hay material para un visual grande de
      escritorio; y con texto + formulario + foto el hero no cabe en una pantalla.
      En el apilado de móvil/tablet la foto se ve a ancho completo, con su propia
      relación de aspecto y con resolución de sobra. */

/* Full-bleed explícito. OJO: el `width: 100%` que había aquí antes tenía más
   especificidad (0,2,1) que el full-bleed global de css/style.css
   (`.entry-content .cc-comp`, 0,2,0), así que ganaba y dejaba este hero como la
   ÚNICA sección encajonada en el contenedor del tema: banda de 1120px pegada al
   borde izquierdo mientras el resto de la página iba a ancho de ventana. */
.cc-comp.cc-hero-form {
  width: auto;
  max-width: none;
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  background:
    radial-gradient(58% 78% at 94% 0%, rgba(199, 122, 69, .10), transparent 70%),
    var(--cc-cream);
  border-bottom: 1px solid var(--mr2-beige-deep, #EADFCD);
}

/* Hero a sangre bajo la cabecera. Cuando la página ARRANCA con este hero,
   quitamos el padding superior del contenedor de GeneratePress para que la banda
   crema empiece pegada al menú en vez de flotar ~144px por debajo dejando el menú
   "muy arriba". Si el navegador no soporta :has(), cae al padding normal. */
body:has(.entry-content > .cc-comp.cc-hero-form) #content.site-content {
  padding-top: 0;
}

.cc-comp .cc-hero-form__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  align-items: center;
  gap: clamp(32px, 4vw, 64px);
  width: 100%;
  max-width: var(--cc-container);
  margin: 0 auto;
  padding: clamp(32px, 3.5vw, 52px) 32px clamp(40px, 4vw, 60px);
}

.cc-comp .cc-hero-form__col {
  min-width: 0;
}

/* ---------- Columna de texto ---------- */

.cc-comp .cc-hero-form__eyebrow {
  margin-bottom: 20px;
}

/* Tope FIJO en px: con `vw` sin clamp el titular se disparaba en monitores
   panorámicos (a 3440px de ancho, 3vw serían 103px). */
.cc-comp .cc-hero-form__title {
  max-width: 620px;
  font-size: clamp(30px, 3.1vw, 46px);
  line-height: 1.12;
}

.cc-comp .cc-hero-form__text {
  max-width: 56ch;
  margin-top: 16px;
  color: var(--cc-body);
  font-size: clamp(17px, 1.3vw, 19px);
  line-height: 1.55;
}

.cc-comp .cc-hero-form__text p,
.cc-comp .cc-hero-form__legal p {
  margin: 0;
  color: inherit;
  font: inherit;
}

.cc-comp .cc-hero-form__text p + p {
  margin-top: 10px;
}

.cc-comp .cc-hero-form__bullets {
  display: grid;
  gap: 10px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.cc-comp .cc-hero-form__bullets li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--cc-ink);
  font: 500 16px/24px var(--mr2-font, 'Inter', sans-serif);
}

.cc-comp .cc-hero-form__check {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--cc-green);
}

/* ---------- Tarjeta del formulario ---------- */

.cc-comp .cc-hero-form__panel {
  align-self: center;
  min-width: 0;
  padding: 28px;
  border: 1px solid var(--mr2-beige-deep, #EADFCD);
  border-radius: var(--cc-radius);
  background: var(--cc-white);
  box-shadow: 0 18px 48px rgba(14, 43, 49, .10);
}

.cc-comp .cc-hero-form__panel-title {
  margin: 0 0 18px;
  color: var(--cc-ink);
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 26px;
}

.cc-comp .cc-hero-form__form form,
.cc-comp .cc-hero-form__form .wpcf7-form {
  display: block;
  margin: 0;
}

.cc-comp .cc-hero-form__form fieldset.hidden-fields-container {
  display: none;
  margin: 0;
  padding: 0;
  border: 0;
}

/* El <p> único que emite CF7, maquetado como rejilla de 2 columnas. */
.cc-comp .cc-hero-form__form .wpcf7-form > p {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
  margin: 0;
}

/* Los <br> que CF7 usa como separadores crearían filas vacías en la rejilla. */
.cc-comp .cc-hero-form__form .wpcf7-form > p > br,
.cc-comp .cc-hero-form__form label > br {
  display: none;
}

.cc-comp .cc-hero-form__form .wpcf7-form > p > label {
  display: block;
  min-width: 0;
}

/* A ancho completo dentro de la rejilla: el desplegable y la aceptación (son los
   únicos hijos directos del <p> además de los campos emparejados).
   OJO con lo que NO está aquí: el captcha es un <div>, y un <div> no puede vivir
   dentro de un <p>, así que el parser del navegador CIERRA el <p> al llegar a él.
   Resultado real en el DOM: el captcha, el botón de envío y el spinner terminan
   siendo hijos del <form>, no del <p>. No necesitan grid-column porque ahí ya
   son bloques a ancho completo; el hueco de 24px que los separa de la aceptación
   lo pone el <br> que CF7 deja entre medias. */
.cc-comp .cc-hero-form__form .wpcf7-form > p > label:has(select),
.cc-comp .cc-hero-form__form .wpcf7-form > p > span.wpcf7-form-control-wrap {
  grid-column: 1 / -1;
}

/* "Mensaje" fuera del hero: es opcional y era el campo que más alto añadía. */
.cc-comp .cc-hero-form__form .wpcf7-form > p > label:has(textarea) {
  display: none;
}

.cc-comp .cc-hero-form__form label {
  color: var(--cc-ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: .01em;
}

.cc-comp .cc-hero-form__form .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

/* Los 16px del tipo de letra son obligatorios: por debajo, iOS hace zoom al
   enfocar el campo y descuadra la página. */
.cc-comp .cc-hero-form__form input:not([type='checkbox']):not([type='radio']):not([type='submit']),
.cc-comp .cc-hero-form__form select,
.cc-comp .cc-hero-form__form textarea {
  width: 100%;
  min-height: 50px;
  margin-top: 6px;
  padding: 12px 16px;
  border: 1px solid var(--mr2-beige-deep, #EADFCD);
  border-radius: 12px;
  background: var(--cc-white);
  color: var(--cc-ink);
  font: 400 16px/24px var(--mr2-font, 'Inter', sans-serif);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.cc-comp .cc-hero-form__form input::placeholder,
.cc-comp .cc-hero-form__form textarea::placeholder {
  color: var(--cc-body);
  opacity: .7;
}

.cc-comp .cc-hero-form__form input:not([type='checkbox']):not([type='radio']):not([type='submit']):focus,
.cc-comp .cc-hero-form__form select:focus,
.cc-comp .cc-hero-form__form textarea:focus {
  border-color: var(--cc-green);
  box-shadow: 0 0 0 3px rgba(22, 66, 74, .14);
  outline: none;
}

/* La flecha del desplegable va como data-uri, y ahí no se puede usar var():
   el #16424A es el petróleo de marca (--mr2-color1). Si cambia la paleta, cambia
   también este hex. */
.cc-comp .cc-hero-form__form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1.5L7 7.5L13 1.5' stroke='%2316424A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
}

.cc-comp .cc-hero-form__form textarea {
  min-height: 96px;
  border-radius: var(--cc-radius-sm);
  resize: vertical;
}

/* ---------- Aceptación de privacidad ---------- */

.cc-comp .cc-hero-form__form .wpcf7-list-item {
  margin: 0;
}

.cc-comp .cc-hero-form__form .wpcf7-list-item label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--cc-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.cc-comp .cc-hero-form__form .wpcf7-list-item label a {
  color: var(--cc-green);
  text-decoration: underline;
}

.cc-comp .cc-hero-form__form input[type='checkbox'] {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--cc-green);
}

/* ---------- Botón ---------- */

.cc-comp .cc-hero-form__form input[type='submit'],
.cc-comp .cc-hero-form__form button[type='submit'] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 54px;
  padding: 16px 32px;
  border: 0;
  border-radius: 999px;
  background: var(--cc-green);
  color: var(--cc-white);
  font: 600 17px/1 var(--mr2-font, 'Inter', sans-serif);
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(22, 66, 74, .22);
  transition: filter .2s ease, transform .2s ease;
}

.cc-comp .cc-hero-form__form input[type='submit']:hover,
.cc-comp .cc-hero-form__form button[type='submit']:hover {
  filter: brightness(.92);
  transform: translateY(-1px);
}

.cc-comp .cc-hero-form__form input[type='submit']:focus-visible,
.cc-comp .cc-hero-form__form button[type='submit']:focus-visible {
  outline: 2px solid var(--cc-green);
  outline-offset: 3px;
}

/* ---------- Estados y avisos ---------- */

.cc-comp .cc-hero-form__form .wpcf7-not-valid-tip {
  display: block;
  margin-top: 4px;
  color: var(--mr2-error, #C9392D);
  font-size: 13px;
  line-height: 18px;
}

.cc-comp .cc-hero-form__form input.wpcf7-not-valid,
.cc-comp .cc-hero-form__form select.wpcf7-not-valid,
.cc-comp .cc-hero-form__form textarea.wpcf7-not-valid {
  border-color: var(--mr2-error, #C9392D);
}

.cc-comp .cc-hero-form__form .wpcf7-response-output {
  margin: 14px 0 0;
  padding: 12px 16px;
  border: 1px solid var(--mr2-beige-deep, #EADFCD);
  border-radius: var(--cc-radius-sm);
  font-size: 14px;
  line-height: 20px;
}

.cc-comp .cc-hero-form__form .wpcf7-spinner {
  justify-self: center;
  margin: 0;
}

.cc-comp .cc-hero-form__form .cf-turnstile,
.cc-comp .cc-hero-form__form iframe {
  max-width: 100%;
}

/* Las etiquetas marcadas .sr-only y la respuesta para lector de pantalla se
   ocultan visualmente sin perder accesibilidad. La clase .sr-only no está
   definida en el CSS que carga esta página, así que sin esto se veían como
   texto suelto encima de los campos. */
.cc-comp .cc-hero-form__form .sr-only,
.cc-comp .cc-hero-form__form .screen-reader-response {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.cc-comp .cc-hero-form__legal {
  margin-top: 14px;
  color: var(--cc-body);
  font-size: 13px;
  line-height: 19px;
}

/* ---------- Foto ---------- */

/* Escritorio: fuera (ver nota 3 de la cabecera del fichero). */
.cc-comp .cc-hero-form__media {
  display: none;
}

@media (max-width: 1023px) {
  .cc-comp .cc-hero-form__inner {
    grid-template-columns: 1fr;
    align-items: start;
    padding-right: 24px;
    padding-left: 24px;
  }

  .cc-comp .cc-hero-form__title {
    max-width: none;
  }

  /* Cada foto se enmarca con SU relación de aspecto (la manda el PHP en
     --cc-hf-ar); el 3/2 es solo el respaldo si no se pudo determinar. El
     max-height evita que una vertical de 434x650 dispare el alto del hero. */
  .cc-comp .cc-hero-form__media {
    display: block;
    width: 100%;
    max-width: 640px;
    margin: 26px 0 0;
    aspect-ratio: var(--cc-hf-ar, 3 / 2);
    max-height: 420px;
    overflow: hidden;
    border-radius: var(--cc-radius);
    background: var(--mr2-beige-deep, #EADFCD);
  }

  .cc-comp .cc-hero-form__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}

@media (max-width: 560px) {
  .cc-comp .cc-hero-form__inner {
    gap: 28px;
    padding-right: 20px;
    padding-left: 20px;
  }

  .cc-comp .cc-hero-form__panel {
    padding: 20px;
    border-radius: 20px;
  }

  .cc-comp .cc-hero-form__panel-title {
    font-size: 19px;
  }

  /* En móvil la foto se recorta más para que el formulario no se vaya tan abajo.
     Las apaisadas (940x627, la mayoría) caben enteras: a 350px de ancho miden
     233px de alto y no llegan al tope. */
  .cc-comp .cc-hero-form__media {
    max-height: 300px;
  }

  .cc-comp .cc-hero-form__form .wpcf7-form > p {
    grid-template-columns: 1fr;
  }
}