/* ============================================================
   Alfredo · web pública
   Tokens del design system de Abanico Networks (color, tipografía,
   espaciado) + base de página. Inlined: sin dependencia de runtime.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=42dot+Sans:wght@400;500;600;700&display=swap');

:root {
  /* Tinta y papel */
  --polar-white: #FAFAFA;
  --obsidian-black: #151515;
  --principal-black: #101010;
  --pure-white: #FFFFFF;

  /* Marca */
  --strawberry-pink: #E5005B;
  --neon-pink: #E72486;
  --stellar-blue: #312783;
  --volt-yellow: #F4E600;
  --cobalt-blue: #0072AD;

  --dark-strawberry-pink: #77002C;
  --dark-neon-pink: #B61958;
  --dark-stellar-blue: #181240;
  --dark-volt-yellow: #C87F00;
  --dark-cobalt-blue: #034974;

  --light-strawberry-pink: #FF5F90;
  --light-neon-pink: #FF99D1;
  --light-stellar-blue: #9082D9;
  --light-volt-yellow: #FFFF99;
  --light-cobalt-blue: #77B0D9;

  --pale-strawberry-pink: #FFC9D9;
  --pale-neon-pink: #FFE9F5;
  --pale-stellar-blue: #D9D2FD;
  --pale-volt-yellow: #FFFFCB;
  --pale-cobalt-blue: #C8E8FE;

  --success: #41C170;

  /* Tipografía */
  --font-sans: "Arimo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-ui: "42dot Sans", "Arimo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Radios */
  --radius-2xl: 30px;
}

/* Base */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--polar-white); font-family: var(--font-sans); }
a { color: var(--strawberry-pink); text-decoration: none; }
a:hover { color: var(--dark-strawberry-pink); }
a.nav { color: rgba(250,250,250,.72); }
a.nav:hover { color: #fff; }
img { max-width: 100%; }

/* Modal por :target */
.af-modal { display: none; }
.af-modal:target { display: flex; }

/* Lluvia de sobres del hero: recorre todo el ancho del viewport,
   por ancho que sea la pantalla (parte de left:100% = borde derecho). */
@keyframes afRainX { from { transform: translateX(0); } to { transform: translateX(calc(-100vw - 140px)); } }

/* Botones CTA: efecto al pasar el ratón */
.af-cta { transition: background .18s ease, border-color .18s ease, color .18s ease; }
.af-cta-primary:hover { background: var(--dark-strawberry-pink) !important; color: #fff; }
.af-cta-outline:hover { border-color: #fff !important; }
.af-cta-white:hover { background: #EBEBF0 !important; }

/* Mockup de la app: en móvil la tabla scrollea en horizontal en vez de romperse */
@media (max-width: 760px) {
  .af-mock-table { overflow-x: auto !important; }
  .af-mock-row { min-width: 440px; }
}

/* Formulario */
.af-input {
  height: 42px; border: 1px solid #D8D8DF; border-radius: 10px;
  padding: 0 14px; font-size: 14.5px; color: #151515; background: #fff;
  font-family: var(--font-sans); width: 100%;
}
.af-input:focus { outline: 2px solid var(--strawberry-pink); outline-offset: 1px; }
.af-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--strawberry-pink); color: #fff; font-weight: 600;
  font-size: 16px; height: 48px; border-radius: 99px; border: 0;
  cursor: pointer; font-family: var(--font-sans); width: 100%;
}
.af-btn:hover { background: var(--dark-strawberry-pink); color: #fff; }

/* Aviso de resultado */
.af-alert { border-radius: 10px; padding: 12px 14px; font-size: 13.5px; line-height: 1.5; margin-top: 6px; }
.af-alert-ok { background: #E3F3E5; color: #1F7A32; }
.af-alert-err { background: #FDE7EA; color: #B00030; }

/* reCAPTCHA v2 invisible: ocultamos el badge de la esquina.
   La mención legal se muestra manualmente en el formulario. */
.grecaptcha-badge { visibility: hidden !important; }

@media (max-width: 1080px) {
  .af-grid3 { grid-template-columns: 1fr !important; gap: 44px !important; }
  .af-tline { display: none !important; }
  .af-cols { grid-template-columns: 1fr !important; gap: 40px !important; }
}
@media (max-width: 920px) {
  .af-grid2 { grid-template-columns: 1fr !important; }
  .af-navlinks { display: none !important; }
}
@media (max-width: 760px) {
  .af-sec { padding-left: 22px !important; padding-right: 22px !important; }
  .af-hero { padding-top: 60px !important; }
}
@media (max-width: 560px) {
  .af-vcard { grid-template-columns: 1fr !important; }
}