/* Los datos: las tarjetas .dato-contacto del inicio, en tres columnas */
  .datos-grilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  /* Sin la recepción de muestras (D36) quedan cinco: la última ocupa dos columnas y la fila no queda con un hueco */
  .datos-grilla > :last-child:nth-child(3n+2) { grid-column: span 2; }
  .dato-contacto > span:last-child .marca-ejemplo { display: inline-block; margin-top: 10px; font-size: 11.5px; color: var(--naranjo-hondo); }

  /* El formulario: la franja naranja con el formulario en una tarjeta blanca */
  .contacto-form { background: var(--naranjo); overflow: hidden; }
  .contacto-form.patron::before { opacity: .14; }
  .form-grilla { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: 72px; align-items: stretch; }
  .form-lado { display: flex; flex-direction: column; }
  .form-lado .bajada { color: rgba(31,30,29,.8); }
  .form-otra-via { display: flex; align-items: center; gap: 14px; margin: 36px 0 40px; font-size: 14.5px; line-height: 1.35; color: rgba(31,30,29,.8); }
  .form-otra-via .sello { width: 60px; height: 60px; }
  .form-otra-via a { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 18px; font-weight: 600; color: var(--carbon); }
  .form-otra-via a .ic { width: 20px; height: 20px; }
  .fito-form { width: 190px; margin-top: auto; transform: rotate(-8deg); align-self: flex-start; }
  .formulario { background: #fff; border-radius: 28px; padding: 44px 44px 40px; box-shadow: 0 40px 70px -40px rgba(31,30,29,.5);
    scroll-margin-top: calc(var(--alto-cabecera) + 24px); }
  .campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; }
  .campo { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
  fieldset.campo { display: block; border: 0; }
  .campo.ancho { grid-column: 1 / -1; }
  .campo > label, .campo > legend { font-size: 14px; font-weight: 500; }
  .campo > legend { margin-bottom: 8px; }
  .campo input, .campo textarea { width: 100%; font: inherit; font-size: 16px; color: var(--carbon); background: var(--gris-claro);
    border: 1px solid var(--linea); border-radius: 12px; height: 52px; padding: 0 16px; transition: border-color .2s, box-shadow .2s, background .2s; }
  .campo textarea { display: block; height: auto; min-height: 150px; padding: 14px 16px; line-height: 1.5; resize: vertical; }
  .campo input::placeholder, .campo textarea::placeholder { color: #8E8D93; }
  .campo input:focus, .campo textarea:focus { outline: none; background: #fff; border-color: var(--naranjo); box-shadow: 0 0 0 3px var(--naranjo-claro); }
  /* El perfil: tres opciones como píldoras, con el ícono de cada perfil */
  .perfiles { display: flex; flex-wrap: wrap; gap: 10px; }
  .perfil { position: relative; }
  .perfil input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
  .perfil span { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px 0 14px; border-radius: 12px;
    border: 1px solid var(--linea); background: var(--gris-claro); font-size: 15px; transition: border-color .2s, background .2s, color .2s; }
  .perfil .ic { width: 20px; height: 20px; color: var(--naranjo); }
  .perfil:hover span { border-color: var(--naranjo); }
  .perfil input:checked + span { border-color: var(--naranjo); background: var(--naranjo-claro); color: var(--naranjo-hondo); font-weight: 500; }
  .perfil input:checked + span .ic { color: var(--naranjo-hondo); }
  .perfil input:focus-visible + span { border-color: var(--naranjo); box-shadow: 0 0 0 3px var(--naranjo-claro); }
  .form-pie { display: flex; align-items: center; justify-content: space-between; gap: 18px 24px; flex-wrap: wrap; margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--linea); }
  .acepta { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; color: var(--suave); cursor: pointer; }
  .acepta input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--naranjo); flex: none; cursor: pointer; }
  .acepta input:focus-visible { outline: 2px solid var(--naranjo); outline-offset: 2px; }
  .acepta a { color: var(--carbon); text-decoration: underline; text-decoration-color: var(--naranjo); text-underline-offset: 3px; }

  @media (max-width: 1100px) {
    .datos-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .datos-grilla > :last-child:nth-child(3n+2) { grid-column: auto; }
    .datos-grilla > :last-child:nth-child(odd) { grid-column: span 2; }
    .form-grilla { gap: 44px; }
    .formulario { padding: 36px 32px 32px; }
  }
  @media (max-width: 880px) {
    .form-grilla { grid-template-columns: 1fr; }
    .form-otra-via { margin-bottom: 0; }
    .fito-form { display: none; }
  }
  @media (max-width: 560px) {
    .datos-grilla { grid-template-columns: 1fr; }
    .datos-grilla > :last-child:nth-child(odd) { grid-column: auto; }
    .formulario { padding: 28px 20px 26px; border-radius: 24px; }
    .campos { grid-template-columns: 1fr; }
    .perfiles { flex-direction: column; }
    .perfil span { display: flex; }
    .form-pie .btn { width: 100%; justify-content: space-between; }
  }

  /* Del tema (4806), no de la maqueta: el formulario que envía. El aviso, los campos marcados, el campo trampa
     que una persona no ve y el botón mientras envía. a-tema.py no debe reescribir este archivo */
  .formulario { --error: #B42318; --error-claro: #FDECEA; }
  .formulario-trampa { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .formulario-aviso { margin: 0 0 26px; padding: 14px 18px; border-radius: var(--radio-boton); background: var(--naranjo-claro);
    border-left: 4px solid var(--naranjo); font-size: 15px; line-height: 1.45; color: var(--carbon); outline: none; }
  .formulario-aviso[hidden] { display: none; }
  .formulario-aviso:focus-visible { outline: 2px solid var(--naranjo); outline-offset: 2px; }
  .formulario-aviso.error { background: var(--error-claro); border-left-color: var(--error); }
  .formulario-aviso a { font-weight: 600; white-space: nowrap; text-decoration: underline; text-decoration-color: var(--naranjo); text-underline-offset: 3px; }
  .campo input[aria-invalid="true"], .campo textarea[aria-invalid="true"] { border-color: var(--error); }
  .campo input[aria-invalid="true"]:focus, .campo textarea[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--error-claro); }
  .perfil input[aria-invalid="true"] + span { border-color: var(--error); }
  .acepta input[aria-invalid="true"] { outline: 2px solid var(--error); outline-offset: 2px; }
  .formulario.enviando .btn { opacity: .7; cursor: progress; }