/* ==========================================================================
   SysPROSSV — hoja de estilos única
   Paleta tomada de la plantilla Sneat (plantillasysprossv/), ajustada para AA.
   Todos los pares de color verificados contra WCAG AA (mínimo 4.5:1).
   ========================================================================== */

/* --------------------------------------------------------------- 1. Tokens */
/* Los colores salen de la plantilla Sneat que ya usás (plantillasysprossv/):
   primary #696cff, headings #435971, body #697a8d, bg #f5f5f9, border #d9dee3,
   dark #233446, success #71dd37. Cinco de esos valores no pasan WCAG AA cuando
   se usan como texto —el propio #696cff da 4.05:1 con blanco encima—, así que
   los que llevan texto están oscurecidos manteniendo el mismo tono.
   Cada par está verificado; el ratio va anotado al lado. */
:root {
  /* Color */
  --marca:        #696cff;  /* primary de Sneat, tal cual — uso gráfico */
  --accion:       #595ad9;  /* mismo tono, oscurecido · blanco encima 5.40:1 */
  --accion-alt:   #4548b0;  /* hover                   · blanco encima 7.48:1 */
  --accion-suave: #e9eafe;  /* equivale al bg-label-primary de Sneat */
  --tinta:        #435971;  /* headings de Sneat       · sobre papel 6.65:1 */
  --tinta-sec:    #5f6e7f;  /* body de Sneat oscurecido· sobre papel 4.80:1 */
  --papel:        #f5f5f9;  /* body-bg de Sneat */
  --superficie:   #ffffff;
  --borde:        #d9dee3;  /* border de Sneat */
  --borde-fuerte: #a1acb8;  /* gray de Sneat */
  --oscuro:       #233446;  /* dark de Sneat           · blanco encima 12.72:1 */
  --oscuro-sec:   #a8b6c6;  /* secundario sobre oscuro          6.16:1 */
  --exito:        #448521;  /* success de Sneat oscurecido · sobre blanco 4.54:1 */

  /* Tipografía */
  --fuente: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --t-xs:   0.8125rem;
  --t-sm:   0.9375rem;
  --t-base: 1.0625rem;
  --t-md:   clamp(1.125rem, 0.5vw + 1rem,   1.3125rem);
  --t-lg:   clamp(1.375rem, 1vw   + 1.1rem, 1.75rem);
  --t-xl:   clamp(1.75rem,  2vw   + 1.2rem, 2.5rem);
  --t-2xl:  clamp(2.25rem,  4vw   + 1.2rem, 3.75rem);

  /* Ritmo */
  --e-1: 0.5rem;  --e-2: 0.75rem; --e-3: 1rem;    --e-4: 1.5rem;
  --e-5: 2rem;    --e-6: 3rem;    --e-7: 4.5rem;  --e-8: 7rem;

  --ancho:  72rem;
  --medida: 68ch;   /* largo de línea cómodo para lectura */
  --radio:  10px;

  /* Profundidad — todas con desplazamiento y desenfoque, ninguna coloreada */
  --sombra-1: 0 1px 2px rgba(23, 29, 41, .06), 0 2px 8px rgba(23, 29, 41, .05);
  --sombra-2: 0 2px 4px rgba(23, 29, 41, .07), 0 8px 24px rgba(23, 29, 41, .08);

  --curva: cubic-bezier(.2, .7, .3, 1);
}

/* ---------------------------------------------------------------- 2. Reset */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  font-family: var(--fuente);
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, svg { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  line-height: 1.15;
  letter-spacing: -0.028em;
  font-weight: 600;
  text-wrap: balance;
}

p, li { text-wrap: pretty; }

ul, ol { padding: 0; list-style: none; }

a { color: var(--accion); text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { color: var(--accion-alt); }

button, input, textarea, select { font: inherit; color: inherit; }

/* --------------------------------------- 3. Superficies propias del navegador
   Selección, cursor, barra de scroll y anillo de foco heredan del sistema
   operativo si no se definen. Definirlas es lo que hace que la página se
   sienta construida y no ensamblada. */
::selection      { background: #dcddfd; color: var(--tinta); }
:root            { caret-color: var(--accion); accent-color: var(--accion); }
html             { scrollbar-color: var(--borde-fuerte) var(--papel); scrollbar-width: thin; }
::-webkit-scrollbar        { width: 11px; height: 11px; }
::-webkit-scrollbar-track  { background: var(--papel); }
::-webkit-scrollbar-thumb  { background: var(--borde-fuerte); border-radius: 8px;
                             border: 3px solid var(--papel); }
::-webkit-scrollbar-thumb:hover { background: var(--tinta-sec); }

:focus-visible {
  outline: 2px solid var(--accion);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ------------------------------------------------------------- 4. Utilidad */
.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--e-4); }

.saltar {
  position: absolute; left: var(--e-3); top: -100%;
  z-index: 100; padding: var(--e-2) var(--e-4);
  background: var(--accion); color: #fff; border-radius: var(--radio);
  text-decoration: none; font-weight: 600;
  transition: top .18s var(--curva);
}
.saltar:focus { top: var(--e-3); color: #fff; }

.oculto-visual {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ------------------------------------------------------------- 5. Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  padding: 0.8em 1.4em;
  min-height: 48px;                /* objetivo táctil cómodo */
  border: 1px solid transparent;
  border-radius: var(--radio);
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s var(--curva), border-color .18s var(--curva),
              transform .18s var(--curva), box-shadow .18s var(--curva);
}
.btn svg { width: 1.15em; height: 1.15em; flex: none; }

.btn-principal { background: var(--accion); color: #fff; box-shadow: var(--sombra-1); }
.btn-principal:hover { background: var(--accion-alt); color: #fff;
                       transform: translateY(-1px); box-shadow: var(--sombra-2); }
.btn-principal:active { transform: translateY(0); }

.btn-secundario { background: var(--superficie); color: var(--accion); border-color: var(--borde-fuerte); }
.btn-secundario:hover { background: var(--accion-suave); border-color: var(--accion); color: var(--accion-alt); }

.btn-claro { background: var(--superficie); color: var(--accion); }
.btn-claro:hover { background: var(--accion-suave); color: var(--accion-alt); transform: translateY(-1px); }

.btn-borde-claro { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.btn-borde-claro:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.6); color: #fff; }

/* ------------------------------------------------------------ 6. Cabecera */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: rgba(245, 245, 249, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borde);
}
@supports not (backdrop-filter: blur(10px)) { .cabecera { background: var(--papel); } }

.cabecera-fila {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-4); min-height: 72px;
}

.marca-enlace { display: inline-flex; align-items: center; padding-block: 0.6rem; text-decoration: none; }
.marca-enlace img { height: 30px; width: auto; }

.nav-lista { display: flex; align-items: center; gap: var(--e-1); }
.nav-lista a {
  display: block; padding: 0.6rem 0.85rem; border-radius: 8px;
  color: var(--tinta-sec); font-size: var(--t-sm); font-weight: 500;
  text-decoration: none;
  transition: color .16s var(--curva), background-color .16s var(--curva);
}
.nav-lista a:hover        { color: var(--tinta); background: var(--accion-suave); }
.nav-lista a[aria-current="page"] { color: var(--tinta); font-weight: 600; }

.cabecera-acciones { display: flex; align-items: center; gap: var(--e-2); }

.nav-boton {
  display: none;
  align-items: center; justify-content: center;
  width: 46px; height: 46px;
  background: var(--superficie); border: 1px solid var(--borde-fuerte);
  border-radius: 9px; cursor: pointer; color: var(--tinta);
}
.nav-boton svg { width: 22px; height: 22px; }
.nav-boton .icono-cerrar { display: none; }
.nav-boton[aria-expanded="true"] .icono-abrir  { display: none; }
.nav-boton[aria-expanded="true"] .icono-cerrar { display: block; }

/* --------------------------------------------------------------- 7. Héroe */
.heroe { padding-block: clamp(var(--e-5), 5vw, var(--e-6)) var(--e-7); }

/* Una columna en móvil; en pantallas anchas el texto a la izquierda y el
   documento a la derecha. El mockup no se recorta nunca: es un SVG que escala. */
.heroe-rejilla { display: grid; gap: var(--e-6); align-items: center; }
@media (min-width: 62rem) {
  .heroe-rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); gap: var(--e-7); }
}

.heroe-caja { max-width: 40rem; }

.heroe-visual img { width: 100%; height: auto; }
@media (max-width: 61.99rem) {
  .heroe-visual { max-width: 32rem; margin-inline: auto; }
}

.heroe h1 {
  font-size: var(--t-2xl);
  letter-spacing: -0.035em;
  margin-bottom: var(--e-4);
}
.heroe h1 em { font-style: normal; color: var(--accion); }

.heroe-entrada {
  font-size: var(--t-md);
  color: var(--tinta-sec);
  max-width: var(--medida);
  margin-bottom: var(--e-5);
}

.heroe-acciones { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-bottom: var(--e-5); }

.heroe-pie {
  display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4);
  font-size: var(--t-sm); color: var(--tinta-sec);
}
.heroe-pie span { display: inline-flex; align-items: center; gap: 0.5em; }
.heroe-pie svg  { width: 1.05em; height: 1.05em; color: var(--accion); flex: none; }

/* ------------------------------------------------------------ 8. Secciones */
.seccion { padding-block: var(--e-7); }
.seccion-oscura { background: var(--oscuro); color: #fff; }
.seccion-blanca { background: var(--superficie); }

/* Los enlaces dentro de superficies oscuras necesitan su propio color:
   el azul de acción sobre #171d29 da 2.45:1 y es ilegible.
   El :not(.btn) es importante: sin él, este color se aplicaría también a los
   botones claros que van sobre fondo oscuro y los dejaría en 2:1. */
.seccion-oscura a:not(.btn),
.servicio-destacado a:not(.btn) { color: #b3b5ff; }
.seccion-oscura a:not(.btn):hover,
.servicio-destacado a:not(.btn):hover { color: #fff; }

.seccion-cabeza { max-width: var(--medida); margin-bottom: var(--e-6); }
.seccion-cabeza h2 { font-size: var(--t-xl); margin-bottom: var(--e-3); }
.seccion-cabeza p  { font-size: var(--t-md); color: var(--tinta-sec); }
.seccion-oscura .seccion-cabeza p { color: var(--oscuro-sec); }

/* --------------------------------------------- 9. Servicios (lista editorial)
   Deliberadamente NO son tarjetas iguales en rejilla: el primer servicio pesa
   más porque es el que más se busca. */
.servicios { display: grid; gap: var(--e-3); }

.servicio {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: var(--e-3) var(--e-4);
  align-items: start;
  padding: var(--e-4);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  transition: border-color .2s var(--curva), box-shadow .2s var(--curva);
}
.servicio:hover { border-color: var(--borde-fuerte); box-shadow: var(--sombra-1); }

.servicio-icono {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  background: var(--accion-suave); border-radius: 9px; color: var(--accion);
}
.servicio-icono svg { width: 1.4rem; height: 1.4rem; }

.servicio h2,
.servicio h3 { font-size: var(--t-md); margin-bottom: var(--e-1); letter-spacing: -0.028em; }
.servicio p  { color: var(--tinta-sec); font-size: var(--t-sm); max-width: 60ch; }

.servicio-destacado {
  grid-column: 1 / -1;
  background: var(--oscuro); border-color: var(--oscuro); color: #fff;
  padding: var(--e-5);
}
.servicio-destacado .servicio-icono { background: rgba(105,108,255,.24); color: #b3b5ff; }
.servicio-destacado h2,
.servicio-destacado h3 { font-size: var(--t-lg); }
.servicio-destacado p  { color: var(--oscuro-sec); font-size: var(--t-base); }
.servicio-destacado:hover { border-color: var(--oscuro); box-shadow: var(--sombra-2); }
.servicio-destacado .servicio-extra { margin-top: var(--e-3); }
.servicio-extra a { display: inline-block; padding-block: 0.4rem; font-weight: 500; }

@media (min-width: 46rem) {
  .servicios { grid-template-columns: repeat(2, 1fr); }
}

/* ------------------------------------------------------- 10. Historia (texto) */
.historia { display: grid; gap: var(--e-6); }
@media (min-width: 52rem) {
  .historia { grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--e-7); align-items: start; }
}
.historia-texto p { max-width: var(--medida); margin-bottom: var(--e-3); color: var(--tinta-sec); }
.historia-texto p:first-child { font-size: var(--t-md); color: var(--tinta); }

.hitos { display: grid; gap: var(--e-3); }
.hito {
  display: grid; grid-template-columns: 4.25rem 1fr; gap: var(--e-3);
  padding-block: var(--e-2);
  border-top: 1px solid var(--borde);
  align-items: baseline;
}
.hito:first-child { border-top: 0; }
.hito dt { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--accion); }
.hito dd { color: var(--tinta-sec); font-size: var(--t-sm); }

/* --------------------------------------------------------- 11. Franja de cita */
.cta-franja { text-align: center; }
.cta-franja h2 { font-size: var(--t-xl); margin-bottom: var(--e-3); }
.cta-franja p  { color: var(--oscuro-sec); font-size: var(--t-md);
                 max-width: 46ch; margin: 0 auto var(--e-5); }
.cta-franja .heroe-acciones { justify-content: center; margin-bottom: 0; }

/* ------------------------------------------------------------ 12. Formulario */
.contacto-rejilla { display: grid; gap: var(--e-6); }
@media (min-width: 54rem) {
  .contacto-rejilla { grid-template-columns: minmax(0, 1fr) 21rem; gap: var(--e-7); align-items: start; }
}

.formulario { display: grid; gap: var(--e-4); }

.campo { display: grid; gap: 0.4rem; }
.campo label { font-size: var(--t-sm); font-weight: 600; }
.campo .ayuda { font-size: var(--t-xs); color: var(--tinta-sec); font-weight: 400; }
.campo .req   { color: var(--accion); }

.campo input, .campo textarea, .campo select {
  width: 100%;
  padding: 0.75rem 0.9rem;
  min-height: 48px;
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: 9px;
  font-size: var(--t-base);
  transition: border-color .16s var(--curva), box-shadow .16s var(--curva);
}
.campo textarea { min-height: 8rem; resize: vertical; line-height: 1.6; }
.campo input:hover, .campo textarea:hover, .campo select:hover { border-color: var(--tinta-sec); }
.campo input:focus-visible, .campo textarea:focus-visible, .campo select:focus-visible {
  outline: none; border-color: var(--accion);
  box-shadow: 0 0 0 3px var(--accion-suave);   /* con desplazamiento cero pero sin color saturado: es un anillo de foco, no un brillo decorativo */
}
.campo input:user-invalid, .campo textarea:user-invalid { border-color: #a8362a; }
.campo input:user-invalid + .error, .campo textarea:user-invalid + .error { display: block; }
.error { display: none; font-size: var(--t-xs); color: #a8362a; }

.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.aviso {
  display: grid; gap: 0.35rem;
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio);
  background: var(--superficie);
  margin-bottom: var(--e-4);
}
.aviso strong { font-size: var(--t-sm); }
.aviso p { font-size: var(--t-sm); color: var(--tinta-sec); }
.aviso-ok    { border-color: #9cc4b0; background: #f1f8f4; }
.aviso-error { border-color: #d9a79f; background: #fdf4f2; }

/* Panel lateral de contacto */
.panel {
  padding: var(--e-5);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-1);
}
.panel h2 { font-size: var(--t-lg); margin-bottom: var(--e-3); }
.datos { display: grid; gap: var(--e-3); margin-bottom: var(--e-4); }
.dato { display: grid; grid-template-columns: 1.5rem 1fr; gap: var(--e-2); align-items: start; }
.dato svg { width: 1.15rem; height: 1.15rem; color: var(--accion); margin-top: 0.22rem; }
.dato dt { font-size: var(--t-xs); color: var(--tinta-sec); text-transform: uppercase;
           letter-spacing: .07em; font-weight: 600; grid-column: 2; }
.dato dd { grid-column: 2; font-size: var(--t-sm); }
.dato dd a { display: inline-block; padding-block: 0.3rem; text-decoration: none; font-weight: 500; }
.dato dd a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- 13. Pie */
.pie { background: var(--oscuro); color: var(--oscuro-sec); padding-block: var(--e-6) var(--e-4); }
.pie-rejilla { display: grid; gap: var(--e-5); margin-bottom: var(--e-5); }
@media (min-width: 46rem) {
  .pie-rejilla { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--e-6); }
}
.pie h2 { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .09em;
          color: #fff; margin-bottom: var(--e-3); font-weight: 600; }
.pie img { height: 26px; width: auto; margin-bottom: var(--e-3); }
.pie p  { font-size: var(--t-sm); max-width: 34ch; }
.pie ul { display: grid; gap: 0.15rem; }
.pie li { display: flex; align-items: center; min-height: 30px; font-size: var(--t-sm); }
.pie a  { display: inline-block; padding-block: 0.35rem;
          color: var(--oscuro-sec); font-size: var(--t-sm); text-decoration: none; }
.pie a:hover { color: #fff; text-decoration: underline; }
.pie-base { padding-top: var(--e-4); border-top: 1px solid rgba(255,255,255,.1);
            font-size: var(--t-xs); display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4);
            justify-content: space-between; }

/* --------------------------------------------------------- 14. Página interna */
.encabezado-pagina { padding-block: var(--e-6) var(--e-5); }
.encabezado-pagina h1 { font-size: var(--t-xl); margin-bottom: var(--e-3); }
.encabezado-pagina p  { font-size: var(--t-md); color: var(--tinta-sec); max-width: var(--medida); }


/* ---------------------------------------------------------- 16. Planes y precios
   Tres tarjetas comparables. Acá el paralelismo SÍ es correcto: para comparar
   precios el visitante necesita que las columnas tengan la misma forma. La del
   medio se distingue por borde y elevación, no por tamaño. */
.planes { display: grid; gap: var(--e-4); }


.plan {
  position: relative;
  display: flex; flex-direction: column;
  padding: var(--e-5);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 14px;
  transition: border-color .2s var(--curva), box-shadow .2s var(--curva);
}
.plan:hover { border-color: var(--borde-fuerte); box-shadow: var(--sombra-1); }

.plan-destacado {
  border-color: var(--marca);
  border-width: 1.5px;
  box-shadow: var(--sombra-2);
}
.plan-destacado:hover { border-color: var(--marca); box-shadow: var(--sombra-2); }

.plan-etiqueta {
  position: absolute; top: var(--e-4); right: var(--e-4);
  padding: 0.3rem 0.7rem;
  background: var(--accion-suave); color: var(--accion-alt);
  border-radius: 20px;
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .02em;
}

.plan h2,
.plan h3 { font-size: var(--t-md); margin-bottom: var(--e-2); letter-spacing: -0.028em; }
.plan-para { color: var(--tinta-sec); font-size: var(--t-sm); margin-bottom: var(--e-4); }

.plan-precio { display: flex; align-items: baseline; gap: .2rem; margin-bottom: 0.2rem; }
.plan-precio .desde   { font-size: var(--t-sm); color: var(--tinta-sec); margin-right: .35rem; }
.plan-precio .moneda  { font-size: var(--t-md); font-weight: 600; color: var(--tinta);
                        align-self: flex-start; margin-top: .35rem; }
.plan-precio .monto   { font-size: clamp(2.5rem, 5vw, 3.25rem); font-weight: 700;
                        letter-spacing: -0.045em; line-height: 1; color: var(--tinta);
                        font-variant-numeric: tabular-nums; }
.plan-precio .periodo { font-size: var(--t-sm); color: var(--tinta-sec); font-weight: 500; }
.plan-iva { font-size: var(--t-xs); color: var(--tinta-sec); margin-bottom: var(--e-4); }

.plan-incluye { display: grid; gap: 0.6rem; align-content: start;
                margin-block: var(--e-2) var(--e-5); }
.plan-incluye li { display: grid; grid-template-columns: 1.35rem 1fr; gap: 0.6rem;
                   align-items: start; font-size: var(--t-sm); }
.plan-incluye .marca-ok {
  display: grid; place-items: center;
  width: 1.35rem; height: 1.35rem; margin-top: 0.15rem;
  background: var(--accion-suave); border-radius: 50%; color: var(--accion-alt);
}
.plan-incluye .marca-ok svg { width: 0.8rem; height: 0.8rem; }
.plan-incluye .pendiente { color: var(--tinta-sec); }

.plan .btn { align-self: end; width: 100%; }

/* Con subgrid las seis filas (nombre, para quién, precio, IVA, lista, botón)
   se alinean entre las tres tarjetas aunque un nombre ocupe dos líneas.
   Sin esto, "Soluciones empresariales" empuja su precio y las columnas
   dejan de ser comparables de un vistazo. */
@media (min-width: 56rem) {
  .planes { grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto auto auto 1fr auto; }
  .plan   { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; }
}
@supports not (grid-template-rows: subgrid) {
  .plan h2 { min-height: 2.3em; }   /* respaldo para navegadores viejos */
}


.nota-precios {
  margin-top: var(--e-5);
  padding: var(--e-4);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  font-size: var(--t-sm); color: var(--tinta-sec);
  max-width: var(--medida);
}
.nota-precios strong { color: var(--tinta); }


/* -------------------------------------------------- 17. VPS, dominios y hosting */
.vps-rejilla { display: grid; gap: var(--e-3); }
@media (min-width: 42rem) { .vps-rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .vps-rejilla { grid-template-columns: repeat(4, 1fr); } }

.vps {
  display: flex; flex-direction: column;
  padding: var(--e-4);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 14px;
  transition: border-color .2s var(--curva), box-shadow .2s var(--curva);
}
.vps:hover { border-color: var(--borde-fuerte); box-shadow: var(--sombra-1); }

.vps h3 { font-size: var(--t-base); margin-bottom: var(--e-2); }

.vps-nvme {
  display: inline-flex; align-items: center; gap: .4rem;
  align-self: flex-start;
  padding: .3rem .7rem; margin-bottom: var(--e-3);
  background: var(--oscuro); color: #fff;
  border-radius: 20px; font-size: var(--t-xs); font-weight: 500;
}
.vps-nvme svg { width: .85rem; height: .85rem; }

.vps-specs { display: grid; gap: .4rem; margin-bottom: var(--e-4); }
.vps-specs li {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-2);
  padding: .45rem .7rem;
  background: var(--papel); border-radius: 8px;
  font-size: var(--t-sm);
}
.vps-specs b { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--tinta); }
.vps-specs span { color: var(--tinta-sec); font-size: var(--t-xs); }

.vps-precios { margin-top: auto; padding-top: var(--e-3); border-top: 1px solid var(--borde); }
.vps-fila { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-2); }
.vps-fila + .vps-fila { margin-top: .5rem; }
.vps-fila dt { font-size: var(--t-xs); color: var(--tinta-sec); white-space: nowrap; }
.vps-fila dd { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--tinta);
               white-space: nowrap; text-align: right; }
.vps-fila dd .unidad { font-size: .68em; font-weight: 500; color: var(--tinta-sec); margin-left: .15em; }
.vps-total { font-weight: 500 !important; font-size: var(--t-sm); }
.vps-destacado dd { font-size: var(--t-md); font-weight: 700; color: var(--accion-alt); }
.vps-ahorro {
  display: block; margin-top: var(--e-2);
  padding: .4rem .7rem; border-radius: 8px;
  background: #eef6e8; color: #33651a;
  font-size: var(--t-xs); font-weight: 600; text-align: center;
}
.vps .btn { margin-top: var(--e-3); width: 100%; }

/* Dominios */
.dominios { display: grid; gap: var(--e-3); }
@media (min-width: 48rem) { .dominios { grid-template-columns: repeat(3, 1fr); } }
.dominio-plazo { font-size: var(--t-lg); font-weight: 700; letter-spacing: -0.03em; margin-bottom: var(--e-2); }


/* ------------------------------------------------------- 18. Banner rotativo
   Las diapositivas se apilan en la misma celda de grid: la altura del carrusel
   la fija la más alta y no salta al cambiar. La que no está activa lleva
   `inert`, así que ni el teclado ni el lector de pantalla la alcanzan. */
.carrusel { position: relative; }

.carrusel-pista { display: grid; }
.carrusel-pista > .diapo { grid-area: 1 / 1; }

.diapo {
  display: grid; gap: var(--e-5); align-items: center;
  opacity: 0; visibility: hidden;
  transform: translateY(10px);
  transition: opacity .4s var(--curva), transform .4s var(--curva), visibility 0s .4s;
  pointer-events: none;
}
.diapo.activa {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .4s var(--curva), transform .4s var(--curva), visibility 0s;
  pointer-events: auto;
}
@media (min-width: 62rem) {
  .diapo { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: var(--e-7); }
}

.diapo-texto { max-width: 38rem; }
.diapo-texto h1,
.diapo-texto h2 { font-size: var(--t-2xl); letter-spacing: -0.035em; margin-bottom: var(--e-4); }
.diapo-texto h1 em,
.diapo-texto h2 em { font-style: normal; color: var(--accion); }

.diapo-visual { justify-self: center; }
.diapo-visual img { width: 100%; max-width: 26rem; height: auto; }

/* Mandos */
.carrusel-mandos {
  display: flex; align-items: center; gap: var(--e-2);
  margin-top: var(--e-5); flex-wrap: wrap;
}

.carrusel-flecha, .carrusel-pausa {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  min-height: 44px; min-width: 44px; padding: 0 .8rem;
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte); border-radius: 10px;
  color: var(--tinta); cursor: pointer;
  transition: background-color .16s var(--curva), border-color .16s var(--curva);
}
.carrusel-flecha,
.carrusel-pausa { padding: 0; }
.carrusel-flecha svg { width: 20px; height: 20px; }
.carrusel-flecha:hover, .carrusel-pausa:hover { background: var(--accion-suave); border-color: var(--accion); }

.carrusel-pausa { margin-left: .35rem; color: var(--tinta-sec); }
.carrusel-pausa:hover { color: var(--tinta); }
.carrusel-pausa svg { width: 17px; height: 17px; }
.carrusel-pausa .ic-play  { display: none; }
.carrusel-pausa[aria-pressed="true"] .ic-pausa { display: none; }
.carrusel-pausa[aria-pressed="true"] .ic-play  { display: block; }

.carrusel-puntos { display: flex; align-items: center; gap: .35rem; margin-inline: .35rem; }
.carrusel-puntos button {
  display: grid; place-items: center;
  width: 38px; height: 44px;            /* caja de toque cómoda; el punto es lo que se ve */
  background: none; border: 0; cursor: pointer; padding: 0;
}
.carrusel-puntos button::before {
  content: ""; display: block;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--borde-fuerte);
  /* Solo se anima el color. Animar `width` provoca recálculo de layout en
     cada cuadro; el ensanchado del punto activo es instantáneo y no se nota. */
  transition: background-color .2s var(--curva);
}
.carrusel-puntos button:hover::before { background: var(--tinta-sec); }
.carrusel-puntos button[aria-selected="true"]::before { background: var(--accion); width: 26px; border-radius: 5px; }

@media (prefers-reduced-motion: reduce) {
  .diapo { transition: opacity .01ms, visibility 0s; transform: none; }
}


/* ------------------------------------------- 19. El banner en pantalla chica
   En un teléfono la diapositiva medía 894 px y la pantalla 844: nunca se veía
   entera, y por eso el texto parecía cortado. Acá se achica todo lo suficiente
   para que titular, párrafo, botones, imagen y mandos entren de una sola vez. */
@media (max-width: 61.99rem) {
  .heroe { padding-block: var(--e-4) var(--e-4); }

  .diapo { gap: var(--e-3); }

  .diapo-texto h1,
  .diapo-texto h2 {
    font-size: clamp(1.75rem, 7.2vw, 2.25rem);
    letter-spacing: -0.03em;
    margin-bottom: var(--e-3);
  }
  .diapo-texto .heroe-entrada { font-size: var(--t-base); margin-bottom: var(--e-3); }

  /* La ilustración acompaña, no manda: se le pone techo de alto además de ancho
     para que una imagen más alta que otra no cambie el tamaño del banner. */
  .diapo-visual img {
    max-width: 14rem;
    max-height: 11.5rem;
    object-fit: contain;
    margin-inline: auto;
  }

  /* Los mandos en una sola fila: antes el botón de pausa se caía a un renglón
     aparte en pantallas de 360 px. */
  .carrusel-mandos { flex-wrap: nowrap; gap: .35rem; margin-top: var(--e-3); }
  .carrusel-flecha, .carrusel-pausa { min-width: 42px; min-height: 42px; }
  .carrusel-pausa { margin-left: auto; }
  .carrusel-puntos { gap: 0; margin-inline: .15rem; }
  .carrusel-puntos button { width: 34px; height: 42px; }
}

/* Teléfonos angostos: el titular baja un punto más y la imagen se achica. */
@media (max-width: 24rem) {
  .diapo-texto h1,
  .diapo-texto h2 { font-size: 1.625rem; }
  .diapo-visual img { max-width: 12.5rem; max-height: 10.5rem; }
  .carrusel-flecha, .carrusel-pausa { min-width: 40px; min-height: 40px; }
  .carrusel-puntos button { width: 26px; height: 40px; }
}


/* Pantallas bajas (un iPhone SE mide 667 px de alto): se recorta el aire
   vertical para que los mandos del carrusel no queden debajo del pliegue. */
@media (max-height: 48rem) and (max-width: 61.99rem) {
  .heroe { padding-block: var(--e-3) var(--e-3); }
  .diapo { gap: var(--e-2); }
  .diapo-texto h1,
  .diapo-texto h2 { font-size: 1.625rem; margin-bottom: var(--e-2); }
  .diapo-texto .heroe-entrada { font-size: var(--t-sm); margin-bottom: var(--e-3); }
  .diapo-visual img { max-height: 6.5rem; max-width: 9rem; }
  .carrusel-mandos { margin-top: var(--e-2); }
}

/* ---------------------------------------------------- 15. Móvil y accesibilidad */
@media (max-width: 52rem) {
  .nav-boton { display: inline-flex; }

  .nav-lista {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--e-2);
    background: var(--superficie);
    border-bottom: 1px solid var(--borde);
    box-shadow: var(--sombra-2);
  }
  .nav-lista.abierto { display: flex; }
  .nav-lista a { padding: 0.85rem; font-size: var(--t-base); }

  .cabecera { position: relative; }
  .cabecera-acciones .btn { padding-inline: 1rem; }
}

@media (max-width: 30rem) {
  .cabecera-acciones .btn span { display: none; }   /* el botón queda solo con el icono */
  .cabecera-acciones .btn { padding-inline: 0.85rem; }
  .heroe-acciones .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .cabecera, .nav-boton, .cta-franja, .saltar { display: none; }
  body { background: #fff; color: #000; }
}