/* ==========================================================================
   TL-V2 — FORMULARIO MODAL (V4 · canónico con cards de packs)
   - Uso exclusivo dentro de #popupFormulario.
   - Modal centrado, con scroll controlado.
   - Integración con Forminator y sistema de CTAs (roles).
   ========================================================================== */

/* ------------------------------------------------------------
   1) Contenedor + overlay
   ------------------------------------------------------------ */
#popupFormulario{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--role-modal-padding, 2rem);
  z-index: var(--role-modal-z, 9999);
  opacity: 0;
  transition:
    opacity var(--role-modal-duration, .24s) var(--role-modal-ease, cubic-bezier(.2,.7,.1,1));
  touch-action: none;
}
#popupFormulario.is-open{
  display:flex;
  opacity:1;
}
#popupFormulario[hidden]{ display:none !important; }

/* Overlay explícito */
#popupFormulario .tlv2-modal-overlay{
  position: fixed;
  inset: 0;
  z-index: 0;
  background-color: var(--role-modal-overlay-bg, rgba(0,0,0,.55));
  background-image: var(--role-modal-overlay-image, none);
  -webkit-backdrop-filter: var(--role-modal-backdrop-filter, none);
  backdrop-filter: var(--role-modal-backdrop-filter, none);
  pointer-events: none;
}
/* Fallback overlay si no existe nodo .tlv2-modal-overlay */
#popupFormulario:not(:has(.tlv2-modal-overlay))::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  background-color: var(--role-modal-overlay-bg, rgba(0,0,0,.55));
  background-image: var(--role-modal-overlay-image, none);
  -webkit-backdrop-filter: var(--role-modal-backdrop-filter, none);
  backdrop-filter: var(--role-modal-backdrop-filter, none);
  pointer-events:none;
}

/* ------------------------------------------------------------
   2) Tarjeta / diálogo
   ------------------------------------------------------------ */
#popupFormulario .tlv2-modal-card,
#popupFormulario .tlv2-modal-dialog,
#popupFormulario .modal-card{
  position:relative;
  z-index:1;
  width:min(640px, 96vw);
  max-height:min(88vh, 880px);
  overflow:auto;
  background-color: var(--role-modal-surface, #fff);
  background-image: var(--role-modal-surface-image, none);
  color: var(--role-modal-fg, #111);
  border-radius: var(--role-modal-radius, 16px);
  box-shadow: var(--role-modal-elevation, 0 10px 40px rgba(0,0,0,.18));
  padding: var(--role-modal-card-padding, 1.25rem);
  outline: none;
  transform: translate3d(0,2px,0) scale(.99);
  transition:
    transform var(--role-modal-duration, .24s) var(--role-modal-ease, cubic-bezier(.2,.7,.1,1)),
    box-shadow var(--role-modal-duration, .24s) var(--role-modal-ease, cubic-bezier(.2,.7,.1,1));
}
#popupFormulario.is-open :is(.tlv2-modal-card,.tlv2-modal-dialog,.modal-card){
  transform:none;
}

/* ------------------------------------------------------------
   3) Header, texto y zonas internas
   ------------------------------------------------------------ */
#popupFormulario .tlv2-modal-header{
  margin-bottom:1rem;
  display:flex;
  flex-direction:column;
  gap:.6rem;
}
#popupFormulario .tlv2-modal-eyebrow{
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color: var(--tlv2-text-muted, rgba(15,23,42,.6));
}
#popupFormulario .tlv2-modal-title{
  font-size:clamp(1.3rem,2vw,1.7rem);
  line-height:1.2;
  font-weight:650;
  margin:0;
}
#popupFormulario .tlv2-modal-subtitle{
  font-size:.9rem;
  line-height:1.5;
  color: var(--tlv2-text-muted, rgba(15,23,42,.7));
  margin:0;
}
#popupFormulario .tlv2-modal-body{
  margin-top:1.1rem;
  margin-bottom:1.1rem;
  font-size:.95rem;
}
#popupFormulario .tlv2-modal-form{
  display:flex;
  flex-direction:column;
  gap:1rem;
  max-width:640px;
}
#popupFormulario .tlv2-modal-body,
#popupFormulario .tlv2-modal-form{
  margin-inline:auto;
}
#popupFormulario .tlv2-modal-form-placeholder{
  padding:1.25rem;
  border-radius:1rem;
  border:1px dashed rgba(148,163,184,.5);
  background-color: rgba(148,163,184,.06);
  font-size:.9rem;
  color: var(--tlv2-text-muted, rgba(15,23,42,.7));
}
#popupFormulario .tlv2-modal-footer{
  margin-top:.75rem;
}
#popupFormulario .tlv2-modal-legal{
  font-size:.75rem;
  line-height:1.4;
  color: var(--tlv2-text-muted, rgba(15,23,42,.7));
}

/* Badge Pack */
#popupFormulario [data-pack-badge],
#popupFormulario .tlv2-modal-pack-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  margin-top:.35rem;
  padding:.2rem .75rem;
  border-radius:999px;
  font-size:.8rem;
  font-weight:500;
  max-width:max-content;
  background-color: color-mix(in oklch, var(--role-cta-surface, #16a34a) 10%, white 90%);
  color: var(--role-cta-surface, #16a34a);
  border:0;
  box-shadow:none;
}

/* ------------------------------------------------------------
   4) Botón cerrar
   ------------------------------------------------------------ */
#popupFormulario :is(.modal-close,.tlv2-modal-close,[data-close="modal"]){
  position:absolute;
  top:.75rem;
  right:.75rem;
  inline-size:40px;
  block-size:40px;
  display:inline-grid;
  place-items:center;
  border-radius:999px;
  border:0;
  cursor:pointer;
  background-color: var(--role-modal-close-surface, rgba(0,0,0,.06));
}
#popupFormulario :is(.modal-close,.tlv2-modal-close,[data-close="modal"]):hover{
  background-color: var(--role-modal-close-surface-hover, rgba(0,0,0,.10));
}

/* ------------------------------------------------------------
   5) Focus ring accesible SOLO con teclado
   ------------------------------------------------------------ */
#popupFormulario :where(
  a,button,input,select,textarea,
  [tabindex]:not([tabindex="-1"])
):focus-visible{
  outline: 2px solid var(--tlv2-ring, oklch(0.79 0.07 210));
  outline-offset: 2px;
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--tlv2-ring, oklch(0.79 0.07 210)) 40%, transparent);
}

/* Móvil: modal ocupa ancho completo, altura controlada */
@media (max-width:480px){
  #popupFormulario{
    padding: var(--role-modal-padding-mobile, 1rem);
    align-items:flex-start;
    justify-content:center;
  }
  #popupFormulario :is(.tlv2-modal-card,.tlv2-modal-dialog,.modal-card){
    width:100%;
    max-height: calc(100vh - 2.75rem);
    border-radius: var(--role-modal-radius-mobile, 14px);
    padding: var(--role-modal-card-padding-mobile, 1rem);
  }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  #popupFormulario,
  #popupFormulario :is(.tlv2-modal-card,.tlv2-modal-dialog,.modal-card){
    transition:none;
    transform:none;
  }
}

/* ------------------------------------------------------------
   6) Hardening de scroll de fondo
   ------------------------------------------------------------ */
body.modal-open{
  overflow:hidden;
  overscroll-behavior:contain;
}
#popupFormulario :is(.tlv2-modal-card,.tlv2-modal-dialog,.modal-card){
  touch-action:auto;
}

/* ------------------------------------------------------------
   7) Integración con Forminator (campos)
   ------------------------------------------------------------ */

/* Limpieza de wrappers para que no sumen fondos/sombras */
#popupFormulario .forminator-ui :where(.forminator-row, .forminator-field, .intl-tel-input){
  background-color: transparent !important;
  box-shadow:none !important;
  outline:0 !important;
  border:0 !important;
}

/* Controles básicos: borde 1px estable y fondo limpio */
#popupFormulario .forminator-ui :is(
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="search"], input[type="url"], input[type="password"],
  textarea, select
){
  border: 1px solid var(--tlv2-field-border, oklch(0 0 0 / 0.12)) !important;
  border-radius: var(--role-input-radius, .75rem) !important;
  background-color: var(--tlv2-field-surface, #fff) !important;
  box-shadow:none !important;
  outline:0 !important;
  transition:
    background-color .15s ease,
    border-color .15s ease;
}

/* Fallback por si el plugin usa .forminator-input en el propio control */
#popupFormulario .forminator-ui :where(
  input.forminator-input,
  textarea.forminator-input,
  select.forminator-input
){
  border: 1px solid var(--tlv2-field-border, oklch(0 0 0 / 0.12)) !important;
  background-color: var(--tlv2-field-surface, #fff) !important;
  box-shadow:none !important;
  outline:0 !important;
}

/* Hover tenue: mantiene borde visible */
#popupFormulario .forminator-ui :is(
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="search"], input[type="url"], input[type="password"],
  textarea, select
):hover{
  background-color: var(--tlv2-field-surface-hover, oklch(0.94 0 0)) !important;
  border-color: var(--tlv2-field-border, oklch(0 0 0 / 0.12)) !important;
}

/* Focus con mouse: sin sombras, solo borde estable */
#popupFormulario .forminator-ui :is(
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="search"], input[type="url"], input[type="password"],
  textarea, select
):is(:focus,:active){
  border: 1px solid var(--tlv2-field-border, oklch(0 0 0 / 0.12)) !important;
  background-color: var(--tlv2-field-surface, #fff) !important;
  box-shadow:none !important;
  outline:0 !important;
}

/* Teclado: ring accesible + mantiene el borde 1px */
#popupFormulario .forminator-ui :is(
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="search"], input[type="url"], input[type="password"],
  textarea, select
):focus-visible{
  border: 1px solid var(--tlv2-field-border, oklch(0 0 0 / 0.12)) !important;
  outline: 1.8px solid var(--tlv2-ring, oklch(0.79 0.07 210)) !important;
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--tlv2-ring, oklch(0.79 0.07 210)) 40%, transparent) !important;
}

/* Teléfono con intl-tel-input: asegura ring en el input interno */
#popupFormulario .intl-tel-input input:focus-visible{
  outline: 1.8px solid var(--tlv2-ring, oklch(0.79 0.07 210)) !important;
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--tlv2-ring, oklch(0.79 0.07 210)) 40%, transparent) !important;
}

/* Radios/checkbox: ring en label cuando se navega con teclado */
#popupFormulario .forminator-ui input[type="radio"]:focus-visible + label,
#popupFormulario .forminator-ui input[type="checkbox"]:focus-visible + label{
  outline: 1.8px solid var(--tlv2-ring, oklch(0.79 0.07 210)) !important;
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--tlv2-ring, oklch(0.79 0.07 210)) 40%, transparent) !important;
  border-radius:.5rem;
}

/* Bullets y checkboxes sin sombras extra del plugin */
#popupFormulario .forminator-ui :is(.forminator-radio-bullet,.forminator-bullet,.forminator-checkbox-box){
  outline:0 !important;
  box-shadow:none !important;
}

/* ------------------------------------------------------------
   8) CTA del modal (usa roles de CTA)
   ------------------------------------------------------------ */
#popupFormulario .forminator-ui :is(.forminator-button,.forminator-button-submit){
  display:block;
  width:100%;
  max-width:360px;
  margin-inline:auto;
  margin-top:.25rem;

  padding:1.1rem 1.9rem;
  border-radius: var(--role-cta-radius, 999px);

  font-size:1rem;
  font-weight:600;
  text-align:center;
  line-height:1.1;

  background-color: var(--role-cta-surface) !important;
  color: var(--role-cta-foreground, #fff) !important;
  border: 1px solid var(--role-cta-border) !important;

  background-image:none !important;
  text-shadow:none !important;
  box-shadow:none !important;
  filter:none !important;
  opacity:1 !important;
  cursor:pointer;
}

#popupFormulario .forminator-ui :is(.forminator-button,.forminator-button-submit):hover{
  filter:brightness(.96);
}

#popupFormulario .forminator-ui :is(.forminator-button,.forminator-button-submit):active{
  filter:brightness(.90);
}

/* Mantener focus accesible, integrado con el ring global */
#popupFormulario .forminator-ui :is(.forminator-button,.forminator-button-submit):focus-visible{
  outline: 1.8px solid var(--tlv2-ring, oklch(0.79 0.07 210)) !important;
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--tlv2-ring, oklch(0.79 0.07 210)) 40%, transparent) !important;
}

/* Row del submit limpio */
#popupFormulario .forminator-ui .forminator-row:has(.forminator-button-submit){
  background-color: transparent !important;
  box-shadow:none !important;
  outline:0 !important;
  border:0 !important;
}

/* En móvil: wrappers sin “aureolas” por :focus-within */
@media (hover:none) and (pointer:coarse){
  #popupFormulario .forminator-ui .forminator-field:focus,
  #popupFormulario .forminator-ui .forminator-field:focus-within,
  #popupFormulario .forminator-ui .forminator-row:focus,
  #popupFormulario .forminator-ui .forminator-row:focus-within{
    outline:0 !important;
    box-shadow:none !important;
    background-color:transparent !important;
    border:0 !important;
  }
}

/* ------------------------------------------------------------
   9) Layout general del formulario dentro del modal
   ------------------------------------------------------------ */
#popupFormulario .forminator-ui{
  width:100%;
  max-width:600px;
  margin-inline:auto;
}

/* Separación extra entre packs y primer campo de datos */
#popupFormulario .forminator-ui .forminator-row:first-of-type{
  margin-bottom:1.25rem;
}

/* Footer con aire extra en escritorio y móvil */
#popupFormulario .tlv2-modal-dialog{
  padding-bottom:1.75rem;
}
@media (max-width:640px){
  #popupFormulario .tlv2-modal-dialog{
    padding:1.25rem 1rem 2rem;
  }
  #popupFormulario .tlv2-modal-footer{
    margin-top:1.25rem;
  }
  #popupFormulario .tlv2-modal-legal{
    font-size:.78rem;
    line-height:1.4;
  }
}

/* ------------------------------------------------------------
   10) Selector de pack como cards (primer campo radio)
   ------------------------------------------------------------ */

/* Margen inferior del grupo de packs */
#popupFormulario .forminator-ui
  .forminator-field.forminator-field-radio:first-of-type,
#popupFormulario .forminator-ui
  .forminator-field[role="radiogroup"]:first-of-type{
  margin-bottom:1.5rem;
}

/* Cada opción de pack se comporta como una card pill centrada */
#popupFormulario .forminator-ui
  .forminator-field.forminator-field-radio:first-of-type .forminator-radio,
#popupFormulario .forminator-ui
  .forminator-field[role="radiogroup"]:first-of-type .forminator-radio{
  max-width:520px;
  margin-inline:auto;
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.65rem 1rem;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.45);
  background-color: rgba(148,163,184,.04);
  cursor:pointer;
  transition:
    border-color .18s ease,
    background-color .18s ease,
    box-shadow .18s ease,
    transform .12s ease;
  overflow:hidden;
}

/* Separación vertical entre cards */
#popupFormulario .forminator-ui
  .forminator-field.forminator-field-radio:first-of-type .forminator-radio + .forminator-radio,
#popupFormulario .forminator-ui
  .forminator-field[role="radiogroup"]:first-of-type .forminator-radio + .forminator-radio{
  margin-top:.55rem;
}

/* Imagen del pack: contenedor limpio */
#popupFormulario .forminator-ui .forminator-radio-image,
#popupFormulario .forminator-ui .forminator-radio-image *{
  border:0 !important;
  box-shadow:none !important;
  outline:none !important;
  background-color:transparent !important;
  padding:0 !important;
}

/* Span interno que pinta la miniatura del pack */
#popupFormulario .forminator-ui .forminator-radio-image > span{
  display:block;
  width:38px;
  height:38px;
  border-radius:6px;
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  background-color:#fff;
}

/* Label: texto alineado a la derecha de la miniatura */
#popupFormulario .forminator-ui
  .forminator-field.forminator-field-radio:first-of-type .forminator-radio-label,
#popupFormulario .forminator-ui
  .forminator-field[role="radiogroup"]:first-of-type .forminator-radio-label{
  flex:1;
  display:flex;
  align-items:center;
  gap:.55rem;
  margin:0 !important;
  font-family:inherit;
  font-size:.92rem;
  font-weight:500;
}

/* Ocultamos el bullet nativo: la card es el indicador */
#popupFormulario .forminator-ui
  .forminator-field.forminator-field-radio:first-of-type .forminator-radio-bullet,
#popupFormulario .forminator-ui
  .forminator-field[role="radiogroup"]:first-of-type .forminator-radio-bullet{
  display:none !important;
}

/* Escondemos el radio real; se controla solo con la card */
#popupFormulario .forminator-ui
  .forminator-field.forminator-field-radio:first-of-type .forminator-radio input[type="radio"],
#popupFormulario .forminator-ui
  .forminator-field[role="radiogroup"]:first-of-type .forminator-radio input[type="radio"]{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

/* Hover: card ligeramente elevada */
#popupFormulario .forminator-ui
  .forminator-field.forminator-field-radio:first-of-type .forminator-radio:hover,
#popupFormulario .forminator-ui
  .forminator-field[role="radiogroup"]:first-of-type .forminator-radio:hover{
  border-color: color-mix(in oklch, var(--role-cta-surface, #16a34a) 35%, #e5e7eb 65%);
  background-color: rgba(22,163,74,.03);
  transform: translateY(-1px);
}

/* Estado seleccionado: borde y fondo usan el color de CTA */
#popupFormulario .forminator-ui
  .forminator-field.forminator-field-radio:first-of-type .forminator-radio:has(input[type="radio"]:checked),
#popupFormulario .forminator-ui
  .forminator-field[role="radiogroup"]:first-of-type .forminator-radio:has(input[type="radio"]:checked){
  border-color: var(--role-cta-surface, #16a34a);
  background-color: color-mix(in oklch, var(--role-cta-surface, #16a34a) 7%, #ffffff 93%);
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--role-cta-surface, #16a34a) 35%, transparent);
}

/* Foco accesible en la card cuando se navega con teclado */
#popupFormulario .forminator-ui
  .forminator-field.forminator-field-radio:first-of-type .forminator-radio:has(input[type="radio"]:focus-visible),
#popupFormulario .forminator-ui
  .forminator-field[role="radiogroup"]:first-of-type .forminator-radio:has(input[type="radio"]:focus-visible){
  box-shadow: 0 0 0 2px var(--tlv2-ring, rgba(59,130,246,.65));
}

/* Versión móvil: cards ocupan casi todo el ancho */
@media (max-width:640px){
  #popupFormulario .forminator-ui
    .forminator-field.forminator-field-radio:first-of-type .forminator-radio,
  #popupFormulario .forminator-ui
    .forminator-field[role="radiogroup"]:first-of-type .forminator-radio{
    max-width:100%;
  }
}

/* ------------------------------------------------------------
   11) Texto interno de packs: título + precio (dos líneas)
   ------------------------------------------------------------ */

#popupFormulario .tlv2-pack-label-inner{
  display:flex;
  flex-direction:column;
  gap:.1rem;
}

#popupFormulario .tlv2-pack-label-inner .pack-title{
  font-size:.92rem;
  font-weight:600;
}

#popupFormulario .tlv2-pack-label-inner .pack-price{
  font-size:.82rem;
  font-weight:500;
  color: var(--tlv2-text-muted, rgba(15,23,42,.75));
}

/* TLV2 — armado / anti-flicker para radios */
#popupFormulario.tlv2-arming .forminator-field.forminator-field-radio,
#popupFormulario.tlv2-arming .forminator-field[data-field-type="radio"] {
  visibility: hidden;
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  #popupFormulario:not(.tlv2-arming) .forminator-field.forminator-field-radio,
  #popupFormulario:not(.tlv2-arming) .forminator-field[data-field-type="radio"] {
    transition: opacity .18s ease-out;
    opacity: 1;
  }
}

/* TLV2 — Anti-flicker extra: bloquear interacción durante armado */
#popupFormulario.tlv2-arming input[type="radio"],
#popupFormulario.tlv2-arming label[for],
#popupFormulario.tlv2-arming .forminator-radio {
  pointer-events: none !important;
}

/* TLV2 — Enmascara el grupo de radios mientras arma */
#popupFormulario .forminator-field.forminator-field-radio,
#popupFormulario .forminator-field[data-field-type="radio"] {
  position: relative;
}

#popupFormulario.tlv2-arming .forminator-field.forminator-field-radio::after,
#popupFormulario.tlv2-arming .forminator-field[data-field-type="radio"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--surface, #fff);
}

/* Opcional: sin transición para que no “aparezca” con fade */
#popupFormulario:not(.tlv2-arming) .forminator-field.forminator-field-radio,
#popupFormulario:not(.tlv2-arming) .forminator-field[data-field-type="radio"] {
  transition: none;
}

/* ------------------------------------------------------------
   TLV2 — Ajuste por Admin Bar (logged-in)
   Evita que el modal quede debajo/sobrepuesto con la barra de WP.
------------------------------------------------------------ */
body.admin-bar #popupFormulario,
body.admin-bar #popupFormulario .tlv2-modal-overlay {
  inset: 32px 0 0 0;
}
@media (max-width: 782px) {
  body.admin-bar #popupFormulario,
  body.admin-bar #popupFormulario .tlv2-modal-overlay {
    inset: 46px 0 0 0;
  }
}

/* ============================================================
   TLV2 — Form (Forminator) styles
   Objetivo: no depender del CSS del plugin; estilo controlado por TLV2
   Scope: SOLO dentro del modal #popupFormulario
   ============================================================ */

#popupFormulario {
  --tlv2-form-accent: var(--role-accent, #2563eb);
  --tlv2-form-text: var(--role-text, #111827);
  --tlv2-form-muted: var(--role-muted, rgba(17,24,39,.65));
  --tlv2-form-surface: var(--role-surface, #ffffff);
  --tlv2-form-surface-2: var(--role-surface-2, #f8fafc);

  --tlv2-form-border: rgba(17,24,39,.18);
  --tlv2-form-border-focus: var(--tlv2-form-accent);
  --tlv2-form-ring: color-mix(in srgb, var(--tlv2-form-accent) 30%, transparent);

  --tlv2-form-radius: 12px;
  --tlv2-form-pad-y: 12px;
  --tlv2-form-pad-x: 14px;
  --tlv2-form-font: 14px;
}

/* Layout general */
#popupFormulario .forminator-ui,
#popupFormulario .forminator-custom-form {
  color: var(--tlv2-form-text);
}

#popupFormulario .forminator-row,
#popupFormulario .forminator-field {
  margin: 0 0 12px;
}

#popupFormulario label,
#popupFormulario .forminator-label {
  display: block;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--tlv2-form-text);
}

#popupFormulario .forminator-required {
  color: #dc2626;
}

/* Inputs / selects / textarea */
#popupFormulario .forminator-field input[type="text"],
#popupFormulario .forminator-field input[type="email"],
#popupFormulario .forminator-field input[type="tel"],
#popupFormulario .forminator-field input[type="number"],
#popupFormulario .forminator-field input[type="url"],
#popupFormulario .forminator-field input[type="password"],
#popupFormulario .forminator-field select,
#popupFormulario .forminator-field textarea {
  width: 100%;
  box-sizing: border-box;

  background-color: var(--tlv2-form-surface);
  color: var(--tlv2-form-text);

  border: 1px solid var(--tlv2-form-border);
  border-radius: var(--tlv2-form-radius);

  padding: var(--tlv2-form-pad-y) var(--tlv2-form-pad-x);
  font-size: var(--tlv2-form-font);
  line-height: 1.3;

  outline: none;
  box-shadow: none;
}

#popupFormulario .forminator-field textarea {
  min-height: 110px;
  resize: vertical;
}

#popupFormulario .forminator-field input::placeholder,
#popupFormulario .forminator-field textarea::placeholder {
  color: color-mix(in srgb, var(--tlv2-form-muted) 80%, transparent);
}

/* Focus accesible */
#popupFormulario .forminator-field input:focus-visible,
#popupFormulario .forminator-field select:focus-visible,
#popupFormulario .forminator-field textarea:focus-visible {
  border-color: var(--tlv2-form-border-focus);
  box-shadow: 0 0 0 4px var(--tlv2-form-ring);
}

/* Errores */
#popupFormulario .forminator-error-message,
#popupFormulario .forminator-response-message {
  font-size: 13px;
  margin-top: 6px;
}

#popupFormulario .forminator-error-message {
  color: #dc2626;
}

#popupFormulario .forminator-field.forminator-has_error input,
#popupFormulario .forminator-field.forminator-has_error select,
#popupFormulario .forminator-field.forminator-has_error textarea {
  border-color: #dc2626;
  box-shadow: 0 0 0 4px color-mix(in srgb, #dc2626 22%, transparent);
}