/* =============================================================================
   Altexsa — compra en pasos horizontales (2026-10-11). INSTALADO en
   themes/huraga/assets/css/altx-compra.css (archivo propio: una actualización de FOSSBilling no lo pisa).
   Lo carga html_custom/altx_compra.html.twig DESPUÉS de altx-portal.css, porque usa sus colores
   (--pc-azul, --pc-oro, --pc-panel, --pc-borde, --pc-tinta, --pc-suave…). Base: la maqueta aprobada
   (panel-clientes/tienda/maqueta/altx-compra.css) + lo que necesita la compra real (errores, revisando, tomado…).

   Regla de marca: el DORADO va SOLO en el botón de acción de cada pantalla
   (Continuar / Pagar). Lo elegido, los pasos y los botones secundarios van en
   azul marino. Letra Inter (la carga altexsa.css; antes Lexend). Modo claro y oscuro.
   ============================================================================= */

:root{
  --ac-fondo:#f4f6fa;          /* fondo de la página: gris muy suave, las tarjetas en blanco */
  --ac-campo:#ffffff;          /* fondo de las casillas para escribir */
  --ac-activo:#002259;         /* paso actual, opción elegida, botón secundario */
  --ac-sobre-activo:#ffffff;
  --ac-sel-f:#f1f5fc;          /* fondo de la opción elegida */
  --ac-cab:#002259;            /* cabecera del resumen */
  --ac-req:#b42318;            /* asterisco de "obligatorio" */
  --ac-sobre-verde:#ffffff;
  --ac-flecha:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23526078' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
html[data-bs-theme="dark"]{
  --ac-fondo:#050b1f;
  --ac-campo:#091330;
  --ac-activo:#8fb3f0;         /* en fondo oscuro el azul marino no se vería */
  --ac-sobre-activo:#050b1f;
  --ac-sel-f:#122046;
  --ac-cab:#1d3d7a;
  --ac-req:#ff9b8f;
  --ac-sobre-verde:#06221a;
  --ac-flecha:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3b0cf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

body:has(.ac-compra){ background:var(--ac-fondo); margin:0; }
.ac-compra{ background:var(--ac-fondo); color:var(--pc-tinta); font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px; letter-spacing:normal; min-height:100vh; }
.ac-compra svg.i{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.ac-wrap{ max-width:1200px; margin:0 auto; padding:0 28px; }

/* ------------------------------------------------------------------ barra de arriba */
.ac-top{ background:var(--pc-panel); border-bottom:1px solid var(--pc-borde); }
.ac-top .ac-wrap{ display:flex; align-items:center; justify-content:space-between; height:78px; }
.ac-logo img{ height:42px; width:auto; display:block; }
.ac-top-der{ display:flex; align-items:center; gap:18px; font-size:15px; }
.ac-modo{ width:40px; height:40px; border:1.5px solid var(--pc-borde); border-radius:9px; background:none; color:var(--pc-suave);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.ac-modo:hover{ border-color:var(--ac-activo); color:var(--ac-activo); }
.ac-entrar{ display:inline-flex; align-items:center; gap:8px; color:var(--pc-azul); font-weight:600; text-decoration:none; }
.ac-entrar .mu{ color:var(--pc-suave); font-weight:400; }

main.ac-wrap{ padding-top:32px; padding-bottom:60px; }

/* ------------------------------------------------------------------ pasos horizontales */
.ac-pasos{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); background:var(--pc-panel); border:1px solid var(--pc-borde);
  border-radius:12px; box-shadow:var(--pc-sombra); overflow:hidden; margin-bottom:36px; }
.ac-paso{ position:relative; display:flex; align-items:center; gap:14px; padding:18px 30px 18px 24px; color:var(--pc-suave); text-decoration:none; }
.ac-paso:not(:last-child)::after{ content:""; position:absolute; right:8px; top:50%; width:15px; height:15px;
  border-top:1.5px solid var(--pc-borde); border-right:1.5px solid var(--pc-borde); transform:translateY(-50%) rotate(45deg); }
.ac-num{ width:40px; height:40px; border-radius:50%; border:2px solid var(--pc-borde); display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:15px; flex:none; color:var(--pc-suave); background:var(--pc-panel); }
.ac-num svg.i{ width:19px; height:19px; stroke-width:2.6; }
.ac-paso .t{ display:block; font-weight:600; font-size:15.5px; line-height:1.25; }
.ac-paso .s{ display:block; font-size:13px; color:var(--pc-suave); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ac-paso > span:last-child{ min-width:0; }
.ac-paso.hecho .ac-num{ background:var(--pc-verde); border-color:var(--pc-verde); color:var(--ac-sobre-verde); }
.ac-paso.hecho .t{ color:var(--pc-tinta); }
.ac-paso.hecho:hover .t{ color:var(--pc-azul); text-decoration:underline; }
.ac-paso.activo{ box-shadow:inset 0 -3px 0 var(--ac-activo); background:var(--ac-sel-f); }
.ac-paso.activo .ac-num{ background:var(--ac-activo); border-color:var(--ac-activo); color:var(--ac-sobre-activo); }
.ac-paso.activo .t{ color:var(--pc-tinta); font-weight:700; }
.ac-pasos-movil{ display:none; }

/* ------------------------------------------------------------------ cuerpo en dos columnas */
.ac-grid{ display:grid; grid-template-columns:minmax(0,1fr) 384px; gap:36px; align-items:start; }
.ac-h1{ font-size:30px; font-weight:700; line-height:1.15; color:var(--pc-tinta); margin:0 0 8px; letter-spacing:normal; }
.ac-lead{ color:var(--pc-suave); font-size:16.5px; margin:0 0 26px; line-height:1.5; }
.ac-etq{ font-size:13px; font-weight:700; letter-spacing:normal; text-transform:uppercase; color:var(--pc-suave); margin:0 0 12px; }
.ac-card{ background:var(--pc-panel); border:1px solid var(--pc-borde); border-radius:12px; box-shadow:var(--pc-sombra); padding:24px 26px; margin-bottom:20px; }
.ac-card-cab{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:18px; }
.ac-card-tit{ font-size:18px; font-weight:700; color:var(--pc-tinta); }
.ac-leyenda{ font-size:13px; color:var(--pc-suave); }
.ac-leyenda b, .ac-req{ color:var(--ac-req); font-weight:700; }
.ac-volver{ display:inline-flex; align-items:center; gap:6px; color:var(--pc-suave); text-decoration:none; font-size:15px; margin-top:4px; }
.ac-volver:hover{ color:var(--pc-azul); }

/* opciones en tarjetas (qué hacer con el dominio, boleta/factura, forma de pago) */
.ac-opciones{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:22px; }
.ac-opciones.dos{ grid-template-columns:repeat(2,minmax(0,1fr)); margin-bottom:0; }
.ac-opcion{ position:relative; display:flex; gap:13px; align-items:flex-start; text-align:left; width:100%; background:var(--pc-panel);
  border:1.5px solid var(--pc-borde); border-radius:12px; padding:18px 44px 18px 16px; cursor:pointer; color:var(--pc-tinta); font:inherit; }
.ac-opcion:hover{ border-color:var(--pc-azul); }
.ac-opcion .ico{ width:42px; height:42px; border-radius:10px; background:var(--pc-azul-suave); color:var(--pc-azul);
  display:flex; align-items:center; justify-content:center; flex:none; }
.ac-opcion .ico svg.i{ width:22px; height:22px; }
.ac-opcion b{ display:block; font-size:16px; line-height:1.3; }
.ac-opcion small{ display:block; font-size:13.5px; color:var(--pc-suave); line-height:1.45; margin-top:4px; }
.ac-opcion .radio{ position:absolute; top:16px; right:16px; width:20px; height:20px; border-radius:50%; border:2px solid var(--pc-borde); background:var(--ac-campo); }
.ac-opcion.sel{ border-color:var(--ac-activo); background:var(--ac-sel-f); box-shadow:0 0 0 3px rgba(0,34,89,.07); }
.ac-opcion.sel .ico{ background:var(--ac-activo); color:var(--ac-sobre-activo); }
.ac-opcion.sel .radio{ border-color:var(--ac-activo); background:radial-gradient(circle, var(--ac-activo) 0 5px, var(--ac-campo) 5.5px); }
/* las 3 opciones del dominio: ícono arriba y texto a todo el ancho (en 3 columnas no cabe al lado) */
.ac-opciones:not(.dos) .ac-opcion{ flex-direction:column; gap:12px; padding:18px; }
.ac-opcion.chica{ padding:14px 44px 14px 14px; align-items:center; }
.ac-opcion.chica .ico{ width:36px; height:36px; }
.ac-opcion.chica .radio{ top:50%; margin-top:-10px; }
.ac-chips-medio{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.ac-chips-medio span{ font-size:12px; font-weight:600; padding:3px 9px; border-radius:5px; border:1px solid var(--pc-borde); color:var(--pc-suave); background:var(--pc-panel); }

/* buscador de dominio */
.ac-buscar{ display:flex; gap:10px; }
.ac-campo-dom{ flex:1; display:flex; align-items:center; gap:4px; border:1.5px solid var(--pc-borde); border-radius:10px; background:var(--ac-campo);
  padding:0 16px; height:58px; }
.ac-campo-dom:focus-within{ border-color:var(--ac-activo); }
.ac-campo-dom .pre{ color:var(--pc-suave); font-size:17px; }
.ac-campo-dom input{ flex:1; border:0; outline:0; background:transparent; color:var(--pc-tinta); font:inherit; font-size:19px; font-weight:600; min-width:0; }
.ac-btn-sec{ display:inline-flex; align-items:center; gap:8px; background:var(--ac-activo); color:var(--ac-sobre-activo); border:0; border-radius:10px;
  padding:0 24px; font:inherit; font-weight:600; font-size:16px; cursor:pointer; text-decoration:none; white-space:nowrap; }
.ac-btn-borde{ display:inline-flex; align-items:center; gap:6px; background:var(--pc-panel); color:var(--pc-tinta); border:1.5px solid var(--pc-borde);
  border-radius:9px; padding:8px 14px; font:inherit; font-weight:600; font-size:14.5px; cursor:pointer; white-space:nowrap; }
.ac-btn-borde:hover{ border-color:var(--ac-activo); color:var(--pc-azul); }
.ac-ext{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:14px; font-size:14px; color:var(--pc-suave); }
.ac-chip{ display:inline-flex; align-items:center; gap:6px; border:1.5px solid var(--pc-borde); border-radius:8px; padding:6px 13px;
  font-weight:600; font-size:15px; color:var(--pc-tinta); background:var(--pc-panel); cursor:pointer; }
.ac-chip.sel{ background:var(--ac-activo); border-color:var(--ac-activo); color:var(--ac-sobre-activo); }
.ac-chip svg.i{ width:15px; height:15px; stroke-width:2.6; }
.ac-ayuda{ font-size:13px; color:var(--pc-suave); margin-top:7px; line-height:1.45; }

/* resultados de la búsqueda */
.ac-res{ border:1px solid var(--pc-borde); border-radius:12px; overflow:hidden; background:var(--pc-panel); box-shadow:var(--pc-sombra); }
.ac-res-cab{ display:grid; grid-template-columns:30px minmax(0,1fr) 130px 200px; gap:16px; padding:11px 20px; font-size:12.5px; font-weight:700;
  letter-spacing:normal; text-transform:uppercase; color:var(--pc-suave); background:var(--pc-menu); }
.ac-res-fila{ display:grid; grid-template-columns:30px minmax(0,1fr) 130px 200px; gap:16px; align-items:center; padding:17px 20px;
  border-top:1px solid var(--pc-linea); }
.ac-res-fila.sel{ background:var(--ac-sel-f); box-shadow:inset 3px 0 0 var(--ac-activo); }
.ac-check{ width:22px; height:22px; border-radius:6px; border:2px solid var(--pc-borde); display:flex; align-items:center; justify-content:center; background:var(--ac-campo); }
.ac-check.on{ background:var(--ac-activo); border-color:var(--ac-activo); color:var(--ac-sobre-activo); }
.ac-check svg.i{ width:15px; height:15px; stroke-width:3; }
.ac-dom{ font-size:18px; font-weight:700; color:var(--pc-tinta); overflow-wrap:anywhere; }
.ac-dom span{ color:var(--pc-suave); font-weight:500; }
.ac-pill{ display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:700; padding:5px 10px; border-radius:5px; white-space:nowrap; letter-spacing:normal; }
.ac-pill.ok{ background:var(--pc-verde-f); color:var(--pc-verde); }
.ac-pill svg.i{ width:14px; height:14px; stroke-width:2.8; }
.ac-precio{ text-align:right; }
.ac-precio b{ display:block; font-size:16px; }
.ac-precio small{ display:block; font-size:12.5px; color:var(--pc-suave); margin-top:2px; }
.ac-precio .gratis{ color:var(--pc-verde); }
.ac-precio-fila{ display:flex; align-items:center; justify-content:flex-end; gap:12px; }
.ac-nota{ display:flex; gap:11px; align-items:flex-start; font-size:14.5px; line-height:1.5; color:var(--pc-suave); background:var(--pc-azul-suave);
  border-radius:10px; padding:13px 15px; margin-top:16px; }
.ac-nota svg.i{ color:var(--pc-azul); margin-top:1px; }
.ac-nota b{ color:var(--pc-tinta); }

/* pestañas de "Tus datos" */
.ac-tabs{ display:grid; grid-template-columns:1fr 1fr; gap:5px; background:var(--pc-menu); border:1px solid var(--pc-borde); border-radius:12px;
  padding:5px; margin-bottom:18px; }
.ac-tab{ display:flex; align-items:center; justify-content:center; gap:9px; border:0; background:none; padding:12px 14px; border-radius:9px;
  font:inherit; font-weight:600; font-size:15.5px; color:var(--pc-suave); cursor:pointer; text-align:left; }
.ac-tab small{ font-weight:400; font-size:13px; color:var(--pc-suave); }
.ac-tab small::before{ content:" · "; }
.ac-tab.sel{ background:var(--pc-panel); color:var(--pc-tinta); box-shadow:0 1px 4px rgba(0,34,89,.13); }
.ac-tab.sel svg.i{ color:var(--pc-azul); }
html[data-bs-theme="dark"] .ac-tab.sel{ box-shadow:0 1px 4px rgba(0,0,0,.5); background:var(--ac-sel-f); }

/* formulario */
.ac-form{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 18px; }
.ac-f.full{ grid-column:1/-1; }
.ac-lbl{ display:block; font-size:14.5px; font-weight:600; margin-bottom:7px; color:var(--pc-tinta); }
.ac-lbl .op{ color:var(--pc-suave); font-weight:400; }
.ac-in{ display:block; width:100%; height:50px; border:1.5px solid var(--pc-borde); border-radius:9px; background:var(--ac-campo); color:var(--pc-tinta);
  padding:0 14px; font:inherit; font-size:16px; outline:0; box-sizing:border-box; }
.ac-in:focus{ border-color:var(--ac-activo); box-shadow:0 0 0 3px rgba(0,34,89,.08); }
select.ac-in{ appearance:none; -webkit-appearance:none; background-image:var(--ac-flecha); background-repeat:no-repeat; background-position:right 12px center;
  background-size:20px; padding-right:40px; }
.ac-in.ok{ border-color:var(--pc-verde); }
.ac-tel{ display:flex; }
.ac-tel .pre{ display:flex; align-items:center; gap:6px; padding:0 13px; border:1.5px solid var(--pc-borde); border-right:0; border-radius:9px 0 0 9px;
  background:var(--pc-menu); color:var(--pc-tinta); font-weight:600; font-size:15px; white-space:nowrap; }
.ac-tel .pre i{ font-style:normal; font-size:11px; font-weight:700; color:var(--pc-suave); border:1px solid var(--pc-borde); border-radius:4px; padding:1px 4px; }
.ac-tel .ac-in{ border-radius:0 9px 9px 0; }
.ac-valido{ display:inline-flex; align-items:center; gap:4px; font-size:13px; color:var(--pc-verde); margin-top:6px; font-weight:600; }
.ac-valido svg.i{ width:14px; height:14px; stroke-width:2.8; }
.ac-sep{ border:0; border-top:1px solid var(--pc-borde); opacity:1; margin:24px 0 20px; }
.ac-sub{ font-size:16.5px; font-weight:700; color:var(--pc-tinta); margin:0 0 4px; }
.ac-sub-ayuda{ font-size:14px; color:var(--pc-suave); margin:0 0 14px; line-height:1.45; }
.ac-oculto{ display:none !important; }
.ac-nota.correo{ background:transparent; border:1.5px dashed var(--pc-borde); font-size:14px; margin-top:22px; }

/* pantalla de pago */
.ac-tabla .fila{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:15px 0; border-top:1px solid var(--pc-linea); }
.ac-tabla .fila:first-child{ border-top:0; padding-top:0; }
.ac-tabla .n{ font-weight:700; font-size:16.5px; }
.ac-tabla .d{ font-size:13.5px; color:var(--pc-suave); margin-top:2px; }
.ac-tabla .p{ font-weight:700; white-space:nowrap; text-align:right; }
.ac-cambiar{ color:var(--pc-azul); font-weight:600; font-size:14.5px; text-decoration:none; }
.ac-cambiar:hover{ text-decoration:underline; }
.ac-quien{ display:flex; align-items:flex-start; gap:14px; }
.ac-quien .av{ width:44px; height:44px; border-radius:50%; background:var(--pc-azul-suave); color:var(--pc-azul); display:flex; align-items:center;
  justify-content:center; font-weight:700; flex:none; }
.ac-quien .n{ font-weight:700; }
.ac-quien .d{ font-size:14px; color:var(--pc-suave); line-height:1.55; }
.ac-pagos .ac-opcion{ flex-direction:column; gap:12px; padding:20px 46px 20px 20px; }
.ac-pagos .ac-opcion b{ font-size:17px; }

/* ------------------------------------------------------------------ resumen de la compra */
.ac-resumen{ position:sticky; top:24px; }
.ac-res-card{ background:var(--pc-panel); border:1px solid var(--pc-borde); border-radius:12px; box-shadow:0 8px 28px rgba(0,34,89,.08); overflow:hidden; }
html[data-bs-theme="dark"] .ac-res-card{ box-shadow:0 8px 28px rgba(0,0,0,.4); }
.ac-res-titulo{ background:var(--ac-cab); color:#fff; padding:16px 22px; font-weight:700; font-size:14.5px; letter-spacing:normal; text-transform:uppercase;
  display:flex; align-items:center; gap:10px; }
.ac-res-titulo svg.i{ color:#f2c14e; }
.ac-res-cuerpo{ padding:8px 22px 20px; }
.ac-item{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:14px 0; border-bottom:1px dashed var(--pc-borde); }
.ac-item .n{ font-weight:700; font-size:15.5px; line-height:1.3; overflow-wrap:anywhere; }
.ac-item .d{ font-size:13px; color:var(--pc-suave); margin-top:2px; }
.ac-item .p{ font-weight:700; white-space:nowrap; text-align:right; font-size:15.5px; }
.ac-item .p small{ display:block; font-weight:400; font-size:12.5px; color:var(--pc-suave); text-decoration:line-through; }
.ac-item .gratis{ color:var(--pc-verde); }
.ac-cuenta{ padding-top:12px; }
.ac-cuenta .f{ display:flex; justify-content:space-between; font-size:15px; color:var(--pc-suave); padding:4px 0; }
.ac-cuenta .f span:last-child{ color:var(--pc-tinta); }
.ac-total{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; border-top:2px solid var(--pc-tinta); margin-top:10px; padding-top:14px; }
.ac-total .t{ font-weight:700; font-size:15.5px; }
.ac-total .t small{ display:block; font-weight:400; font-size:12.5px; color:var(--pc-suave); }
.ac-total .m{ font-size:31px; font-weight:700; color:var(--pc-tinta); letter-spacing:normal; white-space:nowrap; }
.ac-renueva{ font-size:13px; color:var(--pc-suave); text-align:right; margin-top:6px; line-height:1.45; }
.ac-cupon{ display:flex; align-items:center; gap:8px; color:var(--pc-azul); font-weight:600; font-size:14.5px; text-decoration:none;
  border-top:1px solid var(--pc-linea); margin-top:16px; padding-top:14px; }
.ac-cupon svg.i{ width:18px; height:18px; }
.ac-escribir{ display:flex; gap:10px; align-items:flex-start; background:var(--pc-azul-suave); border-radius:10px; padding:12px 14px; margin-top:14px;
  font-size:13.5px; color:var(--pc-suave); line-height:1.4; }
.ac-escribir svg.i{ color:var(--pc-azul); margin-top:2px; }
.ac-escribir b{ display:block; color:var(--pc-tinta); font-size:15px; overflow-wrap:anywhere; }
.ac-acepto{ display:flex; gap:10px; align-items:flex-start; font-size:14px; line-height:1.45; color:var(--pc-suave); margin-top:18px; cursor:pointer; }
.ac-acepto a{ color:var(--pc-azul); font-weight:600; }
.ac-acepto .ac-check{ flex:none; margin-top:1px; }

/* EL botón dorado: el único de la pantalla */
.ac-btn-oro{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; margin-top:16px; background:var(--pc-oro); color:#002259;
  border:0; border-radius:12px; padding:17px 20px; font:inherit; font-size:18px; font-weight:700; text-decoration:none; cursor:pointer;
  box-shadow:0 6px 18px rgba(237,160,0,.28); box-sizing:border-box; }
.ac-btn-oro:hover{ background:var(--pc-oro-osc); color:#fff; }
.ac-btn-oro svg.i{ stroke-width:2.4; }
.ac-seguro{ display:flex; align-items:center; justify-content:center; gap:7px; text-align:center; font-size:13px; color:var(--pc-suave); margin-top:12px; }
.ac-seguro svg.i{ width:16px; height:16px; }
.ac-despues{ font-size:13px; color:var(--pc-suave); text-align:center; margin-top:8px; line-height:1.45; }

/* barra fija del teléfono (oculta en computador) */
.ac-barra-movil{ display:none; }

.ac-pie{ border-top:1px solid var(--pc-borde); margin-top:10px; padding:22px 0 30px; text-align:center; font-size:13.5px; color:var(--pc-suave); }
.ac-pie a{ color:var(--pc-suave); }

/* ------------------------------------------------------------------ tablet */
@media (max-width: 1080px){
  .ac-grid{ grid-template-columns:minmax(0,1fr) 340px; gap:26px; }
  .ac-opciones{ grid-template-columns:1fr; }
  .ac-opciones:not(.dos) .ac-opcion{ flex-direction:row; padding:16px 44px 16px 16px; }
  .ac-paso{ padding:16px 26px 16px 16px; gap:10px; }
  .ac-paso .s{ display:none; }
}

/* ------------------------------------------------------------------ teléfono */
@media (max-width: 760px){
  .ac-wrap{ padding:0 16px; }
  .ac-top .ac-wrap{ height:64px; }
  .ac-logo img{ height:32px; }
  .ac-entrar .mu{ display:none; }
  .ac-top-der{ gap:12px; }
  .ac-modo{ width:36px; height:36px; }
  main.ac-wrap{ padding-top:18px; padding-bottom:120px; }
  .ac-pasos{ display:none; }
  .ac-pasos-movil{ display:block; background:var(--pc-panel); border:1px solid var(--pc-borde); border-radius:12px; padding:14px 16px 12px; margin-bottom:22px;
    box-shadow:var(--pc-sombra); }
  .ac-pasos-movil .arr{ display:flex; justify-content:space-between; align-items:baseline; font-size:13px; color:var(--pc-suave); }
  .ac-pasos-movil .arr b{ font-size:16.5px; color:var(--pc-tinta); }
  .ac-pasos-movil .barra{ height:7px; border-radius:4px; background:var(--pc-linea); margin:10px 0 9px; overflow:hidden; }
  .ac-pasos-movil .barra i{ display:block; height:100%; border-radius:4px; background:var(--ac-activo); }
  .ac-pasos-movil .mini{ display:flex; justify-content:space-between; font-size:12px; color:var(--pc-suave); }
  .ac-pasos-movil .mini span{ display:inline-flex; align-items:center; gap:3px; }
  .ac-pasos-movil .mini .h{ color:var(--pc-verde); font-weight:600; }
  .ac-pasos-movil .mini .a{ color:var(--pc-tinta); font-weight:700; }
  .ac-pasos-movil .mini svg.i{ width:13px; height:13px; stroke-width:3; }
  .ac-grid{ grid-template-columns:1fr; gap:0; }
  .ac-h1{ font-size:24px; }
  .ac-lead{ font-size:15.5px; margin-bottom:18px; }
  .ac-card{ padding:18px 16px; }
  .ac-card-cab{ flex-direction:column; gap:2px; }
  .ac-form{ grid-template-columns:1fr; gap:16px; }
  .ac-opciones, .ac-opciones.dos{ grid-template-columns:1fr; gap:10px; }
  .ac-tab{ flex-direction:column; gap:2px; padding:10px 8px; font-size:15px; text-align:center; }
  .ac-tab svg.i{ display:none; }
  .ac-tab small{ display:block; }
  .ac-tab small::before{ content:none; }
  .ac-buscar{ flex-direction:column; }
  .ac-btn-sec{ justify-content:center; height:50px; }
  .ac-res-cab{ display:none; }
  .ac-res-fila{ grid-template-columns:28px minmax(0,1fr); gap:6px 12px; }
  .ac-res-fila > :nth-child(3), .ac-res-fila > :nth-child(4){ grid-column:2; }
  .ac-precio, .ac-precio-fila{ text-align:left; justify-content:flex-start; }
  /* el resumen completo se esconde y queda una barra fija abajo con el total y el botón */
  .ac-resumen{ display:none; position:static; }
  .ac-resumen.abierto{ display:block; position:fixed; left:0; right:0; bottom:86px; z-index:20; padding:0 10px; max-height:70vh; overflow:auto; }
  .ac-resumen .ac-btn-oro, .ac-resumen .ac-seguro, .ac-resumen .ac-despues{ display:none; }
  .ac-barra-movil{ display:flex; align-items:center; gap:12px; position:fixed; left:0; right:0; bottom:0; z-index:21; background:var(--pc-panel);
    border-top:1px solid var(--pc-borde); box-shadow:0 -6px 20px rgba(0,34,89,.10); padding:12px 16px 14px; }
  .ac-barra-movil .tot{ flex:1; min-width:0; }
  .ac-barra-movil .tot small{ display:block; font-size:12px; color:var(--pc-suave); }
  .ac-barra-movil .tot b{ display:block; font-size:21px; color:var(--pc-tinta); line-height:1.15; }
  .ac-barra-movil .tot a{ display:inline-flex; align-items:center; gap:3px; font-size:12.5px; color:var(--pc-azul); font-weight:600; text-decoration:none; }
  .ac-barra-movil .tot a svg.i{ width:14px; height:14px; }
  .ac-barra-movil .ac-btn-oro{ width:auto; margin:0; padding:14px 20px; font-size:16.5px; border-radius:11px; flex:none; }
  .ac-pie{ padding-bottom:20px; }
}

/* =============================================================================
   Lo que agrega la compra real (no estaba en la maqueta)
   ============================================================================= */
.ac-compra a.ac-modo{ text-decoration:none; }
.ac-cargando{ color:var(--pc-suave); padding:40px 0; text-align:center; }
.ac-desc{ color:var(--pc-tinta); font-size:15.5px; line-height:1.6; }
.ac-desc > :last-child{ margin-bottom:0; }
.ac-desc ul{ padding-left:20px; margin:0 0 10px; }
.ac-desc li{ margin:3px 0; }
.ac-desc p{ margin:0 0 10px; }
.ac-chips-medio .ahorro{ color:var(--pc-verde); border-color:var(--pc-verde); background:var(--pc-verde-f); }
.ac-acciones{ margin-top:16px; }
.ac-acciones .ac-btn-sec{ height:50px; }

/* errores y avisos */
.ac-in.ac-mal, .ac-campo-dom.ac-mal{ border-color:var(--ac-req); }
.ac-error-msg{ color:var(--ac-req); font-size:13.5px; margin-top:6px; line-height:1.45; font-weight:500; }
.ac-error-msg b{ color:inherit; }
.ac-alerta{ display:flex; gap:10px; align-items:flex-start; margin-top:14px; padding:12px 14px; border-radius:10px; font-size:14px; line-height:1.5;
  background:rgba(180,35,24,.07); border:1px solid rgba(180,35,24,.35); color:var(--pc-tinta); }
.ac-alerta svg.i{ color:var(--ac-req); margin-top:1px; }
html[data-bs-theme="dark"] .ac-alerta{ background:rgba(255,155,143,.08); border-color:rgba(255,155,143,.35); }

/* resultados del dominio: tomado, revisando, filas que se pueden elegir */
.ac-pill.no{ background:rgba(180,35,24,.08); color:var(--ac-req); }
.ac-pill.esp{ background:var(--pc-menu); color:var(--pc-suave); }
.ac-res-fila.elegible{ cursor:pointer; }
.ac-res-fila.elegible:hover{ background:var(--ac-sel-f); }
.ac-res-fila.apagada .ac-dom{ color:var(--pc-suave); }
.ac-res-fila.apagada .ac-check{ opacity:.45; }
.ac-tabla .p.gratis{ color:var(--pc-verde); }

/* cupón dentro del resumen */
.ac-cupon-form{ display:flex; gap:8px; border-top:1px solid var(--pc-linea); margin-top:16px; padding-top:14px; }
.ac-cupon-form .ac-in{ height:44px; }

/* botones mientras trabajan */
.ac-btn-oro:disabled, .ac-btn-sec:disabled{ opacity:.75; cursor:wait; }
.ac-girando{ display:inline-block; width:16px; height:16px; border-radius:50%; border:2.5px solid currentColor; border-right-color:transparent;
  animation:ac-gira .7s linear infinite; vertical-align:-3px; }
@keyframes ac-gira{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .ac-girando{ animation-duration:2s; } }

/* foco visible para quien usa teclado */
.ac-compra :is(a, button, .ac-res-fila, .ac-check):focus-visible{ outline:3px solid var(--pc-oro); outline-offset:2px; }
/* la casilla sin marcar no muestra el ✓ */
.ac-check:not(.on) svg{ display:none; }
/* textos largos (correos, dominios) no empujan la página hacia el lado en el teléfono */
.ac-grid > section, .ac-grid > aside{ min-width:0; }
.ac-quien > div, .ac-quien .d, .ac-tabla .n, .ac-tabla .d{ overflow-wrap:anywhere; min-width:0; }
@media (max-width: 760px){
  .ac-grid{ grid-template-columns:minmax(0,1fr); }
  .ac-opciones, .ac-opciones.dos{ grid-template-columns:minmax(0,1fr); }
}
/* "Prefiero elegirla ahora" / "Mejor no" no se parten en dos líneas (con Inter quedaba "Prefiero | elegirla ahora") */
[data-ver-clave], [data-ocultar-clave]{ white-space:nowrap; display:inline-block; }
/* 2026-10-12: en el teléfono el resumen va escondido, así que la casilla de Términos y los avisos se repiten en la página */
.ac-solo-movil, .ac-solo-movil-flex{ display:none; }
@media (max-width: 760px){
  .ac-solo-movil{ display:block; }
  .ac-solo-movil-flex{ display:flex; margin:0 0 16px; }
  .ac-acepto-movil .ac-acepto{ margin-top:0; font-size:15px; }
  .ac-acepto-movil .ac-check{ width:24px; height:24px; }
}
/* 2026-10-12 (revisión en teléfonos) */
.ac-cerrar-detalle{ display:none; margin-left:auto; background:none; border:0; color:#fff; padding:2px; cursor:pointer; }
.ac-cerrar-detalle svg.i{ width:20px; height:20px; color:#fff; stroke-width:2.2; }
.ac-velo{ display:none; }
.ac-barra-movil svg.i.girado{ transform:rotate(180deg); }
@media (max-width: 760px){
  /* la barra fija no tapa el pie de la compra (Términos, Privacidad, Compras y reembolsos) */
  .ac-compra footer.ac-wrap .ac-pie{ padding-bottom:112px; }
  main.ac-wrap{ padding-bottom:28px; }
  /* el resumen abierto: velo oscuro que bloquea los toques de abajo y botón para cerrarlo */
  .ac-velo{ display:block; position:fixed; inset:0; z-index:19; background:rgba(5,11,31,.55); }
  .ac-resumen.abierto .ac-cerrar-detalle{ display:inline-flex; }
  /* el cuadro del dominio con su alto normal (en columna se aplastaba a 31 px) */
  .ac-campo-dom{ flex:none; height:54px; }
}
/* 2026-10-12: catálogo /order (altx_catalogo.html.twig) */
.ac-catalogo{ padding-top:36px; padding-bottom:56px; }
.ac-cat-grupo{ margin-top:34px; }
.ac-cat-tit{ font-size:21px; font-weight:700; color:var(--pc-tinta); margin:0 0 4px; }
.ac-cat-bajada{ color:var(--pc-suave); font-size:15px; margin:0 0 14px; line-height:1.5; }
.ac-cat-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; }
.ac-cat-plan{ display:flex; flex-direction:column; gap:6px; background:var(--pc-panel); border:1.5px solid var(--pc-borde); border-radius:12px;
  padding:18px 18px 16px; text-decoration:none; color:var(--pc-tinta); box-shadow:var(--pc-sombra); }
.ac-cat-plan:hover{ border-color:var(--ac-activo); }
.ac-cat-plan .n{ font-weight:700; font-size:16.5px; line-height:1.3; }
.ac-cat-plan .d{ color:var(--pc-suave); font-size:14px; line-height:1.45; flex:1; }
.ac-cat-plan .pr{ font-size:14px; color:var(--pc-suave); }
.ac-cat-plan .pr b{ color:var(--pc-tinta); font-size:18px; }
.ac-cat-plan .ir{ display:inline-flex; align-items:center; gap:6px; color:var(--pc-azul); font-weight:600; font-size:14.5px; margin-top:4px; }
.ac-cat-plan .ir svg.i{ width:16px; height:16px; }
html[data-bs-theme="dark"] .ac-cat-plan .ir{ color:var(--ac-activo); }
.ac-cat-ayuda{ margin-top:36px; color:var(--pc-suave); font-size:15px; }
.ac-cat-ayuda a{ color:var(--pc-azul); font-weight:600; }
@media (max-width: 760px){ .ac-catalogo{ padding-top:20px; } .ac-cat-grid{ grid-template-columns:1fr; } }
/* 2026-10-12 (2ª revisión): el resumen abierto no hereda el top:24px del escritorio; sin él se apoya sobre la barra y no deja
   una franja transparente encima del velo que se tragaba los toques */
@media (max-width: 760px){ .ac-resumen.abierto{ top:auto; } }