/* =========================================================
   PAUSER ENERGY · Hoja de estilos única
   Todo el CSS del proyecto está en este archivo.
   Está pensado MOBILE-FIRST (pantalla de referencia: 390x844).

   TEMA: claro y corporativo.
   Fondo blanco azulado + azul corporativo #0047FC como color
   dominante + botones blancos con borde sutil + un único CTA
   azul + detalles puntuales en naranja (etiqueta GRATIS) y
   verde (icono de WhatsApp).

   CÓMO ESCALA (importante si tocas medidas):
   casi todos los tamaños usan clamp(mínimo, ideal, máximo).
   Se lee así ->  clamp(56px, 16vw, 70px)
     56px = nunca será más pequeño que esto (móviles pequeños)
     16vw = tamaño ideal, un 16% del ancho de la pantalla
     70px = nunca será más grande que esto (ordenador)
   Los valores están calculados para que en un móvil de 390 px
   de ancho salga EXACTAMENTE el diseño original, y a partir de
   ahí crezca poco a poco hasta el máximo en pantallas grandes.
   ========================================================= */

/* ---------------------------------------------------------
   1. VARIABLES · cambia aquí los colores y ya cambia toda la web
   --------------------------------------------------------- */
:root {
  /* Paleta corporativa */
  --azul:        #0047FC;   /* azul corporativo: marca, iconos, flechas, CTA */
  --fondo:       #F7F9FC;   /* fondo general: blanco ligeramente azulado */
  --blanco:      #FFFFFF;   /* fondo de las tarjetas/botones */
  --texto:       #172B4D;   /* texto principal: títulos y nombres */
  --texto-suave: #64748B;   /* texto secundario: subtítulos y descripciones */
  --borde:       #D9E2F2;   /* borde de los botones y separadores */

  /* Acentos puntuales (NO son colores dominantes de la página) */
  --naranja:  #FF9F1C;   /* solo la etiqueta "GRATIS" */
  --verde-wa: #25D366;   /* solo el icono de WhatsApp */

  /* Azul del logotipo · es el fondo exacto de logo.jpg (#0E3171).
     Se usa en el botón principal para que case con el logo. */
  --azul-logo:       #0E3171;
  --azul-logo-hover: #16408F;   /* el mismo, un punto más claro, al pasar el ratón */

  /* Tonos derivados del azul (apoyos visuales) */
  --azul-oscuro: #0038CC;                 /* azul más profundo para enlaces */
  --azul-tenue:  rgba(0, 71, 252, .08);   /* fondo de los cuadritos de icono */
  --azul-tenue2: rgba(0, 71, 252, .14);   /* el mismo, al pasar el ratón */
  --tarjeta-hover: #F2F6FF;               /* fondo del botón al pasar el ratón */
  --sombra:      rgba(23, 43, 77, .10);   /* sombras: azul grisáceo, no negro */

  /* Medidas */
  --ancho-max:  460px;  /* ancho máximo del contenido */
  --radio:      16px;   /* redondeo de los botones */
  --radio-mini: 10px;   /* redondeo de los iconos internos */

  /* Tipografía */
  --fuente: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---------------------------------------------------------
   2. RESET BÁSICO
   --------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;              /* alto real de la ventana en móvil */
  font-family: var(--fuente);
  color: var(--texto);
  background-color: var(--fondo);
  /* Degradado radial muy sutil: un velo de azul corporativo casi
     imperceptible arriba y abajo, para que el fondo no sea plano */
  background-image:
    radial-gradient(120% 85% at 50% 0%, rgba(0, 71, 252, .07) 0%, rgba(0, 71, 252, 0) 60%),
    radial-gradient(90% 60% at 50% 100%, rgba(0, 71, 252, .05) 0%, rgba(0, 71, 252, 0) 70%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

/* ---------------------------------------------------------
   3. LAYOUT · contenedor centrado de 460px máximo
   --------------------------------------------------------- */
.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin: 0 auto;
  /* Márgenes y separación fluidos: crecen con la pantalla */
  padding: clamp(16px, 5.6vw, 30px)
           clamp(16px, 4.6vw, 24px)
           calc(clamp(16px, 4.6vw, 26px) + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: clamp(13px, 4.6vw, 20px);
}

/* Enlace de salto: invisible hasta que se navega con el tabulador */
.salto-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--azul);
  color: var(--blanco);
  padding: 10px 14px;
  border-radius: 0 0 var(--radio-mini) 0;
  font-weight: 700;
  z-index: 10;
}
.salto-contenido:focus { left: 0; }

/* ---------------------------------------------------------
   4. CABECERA · logo, nombre y eslogan
   --------------------------------------------------------- */
.cabecera { text-align: center; }

.logo {
  /* 120 px en un móvil de 390; hasta 132 px en ordenador */
  width:  clamp(96px, 31vw, 132px);
  height: clamp(96px, 31vw, 132px);
  margin: 0 auto clamp(10px, 3.1vw, 15px);
  border-radius: 50%;                /* círculo perfecto */
  object-fit: cover;                 /* recorta la imagen sin deformarla */
  border: none;                      /* sin aro alrededor del logo */
  background: var(--blanco);
  /* Solo una sombra suave para despegarlo del fondo */
  box-shadow: 0 10px 28px var(--sombra);
}

.marca {
  margin: 0;
  font-size: clamp(1.3rem, 6.4vw, 1.8rem);   /* ~25px en móvil, ~29px en PC */
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--texto);
}

.eslogan {
  margin: 5px 0 0;
  font-size: clamp(.8rem, 3.6vw, 1rem);      /* ~14px en móvil, 16px en PC */
  font-weight: 500;
  line-height: 1.35;
  color: var(--texto-suave);
}

/* ---------------------------------------------------------
   5. BOTONES TIPO TARJETA
   --------------------------------------------------------- */
.enlaces {
  display: flex;
  flex-direction: column;
  gap: clamp(9px, 2.6vw, 13px);
}

.boton {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(10px, 3.1vw, 14px);
  min-height: clamp(56px, 16vw, 70px);
  padding: clamp(9px, 2.8vw, 14px) clamp(12px, 3.6vw, 16px);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--blanco);
  color: var(--texto);
  /* Sombra muy sutil, para que la tarjeta se despegue del fondo */
  box-shadow: 0 1px 2px rgba(23, 43, 77, .04),
              0 6px 16px rgba(23, 43, 77, .05);
  transition: background-color .18s ease, border-color .18s ease,
              transform .18s ease, box-shadow .18s ease;
}

/* Hover (ratón) y "active" (dedo en móvil) */
.boton:hover {
  background: var(--tarjeta-hover);
  border-color: var(--azul);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 71, 252, .14);
}
.boton:active { transform: translateY(0) scale(.99); }

/* Cuadrito del icono a la izquierda */
.boton__icono {
  flex: 0 0 auto;
  width:  clamp(36px, 10.5vw, 46px);
  height: clamp(36px, 10.5vw, 46px);
  display: grid;
  place-items: center;
  border-radius: var(--radio-mini);
  background: var(--azul-tenue);
  color: var(--azul);
  transition: color .18s ease, background-color .18s ease;
}
.boton:hover .boton__icono {
  background: var(--azul-tenue2);
  color: var(--azul);
}

/* EXCEPCIÓN · el icono de WhatsApp conserva su verde característico.
   Es el único elemento verde de la página. */
.boton__icono--whatsapp {
  background: rgba(37, 211, 102, .12);
  color: var(--verde-wa);
}
.boton:hover .boton__icono--whatsapp {
  background: rgba(37, 211, 102, .20);
  color: var(--verde-wa);
}

/* Bloque de textos */
.boton__texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;          /* permite que el texto largo se ajuste */
}

.boton__titulo {
  font-size: clamp(.9rem, 4vw, 1.06rem);    /* ~15.5px en móvil, ~17px en PC */
  font-weight: 700;
  line-height: 1.25;
}

.boton__sub {
  font-size: clamp(.7rem, 3.1vw, .83rem);   /* ~12px en móvil, ~13px en PC */
  font-weight: 500;
  color: var(--texto-suave);
  line-height: 1.3;
}

/* Flechita de la derecha · en azul corporativo */
.boton__flecha {
  margin-left: auto;
  flex: 0 0 auto;
  color: var(--azul);
  display: grid;
  place-items: center;
  transition: color .18s ease, transform .18s ease;
}
.boton:hover .boton__flecha {
  color: var(--azul);
  transform: translateX(3px);
}

/* ---------- BOTÓN DESTACADO (calculadora) ----------
   Es el único botón azul sólido: el elemento más llamativo. */
.boton--destacado {
  min-height: clamp(66px, 19vw, 84px); /* siempre más alto que el resto */
  background: var(--azul-logo);        /* el mismo azul que el logotipo */
  border-color: var(--azul-logo);
  color: var(--blanco);
  padding-right: 16px;
  box-shadow: 0 10px 26px rgba(14, 49, 113, .30);
  /* Pulso muy sutil, definido más abajo */
  animation: pulso 2.8s ease-in-out infinite;
}
.boton--destacado .boton__icono {
  background: rgba(255, 255, 255, .20);
  color: var(--blanco);
}
.boton--destacado .boton__sub { color: rgba(255, 255, 255, .88); }
.boton--destacado .boton__titulo { font-size: clamp(.95rem, 4.3vw, 1.15rem); }

.boton--destacado:hover {
  background: var(--azul-logo-hover);  /* el azul del logo, algo más claro */
  border-color: var(--azul-logo-hover);
  box-shadow: 0 14px 32px rgba(14, 49, 113, .38);
}
.boton--destacado:hover .boton__icono {
  background: rgba(255, 255, 255, .28);
  color: var(--blanco);
}

/* Badge naranja "GRATIS" · único elemento naranja de la página */
.badge {
  position: absolute;
  top: -9px;
  right: 12px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--naranja);
  color: #422400;                      /* texto muy oscuro para contraste AA */
  font-size: .625rem;                  /* ~10px */
  font-weight: 800;
  letter-spacing: .08em;
  box-shadow: 0 4px 12px rgba(255, 159, 28, .38);
}

/* ---------------------------------------------------------
   6. INSTAGRAM · icono circular grande, separado del resto
   --------------------------------------------------------- */
.social {
  margin-top: 4px;
  padding-top: clamp(12px, 4vw, 20px);
  border-top: 1px solid var(--borde);   /* separador discreto */
  text-align: center;
}

.ig {
  /* 56 px en móvil, hasta 62 px en ordenador */
  width:  clamp(52px, 14.4vw, 62px);
  height: clamp(52px, 14.4vw, 62px);
  margin: 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--borde);
  background: var(--blanco);
  color: var(--azul);
  box-shadow: 0 1px 2px rgba(23, 43, 77, .04);
  transition: transform .2s ease, box-shadow .2s ease,
              border-color .2s ease, background-color .2s ease;
}

/* Al pasar el ratón: gris neutro, sin los colores de Instagram.
   Sube un poco y se oscurece ligeramente el fondo, nada más. */
.ig:hover {
  background: #EDF1F7;                 /* gris claro neutro */
  border-color: #C9D6E8;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 10px 24px rgba(23, 43, 77, .14);
}

.ig-usuario {
  margin: 8px 0 0;
  font-size: clamp(.74rem, 3.2vw, .86rem);
  font-weight: 600;
  color: var(--texto-suave);
}

/* ---------------------------------------------------------
   7. PIE · discreto pero legible
   --------------------------------------------------------- */
.pie {
  margin-top: auto;
  text-align: center;
  font-size: clamp(.66rem, 2.8vw, .78rem);   /* ~11px en móvil, ~12.5px en PC */
  line-height: 1.6;
  color: var(--texto-suave);
}
.pie p { margin: 0; }
.pie a {
  color: var(--texto-suave);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pie a:hover { color: var(--azul); }
.pie span { margin: 0 3px; }

/* ---------------------------------------------------------
   8. ACCESIBILIDAD · foco visible al navegar con el tabulador
   Va en azul corporativo: sobre fondo claro se ve mucho mejor
   que el naranja y encaja con la paleta.
   --------------------------------------------------------- */
a:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 3px;
  border-radius: var(--radio);
}
.ig:focus-visible { border-radius: 50%; }

/* ---------------------------------------------------------
   9. ANIMACIONES
   La clase .anim + la variable --orden crean la entrada
   escalonada (60 ms de retardo entre elementos).
   --------------------------------------------------------- */
.anim {
  opacity: 0;
  transform: translateY(12px);
  animation: entrada .45s cubic-bezier(.22, .61, .36, 1) forwards;
  animation-delay: calc(var(--orden, 0) * 60ms);
}

@keyframes entrada {
  to { opacity: 1; transform: translateY(0); }
}

/* Pulso del botón destacado: casi imperceptible, solo llama la atención */
@keyframes pulso {
  0%, 100% { box-shadow: 0 10px 26px rgba(14, 49, 113, .30), 0 0 0 0 rgba(14, 49, 113, .34); }
  50%      { box-shadow: 0 10px 26px rgba(14, 49, 113, .30), 0 0 0 10px rgba(14, 49, 113, 0); }
}

/* ---------------------------------------------------------
   10. PREFERENCIA DE MOVIMIENTO REDUCIDO
   Si el usuario ha pedido menos animación, se desactiva todo.
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .anim {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .boton--destacado { animation: none; }
  * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------
   11. AJUSTES POR TAMAÑO DE PANTALLA
   El orden de estos bloques IMPORTA: el último que se cumple
   es el que manda. Van de la pantalla más grande a la más
   pequeña, para que en un móvil justito gane la versión
   compacta.
   --------------------------------------------------------- */

/* 11.1 · ORDENADOR Y TABLET
   El bloque se centra en mitad de la pantalla en vez de quedarse
   pegado arriba. "safe center" es un seguro: si el contenido no
   cupiera, no se cortaría por arriba, se podría hacer scroll. */
@media (min-width: 600px) and (min-height: 640px) {
  body:not(.legal-body) {
    display: flex;
    justify-content: center;
    align-items: center;
    align-items: safe center;
  }
}

/* 11.2 · PANTALLAS BAJAS o MÓVILES ESTRECHOS
   Cubre el iPhone SE (320-360 px de ancho) y también la ventana
   del navegador del ordenador cuando es bajita. Compactamos todo
   para que siga entrando sin scroll. */
@media (max-height: 700px), (max-width: 360px) {
  .contenedor { padding-top: 16px; gap: 12px; }
  .logo { width: 92px; height: 92px; margin-bottom: 9px; }
  .marca { font-size: 1.3rem; }
  .eslogan { font-size: .8rem; }
  .boton { min-height: 54px; padding: 9px 12px; }
  .boton--destacado { min-height: 64px; }   /* sigue siendo el más alto */
  .boton__icono { width: 36px; height: 36px; }
  .social { padding-top: 11px; }
  .ig { width: 50px; height: 50px; }
}

/* 11.3 · MÓVIL EN HORIZONTAL (pantalla muy baja y ancha)
   Aquí es imposible que quepa todo: quitamos el centrado para que
   el scroll funcione con normalidad y encogemos la cabecera. */
@media (orientation: landscape) and (max-height: 520px) {
  body:not(.legal-body) { display: block; }
  .contenedor { padding-top: 14px; gap: 11px; }
  .logo { width: 76px; height: 76px; margin-bottom: 8px; }
  .marca { font-size: 1.2rem; }
}

/* ---------------------------------------------------------
   12. PÁGINAS LEGALES (/legales/aviso-legal.html y privacidad.html)
   Usan el mismo contenedor, pero con texto corrido.
   --------------------------------------------------------- */
/* Margen exterior de la página: separa la tarjeta de los bordes
   de la pantalla, igual que el aire que tiene la portada. */
.legal-body {
  padding: clamp(14px, 4vw, 44px) clamp(12px, 4vw, 32px);
}

/* La hoja legal es una tarjeta blanca, el mismo lenguaje visual
   que los botones de la portada: fondo blanco, borde sutil,
   esquinas redondeadas y sombra muy suave. */
.legal {
  /* 68ch = unos 68 caracteres por línea, la anchura más cómoda de
     leer. En el móvil manda el 100% del ancho disponible. */
  max-width: min(68ch, 760px);
  text-align: left;
  gap: 0;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: 0 1px 2px rgba(23, 43, 77, .04),
              0 8px 24px rgba(23, 43, 77, .06);
  /* Márgenes interiores generosos: 22px en móvil, 48px en ordenador */
  padding: clamp(22px, 6vw, 48px);
}

.legal .volver {
  display: inline-block;
  margin-bottom: clamp(14px, 4vw, 22px);
  font-size: clamp(.8rem, 3.4vw, .9rem);
  font-weight: 700;
  color: var(--azul);
}
.legal .volver:hover { color: var(--azul-oscuro); }

.legal h1 {
  margin: 0 0 clamp(14px, 4vw, 22px);
  font-size: clamp(1.3rem, 6.2vw, 2rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.25;
  color: var(--texto);
}

.legal h2 {
  margin: clamp(22px, 6vw, 34px) 0 8px;
  font-size: clamp(.95rem, 4.1vw, 1.15rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--azul);
}

/* Texto legal en azul oscuro corporativo, no en gris:
   es texto para leer, necesita contraste. */
.legal p,
.legal li {
  font-size: clamp(.85rem, 3.7vw, 1rem);
  line-height: 1.7;
  color: var(--texto);
  /* Evita que un correo o una palabra larga se salga de la pantalla */
  overflow-wrap: break-word;
}

/* Las referencias a los artículos del RGPD, en gris y algo menores */
.legal em {
  color: var(--texto-suave);
  font-size: .94em;
}

.legal ul { padding-left: 20px; margin: 8px 0; }
.legal li { margin-bottom: 5px; }
.legal strong { color: var(--texto); font-weight: 700; }

/* Enlaces dentro del texto legal: en azul y subrayados, para que
   se distingan del texto corrido */
.legal p a,
.legal li a {
  color: var(--azul);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal p a:hover,
.legal li a:hover { color: var(--azul-oscuro); }

.legal .actualizado {
  margin-top: clamp(24px, 6vw, 36px);
  font-size: clamp(.74rem, 3.2vw, .85rem);
  color: var(--texto-suave);
  font-style: italic;
}

.legal .pie {
  margin-top: clamp(26px, 6vw, 40px);
  padding-top: 16px;
  border-top: 1px solid var(--borde);
  text-align: left;
}
/* El pie mantiene su gris discreto aunque esté dentro de un <p> */
.legal .pie a { color: var(--texto-suave); }
.legal .pie a:hover { color: var(--azul); }