/* Replicarte · campos con la etiqueta dentro (etiqueta flotante). Lo activa campos.js poniendo .cf en cada campo.
   Caja de 56 px, bordes suaves, letra de 16 px (en móvil, menos de 16 px hace que iOS amplíe la página al tocar).
   La especificidad va triplicada (.cf.cf.cf) para mandar sobre los estilos de cada página sin !important. */
.cf.cf.cf { position: relative; display: block; gap: 0; margin-bottom: 12px; min-width: 0; }
.cf.cf.cf > label {
  position: absolute; left: 14px; top: 18px; z-index: 1; margin: 0; padding: 0;
  max-width: calc(100% - 28px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: 16px; line-height: 20px; font-weight: 400; color: #5f6670; letter-spacing: 0;
  pointer-events: none; transform-origin: left top;
  transition: top .15s ease, font-size .15s ease, color .15s ease;
}
.cf.cf.cf > input, .cf.cf.cf > select, .cf.cf.cf > textarea {
  display: block; width: 100%; box-sizing: border-box; min-width: 0; margin: 0;
  height: 56px; min-height: 56px; padding: 24px 14px 8px;
  font-size: 16px; line-height: 22px; color: #1d2329;
  background: #fff; border: 1px solid #c9ced3; border-radius: 10px;
  box-shadow: none; outline: none; -webkit-appearance: none; appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cf.cf.cf > textarea { height: auto; min-height: 104px; padding-top: 26px; resize: vertical; }
.cf.cf.cf > select {
  padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235f6670' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
/* Arriba y pequeña: al enfocar, con valor, con autocompletado, y siempre en desplegables. */
.cf.cf.cf:focus-within > label, .cf.cf.cf.cf-lleno > label, .cf.cf.cf.cf-select > label {
  top: 8px; font-size: 12px; line-height: 14px; color: #5f6670;
}
.cf.cf.cf:focus-within > label { color: #b91c1c; }
.cf.cf.cf > input:focus, .cf.cf.cf > select:focus, .cf.cf.cf > textarea:focus {
  border-color: #b91c1c; box-shadow: 0 0 0 3px rgba(185, 28, 28, .16);
}
/* Sin texto de ejemplo dentro de la caja: el nombre del campo ya está ahí. */
.cf.cf.cf > input::placeholder, .cf.cf.cf > textarea::placeholder { color: transparent; }
/* El autocompletado del navegador: fondo blanco y aviso a campos.js para subir la etiqueta. */
@keyframes cf-autofill { from { opacity: 1; } to { opacity: 1; } }
.cf.cf.cf > input:-webkit-autofill { animation-name: cf-autofill; animation-duration: .01s; -webkit-box-shadow: 0 0 0 40px #fff inset; -webkit-text-fill-color: #1d2329; }
.cf.cf.cf:has(> input:-webkit-autofill) > label, .cf.cf.cf:has(> input:autofill) > label { top: 8px; font-size: 12px; line-height: 14px; }
/* Error: borde más grueso, icono y texto (nunca solo color). */
.cf.cf.cf.cf-error > input, .cf.cf.cf.cf-error > select, .cf.cf.cf.cf-error > textarea { border: 2px solid #b91c1c; padding-left: 13px; }
.cf.cf.cf.cf-error > label { color: #b91c1c; }
.cf.cf.cf > .cf-msg { display: block; margin: 6px 2px 0; font-size: 14px; line-height: 1.35; font-weight: 600; color: #8f1414; }
/* Filas: Nombre | Apellidos también en el móvil; Código postal | Ciudad | Provincia. Entre filas manda el margen del campo. */
.field-row:has(> .cf), .wz-row:has(> .cf) { row-gap: 0; }
.cf-row2.cf-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.cf-row3.cf-row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; }
@media (max-width: 600px) {
  .cf-row3.cf-row3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cf-row3.cf-row3 > :nth-child(3) { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .cf.cf.cf > label { transition: none; } }