/* ========================================================================== AnimaVPN — hoja de estilos principal Fondo azul-noche siempre; el color de acento es intercambiable. Para cambiar el acento por defecto, edita --acento-rgb y --sobre-acento en :root. El atributo data-acento del permite alternarlo en caliente. ========================================================================== */ :root { /* Acento por defecto: turquesa */ --acento-rgb: 24, 216, 187; --sobre-acento: #04121A; /* texto sobre el color de acento */ --bg: #0D1520; --bg-alt: #16212E; --surface: #1B2836; --surface-2: #22323F; --border: #2C3D4D; --accent: rgb(var(--acento-rgb)); --accent-soft: rgba(var(--acento-rgb), 0.12); --accent-2: #7A6CF0; --text: #F0F2F5; --text-muted: #9DAAB8; --danger: #FF6B6B; --ok: rgb(var(--acento-rgb)); --radius: 14px; --radius-sm: 9px; --maxw: 1180px; --pad-x: clamp(1.25rem, 5vw, 3rem); --transition: all .25s ease; } /* Acento alternativo: naranja. Lo activa el selector de la cabecera. */ :root[data-acento="naranja"] { --acento-rgb: 255, 138, 61; --sobre-acento: #1C0B02; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 90px; } body { background: var(--bg); color: var(--text); font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: inherit; text-decoration: none; transition: var(--transition); } img, svg { max-width: 100%; display: block; } ul { list-style: none; } ::selection { background: var(--accent); color: var(--sobre-acento); } /* --------------------------------------------------------- Layout base */ .contenedor { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-x); } section { position: relative; } .seccion { padding: clamp(4rem, 9vw, 7rem) 0; } .seccion--alt { background: var(--bg-alt); } .seccion-cabecera { max-width: 720px; margin: 0 auto clamp(2.5rem, 5vw, 4rem); text-align: center; } .seccion-cabecera p { color: var(--text-muted); font-size: 1.08rem; } .etiqueta { display: inline-block; color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; margin-bottom: .75rem; } h1, h2, h3, h4 { line-height: 1.15; font-weight: 800; letter-spacing: -.02em; } h1 { font-size: clamp(2.25rem, 5.2vw, 3.6rem); } h2 { font-size: clamp(1.85rem, 3.6vw, 2.6rem); margin-bottom: .9rem; } h3 { font-size: 1.2rem; margin-bottom: .5rem; } .texto-acento { color: var(--accent); } /* --------------------------------------------------------- Botones */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .85rem 1.6rem; border-radius: var(--radius-sm); font-weight: 700; font-size: 1rem; font-family: inherit; border: 1px solid transparent; cursor: pointer; transition: var(--transition); white-space: nowrap; } .btn--primario { background: var(--accent); color: var(--sobre-acento); box-shadow: 0 6px 24px rgba(var(--acento-rgb), .28); } .btn--primario:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(var(--acento-rgb), .42); } .btn--fantasma { background: transparent; color: var(--text); border-color: var(--border); } .btn--fantasma:hover { border-color: var(--accent); color: var(--accent); } /* A ancho completo el texto puede partirse: si no, su ancho mínimo obliga a crecer a la rejilla que lo contiene y desborda en pantallas estrechas. */ .btn--bloque { width: 100%; white-space: normal; } /* --------------------------------------------------------- Cabecera / nav */ .cabecera { position: sticky; top: 0; z-index: 100; background: rgba(13, 21, 32, .72); backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: var(--transition); } .cabecera.is-scrolled { border-bottom-color: var(--border); background: rgba(13, 21, 32, .93); } .cabecera__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 72px; } .marca { display: flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.2rem; letter-spacing: -.03em; } .marca__icono { width: 30px; height: 30px; flex: none; color: var(--accent); } .marca span { color: var(--accent); } .nav { display: flex; align-items: center; gap: 1.75rem; } .nav a { color: var(--text-muted); font-weight: 600; font-size: .95rem; } .nav a:hover { color: var(--text); } .cabecera__acciones { display: flex; align-items: center; gap: .75rem; } /* Selector de color de acento */ .acento-toggle { display: inline-flex; align-items: center; gap: .5rem; background: transparent; border: 1px solid var(--border); border-radius: 99px; color: var(--text-muted); font-family: inherit; font-size: .82rem; font-weight: 600; padding: .38rem .8rem .38rem .5rem; cursor: pointer; transition: var(--transition); } .acento-toggle:hover { border-color: var(--accent); color: var(--text); } .acento-toggle__muestra { width: 15px; height: 15px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(var(--acento-rgb), .18); transition: var(--transition); } .nav-toggle { display: none; background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); width: 42px; height: 42px; cursor: pointer; align-items: center; justify-content: center; } /* --------------------------------------------------------- Hero */ .hero { padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3rem, 6vw, 5rem); overflow: hidden; } .hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(2rem, 5vw, 4rem); } .hero h1 { margin-bottom: 1.1rem; } .hero__sub { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--text-muted); margin-bottom: 2rem; max-width: 42ch; } .hero__ctas { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: 1.6rem; } .hero__notas { display: flex; flex-wrap: wrap; gap: 1.25rem; color: var(--text-muted); font-size: .9rem; } .hero__notas li { display: flex; align-items: center; gap: .45rem; } .hero__visual { position: relative; display: grid; place-items: center; min-height: 380px; } .hero__aura { position: absolute; inset: 0; display: grid; place-items: center; opacity: .75; pointer-events: none; color: var(--accent); /* el SVG del aura hereda el acento vía currentColor */ } .hero__aura svg { width: min(120%, 620px); height: auto; } /* El portátil y la maqueta de pantalla levitan juntos */ .hero__portatil { position: relative; z-index: 2; width: min(100%, 460px); animation: levitar 7s ease-in-out infinite; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .55)); } /* height: auto es imprescindible: sin él manda el atributo height del , el SVG se dibuja centrado con bandas y la superposición se descoloca. */ .hero__img { width: 100%; height: auto; display: block; } /* Coordenadas del hueco de pantalla dentro del lienzo 600×600 de portatil.svg: x=71 y=134.9 ancho=458 alto=259 → expresadas en porcentaje */ .hero__pantalla { position: absolute; left: 11.833%; top: 22.482%; width: 76.333%; height: 43.167%; color: var(--accent); overflow: hidden; } .hero__pantalla svg { width: 100%; height: 100%; display: block; } /* Reflejo tenue del cristal, para que no parezca una pegatina */ .hero__pantalla::after { content: ""; position: absolute; inset: 0; background: linear-gradient(112deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .02) 38%, transparent 60%); pointer-events: none; } .pantalla-pulso { animation: latido 3.2s ease-out infinite; transform-origin: 386px 128px; } @keyframes latido { 0% { transform: scale(1); opacity: .8; } 70%, 100% { transform: scale(2.6); opacity: 0; } } @keyframes levitar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } } @media (prefers-reduced-motion: reduce) { .hero__portatil { animation: none; } .pantalla-pulso { animation: none; opacity: 0; } html { scroll-behavior: auto; } } /* Resplandor de fondo del hero */ .hero::before { content: ""; position: absolute; top: -25%; right: -10%; width: 720px; height: 720px; background: radial-gradient(circle, rgba(var(--acento-rgb), .13) 0%, transparent 65%); pointer-events: none; } /* --------------------------------------------------------- Barra de confianza */ .confianza { background: var(--bg-alt); border-block: 1px solid var(--border); } .confianza__lista { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.25rem 2rem; padding: 1.5rem 0; } .confianza__lista li { display: flex; align-items: center; gap: .6rem; font-weight: 600; font-size: .95rem; color: var(--text-muted); } .confianza__lista svg { color: var(--accent); flex: none; } /* --------------------------------------------------------- Comparativa */ .comparativa { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .tarjeta-comp { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem; } .tarjeta-comp--destacada { border-color: rgba(var(--acento-rgb), .45); background: linear-gradient(160deg, #1B2C38, var(--surface)); } .tarjeta-comp h3 { display: flex; align-items: center; gap: .55rem; margin-bottom: 1.25rem; font-size: 1.15rem; } .tarjeta-comp li { display: flex; gap: .7rem; padding: .55rem 0; color: var(--text-muted); font-size: .97rem; } .tarjeta-comp li svg { flex: none; margin-top: .35rem; } .tarjeta-comp--mala li svg { color: var(--danger); } .tarjeta-comp--destacada li svg { color: var(--accent); } .tarjeta-comp--destacada li { color: var(--text); } /* --------------------------------------------------------- Rejilla de tarjetas */ .rejilla { display: grid; gap: 1.5rem; } .rejilla--3 { grid-template-columns: repeat(3, 1fr); } .rejilla--4 { grid-template-columns: repeat(4, 1fr); } .tarjeta { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.75rem; transition: var(--transition); } .tarjeta:hover { transform: translateY(-4px); border-color: rgba(var(--acento-rgb), .4); } .tarjeta p { color: var(--text-muted); font-size: .96rem; } .tarjeta__icono { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 11px; background: var(--accent-soft); color: var(--accent); margin-bottom: 1.1rem; } /* ------------------------------------------------ Comparativa por filas */ .vs { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); } .vs__cabecera, .vs__fila { display: grid; grid-template-columns: 1.1fr 1.25fr 1.25fr; gap: 1px; background: var(--border); } .vs__cabecera { background: var(--border); } .vs__cabecera > * { background: var(--bg-alt); padding: 1rem 1.25rem; font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); } .vs__col--nuestra { color: var(--accent); } .vs__fila > * { background: var(--surface); padding: 1rem 1.25rem; font-size: .93rem; } .vs__criterio { font-weight: 700; color: var(--text); } .vs__celda { color: var(--text-muted); } .vs__celda--nuestra { color: var(--text); background: rgba(var(--acento-rgb), .05) !important; display: flex; gap: .5rem; align-items: flex-start; } .vs__celda--nuestra svg { flex: none; margin-top: .28rem; color: var(--accent); } .vs__honesto { margin-top: 1.75rem; border: 1px dashed var(--border); border-radius: var(--radius); padding: 1.75rem; background: var(--bg-alt); } .vs__honesto h3 { display: flex; align-items: center; gap: .55rem; margin-bottom: .9rem; } .vs__honesto h3 svg { color: var(--accent); flex: none; } .vs__honesto p { color: var(--text-muted); margin-bottom: .8rem; } .vs__honesto strong { color: var(--text); } .vs__enlace { margin-bottom: 0 !important; } .vs__enlace a { color: var(--accent); font-weight: 600; } .vs__enlace a:hover { text-decoration: underline; } /* --------------------------------------------------------- Caso real */ .caso { display: grid; grid-template-columns: 1.5fr .85fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; } .caso__texto h2 { margin-bottom: 1.25rem; max-width: 20ch; } .caso__texto h3 { margin: 1.75rem 0 .4rem; font-size: 1.05rem; color: var(--accent); } .caso__texto p { color: var(--text-muted); } .caso__intro { font-size: 1.08rem; } .caso__texto strong { color: var(--text); } .caso__cita { margin-top: 2rem; padding: 1.25rem 1.5rem; border-left: 3px solid var(--accent); background: var(--surface); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .caso__cita p { color: var(--text); font-size: 1.05rem; font-style: italic; margin-bottom: .6rem; } .caso__cita cite { color: var(--text-muted); font-size: .86rem; font-style: normal; } .caso__datos { position: sticky; top: 100px; display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .caso__dato { background: var(--surface); padding: 1.5rem; } .caso__dato strong { display: block; font-size: 2.1rem; font-weight: 800; letter-spacing: -.04em; color: var(--accent); line-height: 1.1; } .caso__dato span { color: var(--text-muted); font-size: .89rem; } .caso__dato--pie { background: var(--bg-alt); } .caso__dato--pie span { font-size: .82rem; line-height: 1.5; } /* ---------------------------------------------------- Quién está detrás */ .equipo { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; } .equipo__foto { position: relative; } .equipo__foto img { width: 100%; border-radius: var(--radius); border: 1px solid var(--border); filter: saturate(.9) contrast(1.05); } .equipo__pie { display: block; margin-top: .85rem; font-size: .84rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .09em; } .equipo__texto h2 { margin-bottom: 1.25rem; max-width: 24ch; } .equipo__texto p { color: var(--text-muted); margin-bottom: 1rem; } .equipo__texto strong { color: var(--text); } .equipo__hechos { margin-top: 1.75rem; display: grid; gap: .8rem; } .equipo__hechos li { display: flex; gap: .7rem; align-items: flex-start; color: var(--text-muted); font-size: .94rem; } .equipo__hechos svg { flex: none; margin-top: .2rem; color: var(--accent); } .equipo__hechos strong { color: var(--text); } /* --------------------------------------------------------- Pasos */ .pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; counter-reset: paso; } .paso { position: relative; padding-top: 3.25rem; } .paso::before { counter-increment: paso; content: counter(paso, decimal-leading-zero); position: absolute; top: 0; left: 0; font-size: 1.75rem; font-weight: 800; color: var(--accent); opacity: .85; } .paso::after { content: ""; position: absolute; top: 1.6rem; left: 3rem; right: -.75rem; height: 1px; background: linear-gradient(90deg, var(--border), transparent); } .paso:last-child::after { display: none; } .paso p { color: var(--text-muted); font-size: .95rem; } /* ----------------------------------------------- Calculadora de precio */ .calc { display: grid; /* minmax(0, …) permite que las columnas encojan por debajo de su ancho mínimo de contenido en lugar de desbordar la tarjeta. */ grid-template-columns: minmax(0, 1.35fr) minmax(0, .95fr); gap: clamp(1.5rem, 4vw, 3rem); background: linear-gradient(155deg, #1C2E3A, var(--surface)); border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(1.5rem, 3.5vw, 2.5rem); margin-bottom: 2.5rem; } /* min-width: 0 evita que los hijos de la rejilla se nieguen a encoger */ .calc__controles { display: flex; flex-direction: column; gap: 2rem; justify-content: center; min-width: 0; } .calc__campo { min-width: 0; } .calc__campo label, .calc__etiqueta-grupo { display: block; font-weight: 700; font-size: .95rem; margin-bottom: .75rem; } .calc__usuarios { display: block; font-size: clamp(2.5rem, 6vw, 3.4rem); font-weight: 800; line-height: 1; color: var(--accent); letter-spacing: -.04em; margin-bottom: .5rem; } /* Barra deslizante */ .calc input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 99px; background: var(--bg); border: 1px solid var(--border); outline: none; cursor: pointer; } .calc input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); border: 4px solid var(--surface); box-shadow: 0 0 0 1px var(--accent), 0 4px 12px rgba(var(--acento-rgb), .45); cursor: grab; } .calc input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; } .calc input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--accent); border: 4px solid var(--surface); box-shadow: 0 0 0 1px var(--accent); cursor: grab; } .calc input[type="range"]:focus-visible { box-shadow: 0 0 0 3px var(--accent-soft); } .calc__escala { display: flex; justify-content: space-between; margin-top: .55rem; font-size: .78rem; color: var(--text-muted); } /* Mensual / anual */ .calc__ciclo { display: inline-flex; background: var(--bg); border: 1px solid var(--border); border-radius: 99px; padding: 4px; gap: 4px; } .calc__opcion { display: inline-flex; align-items: center; gap: .4rem; background: none; border: none; color: var(--text-muted); font-family: inherit; font-size: .92rem; font-weight: 700; padding: .5rem 1.1rem; border-radius: 99px; cursor: pointer; transition: var(--transition); } .calc__opcion em { font-style: normal; font-size: .78rem; opacity: .85; } .calc__opcion:hover { color: var(--text); } .calc__opcion.is-activa { background: var(--accent); color: var(--sobre-acento); } .calc__pista { font-size: .84rem; color: var(--text-muted); margin-top: .85rem; max-width: 38ch; } /* Panel de resultado */ .calc__resultado { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1.75rem; display: flex; flex-direction: column; justify-content: center; text-align: center; } .calc__plan-nombre { font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); } .calc__plan-nombre strong { color: var(--accent); } .calc__total { margin: .75rem 0 .35rem; } .calc__total strong { display: block; font-size: clamp(2.1rem, 5vw, 2.9rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; } .calc__total span { color: var(--text-muted); font-size: .9rem; } .calc__desglose { color: var(--text-muted); font-size: .88rem; margin-bottom: 1.5rem; min-height: 2.6em; } .calc--amedida .calc__total strong { font-size: clamp(1.7rem, 4vw, 2.2rem); } /* --------------------------------------------------------- Precios */ .precios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: stretch; } .plan { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem; position: relative; } .plan--destacado { border-color: var(--accent); background: linear-gradient(170deg, #1C3039, var(--surface)); box-shadow: 0 16px 48px rgba(var(--acento-rgb), .12); } /* Plan resaltado por la calculadora */ .plan--activo { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 16px 40px rgba(var(--acento-rgb), .1); } .plan__cinta { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--accent); color: var(--sobre-acento); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; padding: .3rem .85rem; border-radius: 99px; } .plan__nombre { font-size: 1.1rem; font-weight: 800; margin-bottom: .25rem; } .plan__para { color: var(--text-muted); font-size: .9rem; min-height: 2.6em; } .plan__precio { display: flex; align-items: baseline; gap: .35rem; margin: 1.25rem 0 .25rem; } .plan__precio strong { font-size: 2.6rem; font-weight: 800; letter-spacing: -.03em; } .plan__precio span { color: var(--text-muted); font-size: .9rem; } .plan__nota { color: var(--text-muted); font-size: .84rem; margin-bottom: 1.5rem; } .plan__lista { flex: 1; margin-bottom: 1.75rem; } .plan__lista li { display: flex; gap: .65rem; padding: .42rem 0; font-size: .94rem; color: var(--text-muted); } .plan__lista svg { flex: none; margin-top: .3rem; color: var(--accent); } .precios-nota { text-align: center; color: var(--text-muted); font-size: .9rem; margin-top: 1.75rem; } /* --------------------------------------------------------- FAQ */ .faq { max-width: 820px; margin-inline: auto; } .faq details { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); margin-bottom: .85rem; overflow: hidden; } .faq details[open] { border-color: rgba(var(--acento-rgb), .4); } .faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.35rem; font-weight: 700; cursor: pointer; list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; color: var(--accent); font-size: 1.4rem; font-weight: 400; line-height: 1; flex: none; transition: var(--transition); } .faq details[open] summary::after { transform: rotate(45deg); } .faq details > p { padding: 0 1.35rem 1.25rem; color: var(--text-muted); font-size: .96rem; } /* --------------------------------------------------------- Contacto */ .contacto__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; } .contacto__datos li { display: flex; gap: .8rem; margin-bottom: 1.1rem; color: var(--text-muted); font-size: .96rem; } .contacto__datos svg { flex: none; margin-top: .25rem; color: var(--accent); } .contacto__datos a:hover { color: var(--accent); } .formulario { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.25rem); } .campo { margin-bottom: 1.1rem; } .campo label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: .4rem; } .campo label span { color: var(--accent); } .campo input, .campo select, .campo textarea { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-family: inherit; font-size: .97rem; padding: .75rem .9rem; transition: var(--transition); } .campo textarea { resize: vertical; min-height: 120px; } .campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .campo input::placeholder, .campo textarea::placeholder { color: #64757F; } .campo--check { display: flex; gap: .6rem; align-items: flex-start; font-size: .86rem; color: var(--text-muted); } .campo--check input { width: auto; margin-top: .3rem; flex: none; } .campo--check a { color: var(--accent); text-decoration: underline; } /* Correo escrito al revés en el HTML y enderezado aquí (anti-scraping) */ .correo-inv { unicode-bidi: bidi-override; direction: rtl; } /* Honeypot antispam: invisible para personas, visible para bots */ .trampa { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; } .aviso-form { display: none; border-radius: var(--radius-sm); padding: .85rem 1rem; font-size: .92rem; margin-bottom: 1.1rem; } .aviso-form.is-visible { display: block; } .aviso-form--ok { background: rgba(var(--acento-rgb), .12); border: 1px solid rgba(var(--acento-rgb), .45); color: var(--ok); } .aviso-form--error { background: rgba(255, 107, 107, .1); border: 1px solid rgba(255, 107, 107, .4); color: var(--danger); } /* --------------------------------------------------------- CTA final */ .cta-final { background: linear-gradient(150deg, #16303A, #14202C); border: 1px solid rgba(var(--acento-rgb), .3); border-radius: var(--radius); padding: clamp(2.25rem, 5vw, 3.5rem); text-align: center; } .cta-final p { color: var(--text-muted); max-width: 55ch; margin: 0 auto 1.75rem; } /* --------------------------------------------------------- Pie */ .pie { background: var(--bg-alt); border-top: 1px solid var(--border); padding: clamp(2.5rem, 5vw, 4rem) 0 1.5rem; } .pie__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2rem; margin-bottom: 2.5rem; } .pie__grid p { color: var(--text-muted); font-size: .92rem; max-width: 38ch; margin-top: .75rem; } .pie h4 { font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted); margin-bottom: .9rem; } .pie li { margin-bottom: .5rem; } .pie li a { color: var(--text-muted); font-size: .93rem; } .pie li a:hover { color: var(--accent); } .pie__legal { border-top: 1px solid var(--border); padding-top: 1.5rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; color: var(--text-muted); font-size: .85rem; } /* --------------------------------------------------------- Notas técnicas */ .notas-rejilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } .notas-rejilla--listado { grid-template-columns: repeat(2, 1fr); } .nota-tarjeta { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.75rem; transition: var(--transition); } .nota-tarjeta:hover { transform: translateY(-4px); border-color: rgba(var(--acento-rgb), .45); } .nota-tarjeta h3 { font-size: 1.15rem; margin-bottom: .6rem; } .nota-tarjeta p { color: var(--text-muted); font-size: .94rem; flex: 1; } .nota-tarjeta__etiqueta { color: var(--accent); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; margin-bottom: .6rem; } .nota-tarjeta__pie { color: var(--text-muted); font-size: .82rem; margin-top: 1.1rem; } /* Artículo */ .nota { padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(3rem, 6vw, 5rem); } .nota__contenido { max-width: 760px; } .miga { font-size: .84rem; color: var(--text-muted); margin-bottom: 2rem; display: flex; gap: .5rem; flex-wrap: wrap; } .miga a:hover { color: var(--accent); } .nota__cabecera { border-bottom: 1px solid var(--border); padding-bottom: 2rem; margin-bottom: 2.5rem; } .nota__cabecera h1 { font-size: clamp(1.9rem, 4.2vw, 2.8rem); margin-bottom: 1rem; } .nota__entradilla { font-size: 1.15rem; color: var(--text-muted); margin-bottom: 1.25rem; } .nota__meta { display: flex; gap: .6rem; font-size: .86rem; color: var(--text-muted); } .nota__cuerpo { font-size: 1.05rem; } .nota__cuerpo p { color: var(--text-muted); margin-bottom: 1.15rem; } .nota__cuerpo strong { color: var(--text); } .nota__cuerpo em { color: var(--text); font-style: italic; } .nota__cuerpo h2 { font-size: 1.55rem; margin: 2.75rem 0 1rem; } .nota__cuerpo h3 { font-size: 1.15rem; margin: 1.85rem 0 .6rem; color: var(--accent); } .nota__cuerpo ul, .nota__cuerpo ol { margin: 0 0 1.5rem 1.35rem; color: var(--text-muted); } .nota__cuerpo ul { list-style: disc; } .nota__cuerpo ol { list-style: decimal; } .nota__cuerpo li { margin-bottom: .6rem; padding-left: .35rem; } .nota__cuerpo li::marker { color: var(--accent); } .nota__cuerpo a { color: var(--accent); text-decoration: underline; } .nota__cuerpo code { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 5px; padding: .1rem .4rem; font-size: .9em; color: var(--text); } .nota__cuerpo blockquote { border-left: 3px solid var(--accent); background: var(--surface); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 1.25rem 1.5rem; margin: 1.75rem 0; } .nota__cuerpo blockquote p { color: var(--text); font-size: 1.08rem; margin: 0; } .nota__cuerpo table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; font-size: .93rem; } .nota__cuerpo th, .nota__cuerpo td { border: 1px solid var(--border); padding: .7rem .85rem; text-align: left; color: var(--text-muted); } .nota__cuerpo th { color: var(--text); background: var(--surface); font-size: .84rem; text-transform: uppercase; letter-spacing: .06em; } .nota__aviso { font-size: .87rem !important; background: var(--bg-alt); border: 1px dashed var(--border); border-radius: var(--radius-sm); padding: .9rem 1.1rem; margin-bottom: 1.75rem !important; } .nota__cta { background: linear-gradient(150deg, #16303A, #14202C); border: 1px solid rgba(var(--acento-rgb), .3); border-radius: var(--radius); padding: 2rem; margin: 3.5rem 0 3rem; text-align: center; } .nota__cta h2 { font-size: 1.4rem; margin-bottom: .6rem; } .nota__cta p { color: var(--text-muted); margin-bottom: 1.5rem; } .nota__otras h2 { font-size: 1.3rem; margin-bottom: 1.35rem; } /* --------------------------------------------------------- Páginas legales */ .legal { padding: clamp(2.5rem, 6vw, 4.5rem) 0; } .legal__contenido { max-width: 780px; margin-inline: auto; } .legal__contenido h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: .5rem; } .legal__fecha { color: var(--text-muted); font-size: .88rem; margin-bottom: 2.5rem; } .legal__contenido h2 { font-size: 1.3rem; margin: 2.25rem 0 .75rem; } .legal__contenido p, .legal__contenido li { color: var(--text-muted); margin-bottom: .85rem; } .legal__contenido ul { list-style: disc; padding-left: 1.35rem; margin-bottom: 1rem; } .legal__contenido a { color: var(--accent); text-decoration: underline; } .legal__contenido table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; font-size: .92rem; } .legal__contenido th, .legal__contenido td { border: 1px solid var(--border); padding: .6rem .75rem; text-align: left; color: var(--text-muted); } .legal__contenido th { color: var(--text); background: var(--surface); } .tabla-scroll { overflow-x: auto; } /* --------------------------------------------------------- Banner de cookies */ .cookies { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 200; max-width: 560px; margin-inline: auto; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; box-shadow: 0 20px 50px rgba(0, 0, 0, .5); display: none; } .cookies.is-visible { display: block; } .cookies p { font-size: .9rem; color: var(--text-muted); margin-bottom: 1rem; } .cookies a { color: var(--accent); text-decoration: underline; } .cookies__botones { display: flex; gap: .65rem; flex-wrap: wrap; } .cookies__botones .btn { flex: 1; padding: .65rem 1rem; font-size: .92rem; } /* --------------------------------------------------------- Animación de entrada */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; } .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* --------------------------------------------------------- Responsive */ @media (max-width: 980px) { .rejilla--4 { grid-template-columns: repeat(2, 1fr); } .pasos { grid-template-columns: repeat(2, 1fr); } .paso:nth-child(2n)::after { display: none; } .precios { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } .calc { grid-template-columns: minmax(0, 1fr); } .pie__grid { grid-template-columns: 1fr 1fr; } .pie__grid > :first-child { grid-column: 1 / -1; } } /* El menú se pliega antes que el resto del diseño: son seis enlaces y dejan de caber mucho antes de que el contenido necesite reorganizarse. */ @media (max-width: 1240px) { .nav { gap: 1.15rem; } .nav a { font-size: .9rem; } .acento-toggle__texto { display: none; } .acento-toggle { padding: .38rem; } } @media (max-width: 1120px) { .nav { position: absolute; top: 72px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--bg-alt); border-bottom: 1px solid var(--border); padding: .5rem var(--pad-x) 1.25rem; display: none; } .nav.is-open { display: flex; } .nav a { padding: .75rem 0; border-bottom: 1px solid var(--border); font-size: .95rem; } .nav-toggle { display: flex; } .cabecera__acciones .btn { display: none; } .acento-toggle__texto { display: none; } .acento-toggle { padding: .38rem; } } @media (max-width: 860px) { .hero__grid { grid-template-columns: 1fr; text-align: center; } .hero__sub { margin-inline: auto; } .hero__ctas, .hero__notas { justify-content: center; } .hero__visual { order: -1; min-height: 280px; } .comparativa { grid-template-columns: 1fr; } /* La comparativa por filas pasa a bloques apilados */ .vs__cabecera { display: none; } .vs__fila { grid-template-columns: 1fr; padding: .25rem 0; } .vs__criterio { padding-bottom: .35rem; } .vs__celda::before { content: "Escritorio remoto: "; color: var(--text-muted); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; display: block; margin-bottom: .2rem; } .vs__celda--nuestra { display: block; } .vs__celda--nuestra::before { content: "AnimaVPN: "; color: var(--accent); } .vs__celda--nuestra svg { display: none; } .caso { grid-template-columns: 1fr; } .caso__datos { position: static; grid-template-columns: 1fr 1fr; } .caso__dato--pie { grid-column: 1 / -1; } .equipo { grid-template-columns: 1fr; } .equipo__foto { max-width: 280px; } .rejilla--3 { grid-template-columns: 1fr; } .contacto__grid { grid-template-columns: 1fr; } .notas-rejilla, .notas-rejilla--listado { grid-template-columns: 1fr; } } @media (max-width: 560px) { .rejilla--4 { grid-template-columns: 1fr; } .pasos { grid-template-columns: 1fr; } .paso::after { display: none; } .confianza__lista { justify-content: flex-start; } /* En pantallas muy estrechas los rótulos largos deben poder partirse */ .btn { white-space: normal; } .calc__ciclo { display: flex; width: 100%; } .calc__opcion { flex: 1; padding: .5rem .55rem; font-size: .86rem; justify-content: center; } .calc__escala span:nth-child(even) { display: none; } .pie__grid { grid-template-columns: 1fr; } }