/* =============================================================================
   PUPPY KING 305 — SECCION DE CONTACTO (concepto editorial)

   Shortcode: [pk_contact_section]

   Sustituye a la seccion del basset del demo. Sin blobs, sin garabatos, sin
   amarillo: dos columnas limpias sobre champagne.

   El fondo es #F3E9D7, el MISMO del header. No es casualidad: la seccion
   dialoga con la cabecera y el conjunto se lee como una familia, mientras que
   la card crema por encima le da la profundidad.
   ========================================================================== */

.pk-contact {
  position: relative;
  width: 100%;
  padding: clamp(56px, 8vw, 110px) 20px;
  background-color: var(--pk-cream-warm);
}

/* Rompe el contenedor de Elementor y va de borde a borde */
.pk-contact--full,
.elementor-widget-shortcode .pk-contact {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.pk-contact__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}


/* -----------------------------------------------------------------------------
   COLUMNA EDITORIAL
-------------------------------------------------------------------------------- */

/* --- Eyebrow: la rayita va como pseudo-elemento, no escrita en el texto,
       para que los lectores de pantalla no lean "guion guion". --- */
.pk-contact__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  color: var(--pk-gold-ink);
  font-family: var(--pk-font-display);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
}

.pk-contact__eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background-color: var(--pk-gold-ink);
}

/* --- Titular --- */
.pk-contact__title {
  margin: 0 0 20px;
  color: var(--pk-chocolate);
  font-family: var(--pk-font-display);
  font-size: clamp(30px, 4.2vw, 52px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: none;
}

/* El acento: serif cursiva con gradiente oro.
   El contraste entre la Oswald condensada y la Playfair cursiva es lo que da
   el aire editorial; en la misma fuente no funcionaria. */
.pk-contact__accent {
  font-family: var(--pk-font-serif);
  font-style: italic;
  font-weight: 500;
  background: linear-gradient(
    118deg,
    var(--pk-gold-ink) 0%,
    var(--pk-gold) 48%,
    var(--pk-gold-dark) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--pk-gold-ink);   /* respaldo si el navegador no soporta el clip */
}

.pk-contact__lead {
  max-width: 46ch;
  margin: 0 0 34px;
  color: var(--pk-chocolate-soft);
  font-family: var(--pk-font-body);
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.75;
}

/* --- La lista de datos, con separadores finos --- */
.pk-contact__facts {
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(62, 43, 26, 0.12);
}

.pk-contact__fact {
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid rgba(62, 43, 26, 0.12);
}

.pk-contact__fact-label {
  margin: 0;
  color: var(--pk-gold-ink);
  font-family: var(--pk-font-display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.pk-contact__fact-value {
  margin: 0;
  color: var(--pk-chocolate);
  font-family: var(--pk-font-body);
  font-size: 15px;
  line-height: 1.55;
}

.pk-contact__fact-value a {
  color: var(--pk-chocolate);
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 151, 31, 0.4);
  transition: color var(--pk-transition), border-color var(--pk-transition);
}

.pk-contact__fact-value a:hover,
.pk-contact__fact-value a:focus {
  color: var(--pk-gold-ink);
  border-bottom-color: var(--pk-gold-ink);
}


/* -----------------------------------------------------------------------------
   LA CARD DEL FORMULARIO

   Crema sobre champagne: el contraste es leve a proposito. La card no compite
   con la columna editorial, solo se despega lo justo para leerse como un
   objeto aparte. El trabajo pesado lo hace la sombra.
-------------------------------------------------------------------------------- */
/* La card va BLANCA, no crema.

   Antes era crema #FBF6EA sobre el champagne #F3E9D7 de la seccion: dos tonos
   casi iguales, y la card no se percibia. Se invierte la relacion:

     champagne (seccion)  ->  BLANCO (card)  ->  crema (campos)

   Asi hay un escalon claro entre seccion y card, y los campos siguen
   distinguiendose dentro sin salirse de la familia calida. */
.pk-contact-card {
  padding: clamp(26px, 3.4vw, 44px);
  border-radius: 26px;
  background-color: var(--pk-white);
  /* Hairline calido: define el borde de la card en pantallas donde la sombra
     se ve poco */
  border: 1px solid rgba(62, 43, 26, 0.06);
  /* Sombra en chocolate, no en negro: sobre champagne una sombra gris ensucia
     el tono. Tres capas: contacto, elevacion media y difusion larga. */
  box-shadow:
    0 1px 2px rgba(62, 43, 26, 0.05),
    0 8px 20px rgba(62, 43, 26, 0.07),
    0 26px 70px rgba(62, 43, 26, 0.13);
}

.pk-contact-card__label {
  display: block;
  margin-bottom: 24px;
  color: var(--pk-gold-ink);
  font-family: var(--pk-font-display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

.pk-contact-card__micro {
  margin: 18px 0 0;
  color: var(--pk-chocolate-soft);
  font-family: var(--pk-font-body);
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}

.pk-contact-card__notice {
  padding: 20px;
  border: 1px dashed var(--pk-gold-doodle);
  border-radius: 12px;
  color: var(--pk-chocolate-soft);
  font-size: 14px;
  text-align: center;
}


/* -----------------------------------------------------------------------------
   LOS CAMPOS

   Selectores comprobados contra las clases reales de Contact Form 7 v5.x:
     span.wpcf7-form-control-wrap   envuelve cada campo
     .wpcf7-form-control            todos los controles
     .wpcf7-text .wpcf7-email .wpcf7-tel .wpcf7-textarea
     input.wpcf7-submit             el boton
     span.wpcf7-not-valid-tip       error bajo el campo
     div.wpcf7-response-output      mensaje final
     span.wpcf7-spinner             spinner
     form.sent / .invalid / .failed el estado va en el <form>
-------------------------------------------------------------------------------- */

/* --- BLINDAJE CONTRA wpautop ---------------------------------------------
   El filtro wpcf7_autop_or_not ya lo desactiva (ver inc/contact-section.php),
   pero si alguien lo reactiva o edita el formulario desde wp-admin, esto
   evita que el layout se desmonte otra vez.

   Sin esto: los <br /> abren huecos entre label y campo, y los <p> se
   convierten en los hijos del grid, tirando las dos columnas a una.
------------------------------------------------------------------------- */
.pk-contact-card .pk-form p {
  margin: 0;
  padding: 0;
}

/* Solo los <br> sueltos que mete el autop, no los que alguien ponga a
   proposito dentro de un texto */
.pk-contact-card .pk-form > br,
.pk-contact-card .pk-form__row > br,
.pk-contact-card .pk-form__field > br {
  display: none;
}

/* --- El grid de dos columnas ---
   Se apunta a los HIJOS DIRECTOS, sean <label> o el <p> que pudiera envolverlos.
   Asi las dos columnas se mantienen pase lo que pase con el autop. */
.pk-contact-card .pk-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}

.pk-contact-card .pk-form__row > * {
  min-width: 0;   /* deja que la columna se encoja en vez de desbordar */
  margin: 0;
}

.pk-contact-card .pk-form__field {
  display: block;
  margin-bottom: 16px;
}

/* Dentro de una fila el margen lo pone el gap, no el campo */
.pk-contact-card .pk-form__row .pk-form__field {
  margin-bottom: 0;
}

/* Las filas si separan entre si */
.pk-contact-card .pk-form__row {
  margin-bottom: 16px;
}

/* Labels ARRIBA, en mayusculas pequenas */
.pk-contact-card .pk-form__label {
  display: block;
  margin-bottom: 7px;
  color: var(--pk-chocolate);
  font-family: var(--pk-font-display);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

/* CF7 envuelve cada campo en un span: sin esto no ocupa el ancho */
.pk-contact-card .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

/* Campos en crema sobre la card blanca: se ven como campos sin necesidad de
   un borde fuerte, y el conjunto sigue en la familia calida. */
.pk-contact-card .wpcf7-form-control.wpcf7-text,
.pk-contact-card .wpcf7-form-control.wpcf7-email,
.pk-contact-card .wpcf7-form-control.wpcf7-tel,
.pk-contact-card .wpcf7-form-control.wpcf7-textarea {
  display: block;
  width: 100%;
  padding: 12px 15px;
  border: 1px solid var(--pk-field-border);
  border-radius: 12px;
  background-color: var(--pk-cream-bright);
  color: var(--pk-chocolate);
  font-family: var(--pk-font-body);
  font-size: 15px;
  line-height: 1.45;
  transition: border-color var(--pk-transition), box-shadow var(--pk-transition),
    background-color var(--pk-transition);
}

.pk-contact-card .wpcf7-form-control::placeholder {
  color: rgba(62, 43, 26, 0.38);
}

/* Foco dorado con halo suave, en vez del contorno azul del navegador.
   El campo pasa a blanco: se despega del resto y marca donde estas. */
.pk-contact-card .wpcf7-form-control:focus {
  border-color: var(--pk-gold-doodle);
  background-color: var(--pk-white);
  box-shadow: 0 0 0 3px rgba(201, 151, 31, 0.15);
  outline: none;
}

.pk-contact-card .wpcf7-form-control.wpcf7-textarea {
  min-height: 96px;   /* rows 3 */
  resize: vertical;
}


/* -----------------------------------------------------------------------------
   EL BOTON — gradiente oro, texto chocolate

   La clase pk-submit se la pone el propio shortcode del formulario
   ([submit class:pk-submit ...]), asi que no depende de wpcf7-submit para
   estilarse. Se cubren las dos por si acaso.
-------------------------------------------------------------------------------- */
.pk-contact-card .wpcf7-submit,
.pk-contact-card .pk-submit {
  box-sizing: border-box;   /* 100% + 52px de padding se salia de la card en movil */
  display: block;
  width: 100%;
  min-height: 54px;
  margin: 6px 0 0;
  padding: 0 26px;
  border: 0;
  border-radius: var(--pk-radius-pill);
  background: linear-gradient(100deg, #EBCB7B 0%, #C9971F 100%);
  color: var(--pk-chocolate);
  font-family: var(--pk-font-display);
  font-size: 14.5px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 54px;
  cursor: pointer;
  transition: filter var(--pk-transition), transform var(--pk-transition),
    box-shadow var(--pk-transition);
}

.pk-contact-card .wpcf7-submit:hover,
.pk-contact-card .wpcf7-submit:focus,
.pk-contact-card .pk-submit:hover,
.pk-contact-card .pk-submit:focus {
  /* brightness sobre el gradiente: mantiene la transicion de color en vez de
     aplanarla con un color fijo */
  filter: brightness(0.94);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(201, 151, 31, 0.32);
  color: var(--pk-chocolate);
}

.pk-contact-card .wpcf7-submit:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
  filter: none;
}

/* El spinner sale pegado al boton por defecto */
.pk-contact-card .wpcf7-spinner {
  display: block;
  margin: 14px auto 0;
}


/* -----------------------------------------------------------------------------
   MENSAJES DE CF7

   En CF7 5.x el estado va como clase en el <form> (.sent, .invalid, .failed) y
   el texto en div.wpcf7-response-output. Por defecto trae un borde de 2px
   rojo o verde que rompe la paleta; se rehace en la familia de la marca.
-------------------------------------------------------------------------------- */
.pk-contact-card .wpcf7-response-output {
  margin: 18px 0 0;
  padding: 13px 17px;
  border: 1px solid rgba(62, 43, 26, 0.12);
  border-left-width: 4px;
  border-radius: 12px;
  background-color: var(--pk-white);
  color: var(--pk-chocolate);
  font-family: var(--pk-font-body);
  font-size: 13.5px;
  line-height: 1.6;
}

.pk-contact-card .wpcf7-form.sent .wpcf7-response-output {
  border-left-color: var(--pk-emerald);
  background-color: rgba(14, 159, 110, 0.06);
}

.pk-contact-card .wpcf7-form.invalid .wpcf7-response-output,
.pk-contact-card .wpcf7-form.unaccepted .wpcf7-response-output {
  border-left-color: var(--pk-gold-doodle);
  background-color: rgba(201, 151, 31, 0.08);
}

.pk-contact-card .wpcf7-form.failed .wpcf7-response-output,
.pk-contact-card .wpcf7-form.aborted .wpcf7-response-output,
.pk-contact-card .wpcf7-form.spam .wpcf7-response-output {
  border-left-color: var(--pk-magenta);
  background-color: rgba(var(--pk-magenta-rgb), 0.06);
}

.pk-contact-card .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  color: var(--pk-magenta);
  font-family: var(--pk-font-body);
  font-size: 12.5px;
  font-weight: 500;
}

.pk-contact-card .wpcf7-form-control.wpcf7-not-valid {
  border-color: var(--pk-magenta);
  background-color: rgba(var(--pk-magenta-rgb), 0.04);
}


/* -----------------------------------------------------------------------------
   RESPONSIVE — columna unica: texto arriba, card debajo
-------------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
  .pk-contact__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .pk-contact__lead {
    max-width: none;
  }
}

/* --- iOS: los campos DEBEN medir 16px o mas ------------------------------
   Safari de iOS hace zoom automatico al enfocar un campo con font-size menor
   de 16px. El usuario toca "Name", la pagina salta de escala y se queda
   descuadrada hasta que pellizca para volver: es de los defectos que mas se
   notan en un formulario de movil.

   Los campos estaban en 15px, asi que saltaban todos. Se suben solo en pantalla
   tactil; en escritorio se quedan como estaban.

   El boton no necesita el ajuste (no recibe foco de teclado virtual), pero se
   iguala para que la card no mezcle dos escalas de texto. */
@media screen and (max-width: 767px) {
  .pk-contact-card .wpcf7-form-control.wpcf7-text,
  .pk-contact-card .wpcf7-form-control.wpcf7-email,
  .pk-contact-card .wpcf7-form-control.wpcf7-tel,
  .pk-contact-card .wpcf7-form-control.wpcf7-textarea {
    font-size: 16px;
  }
}

@media screen and (max-width: 575px) {
  .pk-contact {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Label y valor uno debajo del otro: a 128px la columna de labels se comia
     el ancho del valor en pantallas estrechas */
  .pk-contact__fact {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 14px 0;
  }

  .pk-contact-card {
    padding: 24px 20px 26px;
    border-radius: 20px;
  }

  /* Name/Phone y Email/Which puppy, uno debajo del otro.

     El gap NO puede ser 0. Dentro de una fila los campos llevan
     margin-bottom:0 (en dos columnas el aire lo pone el gap), asi que al
     apilarlos con gap:0 quedaban pegados: la etiqueta PHONE nacia justo sobre
     el campo Name, sin respiro, mientras MESSAGE —que no va en fila— si tenia
     sus 16px. Se hereda el mismo 16px de separacion entre campos sueltos. */
  .pk-contact-card .pk-form__row {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .pk-contact-card .wpcf7-submit,
  .pk-contact-card .pk-submit {
    min-height: 52px;
    line-height: 52px;
    font-size: 13.5px;
  }
}