/* ==========================================================================
   AREA UNITED · Página «Contacto» · Datos de contacto a un lado y formulario
   al otro. Reutiliza la lista de datos de css/p2-contact.css (.p2-contact-*)
   y la tarjeta/campos del formulario de css/p2-trial.css (.p2-trial-card,
   .p2-form, .p2-field…). Solo prefijo p2-cp-. No redefine tokens ni base.
   ========================================================================== */

/* --- Bloque principal: datos + formulario --- */
.p2-cp-main { padding-top: 0; }
.p2-cp-grid { display: grid; gap: 48px; }

/* Cabecera de la columna de datos: etiqueta de ficha técnica + titular corto */
.p2-cp-head { display: grid; gap: 14px; margin-bottom: 28px; }
.p2-cp-head h2 { font-size: clamp(32px, 4vw, 48px); line-height: 1; max-width: 16ch; }

/* Lista de datos (.p2-contact-list de la home) con cascada de revelado */
.p2-cp-list .p2-contact-row:nth-child(1) { --d: 80ms; }
.p2-cp-list .p2-contact-row:nth-child(2) { --d: 160ms; }
.p2-cp-list .p2-contact-row:nth-child(3) { --d: 240ms; }
.p2-cp-list .p2-contact-row:nth-child(4) { --d: 320ms; }
.p2-cp-list .p2-contact-row:nth-child(5) { --d: 400ms; }
.p2-cp-list .p2-contact-row:nth-child(6) { --d: 480ms; }

/* Enlaces de dato (teléfono, email…): blancos con subrayado amarillo al pasar */
.p2-cp-link { color: var(--white); border-bottom: 1px solid transparent; transition: border-color var(--t-fast), color var(--t-fast); }
.p2-cp-link:hover, .p2-cp-link:focus-visible { border-bottom-color: var(--yellow); }
.p2-cp-sub { display: block; margin-top: 4px; font-size: 13px; color: var(--gray-text); }

/* Horario del centro: cuatro filas (la cuarta, domingo cerrado, en gris) */
.p2-cp-hours { max-width: 360px; }
.p2-cp-hours .p2-cp-closed { color: var(--gray-text); font-size: 15px; letter-spacing: .02em; }

/* Redes: tres enlaces con icono y nombre */
.p2-cp-social { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 0; padding: 0; list-style: none; }
.p2-cp-social a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--white);
  transition: color var(--t-fast);
}
.p2-cp-social a:hover, .p2-cp-social a:focus-visible { color: var(--yellow); }
.p2-cp-social .p2-icon-24 { width: 20px; height: 20px; }

/* Acciones bajo la lista: «Cómo llegar» + WhatsApp */
.p2-cp-actions { margin-top: 32px; gap: 20px 32px; }

/* --- Tarjeta del formulario (.p2-trial-card sobre fondo negro: borde fino) --- */
.p2-cp-card { border: 1px solid var(--surface-2); }

/* Área de texto: mismo trazo que .p2-input pero con altura propia y redimensión vertical */
.p2-cp-textarea {
  height: auto;
  min-height: 132px;
  padding-top: 22px;
  padding-bottom: 8px;
  resize: vertical;
  line-height: 1.5;
}
/* La etiqueta flotante del área de texto arranca algo más arriba */
.p2-field--area .p2-label { top: 14px; }

/* Casillas: la de comunicaciones comerciales va justo bajo la de privacidad */
.p2-cp-checks { display: grid; gap: 14px; }

/* Nota de maqueta bajo el botón */
.p2-cp-form-note { font-size: 13px; color: var(--gray-text); }

/* --- Tablet --- */
@media (min-width: 768px) {
  .p2-cp-grid { gap: 56px; }
}

/* --- Escritorio: datos 5 / formulario 7 --- */
@media (min-width: 1024px) {
  .p2-cp-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 64px;
    align-items: start;
  }
  .p2-cp-card { max-width: 640px; }
}
@media (min-width: 1280px) {
  .p2-cp-grid { gap: 96px; }
}