/* R.N. Online - hoja de estilos única del sitio.
   La paleta es la del sitio anterior; donde el color original no alcanzaba el contraste
   mínimo sobre blanco se usa una variante apenas más oscura (ver --boton y --boton-plan). */

:root
{
   color-scheme: light;

   --azul-oscuro: #1B4E81;   /* arriba del degradé de fondo */
   --celeste: #0099CC;       /* abajo del degradé de fondo */
   --azul: #2A78C3;          /* barra del menú */
   --acero: #7D9EC0;         /* líneas divisorias */
   --amarillo: #FAF5A4;      /* hover del menú */
   --amarillo-campo: #FFFFE0;/* fondo de los campos */
   --naranja: #FF3300;       /* botones "Ingresar" y "Ver más" */
   --boton: #E02D00;
   --boton-hover: #C22700;
   --boton-plan: #2E7D7D;    /* botón "Contratar" (original #388E8E) */
   --boton-plan-hover: #256A6A;
   --consulta: #A52A00;      /* burbuja "Alguna duda?" */
   --titulo-plan: #A52A2A;
   --enlace: #1F66AD;
   --foco: #66AFE9;

   --texto: #17212B;
   --texto-suave: #45535F;
   --borde: #D3DEE9;
   --tinte: #E9F2FA;
   --blanco: #FFFFFF;

   --radio: 14px;
   --sombra: 0 6px 22px rgba(10, 45, 80, .18);
   --ancho: 74rem;
   --alto-fila: 6.25rem;     /* alto de la fila del logo en escritorio */
}

*, *::before, *::after
{
   box-sizing: border-box;
}

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

body
{
   display: flex;
   flex-direction: column;
   min-height: 100vh;
   margin: 0;
   background: var(--azul-oscuro);
   color: var(--texto);
   font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
   font-size: 1rem;
   line-height: 1.6;
}

/* El degradé de siempre, fijo a la ventana (background-attachment: fixed falla en iOS). */
body::before
{
   content: "";
   position: fixed;
   inset: 0;
   z-index: -1;
   background: linear-gradient(180deg, var(--azul-oscuro) 0%, var(--celeste) 100%);
}

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

a
{
   color: var(--enlace);
}

a:hover
{
   color: var(--boton);
}

h1, h2, h3, p, ul
{
   margin: 0;
}

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

.contenedor
{
   width: min(100% - 2rem, var(--ancho));
   margin-inline: auto;
}

.saltar
{
   position: absolute;
   left: 1rem;
   top: -4rem;
   z-index: 100;
   padding: .5rem 1rem;
   border-radius: 0 0 8px 8px;
   background: var(--amarillo);
   color: #000;
}

.saltar:focus
{
   top: 0;
}

/* ---------- Cabecera ---------- */

.cabecera
{
   position: sticky;
   top: calc(-1 * var(--alto-fila));
   z-index: 50;
   background: var(--blanco);
   box-shadow: 0 2px 12px rgba(10, 45, 80, .25);
}

.cabecera-fila
{
   display: flex;
   align-items: center;
   gap: 1.25rem;
   height: var(--alto-fila);
}

.marca
{
   flex: none;
   display: block;
}

.marca img
{
   display: block;
   width: 96px;
   height: 96px;
   border-radius: 10px;
}

.lema
{
   flex: 1;
   color: var(--texto);
   font-size: 1.2rem;
   font-style: italic;
   line-height: 1.3;
}

.rapidos
{
   flex: none;
   display: flex;
   gap: .6rem;
   margin-left: auto;
}

.rapidos a
{
   padding: .4rem .9rem;
   border: 1.5px solid var(--acero);
   border-radius: 8px;
   color: var(--azul-oscuro);
   font-size: .9rem;
   font-weight: 600;
   text-decoration: none;
   transition: background-color .15s, border-color .15s;
}

.rapidos a:hover
{
   border-color: var(--azul-oscuro);
   background: var(--amarillo);
   color: #000;
}

.menu-boton
{
   display: none;
}

.menu
{
   background: var(--azul);
   border-bottom: 4px solid var(--acero);
}

.menu ul
{
   padding: 0;
   list-style: none;
}

.menu-lista
{
   display: flex;
   flex-wrap: wrap;
}

.menu a,
.menu button
{
   display: block;
   width: 100%;
   padding: .8rem 1.15rem;
   border: 0;
   background: none;
   color: var(--blanco);
   font: inherit;
   font-size: .95rem;
   font-weight: 700;
   text-align: left;
   text-decoration: none;
   white-space: nowrap;
   cursor: pointer;
}

.menu a:hover,
.menu button:hover,
.menu button[aria-expanded="true"],
.con-sub:hover > button
{
   background: var(--amarillo);
   color: #000;
}

.menu [aria-current="page"],
.menu .activo > button
{
   box-shadow: inset 0 -3px 0 var(--amarillo);
}

.menu :focus-visible
{
   outline-color: var(--amarillo);
   outline-offset: -3px;
}

.con-sub
{
   position: relative;
}

.con-sub > button::after
{
   content: "";
   display: inline-block;
   width: .45em;
   height: .45em;
   margin-left: .55em;
   border-right: 2px solid currentColor;
   border-bottom: 2px solid currentColor;
   transform: translateY(-.2em) rotate(45deg);
}

.submenu
{
   display: none;
   position: absolute;
   left: 0;
   top: 100%;
   min-width: 100%;
   overflow: hidden;
   border-radius: 0 0 10px 10px;
   background: var(--azul);
   box-shadow: 0 10px 24px rgba(10, 45, 80, .35);
}

.con-sub > button[aria-expanded="true"] + .submenu
{
   display: block;
}

@media (hover: hover)
{
   .con-sub:hover > .submenu
   {
      display: block;
   }
}

/* ---------- Portada y títulos ---------- */

.portada
{
   position: relative;
   overflow: hidden;
   padding: clamp(2.75rem, 7vw, 5rem) 0;
   color: var(--blanco);
}

.portada .contenedor
{
   position: relative;
   z-index: 1;
}

.portada h1
{
   max-width: 15em;
   font-size: clamp(2rem, 5vw, 3.35rem);
   font-weight: 800;
   line-height: 1.12;
   letter-spacing: -.01em;
}

.portada-acciones
{
   display: flex;
   flex-wrap: wrap;
   gap: .75rem;
   margin-top: 1.75rem;
}

.portada-orbitas
{
   position: absolute;
   right: max(-3rem, calc((100vw - var(--ancho)) / 2 - 3rem));
   top: 50%;
   width: min(48vw, 35rem);
   transform: translateY(-50%);
   pointer-events: none;
}

.titulo-pagina
{
   padding: clamp(1.75rem, 4vw, 2.75rem) 0 clamp(1.25rem, 3vw, 1.75rem);
   color: var(--blanco);
}

.titulo-pagina h1
{
   font-size: clamp(1.75rem, 4vw, 2.5rem);
   font-weight: 800;
   line-height: 1.15;
}

/* ---------- Bloques ---------- */

main
{
   flex: 1;
   padding-bottom: clamp(2rem, 5vw, 3.5rem);
}

.pila
{
   display: grid;
   gap: 1.5rem;
}

.tarjeta
{
   display: flex;
   flex-direction: column;
   gap: .85rem;
   min-width: 0;
   padding: clamp(1.25rem, 2.5vw, 1.75rem);
   border-radius: var(--radio);
   background: var(--blanco);
   box-shadow: var(--sombra);
}

.tarjeta h2
{
   color: var(--azul-oscuro);
   font-size: 1.3rem;
   font-weight: 700;
   line-height: 1.25;
}

.tarjeta h2.titulo-chico
{
   font-size: 1.05rem;
}

.tarjeta-titulo
{
   display: flex;
   align-items: center;
   gap: .7rem;
}

.icono
{
   flex: none;
   display: grid;
   place-items: center;
   width: 2.75rem;
   height: 2.75rem;
   border-radius: 50%;
   background: var(--tinte);
   color: var(--azul);
}

.icono svg
{
   width: 1.5rem;
   height: 1.5rem;
   fill: none;
   stroke: currentColor;
   stroke-width: 1.8;
   stroke-linecap: round;
   stroke-linejoin: round;
}

.texto p + p
{
   margin-top: 1em;
}

.tarjeta > .boton
{
   align-self: flex-start;
   margin-top: auto;
}

.llamado
{
   align-items: center;
   border-top: 5px solid var(--boton);
   text-align: center;
}

.llamado p
{
   max-width: 42rem;
}

.llamado > .boton
{
   align-self: center;
   margin-top: .35rem;
}

.dos-columnas
{
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 1.5rem;
}

.principal-lateral
{
   display: grid;
   grid-template-columns: minmax(0, 1fr) 21rem;
   align-items: start;
   gap: 1.5rem;
}

.accesos
{
   display: grid;
   grid-template-rows: 1fr 1fr;
   gap: 1.5rem;
}

/* Inicio: las dos columnas terminan a la misma altura. */
.inicio
{
   align-items: stretch;
}

.inicio .dos-columnas
{
   grid-auto-rows: 1fr;
}

/* ---------- Botones ---------- */

.boton
{
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: .5rem;
   padding: .65rem 1.3rem;
   border: 2px solid transparent;
   border-radius: 8px;
   background: var(--boton);
   color: var(--blanco);
   font: inherit;
   font-weight: 700;
   line-height: 1.3;
   text-decoration: none;
   cursor: pointer;
   transition: background-color .15s, color .15s, border-color .15s;
}

.boton:hover
{
   background: var(--boton-hover);
   color: var(--blanco);
}

.boton .flecha
{
   transition: transform .15s;
}

.boton:hover .flecha
{
   transform: translateX(3px);
}

.boton-plan
{
   background: var(--boton-plan);
}

.boton-plan:hover
{
   background: var(--boton-plan-hover);
}

.boton-consulta
{
   background: var(--consulta);
}

.boton-consulta:hover
{
   background: #862200;
}

.boton-claro
{
   border-color: var(--blanco);
   background: transparent;
}

.boton-claro:hover
{
   background: var(--amarillo);
   border-color: var(--amarillo);
   color: #000;
}

.boton-suave
{
   border-color: var(--borde);
   background: var(--blanco);
   color: var(--texto-suave);
}

.boton-suave:hover
{
   border-color: var(--acero);
   background: var(--tinte);
   color: var(--texto);
}

.solo-movil
{
   display: none;
}

/* ---------- Formularios ---------- */

.formulario
{
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: .8rem;
}

.campo label
{
   display: block;
   margin-bottom: .25rem;
   color: var(--texto-suave);
   font-size: .9rem;
   font-weight: 600;
}

.campo input,
.campo textarea
{
   display: block;
   width: 100%;
   padding: .55rem .7rem;
   border: 1px solid #A9BCCE;
   border-radius: 8px;
   background: var(--blanco);
   color: var(--texto);
   font: inherit;
}

.campo textarea
{
   min-height: 8rem;
   resize: vertical;
}

.campo input:focus,
.campo textarea:focus
{
   border-color: var(--foco);
   outline: 0;
   background: var(--amarillo-campo);
   box-shadow: 0 0 0 3px rgba(102, 175, 233, .45);
}

.formulario .boton
{
   justify-self: start;
}

.acciones
{
   display: flex;
   flex-wrap: wrap;
   gap: .75rem;
   margin-top: .25rem;
}

.ayuda
{
   color: var(--texto-suave);
   font-size: .9rem;
}

.errores
{
   padding: .75rem 1rem;
   border-left: 4px solid var(--boton);
   border-radius: 6px;
   background: #FFF1EC;
   color: #8A1C00;
   font-weight: 600;
}

.errores ul
{
   padding-left: 1.1rem;
}

/* ---------- Planes ---------- */

.planes
{
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 1.5rem;
}

.plan
{
   border-top: 5px solid var(--azul);
}

.plan .tarjeta-titulo h2
{
   color: var(--titulo-plan);
   font-size: 1.2rem;
   letter-spacing: .02em;
}

.plan-datos
{
   flex: 1;
   padding: 0;
   list-style: none;
}

.plan-datos li
{
   padding: .5rem 0;
   border-bottom: 1px solid var(--borde);
}

.plan-datos li:last-child
{
   border-bottom: 0;
}

.plan-precio
{
   padding: .75rem 1rem;
   border-radius: 10px;
   background: var(--tinte);
   color: var(--azul-oscuro);
   font-weight: 700;
}

.plan-precio strong
{
   display: block;
   font-size: 1.55rem;
   font-weight: 800;
   line-height: 1.2;
}

.plan .boton
{
   align-self: stretch;
   margin-top: 0;
}

.incluye
{
   padding: 0;
   list-style: none;
   columns: 3 14rem;
   column-gap: 2rem;
}

.incluye li
{
   position: relative;
   padding: .22rem 0 .22rem 1.6rem;
   break-inside: avoid;
}

.incluye li::before
{
   content: "";
   position: absolute;
   left: .2rem;
   top: .62rem;
   width: .75rem;
   height: .4rem;
   border-left: 2.5px solid var(--azul);
   border-bottom: 2.5px solid var(--azul);
   transform: rotate(-45deg);
}

.logos
{
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   gap: 1.25rem 2.5rem;
}

.logos a,
.logos img
{
   display: block;
}

.medio-pago
{
   display: flex;
   align-items: center;
   gap: .6rem;
   color: var(--azul-oscuro);
   font-weight: 700;
   line-height: 1.2;
}

.medio-pago svg
{
   flex: none;
   width: 2rem;
   height: 2rem;
   fill: none;
   stroke: var(--azul);
   stroke-width: 1.8;
   stroke-linecap: round;
   stroke-linejoin: round;
}

/* ---------- Clientes ---------- */

/* Con flex, la última fila queda centrada si no llega a completarse. */
.clientes
{
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 1rem;
}

.cliente
{
   display: block;
   flex: 0 1 calc((100% - 3rem) / 4);
   padding: 1rem 1.15rem;
   border-left: 5px solid var(--azul);
   border-radius: 10px;
   background: var(--blanco);
   box-shadow: var(--sombra);
   color: var(--azul-oscuro);
   text-decoration: none;
   transition: background-color .15s;
}

.cliente:hover
{
   background: var(--amarillo);
   color: #000;
}

.cliente strong
{
   display: block;
   line-height: 1.3;
}

.cliente em
{
   display: block;
   margin-top: .15rem;
   color: var(--texto-suave);
   font-size: .85rem;
   overflow-wrap: anywhere;
}

/* ---------- Pie ---------- */

.pie
{
   padding: 1.5rem 0;
   border-top: 4px solid var(--acero);
   background: var(--azul-oscuro);
   color: var(--blanco);
   font-size: .95rem;
}

.pie .contenedor
{
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: .75rem 2rem;
}

.pie-marca
{
   font-weight: 700;
}

.pie ul
{
   display: flex;
   flex-wrap: wrap;
   gap: .25rem 1.25rem;
   padding: 0;
   list-style: none;
}

.pie a
{
   color: var(--blanco);
   text-decoration: none;
}

.pie a:hover
{
   color: var(--amarillo);
   text-decoration: underline;
}

/* ---------- Tamaños de pantalla ---------- */

/* Las columnas de clientes bajan antes de que la dirección más larga se corte en dos líneas. */
@media (max-width: 1180px)
{
   .cliente
   {
      flex-basis: calc((100% - 2rem) / 3);
   }
}

@media (max-width: 1060px)
{
   .principal-lateral
   {
      grid-template-columns: minmax(0, 1fr);
   }

   .inicio .dos-columnas
   {
      grid-auto-rows: auto;
   }

   .accesos
   {
      grid-template-rows: none;
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   .planes
   {
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
   }
}

@media (max-width: 900px)
{
   .cliente
   {
      flex-basis: calc((100% - 1rem) / 2);
   }
}

@media (max-width: 880px)
{
   :root
   {
      --alto-fila: 4.5rem;
   }

   .cabecera
   {
      top: 0;
   }

   .cabecera-fila
   {
      gap: .75rem;
   }

   .marca img
   {
      width: 66px;
      height: 66px;
      border-radius: 8px;
   }

   .lema
   {
      font-size: .9rem;
   }

   .rapidos
   {
      display: none;
   }

   .menu-boton
   {
      flex: none;
      display: grid;
      margin-left: auto;
      place-items: center;
      width: 2.9rem;
      height: 2.9rem;
      padding: 0;
      border: 0;
      border-radius: 8px;
      background: var(--azul);
      color: var(--blanco);
      cursor: pointer;
   }

   .menu-boton svg
   {
      width: 1.5rem;
      height: 1.5rem;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.2;
      stroke-linecap: round;
   }

   .js .menu
   {
      display: none;
   }

   .js .menu.abierto
   {
      display: block;
      max-height: calc(100vh - var(--alto-fila));
      max-height: calc(100dvh - var(--alto-fila));
      overflow-y: auto;
   }

   .menu .contenedor
   {
      width: 100%;
   }

   .menu-lista
   {
      display: block;
      padding: .25rem 0 .5rem;
   }

   .menu a,
   .menu button
   {
      padding: .75rem 1.25rem;
      font-size: 1rem;
      white-space: normal;
   }

   /* En el teléfono los submenús van siempre desplegados, sin hover. */
   .con-sub > button
   {
      padding-bottom: .25rem;
      background: none !important;
      color: var(--amarillo) !important;
      font-size: .85rem;
      letter-spacing: .04em;
      text-transform: uppercase;
      pointer-events: none;
   }

   .con-sub > button::after
   {
      display: none;
   }

   .submenu,
   .con-sub:hover > .submenu
   {
      display: block;
      position: static;
      border-radius: 0;
      background: none;
      box-shadow: none;
   }

   .submenu a
   {
      padding-left: 2rem;
      font-weight: 600;
   }

   .menu [aria-current="page"]
   {
      box-shadow: inset 4px 0 0 var(--amarillo);
   }

   .menu .activo > button
   {
      box-shadow: none;
   }

   .portada-orbitas
   {
      right: -5rem;
      width: 22rem;
      opacity: .4;
   }

   .solo-movil
   {
      display: inline-flex;
   }
}

@media (max-width: 680px)
{
   .dos-columnas,
   .accesos
   {
      grid-template-columns: minmax(0, 1fr);
   }

   .cliente
   {
      flex-basis: 100%;
   }

   .pie .contenedor
   {
      flex-direction: column;
      align-items: flex-start;
   }
}

/* El recuadro de reCAPTCHA mide 304 px: en los teléfonos más angostos se achica para que entre. */
@media (max-width: 379px)
{
   .g-recaptcha
   {
      height: 63px;
      transform: scale(.8);
      transform-origin: 0 0;
   }
}

@media (prefers-reduced-motion: reduce)
{
   html
   {
      scroll-behavior: auto;
   }

   *, *::before, *::after
   {
      transition: none !important;
   }
}