/* =========================================================
   css/rilato.css  —  rilatosolutions.com
   ---------------------------------------------------------
   Esta hoja vivia dentro de un <style> en inc/header.php.
   Ahora es un archivo aparte por dos razones:

     1. La comparte el sitio Y el sistema de tickets (HESK),
        que se dibuja con la misma cabecera y el mismo pie.
        Un solo archivo = un solo sitio donde cambiar un color.
     2. El navegador se la guarda en cache una vez en vez de
        recibirla otra vez con cada pagina.

   La politica Content-Security-Policy del servidor dice
   style-src 'self', asi que una hoja de este mismo dominio
   entra sin problema y sin hashes que mantener.

   El bloque <noscript> con el menu abierto SIGUE en
   inc/header.php a proposito: tiene que ir despues de esta
   hoja para ganar por orden de declaracion.
   ========================================================= */

/* =========================================================
   rilatosolutions.com  —  hoja de estilo
   ---------------------------------------------------------
   La forma viene de las tiendas de scripts de 2007: barra roja
   arriba, columna de cajas a la izquierda, panel de contenido
   a la derecha, pie delgado. Lo que cambia es que aquí no hay
   ni una sola imagen GIF haciendo de esquina o de borde: todo
   son bordes y radios de CSS3, así que la página se estira, se
   encoge y se imprime bien, y carga en una sola petición.
   ========================================================= */

/* ---------------------------------------------------------
   1. VARIABLES Y RESET
--------------------------------------------------------- */
:root{
  --rojo:         #CC3300;   /* el rojo de aquellas tiendas */
  --rojo-oscuro:  #A32800;
  --rojo-vivo:    #E02200;   /* para destacar dentro del texto */
  --tinta:        #2b2b2b;
  --papel:        #ffffff;
  --fondo:        #f4f2ee;
  --caja:         #fbfaf7;
  --borde:        #d6d0c4;
  --borde-suave:  #e8e4da;
  --apagado:      #6f6a60;
  --verde:        #0b6b5e;   /* precios, confirmaciones */
  --fuente-titulo: "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
  --fuente-texto:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fuente-mono:   ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace;
  --ancho:        1040px;
  --lateral:      224px;
}

*{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:rgba(0,0,0,0); }

html{ scroll-behavior:smooth; scroll-padding-top:20px; }

body{
  font-family: var(--fuente-texto);
  font-size:16px;
  line-height:1.6;
  color: var(--tinta);
  background: var(--fondo);
  -webkit-text-size-adjust:100%;
}

img{ max-width:100%; height:auto; }

a{ color:#0b57a4; }
a:hover{ color: var(--rojo); }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background: var(--rojo); color:#fff; padding:10px 16px; text-decoration:none;
}
.skip-link:focus{ left:0; }

/* Foco visible para quien navega con teclado */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible{
  outline:3px solid #ffb703; outline-offset:2px;
}

/* ---------------------------------------------------------
   2. ENVOLTORIO
--------------------------------------------------------- */
.main-wrapper{
  width:100%;
  max-width: var(--ancho);
  margin:0 auto;
  padding:0 14px;
}

/* ---------------------------------------------------------
   3. CABECERA: LOGO + BARRA DE MENÚ
   Aquellas cabeceras eran una tabla con el logo a la
   izquierda y los botones rojos pegados abajo a la derecha.
   Aquí es una fila flexible que se parte en dos líneas cuando
   no cabe.
--------------------------------------------------------- */
.cabecera{
  display:flex;
  align-items:flex-end;
  gap:16px;
  padding:14px 0 0;
  flex-wrap:wrap;
}

.logo{
  display:block;
  text-decoration:none;
  color: var(--tinta);
  font-family: var(--fuente-titulo);
  font-weight:700;
  font-size:30px;
  line-height:1;
  letter-spacing:-0.5px;
  white-space:nowrap;
}
.logo .rilato{ color: var(--tinta); }
.logo .sol{ color: var(--rojo); }
.logo .tag{
  display:block;
  font-size:11px;
  font-weight:400;
  letter-spacing:2.4px;
  text-transform:uppercase;
  color: var(--apagado);
  margin-top:5px;
  white-space:normal;
}

/* ---------------------------------------------------------
   4. MENÚ SUPERIOR
--------------------------------------------------------- */
#nav{ margin-left:auto; }
#nav ul{ list-style:none; display:flex; gap:2px; }
#nav li{ list-style:none; }
#nav li a{
  display:block;
  background: var(--rojo);
  color:#fff;
  text-decoration:none;
  font-size:12px;
  font-weight:700;
  letter-spacing:.4px;
  text-transform:uppercase;
  padding:9px 14px;
  border-radius:3px 3px 0 0;
  white-space:nowrap;
}
#nav li a:hover,
#nav li a:focus{ background: var(--rojo-oscuro); color:#fff; }
#nav li.active a{ background: var(--rojo-oscuro); box-shadow:inset 0 -3px 0 rgba(255,255,255,.55); }

/* Botón de idioma y de modo oscuro */
#nav li.extra a,
#nav li.extra button{
  background: var(--tinta);
  font-family: inherit;
  border:0;
  cursor:pointer;
  color:#fff;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  padding:9px 12px;
  border-radius:3px 3px 0 0;
  line-height:1.45;
}
#nav li.extra a:hover, #nav li.extra button:hover{ background:#000; }

/* La hamburguesa solo existe en pantallas pequeñas */
#nav-toggle{ display:none; }

/* Línea roja bajo la cabecera, como el borde del original */
.barra-roja{
  height:4px;
  background: var(--rojo);
  border-radius:2px;
  margin-bottom:14px;
}

/* ---------------------------------------------------------
   5. MIGAS DE PAN
--------------------------------------------------------- */
.breadcrumbs{
  font-size:12.5px;
  color: var(--apagado);
  margin-bottom:12px;
}
.breadcrumbs a{ color: var(--apagado); text-decoration:none; }
.breadcrumbs a:hover{ color: var(--rojo); text-decoration:underline; }
.breadcrumbs span{ margin:0 6px; }

/* ---------------------------------------------------------
   6. LAS DOS COLUMNAS
--------------------------------------------------------- */
.container{
  display:grid;
  grid-template-columns: var(--lateral) 1fr;
  gap:18px;
  align-items:start;
  padding-bottom:26px;
}

/* ---------------------------------------------------------
   7. CAJAS DE LA BARRA LATERAL
   Cada caja es el equivalente de una de aquellas tablas con
   esquinas de GIF: título en rojo, cuerpo con borde.
--------------------------------------------------------- */
.sidebar{ min-width:0; }

.caja{
  background: var(--caja);
  border:1px solid var(--borde);
  border-radius:5px;
  margin-bottom:14px;
  overflow:hidden;
}
.caja > h3{
  background: var(--rojo);
  color:#fff;
  font-family: var(--fuente-titulo);
  font-size:12px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  padding:7px 11px;
  margin:0;
}
.caja .cuerpo{ padding:9px 11px; }

.caja ul{ list-style:none; }
.caja li{ list-style:none; margin:0; }
.caja li + li{ border-top:1px solid var(--borde-suave); }
.caja li a{
  display:block;
  padding:7px 0 7px 14px;
  font-size:13.5px;
  line-height:1.35;
  text-decoration:none;
  color:#0b57a4;
  position:relative;
}
/* La flechita roja que en el original era st.gif */
.caja li a::before{
  content:"";
  position:absolute;
  left:2px; top:13px;
  border-style:solid;
  border-width:4px 0 4px 5px;
  border-color:transparent transparent transparent var(--rojo);
}
.caja li a:hover{ color: var(--rojo); text-decoration:underline; }
.caja li.actual > a{ font-weight:700; color: var(--rojo); }

.caja .etiqueta-precio{
  display:block;
  font-size:11.5px;
  color: var(--verde);
  font-weight:700;
  letter-spacing:.3px;
}
.caja .etiqueta-precio.pronto{ color: var(--apagado); font-weight:600; }

/* Caja del boletin */
.boletin p{ font-size:12.5px; line-height:1.45; margin-bottom:9px; }
.boletin label{
  display:block; font-size:11px; text-transform:uppercase;
  letter-spacing:.6px; color: var(--apagado); margin:7px 0 3px;
}
.boletin input[type=text],
.boletin input[type=email]{
  width:100%; font:inherit; font-size:14px;
  padding:6px 8px; border:1px solid var(--borde); border-radius:3px;
  background:#fffdf6;
}
.boletin button{
  width:100%; margin-top:10px;
  font:inherit; font-size:13px; font-weight:700; text-transform:uppercase;
  letter-spacing:.6px;
  padding:8px 10px; cursor:pointer;
  color:#fff; background: var(--rojo);
  border:2px solid #fff; border-radius:3px;
  box-shadow:0 0 0 1px var(--rojo);
}
.boletin button:hover{ background: var(--rojo-oscuro); box-shadow:0 0 0 1px var(--rojo-oscuro); }

/* Caja de formas de pago */
.pagos{ text-align:center; }

/* Las dos insignias de pago miden EXACTAMENTE lo mismo: el alto y
   el ancho los fija la caja, no el logo. Dentro, object-fit:contain
   encaja cada imagen sin estirarla, así que un logotipo ancho
   y uno casi cuadrado se alinean igual de bien.
   Van una debajo de otra porque la columna es estrecha. */
.pagos .marca{
  display:block;
  width:100%;
  max-width:180px;
  height:56px;
  margin:6px auto;
  padding:6px;
  box-sizing:border-box;
  border:1px solid var(--borde);
  border-radius:4px;
  background:#fff;
}
.pagos .marca img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

/* Insignia sin imagen: el nombre de la pasarela, centrado en
   la misma caja de 180x56. Asi no hay que alojar el logotipo
   de otra empresa para que la caja se vea terminada. */
.pagos .marca-texto{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  font-family: var(--fuente-titulo);
  font-weight:700;
  font-size:19px;
  letter-spacing:.2px;
  color: var(--tinta);
}
.pagos small{ display:block; margin-top:7px; font-size:11.5px; color: var(--apagado); }

/* ---------------------------------------------------------
   7bis. CAPTURAS DE PANTALLA
   ---------------------------------------------------------
   Una captura de la aplicacion dentro de una ficha de
   producto. En reposo ocupa el ancho de la columna (unos
   718px), que para una pantalla de 1411px de ancho deja la
   letra demasiado pequena para leerla. Al pasar el raton se
   agranda; al quitarlo vuelve sola.

   POR QUE ESCALAS DISTINTAS SEGUN EL ANCHO: la imagen crece
   desde su centro, y si se pasa del borde de la ventana
   aparece una barra de scroll horizontal, que es peor que no
   tener zoom. Los dos valores de abajo estan calculados para
   que la imagen ampliada QUEPA: el envoltorio mide 1040px
   como mucho, la barra lateral 224px, y a la columna de
   contenido le quedan unos 718px.

   Solo se activa donde hay raton de verdad (hover: hover).
   En un telefono no hay puntero que quitar, asi que alli la
   imagen se queda quieta y se lee tocando para abrirla.
--------------------------------------------------------- */
.captura{
  margin:22px 0 26px;
}
.captura img{
  display:block;
  width:100%;
  height:auto;
  border:1px solid var(--borde);
  border-radius:4px;
  background:#fff;
}
.captura figcaption{
  margin-top:8px;
  font-size:13px;
  line-height:1.45;
  color: var(--apagado);
}

@media (hover: hover) and (min-width: 1024px){
  .captura img{
    transform-origin:center center;
    transition: transform .28s ease, box-shadow .28s ease;
    cursor: zoom-in;
  }
  .captura img:hover{
    position:relative;
    z-index:60;
    transform: scale(1.25);
    box-shadow: 0 14px 44px rgba(0,0,0,.34);
  }
}

@media (hover: hover) and (min-width: 1400px){
  .captura img:hover{ transform: scale(1.55); }
}

/* Si alguien prefiere que no se muevan las cosas, no se mueven. */
@media (prefers-reduced-motion: reduce){
  .captura img{ transition: none; }
}

/* ---------------------------------------------------------
   8. PANEL DE CONTENIDO
--------------------------------------------------------- */
.content{
  min-width:0;
  background: var(--papel);
  border:1px solid var(--borde);
  border-radius:5px;
  padding:22px 26px 26px;
}

.content h1{
  font-family: var(--fuente-titulo);
  font-size:29px;
  line-height:1.2;
  margin-bottom:14px;
  color: var(--tinta);
}
.content h2{
  font-family: var(--fuente-titulo);
  font-size:21px;
  line-height:1.25;
  margin:26px 0 10px;
  padding-bottom:5px;
  border-bottom:2px solid var(--rojo);
}
.content h3{
  font-family: var(--fuente-titulo);
  font-size:17px;
  margin:20px 0 7px;
}
.content p{ margin-bottom:13px; }
.content ul, .content ol{ margin:0 0 15px 22px; }
.content li{ margin-bottom:6px; }
.content strong{ font-weight:700; }

.entradilla{
  font-size:18px;
  line-height:1.55;
  color:#444;
  border-left:4px solid var(--rojo);
  padding-left:14px;
  margin-bottom:18px;
}

.centrado{ text-align:center; }
.rojo{ color: var(--rojo-vivo); font-weight:700; }

/* Frase-gancho centrada, como los <p align=center><b> del original */
.gancho{
  text-align:center;
  font-family: var(--fuente-titulo);
  font-size:20px;
  font-weight:700;
  line-height:1.3;
  margin:22px 0;
  color: var(--tinta);
}

.aviso{
  background:#fff8e6;
  border:1px solid #e8d9a8;
  border-left:4px solid #e0a800;
  border-radius:4px;
  padding:12px 15px;
  margin:18px 0;
  font-size:15px;
}

.code-box{
  font-family: var(--fuente-mono);
  font-size:13.5px;
  background:#1e1e28;
  color:#e8e8ef;
  padding:12px 14px;
  border-radius:5px;
  overflow-x:auto;
  white-space:pre;
  margin:12px 0 16px;
}

.content table{ width:100%; border-collapse:collapse; margin:16px 0; font-size:14.5px; }
.content th, .content td{ border:1px solid var(--borde); padding:8px 10px; text-align:left; vertical-align:top; }
.content thead th{ background:#f4f1ea; font-family: var(--fuente-titulo); }
.tabla-scroll{ overflow-x:auto; }

/* ---------------------------------------------------------
   9. FICHA DE PRODUCTO: PRECIO Y BOTÓN DE COMPRA
--------------------------------------------------------- */
.precio-linea{
  text-align:center;
  font-family: var(--fuente-titulo);
  font-size:22px;
  font-weight:700;
  color: var(--verde);
  margin:6px 0 18px;
}
.precio-linea .version{
  display:block;
  font-size:12px;
  font-weight:400;
  letter-spacing:1px;
  text-transform:uppercase;
  color: var(--apagado);
  margin-top:4px;
}

.comprar{
  border:1px solid var(--borde);
  border-radius:6px;
  background:#fbfaf7;
  padding:20px;
  margin:24px 0;
  text-align:center;
}
.comprar .precio{
  font-family: var(--fuente-titulo);
  font-size:34px;
  font-weight:700;
  color: var(--verde);
  line-height:1;
}
.comprar .nota{ font-size:13px; color: var(--apagado); margin-top:8px; }
.boton{
  display:inline-block;
  font-family: var(--fuente-titulo);
  font-size:17px;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:#fff !important;
  background: var(--rojo);
  border:0;
  border-radius:5px;
  padding:14px 34px;
  margin:14px 0 4px;
  cursor:pointer;
  text-decoration:none;
  box-shadow:0 2px 0 var(--rojo-oscuro);
}
.boton:hover{ background: var(--rojo-oscuro); box-shadow:0 2px 0 #7d1e00; color:#fff !important; }
.boton.gratis{ background: var(--verde); box-shadow:0 2px 0 #074b41; }
.boton.gratis:hover{ background:#095248; box-shadow:0 2px 0 #043029; }
.boton.pronto{ background: var(--apagado); box-shadow:0 2px 0 #4c483f; cursor:default; }

/* Tarjetas del catalogo */
.tarjetas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px; margin:18px 0 22px; }
.tarjeta{
  display:block; text-decoration:none; color:inherit;
  border:1px solid var(--borde); border-radius:5px;
  background:#fbfaf7; padding:15px 16px;
  transition:border-color .15s, box-shadow .15s;
}
.tarjeta:hover{ border-color: var(--rojo); box-shadow:0 2px 8px rgba(0,0,0,.07); color:inherit; }
.tarjeta h3{ margin:0 0 6px; font-size:17px; color: var(--rojo); }
.tarjeta p{ font-size:14px; line-height:1.45; margin:0 0 9px; color:#4a4a4a; }
.tarjeta .meta{ font-size:12px; color: var(--apagado); text-transform:uppercase; letter-spacing:.6px; }
.tarjeta .meta b{ color: var(--verde); }

/* ---------------------------------------------------------
   10. FORMULARIOS
--------------------------------------------------------- */
.campo{ margin-bottom:14px; }
.campo label{
  display:block; font-size:12px; text-transform:uppercase;
  letter-spacing:.6px; color: var(--apagado); margin-bottom:4px;
}
.campo input[type=text], .campo input[type=email], .campo textarea, .campo select{
  width:100%; font:inherit; font-size:15px;
  padding:9px 10px; border:1px solid var(--borde); border-radius:4px; background:#fff;
}
.campo textarea{ min-height:150px; resize:vertical; }
.trampa{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.exito{ color: var(--verde); font-weight:700; }
.error{ color: var(--rojo-vivo); font-weight:700; }

/* ---------------------------------------------------------
   11. PIE DE PÁGINA
--------------------------------------------------------- */
.site-footer{
  border-top:4px solid var(--rojo);
  background: var(--caja);
  border-left:1px solid var(--borde);
  border-right:1px solid var(--borde);
  border-bottom:1px solid var(--borde);
  border-radius:0 0 5px 5px;
  padding:16px 18px 20px;
  margin-bottom:26px;
  font-size:13px;
  color: var(--apagado);
}
.footer-nav{ text-align:center; margin-bottom:11px; line-height:2; }
.footer-nav a{ color: var(--tinta); text-decoration:none; font-size:11.5px; font-weight:700; letter-spacing:.5px; }
.footer-nav a:hover{ color: var(--rojo); text-decoration:underline; }
.footer-nav .sep{ color: var(--borde); margin:0 7px; }
.footer-info{ text-align:center; font-size:12px; line-height:1.8; }
.footer-info a{ color: var(--apagado); }
.footer-legal{ text-align:center; margin-top:10px; font-size:12px; }

#back-to-top{
  position:fixed; right:16px; bottom:16px;
  width:42px; height:42px; border:0; border-radius:50%;
  background: var(--rojo); color:#fff; font-size:19px; cursor:pointer;
  display:none; z-index:60; box-shadow:0 2px 8px rgba(0,0,0,.25);
}
#back-to-top.visible{ display:block; }

/* ---------------------------------------------------------
   12. COMENTARIOS
--------------------------------------------------------- */
.comentarios{
  margin-top:30px;
  padding-top:20px;
  border-top:2px solid var(--rojo);
}
.comentarios-aviso{
  background:#f4f1ea; border:1px dashed var(--borde);
  border-radius:4px; padding:14px 16px; font-size:14px; color: var(--apagado);
}

/* ---------------------------------------------------------
   13. MODO OSCURO
--------------------------------------------------------- */
.dark-mode{
  --tinta:#e6e3dd;
  --papel:#1d1d20;
  --fondo:#141416;
  --caja:#232327;
  --borde:#3a3a40;
  --borde-suave:#2e2e34;
  --apagado:#9e9a92;
  --verde:#4fc7b2;
}
.dark-mode body{ background: var(--fondo); color: var(--tinta); }
.dark-mode .content{ background: var(--papel); }
.dark-mode a{ color:#79b8ff; }
.dark-mode a:hover{ color:#ff8a5c; }
.dark-mode .caja li a{ color:#79b8ff; }
.dark-mode .content thead th{ background:#2a2a30; }
.dark-mode .aviso{ background:#332c18; border-color:#5a4c22; border-left-color:#c79100; }
.dark-mode .tarjeta{ background:#232327; }
.dark-mode .comprar{ background:#232327; }
/* La insignia de pago se queda BLANCA tambien en modo oscuro: los dos
   logotipos estan dibujados para fondo claro y sobre gris se ensucian. */
.dark-mode .pagos .marca{ background:#fff; }
.dark-mode .boletin input{ background:#2a2a30; color: var(--tinta); }
.dark-mode .campo input, .dark-mode .campo textarea, .dark-mode .campo select{
  background:#2a2a30; color: var(--tinta);
}
.dark-mode .comentarios-aviso{ background:#232327; }
.dark-mode .entradilla{ color:#c8c4bc; }

/* ---------------------------------------------------------
   14. PANTALLAS PEQUEÑAS
   Una sola columna. El contenido va PRIMERO y las cajas
   después: en un teléfono nadie quiere pasar siete cajas
   antes de llegar al texto.
--------------------------------------------------------- */
@media only screen and (max-width: 860px){
  :root{ --lateral:200px; }
  .content{ padding:18px 18px 22px; }
}

@media only screen and (max-width: 720px){
  body{ font-size:15.5px; }

  .container{ grid-template-columns:1fr; gap:16px; }
  .sidebar{ order:2; }
  .content{ order:1; }

  /* Cabecera: logo a la izquierda, hamburguesa a la derecha */
  .cabecera{ align-items:center; padding-top:12px; }
  .logo{ font-size:25px; }
  .logo .tag{ font-size:10px; letter-spacing:1.8px; }

  #nav{ margin-left:auto; position:relative; }

  #nav-toggle{
    display:block;
    width:44px; height:44px;
    background: var(--rojo);
    border:0; border-radius:4px;
    cursor:pointer;
    position:relative;
  }
  #nav-toggle span,
  #nav-toggle span::before,
  #nav-toggle span::after{
    content:""; position:absolute;
    left:11px; right:11px; height:2px;
    background:#fff; border-radius:2px;
    transition:transform .18s ease, opacity .18s ease;
  }
  #nav-toggle span{ top:21px; }
  #nav-toggle span::before{ top:-7px; left:0; right:0; }
  #nav-toggle span::after{ top:7px; left:0; right:0; }
  #nav-toggle[aria-expanded="true"] span{ background:transparent; }
  #nav-toggle[aria-expanded="true"] span::before{ transform:translateY(7px) rotate(45deg); }
  #nav-toggle[aria-expanded="true"] span::after{ transform:translateY(-7px) rotate(-45deg); }

  #nav ul{
    display:none;
    flex-direction:column;
    gap:0;
    position:absolute;
    right:0; top:52px;
    min-width:210px;
    z-index:90;
    border-radius:5px;
    overflow:hidden;
    box-shadow:0 6px 22px rgba(0,0,0,.28);
  }
  #nav.abierto ul{ display:flex; }
  #nav li a, #nav li.extra a, #nav li.extra button{
    border-radius:0;
    text-align:left;
    width:100%;
    padding:13px 16px;
    font-size:13px;
  }
  #nav li + li a, #nav li + li button{ border-top:1px solid rgba(255,255,255,.22); }

  /* El sol / la luna quedan diminutos dentro del menú desplegado:
     a 12px el símbolo se lee como una mota de polvo y nadie lo
     encuentra. Aquí es un botón de fila entera como los demás. */
  #nav li.extra button{ font-size:20px; line-height:1; padding:12px 16px; }

  .content h1{ font-size:24px; }
  .content h2{ font-size:19px; }
  .entradilla{ font-size:16.5px; }
  .gancho{ font-size:18px; }
  .comprar .precio{ font-size:29px; }
  .boton{ width:100%; padding:14px 18px; }
}

@media only screen and (max-width: 420px){
  .main-wrapper{ padding:0 10px; }
  .content{ padding:15px 14px 20px; }
  .logo{ font-size:22px; }
}

/* Respeta la preferencia de menos movimiento */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; }
}

/* ---------------------------------------------------------
   15. FORMULARIOS
   ---------------------------------------------------------
   Lo que usan contact.php y cualquier formulario del sitio.
   Las reglas del formulario de tickets vivian aqui; los
   tickets los lleva ahora HESK, en /tickets/, y su aspecto
   se ajusta en css/tickets.css.
--------------------------------------------------------- */

/* Dos campos del brazo en pantalla ancha, uno debajo del otro
   en el telefono. */
.campo-doble{ display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
@media (max-width:620px){ .campo-doble{ grid-template-columns:1fr; } }

/* La pista bajo un campo. Explica sin gritar. */
.campo small{
  display:block; margin-top:4px;
  font-size:12.5px; line-height:1.4; color: var(--apagado);
}

/* Para lectores de pantalla: la etiqueta existe, pero no se
   dibuja porque el placeholder ya dice lo mismo a la vista. */
.visualmente-oculto{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------------------------------------------------------
   16. IMPRESIÓN
--------------------------------------------------------- */
@media print{
  body{ background:#fff; color:#000; }
  #nav, .sidebar, .site-footer, #back-to-top, .barra-roja, .comentarios{ display:none !important; }
  .container{ display:block; }
  .content{ border:0; padding:0; }
  .code-box{ background:#fff; color:#000; border:1px solid #999; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:11px; color:#555; }
}