/* =========================================================
   Ópticas Premium — Consulta de comprobantes electrónicos
   main.css (rediseño 2)

   La versión anterior —la que llegó con el diseño del cliente— se retiró del
   proyecto (sep. 2026). El marcado no cambió, así que si alguna vez vuelve
   basta con enlazarla desde el `<link>` de `index.php`.

   Qué cambia aquí: la página deja de ser «hero claro + tarjeta blanca» y pasa
   a un lienzo navy con la tarjeta flotando encima. El marcado es el MISMO, así
   que todo esto son reglas nuevas sobre las clases que ya existían.

   Selectores que usa `consulta.js` y que NO deben cambiar:
   form, .form-group, #ruc #tip #ser #nro #fec #imp #cpt, #captcha,
   .cq-captcha, .reload-captcha, #cqForm, #cqError, #cqResultado,
   .consultar-comprobante, .cq-btn-xml, .hide-350, .show-350, .datepicker,
   .fv-plugins-message-container, .has-danger, .is-invalid
   ========================================================= */

:root{
  --navy:#0E2748;
  --navy-deep:#081B33;
  --navy-soft:#17365C;
  --navy-line:#28496F;
  --gold:#B4884A;
  --gold-soft:#DCBB80;
  --gold-glow:rgba(180,136,74,.35);
  --ink:#16202F;
  --muted:#63718A;
  --muted-light:#9AA6B8;
  --line:#E1E6ED;
  --field:#FFFFFF;
  --field-soft:#F7F9FC;
  --panel:#FFFFFF;
  --page:#F7F5F1;
  --page-warm:#FBF9F5;
  --cream:#F3EEE5;
  --danger:#C6362F;
  --danger-bg:#FCEDEC;
  --danger-line:#F0C6C3;
  --ok:#2C7A55;
  --radius:12px;
  --radius-lg:20px;
  --font:'Source Sans 3','Segoe UI',Arial,sans-serif;
  --script:'Caveat',cursive;
  --sombra:0 30px 70px -28px rgba(8,27,51,.55),0 2px 8px rgba(8,27,51,.08);
}

html{ box-sizing:border-box;-webkit-text-size-adjust:100%; }
*,*:before,*:after{ box-sizing:inherit;margin:0;padding:0; }

body{
  font-family:var(--font);
  font-size:16px;line-height:1.5;
  color:var(--ink);
  background:var(--page);
  min-height:100vh;
  display:flex;flex-direction:column;
}
img{ max-width:100%;display:block; }
a{ color:inherit;text-decoration:none; }
svg{ width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
ul{ list-style:none; }

.container{
  max-width:1280px;
  margin:0 auto;
  padding:0 28px;
  position:relative;z-index:1;
}

/* ---------- Cabecera ----------
   La de siempre: el logo en su «pestaña» navy, que baja sobre la página y
   termina en un filete dorado. Se probó una cabecera plana y el logo perdía
   el sitio propio que le daba la pestaña, así que vuelve tal cual. */
header{
  background:var(--navy);
  color:#fff;
  position:relative;
}
header .container{
  display:flex;align-items:center;gap:32px;
  min-height:98px;
}
header .container > div:first-child,
header .brand{ /* contenedor del logo: baja como “pestaña” sobre la página */
  background:var(--navy);
  padding:14px 26px 16px;
  border-radius:0 0 28px 28px;
  border-bottom:3px solid var(--gold-soft);
  margin-bottom:-29px;
  position:relative;z-index:2;
  flex:0 0 auto;
}
header .brand img{ width:190px;height:auto; }
header .brand strong{ font-size:19px;letter-spacing:.04em;color:var(--gold-soft); }

.header-seals{
  display:flex;align-items:center;gap:0;
  margin-left:auto;
  border-left:1px solid var(--navy-line);
  padding-left:8px;
}
.header-seals li{
  display:flex;align-items:center;gap:10px;
  padding:6px 18px;
  border-right:1px solid var(--navy-line);
  font-size:13px;line-height:1.2;color:#E8EEF6;
}
.header-seals li:last-child{ border-right:0; }
.header-seals svg{ width:26px;height:26px;stroke-width:1.6;color:var(--gold-soft);flex:0 0 auto; }

.btn-web{
  display:inline-flex;align-items:center;gap:10px;
  border:1.5px solid var(--gold-soft);
  border-radius:999px;
  padding:11px 26px;
  font-weight:600;font-size:15px;
  color:#fff;white-space:nowrap;
  transition:background .15s ease,color .15s ease;
}
.btn-web svg{ width:18px;height:18px;color:var(--gold-soft); }
.btn-web:hover,.btn-web:focus-visible{ background:var(--gold-soft);color:var(--navy-deep);outline:none; }
.btn-web:hover svg{ color:var(--navy-deep); }

/* ---------- Cuerpo ----------
   Lienzo claro y cálido: el navy queda para la cabecera y los detalles. Una
   página entera en azul pesaba y apagaba el dorado de la marca, que es lo que
   tiene que destacar. Una foto de tienda (`assets/img/hero.jpg`) iría detrás
   con un velo casi opaco: textura, no protagonista. Hoy no la hay y queda el
   degradado. */
.main{
  flex:1 0 auto;
  position:relative;
  padding:96px 0 92px;
  background:var(--page);
  overflow:hidden;
}
.main:before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    linear-gradient(100deg,rgba(247,245,241,.93) 0%,rgba(251,249,245,.95) 52%,rgba(243,238,229,.97) 100%),
    linear-gradient(120deg,#F3EEE5 0%,#FBF9F5 100%);
  /* Aquí iba `url(../img/hero.jpg)`, pero esa imagen no existe en ningún sitio:
     cada visita pedía un 404. Si se añade, va entre los dos degradados. */
}
/* Guiño óptico: un aro dorado finísimo, como el contorno de una lente. No se
   lee como decoración concreta, solo da profundidad al fondo. */
.main:after{
  content:"";position:absolute;z-index:0;
  right:-180px;top:-140px;
  width:620px;height:620px;border-radius:50%;
  border:1px solid rgba(180,136,74,.22);
  box-shadow:0 0 0 60px rgba(180,136,74,.05);
  pointer-events:none;
}
.main .container{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,600px);
  gap:64px;
  align-items:start;
  top: -40px;
}

/* ---------- Hero ---------- */
.hero{ max-width:580px;color:var(--ink); }
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-size:12px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold);
  margin:0 0 20px;
}
.hero-eyebrow:before{ content:"";width:38px;height:1px;background:var(--gold); }

.main h1{
  font-size:clamp(36px,4.1vw,56px);
  font-weight:700;line-height:1.05;letter-spacing:-.015em;
  color:var(--navy);
  margin:0 0 20px;
}
.main h1 span{
  display:block;color:var(--gold);font-weight:600;
  position:relative;width:max-content;max-width:100%;padding-bottom:10px;
}
.main h1 span:after{
  content:"";position:absolute;left:0;bottom:0;width:96px;height:2px;
  background:linear-gradient(90deg,var(--gold) 0%,rgba(180,136,74,0) 100%);
}
.hero-lead{
  font-size:17.5px;line-height:1.55;color:var(--muted);
  max-width:46ch;margin:0 0 36px;
}

/* Las tres bazas, ahora en fichas translúcidas en vez de círculos sueltos. */
/* Los tres pasos.

   Van en columna y numerados: se leen en orden, que es de lo que se trata, y
   así ninguno compite por el ancho con los demás -en fila, el más largo
   desbordaba su columna y el `overflow:hidden` del cuerpo lo recortaba-. */
.hero-features{
  display:flex;flex-direction:column;
  gap:2px;margin:0 0 30px;max-width:440px;
  counter-reset:paso;
}
.hero-features li{
  display:flex;align-items:flex-start;gap:14px;
  padding:13px 2px;
  border-bottom:1px solid rgba(180,136,74,.22);
}
.hero-features li:last-child{ border-bottom:0; }
.hero-features i{
  width:30px;height:30px;flex:0 0 auto;
  border-radius:50%;
  background:#fff;
  border:1px solid rgba(180,136,74,.45);
  color:var(--gold);
  font-style:normal;font-weight:700;font-size:14px;
  display:grid;place-items:center;
}
.hero-features span{ min-width:0;font-size:14px;line-height:1.4;color:var(--muted); }
.hero-features strong{
  display:block;
  font-size:15px;font-weight:700;color:var(--navy);
  margin:0 0 1px;
}

.hero-signature{
  font-family:var(--script);
  font-size:31px;line-height:1;
  color:var(--gold);
  transform:rotate(-3deg);transform-origin:left center;
  display:inline-block;white-space:nowrap;margin:6px 0 0;
  position:relative;padding-bottom:12px;
}
.hero-signature:after{
  content:"";position:absolute;left:4%;right:0;bottom:0;height:3px;
  border-radius:3px;background:var(--gold);
  clip-path:polygon(0 60%,100% 0,100% 100%,0 100%);
}

/* ---------- Tarjeta ---------- */
.panel{
  background:var(--panel);
  border-radius:var(--radius-lg);
  box-shadow:var(--sombra);
  padding:0 0 26px;
  overflow:hidden;
}
/* La cabecera de la tarjeta va en navy: la ata al fondo y separa de un vistazo
   «lo que te explico» de «lo que tienes que rellenar». */
.panel-head{
  display:flex;align-items:flex-start;gap:15px;
  margin:0 0 24px;
  padding:24px 32px;
  background:var(--cream);
  border-bottom:2px solid var(--gold);
}
.panel-head i{
  width:44px;height:44px;flex:0 0 auto;
  border-radius:11px;
  background:#fff;
  border:1px solid rgba(180,136,74,.35);
  display:grid;place-items:center;
}
.panel-head svg{ width:22px;height:22px;color:var(--gold);stroke-width:1.8; }
.panel-head h2{ font-size:23px;font-weight:700;color:var(--navy);line-height:1.15;margin:1px 0 3px; }
.panel-head p{ color:var(--muted);font-size:14px;line-height:1.4; }

/* ---------- Formulario ---------- */
.main form{ display:block;padding:0 32px; }
.form-row{ display:grid;gap:0 18px; }
.form-row--emisor{ grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);align-items:end; }
.form-row--final{ grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end; }
/* Serie y correlativo van juntos: son dos partes del mismo dato. */
.form-row--comprobante{ grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);align-items:end; }

.main form .form-group{ position:relative;margin:0 0 16px; }
.main form .form-group:after{ content:"";display:block;clear:both; }
.main form .form-group label{
  display:block;
  font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);
  padding:0 0 7px;text-align:left;
}
.main form .form-group input,
.main form .form-group select{
  font-family:var(--font);
  display:block;width:100%;
  font-size:15.5px;color:var(--ink);
  background:var(--field);
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px 14px;
  outline:0;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.main form .form-group input::placeholder{ color:var(--muted-light); }
.main form .form-group input:hover,
.main form .form-group select:hover{ border-color:#C6D0DE; }
/* El foco en dorado: es el color de marca que no compite con el navy de la
   cabecera ni con el rojo de los errores. */
.main form .form-group input:focus,
.main form .form-group select:focus{
  background:#fff;border-color:var(--gold);
  box-shadow:0 0 0 3px var(--gold-glow);
}
.main form .form-group input[readonly]{ cursor:pointer;background:var(--field-soft); }
#ruc{ font-weight:700;letter-spacing:.03em; }
.form-group label .opcional{ font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted-light); }

/* Razón social: no es un campo, es la confirmación de a quién consultas. Por
   eso va en su propio recuadro y no parece rellenable. */
.form-static{ margin:0 0 16px; }
.form-static span{
  display:block;
  padding:12px 14px;
  border:1px dashed var(--line);
  border-radius:10px;
  background:var(--field-soft);
  color:var(--navy);
  font-size:14px;font-weight:700;letter-spacing:.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* Fecha: el icono de calendario de la hoja se mantiene, porque el nativo de
   Chrome se pinta encima y en Firefox no hay ninguno. */
.form-group--fecha input{
  padding-right:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E2748' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='6' width='16' height='14' rx='2'/%3E%3Cpath d='M4 10h16M8 4v4M16 4v4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:18px 18px;
}

/* ---------- Captcha ---------- */
.main form .form-group.form-group-with-captcha{
  display:flex;align-items:flex-end;gap:12px;
}
.main form .form-group.form-group-with-captcha > .captcha{ flex:1 1 auto;margin:0;min-width:0; }
/* Con una sola imagen (ver el comentario del marcado) el enlace del captcha
   vive DENTRO de `.captcha`, no al lado, así que el selector va un nivel más
   abajo que en el diseño original. */
.main form .form-group.form-group-with-captcha > .captcha{
  display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;
}
.main form .form-group.form-group-with-captcha > .captcha > label{ flex:1 0 100%; }
.main form .form-group.form-group-with-captcha > .captcha > input{ flex:1 1 130px;min-width:0; }
.main form .form-group.form-group-with-captcha .reload-captcha{
  order:2;
  position:relative;
  display:flex;align-items:center;gap:8px;
  flex:0 0 auto;
  margin:0 0 1px;
  cursor:pointer;
}
.main form .form-group.form-group-with-captcha .reload-captcha img{
  width:146px;height:auto;
  border:1px solid var(--line);border-radius:10px;
  background:#fff;
}
/* botón “refrescar” (el <span> ya existente) */
.main form .form-group.form-group-with-captcha .reload-captcha span{
  width:44px;height:44px;flex:0 0 auto;
  border-radius:10px;
  background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.3-5.7'/%3E%3Cpath d='M20 4v5h-5'/%3E%3C/svg%3E") center/18px 18px no-repeat;
  transition:background-color .18s ease,transform .35s ease;
}
.main form .form-group.form-group-with-captcha .reload-captcha:hover span{ background-color:#9C7439;transform:rotate(180deg); }

/* mensajes de validación (FormValidation, plugin Bootstrap) */
.fv-plugins-message-container > div{
  position:absolute;right:0;bottom:-11px;z-index:2;
  margin:0;
  font-size:12px !important;line-height:1;
  color:#fff;background:var(--danger);
  padding:5px 9px;border-radius:6px;
}
.main form .form-group.form-group-with-captcha > .captcha .fv-plugins-message-container > div{ bottom:-11px; }
.main form .form-group.has-danger input,
.main form .form-group.has-danger select,
.main form .form-group input.is-invalid,
.main form .form-group select.is-invalid{ border-color:var(--danger);background:#fff; }

/* ---------- Botón principal ----------
   En dorado, no en navy: la tarjeta ya tiene la cabecera navy y un botón del
   mismo color se perdía contra ella. */
.main form button{
  font-family:var(--font);
  display:flex;align-items:center;justify-content:center;gap:12px;
  width:100%;
  margin:22px 0 0;
  padding:16px 20px;
  font-size:14.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--navy-deep);
  background:linear-gradient(180deg,var(--gold-soft) 0%,var(--gold) 100%);
  border:0;border-radius:11px;
  cursor:pointer;outline:none;
  box-shadow:0 10px 22px -12px rgba(180,136,74,.9);
  transition:filter .16s ease,transform .08s ease,box-shadow .16s ease;
}
.main form button svg{ width:19px;height:19px;stroke-width:2.3; }
.main form button:hover{ filter:brightness(1.06); }
.main form button:active{ transform:translateY(1px);box-shadow:0 6px 14px -10px rgba(180,136,74,.9); }
.main form button:focus-visible{ box-shadow:0 0 0 3px var(--gold-glow); }
.main form button[disabled]{ opacity:.6;cursor:progress;filter:none; }

/* ---------- Aviso de descarga ---------- */
.download-hint{
  margin:22px 0 -26px;
  padding:16px 32px;
  border-top:1px solid var(--line);
  background:var(--field-soft);
  display:flex;align-items:center;gap:12px;
}
.download-hint i{
  width:26px;height:26px;flex:0 0 auto;
  border-radius:50%;background:var(--gold);
  display:grid;place-items:center;
}
.download-hint svg{ width:15px;height:15px;color:#fff; }
.download-hint p{ font-size:13.5px;color:var(--muted);flex:1 1 auto;line-height:1.35; }
.badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:700;letter-spacing:.06em;
  padding:8px 14px;border-radius:8px;border:1px solid;
  background:#fff;
}
.badge:before{ content:"";width:13px;height:15px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h9l5 5v15H6z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h9l5 5v15H6z'/%3E%3C/svg%3E") center/contain no-repeat; }
.badge--pdf{ color:#C6362F;border-color:rgba(198,54,47,.45); }
.badge--xml{ color:#1F5DA8;border-color:rgba(31,93,168,.45); }

/* ---------- Pie ----------
   Navy también, para cerrar la página con el mismo material con el que abre. */
footer{
  background:#fff;
  border-top:2px solid rgba(180,136,74,.35);
  padding:26px 0;
}
footer .container{
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
}
footer img{ width:118px;height:auto; }
.foot-item{ display:flex;align-items:center;gap:13px; }
.foot-item svg{ width:26px;height:26px;color:var(--gold);stroke-width:1.7;flex:0 0 auto; }
.foot-item strong{ display:block;font-size:14.5px;color:var(--navy); }
.foot-item span{ font-size:13.5px;color:var(--muted); }

/* ---------- SweetAlert (por si el ERP lo carga en esta pantalla) ---------- */
.swal2-popup{ font-family:var(--font) !important;border-radius:16px !important; }
.swal2-html-container > span{ display:block;font-size:17px;color:var(--navy);font-weight:600;margin:0 0 14px; }
.swal2-html-container a.swal2-styled{
  display:inline-flex;align-items:center;gap:8px;
  margin:6px;padding:11px 20px;
  border-radius:8px;font-weight:700;font-size:14px;letter-spacing:.04em;
  text-transform:uppercase;text-decoration:none;
}
.swal2-html-container a.swal2-confirm{ background:var(--navy) !important;color:#fff !important; }
.swal2-html-container a.swal2-cancel{ background:#E9EDF2 !important;color:var(--navy) !important; }

/* =========================================================
   El resultado de la consulta.

   El diseño llegó sin esta parte: traía el formulario y el aviso de descarga,
   pero no dónde se pinta el comprobante encontrado ni dónde sale un error.
   ========================================================= */

.cq-error{
  display:flex;align-items:center;gap:10px;
  margin:16px 0 0;
  padding:12px 15px;
  border-radius:var(--radius);
  background:var(--danger-bg);
  border:1px solid var(--danger-line);
  color:var(--danger);
  font-size:14px;font-weight:600;
}
/* `display:flex` gana a `[hidden]`, así que hay que devolvérselo: si no, el
   recuadro de error se ve vacío desde que carga la página. */
.cq-error[hidden]{ display:none; }
.cq-error:before{
  content:"";width:18px;height:18px;flex:0 0 auto;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6M12 16v.5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6M12 16v.5'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* El resultado cuelga de la tarjeta, no del formulario, así que no hereda su
   margen lateral: se lo damos aquí para que quede a la misma caja que los
   campos de arriba. */
.cq-resultado{
  margin:20px 32px 0;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fff;
  box-shadow:0 12px 30px -22px rgba(8,27,51,.5);
  overflow:hidden;
}
.cq-res-tit{
  display:flex;align-items:center;gap:10px;
  margin:0;
  padding:14px 18px;
  background:#EFF7F2;
  border-bottom:1px solid #D3E7DC;
  font-size:16px;font-weight:700;color:var(--ok);
}
.cq-res-tit svg{ width:21px;height:21px;stroke-width:2.3; }

/* Los datos, en dos columnas y con una línea por dato: esto se compara con el
   papel de arriba abajo, así que cada fila tiene que quedar separada. */
.cq-res-dl{
  display:grid;grid-template-columns:auto 1fr;
  gap:0 20px;margin:0;padding:6px 18px 14px;font-size:14.5px;
}
.cq-res-dl dt{
  color:var(--muted);padding:9px 0;
  font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  align-self:center;
  border-bottom:1px solid #EEF1F6;
}
.cq-res-dl dd{
  margin:0;padding:9px 0;font-weight:600;color:var(--ink);text-align:right;
  border-bottom:1px solid #EEF1F6;
}
.cq-res-dl dt:last-of-type,.cq-res-dl dd:last-of-type{ border-bottom:0; }

.cq-res-anulado{
  margin:0 18px 14px;padding:10px 14px;border-radius:10px;
  background:var(--danger-bg);border:1px solid var(--danger-line);
  color:var(--danger);font-size:13.5px;font-weight:700;
}
.cq-res-btns{ display:flex;gap:10px;flex-wrap:wrap;padding:0 18px 18px; }
.cq-res-btns a{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  flex:1 1 180px;
  padding:12px 18px;border-radius:10px;
  font-size:14px;font-weight:700;
  background:#fff;border:1.5px solid #C6362F;color:#C6362F;
  transition:background .16s ease;
}
.cq-res-btns a:hover{ background:var(--danger-bg); }
/* El XML en el mismo azul que su distintivo del pie de la tarjeta (`.badge--xml`):
   el rojo del PDF ya está cogido y dos botones iguales se pulsan por error. */
.cq-res-btns a.cq-btn-xml{ border-color:#1F5DA8;color:#1F5DA8; }
.cq-res-btns a.cq-btn-xml:hover{ background:#E9F1FA; }
.cq-res-btns svg{ width:18px;height:18px; }

/* ---------- Accesibilidad / movimiento ---------- */
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important;animation:none !important; }
}

/* ---------- Responsive ---------- */
@media all and (max-width:1180px){
  .header-seals li{ padding:0 14px;font-size:12px; }
  .main .container{ grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:40px; }
}
@media all and (max-width:1000px){
  header .container{ flex-wrap:wrap;gap:16px;padding-bottom:14px; }
  header .brand{ margin-bottom:0;border-radius:0 0 22px 22px; }
  .header-seals{ display:none; }
  .btn-web{ margin-left:auto; }
  .main{ padding:52px 0 64px; }
  .main:after{ display:none; }
  .main .container{ grid-template-columns:1fr;gap:40px; }
  .hero{ max-width:62ch; }
}
@media all and (max-width:680px){
  .container{ padding:0 16px; }
  header .container{ min-height:auto;gap:12px; }
  header .brand{ padding:10px 16px 12px; }
  header .brand img{ width:150px; }
  .btn-web{ padding:9px 20px;font-size:14px;margin-left:auto; }
  .main{ padding:38px 0 48px; }
  .hero-features{ grid-template-columns:1fr;gap:10px; }
  .hero-signature{ font-size:25px;white-space:normal;transform:none; }
  .panel{ border-radius:16px; }
  .panel-head{ padding:20px;gap:12px;margin-bottom:20px; }
  .panel-head h2{ font-size:20px; }
  .main form{ padding:0 18px; }
  .cq-resultado{ margin:18px 18px 0; }
  .download-hint{ padding:14px 18px;flex-wrap:wrap; }
  .download-hint p{ flex-basis:calc(100% - 38px); }
  .download-hint .badge{ flex:1 1 auto;justify-content:center; }
  .form-row--emisor,.form-row--final,.form-row--comprobante{ grid-template-columns:1fr; }
  footer .container{ justify-content:flex-start;gap:20px; }
}
@media all and (max-width:560px){
  .cq-res-dl{ grid-template-columns:1fr;gap:0;padding:4px 16px 12px; }
  .cq-res-dl dt{ padding:9px 0 0;border-bottom:0; }
  .cq-res-dl dd{ text-align:left;padding:2px 0 9px; }
  .cq-res-btns{ padding:0 16px 16px; }
}
/* En pantalla estrecha la imagen del captcha se pone encima del campo en vez
   de a su lado: con una sola imagen basta cambiarla de orden, ya no hay dos
   que alternar. */
@media all and (max-width:380px){
  .main form .form-group.form-group-with-captcha{ display:block; }
  .main form .form-group.form-group-with-captcha > .captcha{ text-align:left; }
  .main form .form-group.form-group-with-captcha .reload-captcha{ order:0;flex:1 0 100%;margin:0 0 10px; }
  .main form .form-group.form-group-with-captcha > .captcha > input{ flex:1 0 100%; }
  .main form button{ margin-top:20px; }
}