/* Wimanager landing styles - consolidated from index.php and assets/css/style-site.css */

/* ── Reset & Variables ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Android pinta un recuadro celeste sobre lo que se toca -- rgba(51,181,229,.4)
   por defecto. Se anula: el estado tactil ya lo dan los propios :hover/:active
   de cada control. */
a, button, [role="button"], summary, label {
  -webkit-tap-highlight-color: transparent;
}

:root {
  /* Flecha de "abre en otra pestana". Se usa como mask, por eso el trazo
     va en negro: lo que importa es la silueta, el color lo pone el texto. */
  --icono-externo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E");

  /* Brand */
  --brand-primary: #D7E72C;
  --brand-primary-hover: #c8d629;
  --brand-primary-soft: rgba(215, 231, 44, 0.14);
  --brand-primary-contrast: #090909;

  /* Legacy/accent colors used by product mockups */
  --mock-purple: #7c3aed;
  --mock-purple-soft: #ede9fe;

  /* Neutrals */
  --color-bg: #0F0F0F;
  --color-surface: #ffffff;
  --color-surface-dark: #181818;
  --color-text: #FEFEFE;
  --color-text-soft: rgba(254, 254, 254, 0.72);
  --color-text-muted: rgba(254, 254, 254, 0.55);
  --color-border: rgba(0,0,0,0.07);
  --color-line: #1a1a1a;
  --color-white: #ffffff;

  /* Feedback */
  --success-color: #047857;
  --error-color: #b91c1c;
  /* Para bordes: el #b91c1c de arriba se apaga sobre el fondo #0F0F0F. */
  --error-border: #ef4444;

  /* Compatibility aliases */
  --primary: var(--brand-primary);
  --primary-dark: var(--brand-primary-hover);
  --primary-light: var(--brand-primary-soft);
  --primary-color: var(--brand-primary);
  --bg: var(--color-bg);
  --body-color: var(--color-bg);
  --surface: var(--color-surface);
  --white: var(--color-white);
  --text: var(--color-text);
  --text-color: var(--color-text);
  --text-3: var(--color-text-muted);
  --border: var(--color-border);
  --linea: var(--color-line);
  --bg-grey: #f5f7fa;
  --bg-color-btn: var(--brand-primary-soft);
  --blanco: var(--color-surface-dark);

  /* Layout and effects */
  --nav-h: 80px;
  --tran: 0.22s cubic-bezier(0.4,0,0.2,1);
}




/* El hueco de la barra de scroll queda reservado siempre. Al abrir el menu del
   telefono se traba el scroll del documento, la barra desaparece y sin esto la
   pagina se ensancha de golpe: se ve como un salto lateral de todo el sitio,
   incluida la barra fija de arriba. */
html {
  scrollbar-gutter: stable;
}
body {
  font-family: 'Roboto', sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Barra de scroll ─────────────────────────────────────────────────────── */
/* `color-scheme` le avisa al navegador que la interfaz es oscura: sin esto
   algunos controles nativos y la barra se dibujan en claro. */
:root {
  color-scheme: dark;
  scrollbar-color: #2A2A2A #000000;
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: #000000;
}

::-webkit-scrollbar-thumb {
  background: #2A2A2A;
  border-radius: 8px;
  border: 3px solid #000000;
}

::-webkit-scrollbar-thumb:hover {
  background: #3A3A3A;
}

::-webkit-scrollbar-corner {
  background: #000000;
}

button {
   font-family: 'Roboto', sans-serif;
}


/* ── NAV ───────────────────────────────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--nav-h);
  width: 100%;
  display: flex; align-items: center;
  padding: 0 2rem;
  transform: translateY(0);

  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1), box-shadow var(--tran), background var(--tran);
 background: rgba(15, 15, 15)
}
.nav.scrolled {  }
.nav.nav-hidden {

}

.nav-inner {
  width: 100%; max-width: 1200px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}

/* Logo */
.nav-logo {
  display: flex; align-items: center; gap: 4px;
  text-decoration: none; justify-self: start;
  color: var(--text);
}
.nav-logo img { height: 38px; object-fit: contain; }
.nav-logo span {
  font-family: 'Roboto', sans-serif;
  font-size: 1.35rem; font-weight: 600;
  color: var(--text); letter-spacing: -0.2px;
  user-select: none;
  margin-top: -2px;
}

/* Nav links — centro */
.nav-links {
  display: flex; align-items: center; gap: 4px;
  list-style: none;
}
/* El disparador de "Funciones" es un <button> y no un <a>: ya no navega a
   ningun lado, solo abre el panel. Comparte estas reglas para que se vea igual
   que los demas items del menu. */
.nav-links a,
.nav-links .nav-boton {
  font-size: 1rem; font-weight: 500;
  color: var(--text);
  /* Un <button> trae fondo propio del navegador; se anula aca y no en la regla
     de abajo, que pesa lo mismo que el :hover y le ganaba por orden. */
  background: transparent;
  text-decoration: none;
  padding: 12px 22px;
  border-radius: 999px;
  transition: background var(--tran), color var(--tran);
  white-space: nowrap;
}
.nav-links a:hover,
.nav-links .nav-boton:hover {
  background: var(--color-surface-dark);
}

/* ── Dropdown "Funciones" (hover) ─────────────────────────────────────────── */
.nav-links .has-dropdown {
  position: relative;
}
.nav-links .has-dropdown > .nav-boton {
  display: inline-flex; align-items: center; gap: 4px;
  /* Lo que un boton no hereda solo. */
  font-family: inherit;
  border: 0;
  cursor: pointer;
}
/* Panel de funciones: ocupa todo el ancho de la ventana y el contenido se
   alinea con los 1200 del resto del sitio. Va fixed y no absolute porque
   .nav-inner esta limitado a 1200 y lo recortaria. */
.nav-mega {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  background: var(--color-bg);
  border-bottom: 1px solid var(--linea);
  padding: 0 2rem 3rem;
  z-index: 1001;

  /* Sin transicion: abre y cierra en seco. */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.nav-links .has-dropdown:hover .nav-mega,
.nav-links .has-dropdown:focus-within .nav-mega,
.nav-links .has-dropdown.abierto .nav-mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.nav-mega-inner {
  max-width: 1200px;
  margin: 0 auto;
  /* Flex y no grid: con grid las columnas se estiraban para llenar los 1200 y
     los items quedaban desparramados. Asi conservan su ancho y su separacion
     sea cual sea la cantidad, y el grupo entero va centrado. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.75rem 0.5rem;
  border-top: 1px solid var(--linea);
  padding-top: 2.5rem;
}

.nav-mega-item {
  flex: 0 0 128px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.25rem;
  text-decoration: none;
  border-radius: 14px;
}


/* Dentro del nav estos enlaces son <a> hijos de .nav-links, asi que heredaban
   la pastilla de los links del menu: relleno de 12/22, radio de 999 y fondo al
   pasar por encima. `.nav-links a` pesa mas que `.nav-mega-item`, de ahi que
   haga falta repetir el contexto para ganarle. Aca el unico que reacciona al
   mouse es el circulo del icono. */
.nav-links .nav-mega-item,
.nav-links .nav-mega-item:hover {
  padding: 0.5rem 0.25rem;
  border-radius: 14px;
  background: transparent;
}
.nav-mega-icono {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  /* El mismo color del hover pero a medio cuerpo: el circulo se insinua en
     reposo y termina de aparecer al pasar por encima. #181818 es
     --color-surface-dark, escrito en rgba para poder bajarle la opacidad. */
  background: rgba(24, 24, 24, 0.5);
  color: var(--text);
  transition: background var(--tran);
}

.nav-mega-icono svg {
  width: 26px;
  height: 26px;
}

.nav-mega-label {
  font-size: 0.85rem;
  line-height: 1.3;
  text-align: center;
  color: var(--color-text-soft);
}

/* Se pinta el circulo, pero lo dispara el enlace entero: pasar por la palabra
   tambien lo enciende. Lo que no se pinta nunca es el fondo del enlace -- eso
   se anula mas arriba, donde se le saca la pastilla del nav. */
.nav-mega-item:hover .nav-mega-icono,
.nav-mega-item:focus-visible .nav-mega-icono {
  background: var(--color-surface-dark);
}

/* Cortina detras del panel: mismos valores que .newsletter-modal. Queda por
   debajo del nav (1000) y del propio panel (1001). */
.nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 999;
  /* Sin transicion, igual que el panel: los dos aparecen en el mismo cuadro.
     Con el fade de .newsletter-modal la cortina llegaba tarde y se veia como si
     el menu se encendiera dos veces. */
  opacity: 0;
  visibility: hidden;
}

.nav-overlay.visible {
  opacity: 1;
  visibility: visible;
}

/* Nav actions — derecha */
.nav-actions {
  display: flex; align-items: center; gap: 10px;
  justify-self: end;
}

/* Botones nav */
.btn-nav-ghost {
  font-family: 'Roboto', sans-serif;
  font-size: 1rem; font-weight: 500;
  color: var(--text);

  padding: 12px 22px; border-radius: 999px; cursor: pointer;
  text-decoration: none;

  white-space: nowrap;
}
.btn-nav-ghost:hover {
 background: var(--color-surface-dark);
}
.btn-nav-primary {
    background: var(--brand-primary);
    border-radius: 250px;
    font-weight: 500;
    color: #000000;
    text-decoration: none;
    padding: 12px 22px;
    outline: none;
    text-align: center;
    position: relative;
    overflow: hidden;
    z-index: 0;
    transition: color 0.3s ease;
}

.btn-nav-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--brand-primary);
    border-radius: 250px;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
}

.btn-nav-primary:hover::before {
    background: var(--brand-primary-hover);
}


/* Avatar button */
.btn-avatar {
  display: flex; align-items: center; gap: 10px;
  background: transparent; border: none;
  border-radius: 999px;
  cursor: pointer; transition: border-color var(--tran), box-shadow var(--tran);
  padding: 4px 4px 4px 18px;
}
.btn-avatar:hover {
background: var(--color-surface-dark);
}


.btn-avatar .avatar-svg { flex-shrink: 0;  }
.btn-avatar .avatar-name {
  font-size: 1rem; font-weight: 500;
    font-family: 'Roboto', sans-serif;
  color: var(--text); max-width: 110px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}




/* Materialize dropdown overrides */
.nav-user-dropdown-content {
  min-width: 325px !important;


  overflow: visible !important;
}
.nav-user-dropdown-content li > a,
.nav-user-dropdown-content li > span {
  padding: 13px 11px !important;
  color: var(--text) !important;
  line-height: normal !important;
}
.nav-user-dropdown-content li { min-height: auto !important; }
.nav-user-dropdown-content li:hover,
.nav-user-dropdown-content li.active {
  background: transparent !important;
}

/* Profile block inside dropdown */
.dropdown-profile-li {

  cursor: default !important;
  text-align: center;
}
.dropdown-profile-li:hover { background: transparent !important; }
.dropdown-profile {
  display: flex; flex-direction: column;
  align-items: center; gap: 8px;
  text-align: center;
padding: 20px 0;

}
.dropdown-profile h3 {
  font-family: 'Roboto', sans-serif;
  font-size: 1.1em; font-weight: 500;
  color: var(--text); 
  margin-bottom: 4px;
}
.dropdown-profile p {
  font-size: 13px; 
  color: var(--text); 
  font-weight: 400;
}

.d-avatar {
    border: 4px solid rgba(230, 232, 255, 0.5);
    width: 108px;
    height: 108px;
    border-radius: 250px;
    margin-bottom: 5px;
}

.d-avatar svg {
    width: 100px;
    height: 100px;
}

.d-avatar img {
    width: 100px !important;
    height: 100px !important;
}


.plan-free     { background: #f3f4f6; color: #6b7280; }
.plan-pro      { background: var(--mock-purple-soft); color: var(--mock-purple); }
.plan-business { background: #fef3c7; color: #b45309; }
.plan-enterprise { background: #ecfdf5; color: #047857; }

/* Dropdown items */
.dropdown-item {
  font-family: 'Roboto', sans-serif;
  display: flex !important; align-items: center; gap: 10px;
   border-radius: 10px;
  font-size: 1rem; font-weight: 500 !important;
  color: var(--text) !important;
  text-decoration: none;
  transition: background var(--tran), color var(--tran);
}
.dropdown-item svg { flex-shrink: 0; }
.dropdown-item:hover {
  background: var(--primary-light) !important;
  color: var(--primary) !important;
}

.nav-user-dropdown-content li.divider {
  margin: 10px 0 !important;
  background-color: var(--linea) !important;
  height: 1px;
  padding: 0;
}

/* Hamburger mobile */
.nav-hamburger {
  display: none; flex-direction: column; gap: 4px;
  background: none; border: none; cursor: pointer; padding: 6px;
  position: absolute;
  right: 22px;
}
.nav-hamburger span {
  display: block; width: 22px; height: 3px;
  background: var(--text); border-radius: 3px;
  transition: transform var(--tran), opacity var(--tran);
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu */
.nav-mobile {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh; /* ← sobreescribe con dvh que se adapta dinámicamente */
  background: var(--bg);
  padding: calc(var(--nav-h) + 2rem) 12px calc(24px + env(safe-area-inset-bottom));
  z-index: 998;

  /* Puede desplazarse si el contenido no entra, pero sin barra a la vista: en
     un panel a pantalla completa la barra se lee como si la pagina de atras
     siguiera viva. Y contain evita que al llegar al final el scroll se le pase
     al documento. */
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  transform: translateX(100%);
  opacity: 1;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-mobile::-webkit-scrollbar { width: 0; height: 0; }

.nav-mobile.open {
  transform: translateX(0);
  pointer-events: auto;
}

.nav.menu-open {
  background: var(--bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  transform: translateY(0);
  transition: background 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-mobile ul {
  list-style: none;
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 1rem;
}

.nav-mobile li.divider {
  margin: 0px 14px !important;
  background-color: var(--linea);
  height: 1px;
  opacity: 0.8;
}

.nav-mobile ul a {
  display: flex; align-items: center; padding: 10px 14px;
  font-size: 1.35rem; font-weight: 700;
  color: var(--text); text-decoration: none;
  border-radius: 10px;
  transition: background var(--tran), color var(--tran);
}
.nav-mobile ul a:hover { background: var(--primary-light); color: var(--primary); }


.nav-mobile ul {
  /* Se queda con el espacio sobrante y empuja las acciones abajo. El min-height
     es lo que la deja achicarse: por defecto un item flex no baja del alto de
     su contenido, asi que en pantallas bajas la lista empujaba el boton de
     registro fuera del panel y quedaba cortado. Ahora scrollea la lista. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}

.nav-mobile ul::-webkit-scrollbar { width: 0; height: 0; }

.nav-mobile .nav-mobile-actions {
  /* Nunca se achica: es lo ultimo que se puede sacrificar. */
  flex: 0 0 auto;
}

.nav-mobile .nav-mobile-actions {
  display: flex;
  gap: 10px;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom); /* respeta el notch en iPhone */
}


/* Vivia en el <style> de index.php, asi que ninguna otra pagina lo tenia. Se
   mueve aca porque ahora hay una pagina por funcion y todas lo usan. */
.btn-hero-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--brand-primary);
  color: #000000;
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  padding: 15px 30px;
  border-radius: 250px;
  text-decoration: none;
  transition: transform var(--tran), background var(--tran), box-shadow var(--tran);
}

.btn-hero-primary:hover {
  background: var(--brand-primary-hover);
}
.btn-primary {
    font-size: 1rem; 
    font-weight: 500;
    background: var(--color-bg);
    border-radius: 250px;
    color: #f5f5f5;
    text-decoration: none;
    padding: 16px 24px;
    outline: none;
    text-align: center;
    position: relative;
    overflow: hidden;
    z-index: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.3s ease;
}


body > footer {
  flex-shrink: 0;
  scroll-snap-align: end;
  scroll-snap-stop: normal;
}

body > main {
  flex: 1 0 auto;
}

/* #cta se excluye: maneja su propio alto para que la tarjeta redondeada,
   con sus margenes, entre entera en pantalla. */
main > section:not(#funciones):not(.hero):not(#cta):not(#faq):not(#planes):not(.fn-pagina) {
  height: 100vh;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.section-inner {
  width: 100%;
  height: 100%;
  max-width: 1200px; margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.section-title {
  font-family: 'Roboto', sans-serif;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 800; line-height: 1.4;
  letter-spacing: -0.5px; color: var(--text);
  margin-bottom: 1rem;
}

/* ── FUNCIONES ─────────────────────────────────────────────────────────────── */



.funciones {


  /* Abajo solo 20px: el resto de la separacion lo pone el relleno de planes.
     Son los mismos 20px que la tarjeta del CTA deja del otro lado. */
  padding: 8rem 0 20px;

  z-index: 2;
}

/* Encabezado de la seccion: comparte el eje izquierdo con las filas. Centrado
   quedaba a 200px del resto del contenido y se leia como un cartel suelto. */
.funciones-encabezado {
  max-width: 820px;
  margin: 0 20px 0;
}

/* Encabezado en dos columnas: el titulo a la izquierda y, a su derecha, los
   modulos del sistema con la linea que los resume. Suelta el tope de 820px
   porque ahora ocupa el ancho entero de la seccion.
   `end` alinea el bloque derecho por abajo: la descripcion queda a la altura
   de la ultima linea del titulo, no flotando arriba. */
.funciones-encabezado-duo {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.5fr);
  gap: 10rem;
  align-items: center;
}

.funciones-encabezado-duo .section-title {
  margin-bottom: 0;
}

/* Fila de modulos del sistema, arriba del titulo de la seccion. Se superponen
   como un mazo de fichas: dice "son varias piezas y encajan entre si" en menos
   espacio que ponerlas en linea. El z-index descendente hace que cada una tape
   a la siguiente, no al reves, que se lee peor. */
/* El margen negativo compensa el borde de 3px de los circulos: sin el, la
   fila arranca tres pixeles a la derecha del titulo y se nota. */
.fn-iconos {
  display: flex;
  align-items: center;
  margin-left: -3px;
  margin-bottom: 1rem;
}

.fn-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--color-surface-dark);
  /* El borde del color del fondo es lo que recorta la de atras y deja ver el
     circulo entero de la de adelante. */
  border: 3px solid var(--color-bg);
  color: var(--text);
  margin-left: -12px;
}

.fn-icono:first-child {
  margin-left: 0;
}

.fn-icono svg {
  width: 22px;
  height: 22px;
  display: block;
}

/* Circulo final con el mas: dice que la lista sigue. Lleva fondo como los
   demas pero un tono por encima (#181818 -> #232323), asi se distingue sin
   dejar de pertenecer a la fila. */
.fn-icono-mas {
  background: #232323;
  color: var(--color-text-muted);
}

/* La descripcion acompana el ancho del encabezado y no los 500px que
   .funciones-desc usa adentro de las tarjetas. */
.funciones-encabezado .funciones-desc {
  max-width: none;
  margin-top: 0.75rem;
}

@media (max-width: 900px) {
  .fn-iconos { margin-bottom: 1.25rem; }

  .fn-icono {
    width: 48px;
    height: 48px;
    margin-left: -10px;
  }

  .fn-icono svg { width: 20px; height: 20px; }
}

.funciones-antetitulo {
  /* inline-block para que la pastilla mida lo que dice: como parrafo ocupaba
     todo el ancho de la seccion y el fondo se estiraba con el. */
  display: inline-block;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  margin: 0 0 0.5rem;
  padding: 7px 14px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.02);
}

/* Planes usa la misma cabecera que funciones -- antetitulo mas h2 a la
   izquierda -- asi las dos secciones arrancan igual. */
#funciones .section-title,
#planes .section-title {
  max-width: 700px;
  margin: 0;
  text-align: left;
}

.funciones-inner {
    position: relative;
  /* Mismo mecanismo que #cta: el ancho deja siempre 20px de aire a cada lado
     y recien ahi tope. Sin eso el contenido toca el borde de la pantalla entre
     1200 y 1360, que es justo donde caen 1280 y 1366. */
  width: calc(100% - 40px);
  max-width: 1200px;
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  /* El encabezado no trae margen inferior, asi que la separacion con el
     contenido la pone este gap. Los 5rem de antes dejaban el titulo flotando;
     0 lo pegaba. Planes lleva el mismo valor unas lineas mas abajo. */
  gap: 2.5rem;
}

.funciones-title {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: var(--color-text);
  margin-bottom: 1.1rem;
  max-width: 500px;
}

.funciones-desc {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-soft);
  max-width: 500px;
}

@media (max-width: 900px) {
  /* En mobile las filas se apilan, asi que el aire ENTRE funciones tiene que
     ser claramente mayor que el aire DENTRO de cada una (texto-imagen, 24px).
     Con 4rem quedaban a 64 contra 24 y se leian como un bloque continuo. */
  /* Igual que en escritorio: sin aire abajo, la separacion con planes la da
     el relleno de esa seccion. */
  .funciones { padding: 7rem 0 12px; }
  /* Mismos 12px de aire lateral que la tarjeta del CTA. */
  .funciones-inner { width: calc(100% - 32px); padding: 0; }

  /* Casi al ras: en el telefono los 20px de escritorio dejaban el antetitulo
     bastante mas adentro que las tarjetas, que van a 16 del borde. */
  .funciones-encabezado { margin: 0 5px; }

  /* En el telefono las dos columnas se apilan. El orden del HTML ya es el
     correcto: pastilla, titulo, iconos y descripcion. */
  .funciones-encabezado-duo {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .funciones-desc { max-width: none; }
}

/* ── PLANES ───────────────────────────────────────────────────────────────── */
#quienes {
  display: flex;
  align-items: center;
  padding: 0;
  overflow: hidden;
}

#quienes .section-inner {
  width: 100%;
  gap: 3rem;
}



/* ── Animaciones de entrada ─────────────────────────────────────────────────── */
.fade-up {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.4,0,0.2,1), transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
.fade-up.visible { opacity: 1; transform: translateY(0); }

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .nav-links, .nav-actions { display: none; }
  .nav-hamburger { display: flex; }

  /* En el telefono el panel no existe: las funciones se despliegan dentro del
     menu, en una grilla de tres. Mismas piezas que en escritorio, mas chicas. */
  .nav-mega,
  .nav-overlay { display: none; }

  .nav-mobile-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: none;
    border: 0;
    font-family: inherit;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text);
    cursor: pointer;
    border-radius: 10px;
  }

  .nav-mobile-toggle .dropdown-caret {
    transition: transform var(--tran);
  }

  .nav-mobile-toggle[aria-expanded="true"] .dropdown-caret {
    transform: rotate(180deg);
  }

  .nav-mobile-sub {
    display: grid;
    /* minmax(0, 1fr) y no 1fr: por defecto la pista no baja del ancho de su
       palabra mas larga, y "Oportunidades" empujaba la columna fuera de la
       caja. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem 0.5rem;
    padding: 0 6px;

    /* Se pliega con la altura para que la transicion tenga contra que animar. */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s ease,
                padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .nav-mobile-sub.abierto {
    max-height: 640px;
    opacity: 1;
    padding: 1rem 6px 1.25rem;
  }

  .nav-mobile-sub .nav-mega-icono {
    width: 56px;
    height: 56px;
  }

  .nav-mobile-sub .nav-mega-label {
    font-size: 0.8rem;
    /* Si aun asi no entra, que corte la palabra antes que desbordar. */
    overflow-wrap: anywhere;
  }

  /* El ancho lo pone la grilla; el min-width deja que la pista encoja. */
  .nav-mobile-sub .nav-mega-item {
    min-width: 0;
  }
  .section-inner { padding: 0 2rem; }

}

@media (max-width: 600px) {
  .nav { padding: 0 1.2rem; }
}


/* ── Estilos para las tarjetas de planes ──────────────────────────────────── */
.plan-card {
    background: var(--color-surface-dark);
    border-radius: 24px;
    padding: 35px 30px;
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;

}





.plan-badge {
position: absolute;
  top: 12px;
  right:12px;
  color: var(--text);
  padding: 5px 14px;
  border-radius: 250px;
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.03em;
}

.plan-name {
    font-size: 1.1em;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 10px;
}

.plan-price {
    font-size: 1.5em;
    font-weight: 700;

    margin-bottom: 8px;
    line-height: 1;
}

.plan-price.free {
 
}

.plan-price span {
    font-size: 12px;
    font-weight: 400;
    opacity: 0.8;
    color: var(--text);
}

.plan-storage {
    margin: 12px 0;

}

.plan-feature {
  display: flex;
  align-items: center;
  gap: 10px;
}

.feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  flex-shrink: 0;
}

.feature-icon svg {
  display: block;

}

.feature-text {
  line-height: 1.8;
}

.feature-info {
  margin-left: auto;
  display: flex;
  align-items: center;
}

.plan-card ul {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

.plan-card ul li:first-child {
  font-weight: 500;
  margin-left: 0;
  padding-left: 0;
}


.plan-features {
    list-style: none;
    padding: 0;
    margin: 20px 0 0;
    flex-grow: 1;
}

.plan-features li {
    padding: 5px 0;
    font-size: 15px;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 6px;
}

.material-tooltip {
    padding: 10px 14px;
    font-size: 13px;
    z-index: 2000;
    color: #fff;
    line-height: 140%;
    opacity: 0;
    position: absolute;
    text-align: left;
    max-width: calc(100% - 4px);
    overflow: hidden;
    pointer-events: none;
    visibility: hidden;
white-space: pre-line;
    /* Nuevo estilo */
    background: rgba(21, 27, 39, 0.8);
    border-radius: 12px; 
     max-width: 220px;
    /* Pastilla */
    backdrop-filter: blur(4px);
}


/* ── Grid de planes ─────────────────────────────────────────────── */
.plans-grid-wrapper {
  position: relative;
  width: 100%;
  margin: 0;
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.plans-grid-item {
  padding: 4px 10px;
  box-sizing: border-box;
}

.plans-grid-item .plan-card {
  width: 100%;
  margin: 0;
}

.plans-grid-action {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}

.plans-grid-action .btn-primary {
  background: var(--primary-color);
  color: var(--body-color);
  border-color: var(--primary-color);
}

.plans-grid-action .btn-primary::before {
  background: var(--primary-color);
}

.plans-grid-action .btn-primary:hover {
  color: var(--body-color);
}

@media (max-width: 600px) {
  .plans-grid {
    grid-template-columns: 1fr;
  }

  .plans-grid-item {
    padding: 4px 6px;
  }
}

/* ── Páginas internas ─────────────────────────────────────────────────────── */
.site-page {
  width: 100%;
  min-height: auto;
  padding: calc(var(--nav-h) + 100px) 2rem 100px;
}

.site-page-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.site-page-head {
  margin: 0 0 100px;
  text-align: left;
}

.site-page-title {
  color: var(--text);
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  line-height: 1;
  font-weight: 800;
}



.site-page-subtitle {
  margin-top: 18px;
  color: var(--color-text-soft);
  line-height: 1.6;
  font-size: 1rem;
}

@media (max-width: 600px) {
  .site-page-title {
      line-height: 1.4;
  }
  .site-page-subtitle {
      font-size: 1.1rem;
      line-height: 1.4;
  }
  .site-page-head {
      margin: 0 0 50px;
  }
}

.plans-page-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.plans-page-grid .plan-card {
  height: 100%;
  min-height: 420px;
}

.plans-empty {
  max-width: 680px;
  margin: 0 auto;
  padding: 28px;
  border: 1px solid var(--linea);
  border-radius: 16px;
  background: var(--color-surface-dark);
  color: var(--text);
  text-align: center;
}

.contact-page-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
  gap: 24px;
  align-items: start;
}

.contact-info-panel,
.contact-form-panel {

}

.contact-info-panel h2,
.contact-form-panel h2 {
  color: var(--text);
  font-size: 1.2rem;
  margin-bottom: 40px;
  font-weight: 500;
}

.contact-info-panel p,
.contact-info-list {
  color: var(--text);
}

.contact-info-list {
  display: grid;
  gap: 20px;
  list-style: none;
}

.contact-info-list li {
 line-height: 1.6;
 font-weight: 500;
}

.contact-info-list strong {
  font-size: 0.95rem;
  font-weight: 400;
  opacity: 0.7;
}

/* Fila de redes dentro de los datos de contacto. El color y el hover ya se
   los da .contact-info-list a; aca solo va el armado en linea. */
.contact-redes {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-top: 8px;
}

.contact-redes a {
  display: inline-flex;
}

.contact-info-list a {
  color: var(--text);
  text-decoration: none;
}

.contact-info-list a:hover {
  color: var(--primary-color);
}

.contact-form {
  display: grid;
  gap: 20px;
}

.contact-form .btn-primary {
  width: auto;
  justify-self: start;
  background: var(--text-color);
  color: #000000;
  border: none;
  cursor: pointer;
  margin-top: 10px;
}

.contact-form .btn-primary::before {
  background: var(--primary-color);
}

.contact-form .btn-primary:hover {
  color: var(--body-color);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.form-field {
  display: grid;
  gap: 8px;
}

.form-field label,
.form-field .form-label {
  color: var(--text);
  font-weight: 400;
  font-size: 0.95rem;
  opacity: 0.7;
  margin-left: 2px;
}

.site-input,
.site-textarea {
  width: 100%;
  border: 1px solid var(--linea);
  border-radius: 14px;
  background: #0F0F0F;
  color: var(--text);
  font: inherit;
  outline: none;
  transition: border-color var(--tran), background var(--tran);
}

.site-input {
  min-height: 52px;
  padding: 0 16px;
}

.site-textarea {
  min-height: 170px;
  padding: 15px 16px;
  resize: vertical;
}

.site-input::placeholder,
.site-textarea::placeholder {
  color: var(--text);
  
}

.site-input:focus,
.site-textarea:focus {
  border-color: var(--primary-color);
}

/* Campos incompletos al intentar enviar. La clase la agrega el JS del
   formulario: con :invalid a secas los campos arrancan en rojo antes de
   que el usuario llegue a escribir nada. Al completarlos el rojo se va
   solo, porque :invalid deja de aplicar. */
.contact-form.validado .site-input:invalid,
.contact-form.validado .site-textarea:invalid {
  border-color: var(--error-border);
  background: rgba(239, 68, 68, 0.07);
}

/* La etiqueta del campo que falta, tambien en rojo. El <label> va antes
   del input, asi que no se llega con un combinador de hermano: se marca
   el .form-field con :has() y desde ahi baja al label. Donde no haya
   :has() el borde del campo sigue avisando igual. */
.contact-form.validado .form-field:has(.site-input:invalid) label,
.contact-form.validado .form-field:has(.site-textarea:invalid) label {
  color: var(--error-border);
  opacity: 1;
}

.form-message {
  min-height: 24px;
  color: var(--text);
  font-weight: 500;
}

.form-message.success {
  color: var(--primary-color);
}

.form-message.error {
  color: var(--error-color);
}

.form-hidden {
  display: none;
}

/* Aviso de consentimiento, entre el mensaje y el boton. Chico y en gris: es
   letra legal, no tiene que competirle al llamado a la accion. */
.form-consentimiento {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.form-consentimiento a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--tran);
}

.form-consentimiento a:hover {
  color: var(--primary-color);
}

/* ── Contacto: tarjeta del formulario ───────────────────────────────────── */
/* El formulario pasa a ser una tarjeta. El radio de 36px y el #181818 son los
   mismos que usa .fn-duo en las paginas de funcion: no se inventa un valor
   nuevo, se reusa el que el sitio ya tiene para paneles grandes. */
.contact-form-panel {
  background: var(--color-surface-dark);
  border: 1px solid var(--linea);
  border-radius: 36px;
  padding: 2.5rem;
}

/* La columna izquierda no lleva tarjeta, pero baja lo mismo que el padding de
   la derecha para que los dos <h2> arranquen en la misma linea. */
.contact-info-panel {
  padding-top: 2.5rem;
}

.form-label {
  display: block;
  color: var(--text);
  font-weight: 400;
  font-size: 0.95rem;
  opacity: 0.7;
  margin-left: 2px;
}

.form-opcional {
  font-size: 0.85rem;
  opacity: 0.75;
}

/* ── Desplegables propios del formulario ────────────────────────────────── */
/* No son <select> nativos: el nativo no deja dibujar la bandera adentro de la
   opcion. El valor elegido viaja en un input oculto. */
.sprite-banderas {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.campo-telefono {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.campo-telefono .site-input {
  flex: 1 1 auto;
  min-width: 0;
}

.selector {
  position: relative;
}

.selector-ancho {
  display: block;
}

.selector-boton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 14px;
  font: inherit;
  color: var(--text);
  background: #0F0F0F;
  border: 1px solid var(--linea);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color var(--tran), background var(--tran);
}

.selector-prefijo .selector-boton {
  flex: 0 0 auto;
  height: 100%;
  padding-right: 8px;
}

.selector-boton-caja {
  width: 100%;
  justify-content: space-between;
}

/* Sin estado de hover: no lo tienen los inputs de al lado. Abierto toma el
   mismo borde que un campo con foco, que es lo que ya significa "estas
   escribiendo aca" en este formulario. */
.selector.abierto .selector-boton {
  border-color: var(--primary-color);
}

.selector-bandera {
  width: 24px;
  height: 16px;
  flex: 0 0 auto;
  border-radius: 3px;
}

.selector-etiqueta {
  font-size: 1rem;
  white-space: nowrap;
}

.selector-caret {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  opacity: 0.6;
  transition: transform var(--tran);
  /* El SVG apunta hacia arriba: en reposo se lo da vuelta para que marque
     abajo, que es hacia donde se abre el menu. */
  transform: rotate(180deg);
}

.selector.abierto .selector-caret {
  transform: rotate(0deg);
}

.selector-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  min-width: 100%;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--color-bg);
  border-radius: 16px;
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.85);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 60;
}

.selector.abierto .selector-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Trece paises no entran en pantalla: el menu del prefijo scrollea. */
.selector-menu-scroll {
  width: 288px;
  max-height: 268px;
  overflow-y: auto;
}

.selector-opcion {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  opacity: 0.7;
  transition: background var(--tran), opacity var(--tran);
}

.selector-opcion:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.04);
}

.selector-opcion.activa {
  opacity: 1;
  background: var(--color-surface-dark);
}

.selector-pais {
  flex: 1 1 auto;
  font-size: 0.9rem;
}

.selector-dial {
  flex: 0 0 auto;
  font-size: 0.85rem;
  opacity: 0.6;
}

/* Las opciones de "tipo de consulta" llevan una aclaracion abajo, asi que
   apilan en lugar de ir en linea. */
.selector-ancho .selector-opcion {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.selector-nota {
  font-size: 0.8rem;
  opacity: 0.6;
}


/* ── Lista completa de funciones ────────────────────────────────────────────── */
/* Cada fila es una tarjeta: mismo fondo y mismo radio que las tarjetas de plan.
   Con veinticuatro filas, las lineas de una tabla comun se leen como planilla
   de calculo; la tarjeta le da cuerpo a la fila sin dibujar una sola linea.
   Por eso border-collapse va en separate: collapse no deja redondear filas. */
/* Bloques grandes: el carrusel, la tabla y el cierre necesitan mas aire
   entre si que el que separa a los elementos de adentro de cada uno. */
.tabla-funciones {
  margin-top: 160px;
}

.tabla-head {
  margin-bottom: 2.5rem;
  text-align: center;
}

/* Sin overflow en escritorio, a proposito. Por especificacion, si un eje del
   overflow no es visible el otro tambien se vuelve scrollable: la caja pasa a
   ser el marco de referencia de los sticky de adentro y el encabezado se pega
   a ella en vez de a la pantalla, encimandose con la primera fila. A 1240px la
   tabla entra completa, asi que el scroll solo hace falta mas abajo. */
.tabla-scroll {
  width: 100%;
}

.tabla-comparativa {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.95rem;
}

.tabla-comparativa th,
.tabla-comparativa td {
  padding: 16px 20px;
  text-align: center;
  vertical-align: middle;
}

/* Encabezado pegajoso, debajo de la barra fija. Con veinticuatro filas, sin
   esto a media tabla ya no se sabe que columna es cual. */
.tabla-comparativa thead th {
  position: sticky;
  top: var(--nav-h);
  z-index: 3;
  padding: 18px 20px 20px;
  background: var(--color-bg);
  color: var(--text);
  white-space: nowrap;
  /* La linea cierra el encabezado y lo despega de la primera fila, sobre todo
     cuando queda fijo al scrollear. */
  border-bottom: 1px solid var(--linea);
}

.tabla-plan {
  display: block;
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 12px;
}

/* Mismo boton que la tarjeta del plan, en chico. Que este arriba de todo y
   viaje con el scroll es lo que hace util una tabla larga: se puede elegir
   desde cualquier fila sin volver arriba. */
.tabla-plan-btn {
  display: inline-flex;
  justify-content: center;
  width: 100%;
  padding: 10px 18px;
  font-size: 0.9rem;
  border: 0;
  /* Del color de la tarjeta, no del fondo de pagina que trae .btn-primary. */
  background: var(--color-surface-dark);
}

/* Mismo salto que el hover de los botones del nav: +9 por canal. */
.tabla-plan-btn:hover {
  background: #212121;
}

/* Titulo de grupo: fila suelta, sin fondo de tarjeta, con aire arriba. */
.tabla-grupo th {
  /* Sin relleno a la izquierda: el titulo de grupo, los nombres de funcion y
     el texto de la pagina arrancan todos en la misma vertical. */
  padding: 40px 20px 12px 0;
  text-align: left;
  background: transparent;
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 600;
}

/* La tarjeta la forma el bloque entero, no cada fila: las celdas de los planes
   comparten fondo y solo redondean en la primera y la ultima fila del grupo.
   Entre medio va un divisor, como en la lista del centro de ayuda. */
.tabla-bloque td {
  background: var(--color-surface-dark);
}

/* El divisor va del color del fondo, no gris: no dibuja una linea, abre un
   hueco entre filas y la tarjeta se lee como bloques apilados. */
.tabla-bloque tr:not(:last-child) td {
  border-bottom: 1px solid var(--color-bg);
}

.tabla-bloque tr:first-child td:first-of-type { border-top-left-radius: 24px; }
.tabla-bloque tr:first-child td:last-child    { border-top-right-radius: 24px; }
.tabla-bloque tr:last-child  td:first-of-type { border-bottom-left-radius: 24px; }
.tabla-bloque tr:last-child  td:last-child    { border-bottom-right-radius: 24px; }

/* La columna que describe queda al ras del fondo. Lleva el color de fondo y no
   transparente porque al scrollear en horizontal se le pasaria el contenido
   por debajo. */
.tabla-bloque th[scope="row"] {
  background: var(--color-bg);
}

/* El nombre de la funcion, en blanco. La columna es lo que se lee: si va en
   gris compite con los tildes y la tabla se vuelve un campo de simbolos. */
.tabla-funcion {
  color: var(--text);
  font-weight: 400;
  opacity: 0.7;
}

/* El nombre ocupa lo que necesita y el icono se va al borde derecho de la
   columna. Es lo que los deja a todos en la misma vertical: pegados al texto
   quedaban en escalera, uno por cada largo de nombre distinto.
   El flex va en un span y no en el <th>: una celda con display:flex deja de
   comportarse como celda y se rompen los anchos de columna. */
.tabla-celda-nombre {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Icono de ayuda, solo en las filas que traen texto. */
.tabla-info {
  display: inline-flex;
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--text);
  cursor: help;
  transition: color var(--tran);
}

/* Primera columna: el nombre de la funcion. Queda fija cuando la tabla
   scrollea en pantalla angosta, para no perder de vista que se compara. */
.tabla-comparativa tbody th[scope="row"] {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 300px;
  padding-left: 0;
  text-align: left;
  font-weight: 400;
  line-height: 1.5;
}

.tabla-comparativa thead th:first-child {
  left: 0;
  z-index: 4;
}

.tabla-si {
  display: inline-flex;

}

/* La nube arriba y el numero abajo. Apilado le da cuerpo a la fila que mas
   importa de la tabla, y corta la monotonia de veinticuatro renglones de
   tildes. */
.tabla-valor {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.tabla-valor svg {
  flex: 0 0 auto;
  color: var(--color-text-muted);
}

/* Para lectores de pantalla: "Incluido" / "No incluido" y el resumen de la
   tabla, que a la vista los dan el tilde y la celda vacia. */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Debajo de este ancho la tabla no entra: scrollea en horizontal con la
   columna de nombres fija. Ahi el encabezado deja de ser pegajoso, porque el
   contenedor de scroll se lo quedaria. */
@media (max-width: 1240px) {
  .tabla-scroll {
    overflow-x: auto;
  }

  .tabla-comparativa thead th {
    position: static;
  }

  .tabla-comparativa tbody th[scope="row"] {
    position: sticky;
    left: 0;
  }
}

@media (max-width: 900px) {
  /* Veinticuatro filas por cinco columnas no se leen en un telefono: aca la
     comparacion la hacen las tarjetas del carrusel. El contenido sigue en el
     HTML, solo se oculta. */
  .tabla-funciones { display: none; }

  .tabla-comparativa th,
  .tabla-comparativa td { padding: 14px 16px; }

  .tabla-grupo th { padding: 30px 16px 10px; }

  .tabla-comparativa tbody th[scope="row"] { min-width: 210px; }

  .tabla-plan-btn { padding: 9px 14px; font-size: 0.85rem; }
}

/* ── Contacto: preguntas frecuentes ─────────────────────────────────────── */
/* Reusa tal cual el FAQ del inicio (.faq-head, .faq-list, .faq-item...). Lo
   unico propio es el ancho: alla las preguntas van a 800px centradas, aca
   ocupan los 1200px de la pagina. */
.faq-contacto {
  margin-top: 150px;
}

/* Cuando viene despues del cierre lima acompana el ritmo de los otros bloques
   grandes. Solo pasa en /planes: en /contacto el FAQ no tiene un #cta delante,
   asi que ese selector no lo alcanza y su espaciado queda como estaba. */
#cta + .faq-contacto {
  margin-top: 160px;
}

/* Estas respuestas son mas largas que las del inicio. En el telefono, con el
   texto a 337px de ancho, no entran en los 300px que comparten con el FAQ de
   la home: sin esto se cortan a la mitad. */
.faq-contacto .faq-item.open .faq-answer {
  max-height: 700px;
}

/* Enlaces dentro de una respuesta: mismo trato que los datos de contacto de
   la izquierda -- blanco pleno sobre el gris del parrafo, lima al pasar. */
.faq-answer a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--tran);
}

.faq-answer a:hover {
  color: var(--primary-color);
}

@media (max-width: 900px) {
  .contact-form-panel {
    padding: 1.5rem;
    border-radius: 24px;
    margin-top: 40px;
  }

  .contact-info-panel {
    padding-top: 0;
  }

  .faq-contacto {
    margin-top: 90px;
  }

  /* En pantalla angosta el menu del prefijo se ata al ancho del campo para no
     desbordar hacia la derecha. */
  .selector-menu-scroll {
    width: min(288px, calc(100vw - 5rem));
  }
}

.funciones-page {
  padding-top: var(--nav-h);
}

.funciones-page .funciones-pin {
  top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
}

@media (max-width: 900px) {
  .contact-page-grid,
  .form-row,
  .plans-page-grid {
    grid-template-columns: 1fr;
  }

  .site-page {
    padding: calc(var(--nav-h) + 42px) 1.2rem 72px;
  }
}


/* ── FAQ ────────────────────────────────────────────────────────────────── */


.faq-head {
  /* El ancho explicito es necesario: sin el, `margin: auto` en un item flex
     lo encoge al contenido y el titulo deja de alinear con las preguntas. */
  width: 100%;
  max-width: 800px;
  margin: 0 auto 3rem;
}

.faq-list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.faq-item:first-child {
  border-top: 1px solid var(--border);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: none;
  border: none;
  padding: 24px 4px;
  cursor: pointer;
  text-align: left;
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 500;
  color: var(--text);
  transition: color var(--tran);
}
.faq-question:hover {
  color: var(--text);
}

.faq-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--text);
  transition: color var(--tran);
  position: relative;
}
.faq-question:hover .faq-icon {
  color: var(--text);
}

.faq-icon .icon-plus,
.faq-icon .icon-minus {
  position: absolute;
  top: 0; left: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.faq-icon .icon-minus {
  opacity: 0;
  transform: rotate(-90deg);
}

/* Estado abierto: el color no cambia, solo el icono de mas a menos. */
.faq-item.open .faq-question {
  color: var(--text);
}
.faq-item.open .faq-icon {
  color: var(--text);
}
.faq-item.open .icon-plus {
  opacity: 0;
  transform: rotate(90deg);
}
.faq-item.open .icon-minus {
  opacity: 1;
  transform: rotate(0deg);
}

.faq-answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              padding 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0 4px;
}
.faq-item.open .faq-answer {
  max-height: 300px;
  padding: 0 4px 22px;
}

.faq-answer p {
  font-size: 1rem;
  color: var(--color-text-soft);
  line-height: 1.6;
}

@media (max-width: 900px) {
  .faq-question {
    font-size: 1rem;
    line-height: 1.4;
  }

  .faq-icon {
     width: 24px;
     height: 24px;
  }

  .faq-icon svg {
    width: 24px;
    height: 24px;
  }

  .faq-head {
    margin-bottom: 1rem;
  }

}

/* Shared helpers for dropdowns, footer, newsletter and cookies */

::selection {
  background-color: var(--primary-color);
  color: var(--brand-primary-contrast);
}

.link {
  color: var(--text-color);
  text-decoration: underline;
  transition: color 0.3s ease;
  font-weight: 500;
}

.link:hover {
  color: var(--primary-color);
}

.btn-decline {
  color: var(--primary-color);
  background: var(--brand-primary-soft);
  font-family: "Roboto", sans-serif;
  padding: 10px 20px;
  border: none;
  border-radius: 250px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  white-space: nowrap;
}

.btn-circle {
  background: transparent;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  color: var(--text-color);
}

.btn-circle:hover {
  background: #0F0F0F;
}

.dropdown-content {
  margin: 0;
  display: none;
  opacity: 0;
  position: absolute;
  left: 0;
  right: auto;
  top: 0;
  z-index: 1002;
  padding: 10px;
  overflow-y: auto;
  overflow-x: hidden;
  text-align: left;
  list-style: none;
  background: var(--color-surface-dark);
  color: var(--text-color);
  border: 1px solid var(--color-line);
  border-radius: 16px;
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.24);
  min-width: 190px;
}

.dropdown-content:focus {
  outline: 0;
}

.dropdown-content li {
  clear: both;
  display: block;
  min-height: auto;
  text-align: left;
  font-weight: 500;
  list-style: none;
}

.dropdown-content li:focus {
  outline: none;
}

.dropdown-content li.divider {
  min-height: 0;
  height: 1px;
}

.dropdown-content li > a,
.dropdown-content li > span,
.dropdown-content > a {
  display: block;
  padding: 10px 11px;
  color: var(--text-color);
  text-decoration: none;
}

.dropdown-content li > span > label {
  top: 0;
  left: 0;
}

.container {

  position: relative;
  /* Mismo mecanismo que #cta: 20px de aire a cada lado hasta llegar al tope. */
  max-width: 1200px;
  width: calc(100% - 40px);
  height: 100%;
  margin: 0 auto;
}        

footer {
  position: relative;
  width: 100%;
  background: #181818;

  /* Sin el, la fila de redes arranca pegada al cambio de color. */
  padding-top: 40px;
}

 footer a {
  color: var(--text-color);
}

.footer-section span {
  font-weight: 500;
  line-height: 40px;
}

/* El segundo titulo de cada columna (Acerca de, Legal) pide mas aire con la
   lista de arriba que el <br> solo. Necesita inline-block porque un span
   suelto no toma margen vertical.

   Solo en escritorio: en el telefono las columnas ya caen una debajo de
   otra y separacion sobra. */
@media (min-width: 769px) {
  .footer-section > span:nth-of-type(2) {
    display: inline-block;
    margin-top: 18px;
  }
}

  

.footer-content {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 40px;
  margin: 40px 0 40px;
}

.footer-section ul {
  list-style: none;
  margin-top: 6px;

}

.footer-section ul li {
  list-style: none;
  padding: 6px 0;
}

.footer-section ul li a {
  color: var(--text-color);
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
  font-weight: 400;
  font-size: 0.95rem;
  opacity: 0.7;
}

.footer-section ul li a:hover {
    opacity: 1;
}

/* Los enlaces que abren una pestana nueva lo avisan con una flecha. Va por
   CSS y no en el HTML para que valga tambien para los que se agreguen
   despues, y se dibuja con mask para que tome el color del texto (y el
   opacity del enlace) sin tener que repetir el SVG. Las redes quedan
   afuera a proposito: ahi el icono ya es el enlace. */
.footer-section a[target="_blank"]::after,
.newsletter-suggestions a[target="_blank"]::after {
  content: "";
  display: inline-block;
  width: 1.3em;
  height: 1.3em;
  margin-left: 0.70em;
  vertical-align: -5px;
  background: currentColor;
  -webkit-mask: var(--icono-externo) center / contain no-repeat;
          mask: var(--icono-externo) center / contain no-repeat;
}

.footer-bottom {
  height: 100px;
  display: flex;
  align-items: center;

  /* Separa la ultima linea del resto del footer. Va en la regla base, no en
     la movil, asi vale en las dos resoluciones y en los dos idiomas. */
  border-top: 1px solid #292929;
}

.social-links {
  width: 100%;
  height: 100px;
  display: flex;
  gap: 20px;
  align-items: center;
}


/* Volver arriba: mismo circulo y misma flecha que el boton del newsletter, con
   la flecha girada para que apunte hacia arriba. El margen automatico lo empuja
   al extremo derecho de la fila de redes. */
.footer-arriba {
  margin-left: auto;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: var(--text-color);
  color: #000000;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.footer-arriba svg {
  width: 24px;
  height: 24px;
  transform: rotate(-90deg);
}

/* Copyright y procedencia van juntos, como un solo renglon separado por una
   barra. Antes la procedencia se iba al extremo derecho con margin-left:auto;
   ese lugar lo ocupa ahora el selector de idioma. Van como texto corrido y no
   como dos bloques: asi, cuando no entran, la linea corta donde corresponde. */
.footer-legal {
  font-size: 0.95rem;
  line-height: 1.4;
}

.footer-copy,
.footer-origen {
  display: inline;
  font-size: inherit;
}

.footer-copy { opacity: 0.7; }

/* La opacidad va en el texto y no en el contenedor: puesta afuera tambien
   apagaba la bandera, que tiene que verse con su color pleno. */
.footer-origen span { opacity: 0.7; }

.footer-origen::before {
  content: '|';
  margin: 0 8px;
  opacity: 0.5;
}

.footer-origen svg {
  display: inline-block;
  vertical-align: -2px;
  margin-left: 6px;
}

/* ── Selector de idioma ──────────────────────────────────────────────────
   Ocupa el extremo derecho de la ultima linea del footer. El menu se abre
   hacia arriba: esta al final de la pagina y hacia abajo no hay lugar. */
.footer-idioma {
  position: relative;
  margin-left: auto;
  flex: 0 0 auto;
}

.footer-idioma-boton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--text-color);
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--tran);
}

/* Mismo salto que el hover de los botones del nav, que van de #0F0F0F a
   #181818 (+9 por canal). No se puede reusar --color-surface-dark tal cual
   porque el footer YA tiene ese color de fondo y el hover quedaria invisible;
   el velo blanco da el mismo escalon sobre cualquier fondo. */
.footer-idioma-boton:hover,
.footer-idioma.abierto .footer-idioma-boton {
  background: rgba(255, 255, 255, 0.04);
}

.footer-idioma-globo {
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
  opacity: 0.7;
}

.footer-idioma-caret {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  opacity: 0.7;
  transition: transform var(--tran);

  /* El SVG apunta hacia arriba: en reposo se lo da vuelta para que marque
     abajo, y al abrir vuelve a su posicion original. */
  transform: rotate(180deg);
}

.footer-idioma.abierto .footer-idioma-caret {
  transform: rotate(0deg);
}

.footer-idioma-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  min-width: 100%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--color-bg);
  border-radius: 16px;
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.7);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 50;
}

.footer-idioma.abierto .footer-idioma-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.footer-idioma-opcion {
  display: block;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 0.9rem;
  white-space: nowrap;
  text-decoration: none;
  color: var(--text-color);
  opacity: 0.7;
  transition: background var(--tran), opacity var(--tran);
}

.footer-idioma-opcion:hover,
.footer-idioma-opcion:focus-visible {
  background: var(--color-surface-dark);
  opacity: 1;
}

/* La activa se marca con opacidad plena, no con color: el footer no tiene
   ningun acento y meter uno solo aca desentonaria. */
.footer-idioma-opcion.activa {
  opacity: 1;
  background: var(--color-surface-dark);
}
.social-links a {
 height: 24px;
}


@media (max-width: 768px) {
footer {
  padding: 40px 26px 0;
}

/* El contenedor ya no descuenta nada: el aire lo pone el relleno del footer. */
.container {
  width: 100%;
}


  .footer-content {              
    grid-template-columns: 1fr;
    margin: 15px 0 40px;
  }

  .footer-section {
    margin-bottom: 0px;
    margin-top: -20px;
  }

  .social-links {
    margin-bottom: 10px;
  }

  /* Sin boton de volver arriba: en una columna quedaria encimado con las redes,
     y el pulgar ya tiene el gesto del sistema para volver arriba. */
  .footer-arriba { display: none; }

  /* En una sola columna el selector no entra en la misma linea que el texto:
     baja debajo, alineado a la izquierda con el resto del footer. */
  .footer-bottom {
    display: block;
    height: auto;
    padding: 26px 0;
  }

  .footer-legal {
    font-size: 0.95rem;
    line-height: 2;
  }

  /* A todo el ancho: en una sola columna el boton suelto quedaba como un
     resto al costado, y asi lee como el control que es. */
  .footer-idioma {
    margin: 25px 0 0;
  }

  .footer-idioma-boton {
    width: 100%;
    justify-content: center;
  }

  .footer-idioma-menu {
    right: auto;
    left: 0;
  }

}

       .newsletter-container {
            width: 360px;
        }

        .newsletter-title {
            color: var(--text-color);
        }

        .newsletter-subtitle {
           margin-top: 10px;
            margin-bottom: 30px;
            font-size: 0.95rem;
  line-height: 1.6;
  opacity: 0.7;
        }

        .email-input-container {
            position: relative;
            margin-bottom: 20px;
        }

        .email-input {
            width: 83.333%;
            padding: 14px 70px 15px 20px;
            font-size: 1rem;
            border: 1px solid var(--linea);
            border-radius: 250px;
            outline: none;
            transition: all 0.3s ease;
            background: var(--bg);
            color: var(--text);
        }

        .email-input::placeholder {
            color: var(--text);
            opacity: 0.7;
        }

        .email-input:focus {
            border-color: var(--primary-color);
            background: var(--bg);
        }

        .submit-button {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            background: var(--text-color);
            border: none;
            border-radius: 50%;
            width: 48px;
            height: 48px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            color: #000000;
        }

        .submit-button svg {
            width: 24px;
            height: 24px;
        }

        .message {
            margin-top: 15px;
            padding: 10px;
            border-radius: 8px;
            font-size: 14px;
            opacity: 0;
            transition: all 0.3s ease;
        }

        .message.show {
            opacity: 1;
        }

        .message.success {
            background: #d4edda;
            color: var(--success-color);
            border: 1px solid #c3e6cb;
        }

        .message.error {
            background: #f8d7da;
            color: var(--error-color);
            border: 1px solid #f5c6cb;
        }

        .newsletter-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(5px) !important;
            z-index: 9999;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        .newsletter-modal.active {
            opacity: 1 !important;
            visibility: visible !important;
        }

        .newsletter-modal-content {
            background: var(--color-surface-dark);
            border-radius: 24px;
            padding: 40px;
            width: 100%;
            max-width: 460px;
            transform: translateY(-30px);
            transition: transform 0.3s ease;
        }

        .newsletter-modal.active .newsletter-modal-content {
            transform: translateY(0);
        }

        .newsletter-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
        }

        .newsletter-modal-title {
            font-size: 1.2rem;
            font-weight: 600;
            color: var(--text-color);
            margin-bottom: 0px;
            margin-top: 0px;
        }

        .modal-form-group {
            margin-bottom: 20px;
        }

        .modal-form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: var(--text-color);
            font-size: 16px;
        }

        .newsletter-modal-input {
            width: 100%;
            min-height: 52px;
            padding: 0 16px;
            font-size: 1rem;
            border: 1px solid #2a2a2a;
            border-radius: 14px;
            outline: none;
            transition: all 0.3s ease;
            background: #0f0f0f;
            color: var(--text-color);
        }

        .newsletter-modal-input::placeholder {

            color: var(--text);
            opacity: 0.7;
        }        

        .newsletter-modal-input:focus {
            border-color: var(--primary-color);
            background: var(--bg);
        }

        .modal-submit-btn {
            width: 100%;
            padding: 16px;
            background: var(--primary-color);
            color: #000000;
            border: none;
            border-radius: 250px;
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 5px;
        }

        .modal-submit-btn:hover {
            background: var(--primary-dark);
        }

        .newsletter-suggestions {
            color: var(--text-color);
            margin-top: 20px;
            text-align: center;
        }

        @media (max-width: 600px) {
            .newsletter-container {
              width: 100%;
                padding: 40px 0 0px;
                margin-bottom: 15px;
                border-bottom: 1px solid var(--linea);
            }
            
            .newsletter-modal-content {
                padding: 30px 20px;
            }
            
        }

/* ── FIGURAS DE FUNCIONES ──────────────────────────────────────────────────── */
/* Cada fila arma la misma escena: un bloque oscuro con un recorte de la captura
   adentro y una figura al costado que lo desborda. Una figura distinta por
   funcion (circulo, rombo, trebol...), de la familia del icono del asistente. */
.fn-escena {
  position: relative;
  isolation: isolate;
}

/* La media recortaba lo que se saliera de su caja y se comia la figura.
   El unico que recorta es el panel; la figura flota por encima. */
/* Alto fijo e igual en todas las filas: la captura entra ampliada, asi se ve
   un recorte del producto y no la pantalla entera, y se va por abajo como el
   telefono de la referencia. */
.fn-captura {
  position: relative;
  /* El alto sigue al ancho para que el recorte sea EL MISMO en toda
     resolucion. Con alto fijo, al angostarse la ventana la imagen se
     achicaba pero los 412px visibles seguian ahi, y se colaba una fila mas. */
  aspect-ratio: 424 / 420;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
}

/* Muestra un recorte concreto de la captura sin generar archivos nuevos:
     --fn-z  cuantas veces la caja mide la imagen (3 = se ve un tercio a lo ancho)
     --fn-x  donde arranca el recorte, en % del ancho de la imagen
     --fn-y  idem, en % del alto */
.fn-captura img {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% * var(--fn-z, 2.07));
  height: auto;
  max-width: none;
  display: block;
  transform: translate(calc(-1 * var(--fn-x, 25.8%)), calc(-1 * var(--fn-y, 12.9%)));
}

/* Region que se muestra en cada fila. */
.fn-captura--calendario img { --fn-z: 3.10; --fn-x: 5.9%;  --fn-y: 10.9%; }
.fn-captura--ventas     img { --fn-z: 3.10; --fn-x: 5.9%;  --fn-y: 10.5%; }
.fn-captura--galerias   img { --fn-z: 2.50; --fn-x: 5.9%;  --fn-y: 9.9%;  }
.fn-captura--video      img { --fn-z: 2.50; --fn-x: 5.9%;  --fn-y: 10.9%; }

/* La figura desborda el panel por el lado que mira al texto. */
.fn-figura {
  position: absolute;
  left: -58px;
  bottom: 72px;
  width: 152px;
  height: 152px;
  display: grid;
  place-items: center;
  z-index: 2;
}

.fn-figura-forma {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: var(--brand-primary);
}

/* Las otras tres dibujan de 0 a 200 en los dos ejes, asi que ocupan la misma
   caja sin compensar nada. El hexagono regular no puede llenar un cuadrado
   (su ancho es siempre el alto x 0.866), asi que se lo agranda un poco para
   emparejarlo sin deformarlo. */
.fn-figura-forma--hexagono { transform: scale(1.14); }


.fn-figura-icono {
  position: relative;
  width: 58px;
  height: 58px;
  fill: #0F0F0F;
}

@media (max-width: 900px) {
  .fn-figura {
    width: 104px;
    height: 104px;
    left: -8px;
    bottom: 48px;
  }
  .fn-figura-icono { width: 40px; height: 40px; }
}

/* ── RESPIRO EN MOBILE ─────────────────────────────────────────────────────── */
/* En escritorio cada seccion ocupa la ventana entera. En mobile eso rompe:
   la de preguntas frecuentes se desbordaba 252px por debajo, encimandose con
   el pie, y la de "quienes somos" dejaba 355px de aire muerto arriba y abajo.
   Aca las secciones fluyen con su contenido y el aire lo pone el padding. */
@media (max-width: 900px) {
  main > section:not(.hero):not(#cta):not(#funciones):not(#faq):not(#planes):not(.fn-pagina) {
    height: auto;
    min-height: 0;
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }
}

/* ── CARRUSEL DE PLANES ────────────────────────────────────────────────────── */
/* Portado tal cual del carrusel de la app (auth/es-ar/plans.php) para que la
   web y el producto muestren los planes con el mismo diseno. */
.carousel-wrapper {
  position: relative;
  width: 100%;
  /* Sin margen arriba: la separacion con el encabezado ya la pone el gap de
     .section-inner, igual que en funciones. */
  margin: 0 0 30px;
}

.carousel-header {
  display: flex;
  align-items: center;
  /* Los controles van solos desde que se saco el titulo del carrusel: sin
     esto space-between los deja pegados a la izquierda. */
  justify-content: flex-end;
  margin-bottom: 20px;
  padding: 0 15px;
}

.carousel-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.carousel-arrow {
  position: static;
  transform: none;
  background: #181818;
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s;
  color: #FEFEFE;
}

.carousel-arrow:hover { background: #313131; color: #FEFEFE; }

.carousel-arrow:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

.carousel-viewport {
  overflow: hidden;
  width: 100%;
}

.carousel-track {
  display: flex;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  margin: 0 -15px;
}

.carousel-slide {
  flex: 0 0 33.333%;
  width: 33.333%;
  padding: 4px 15px;
  box-sizing: border-box;
  user-select: none;
}

.carousel-slide .plan-card {
  width: 100%;
  height: 100%;
  margin: 0;
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
}

/* Variante de la franja con contenido a la izquierda. La regla base la deja en
   flex-end porque en el inicio solo lleva los controles; aca hay algo del otro
   lado, asi que cada uno se ancla a su extremo y la franja deja de leerse como
   un renglon vacio. Era el diseno original: el comentario de .carousel-header
   cuenta que ahi habia un titulo y se lo sacaron. */
.carousel-header-nota {
  justify-content: space-between;
}

/* El titulo de la franja, con los mismos valores que usa el carrusel de la
   app: chico, semibold y sin margen, para que quede a la altura de los
   botones y no compita con el h1 de la pagina. */
.carousel-header-nota .section-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: normal;
}

/* Los puntos inactivos venian en #181818 sobre un fondo #0F0F0F: a 8px eso es
   invisible, y el unico que se distinguia era el activo. Sin los otros no hay
   forma de saber cuantos planes faltan. Scopeado a /planes hasta que se decida
   pasarlo tambien al inicio. */
.site-page-inner .carousel-dot {
  background: #333333;
}

.site-page-inner .carousel-dot:hover {
  background: #4A4A4A;
}

.site-page-inner .carousel-dot.active {
  background: var(--brand-primary);
}

.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #181818;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background .2s, transform .2s, width .2s;
}

.carousel-dot.active {
  background: #D7E72C;
  width: 24px;
  border-radius: 4px;
}

@media (max-width: 600px) {
  .carousel-slide { flex: 0 0 100%; width: 100%; }
}

/* ── ADELANTO DE PRECIOS ───────────────────────────────────────────────────── */
/* Reemplaza al carrusel en el inicio: responde la pregunta del precio en dos
   renglones y manda a /planes.php, que es donde ocurre el registro. */
.planes-adelanto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  margin-top: 2.5rem;
}

.planes-desde {
  font-size: 1.05rem;
  color: var(--color-text-soft);
  text-align: center;
  margin: 0;
}

.planes-desde strong {
  font-weight: 700;
  color: var(--color-text);
}

.planes-desde span {
  margin: 0 0.4rem;
  opacity: 0.45;
}

@media (max-width: 600px) {
  .planes-adelanto { gap: 1.5rem; margin-top: 2rem; }
  .planes-desde { font-size: 0.95rem; }
}

/* ── PREGUNTAS FRECUENTES: ALTO Y RESPIRO ──────────────────────────────────── */
/* Estaba clavada a 100vh y eso la recortaba: a 1024x600 el contenido se salia
   24px por abajo, y al abrir una respuesta larga se sale en cualquier tamano.
   Con min-height crece cuando hace falta y el aire lo pone el padding. */


/* Alto automatico y relleno explicito, como el FAQ: clavada a 100vh la
   separacion con las secciones vecinas salia del centrado y cambiaba con el
   alto de la ventana. Asi las tres separaciones -- funciones a planes, planes
   al CTA y el CTA a las preguntas -- miden lo mismo en cualquier pantalla.
   Los 20px que faltan de cada lado los pone el margen de la tarjeta del CTA
   abajo, y el de funciones arriba. */
#planes {
  /* Calibrado contra la separacion CTA-preguntas, que es la referencia: 236px.
     Arriba y abajo no son iguales porque de cada lado se suma algo distinto
     -- 20px de funciones arriba, 20px del margen del CTA abajo, mas el propio
     interlineado de cada encabezado. */
  padding: 192px 0 210px;
}

/* Misma separacion que en funciones entre el encabezado y el contenido. */
#planes .section-inner {
  gap: 2.5rem;
}

/* En escritorio el titulo pide mas aire con el contenido que en el telefono,
   donde 2.5rem ya alcanza.

   Van separadas y no en una sola regla: estuvieron atadas mientras se buscaba
   que funciones quedara igual que planes, y despues cada una siguio su camino.
   Si vuelven a tener que coincidir, hay que mover los dos valores. */
@media (min-width: 901px) {
  .funciones-inner {
    gap: 4.5rem;
  }

  #planes .section-inner {
    gap: 3.5rem;
  }
}

/* El CTA no necesita el relleno lateral de .section-inner: su propia tarjeta ya
   trae el suyo. Lleva ID, asi que gana sobre la regla movil de .section-inner
   este donde este. */
#cta .section-inner {
  padding: 0;
}
/* No cambian el ancho -- todas las secciones estan en 1200 otra vez -- pero si
   les dan el aire lateral: .section-inner no trae padding propio, y sin esto el
   contenido toca el borde de la pantalla, en el escritorio entre 1200 y 1240 y
   en el telefono siempre. Mismo mecanismo que #cta. */
#faq .section-inner,
#planes .section-inner {
  width: calc(100% - 40px);
}
main > section#faq {
  height: auto;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 12rem;
  padding-bottom: 12rem;
}

@media (max-width: 900px) {
  main > section#faq {
    min-height: 0;
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

/* ── MAZO DE FUNCIONES ─────────────────────────────────────────────────────── */
/* Cada funcion es una tarjeta del alto de la ventana que se pega arriba y deja
   que la siguiente la cubra. Las de atras se achican y se oscurecen: ese valor
   lo calcula el script (--p, de 0 a 1) porque el CSS no sabe cuanto la tapo la
   de adelante. Cada tarjeta se pega unos pixeles mas abajo que la anterior,
   asi el borde superior de las de atras queda a la vista como un mazo. */
.fn-mazo {
  display: flex;
  flex-direction: column;
  gap: var(--hueco);

  --hueco: 6vh;

  /* Cuanto asoma cada tarjeta por encima de la siguiente. Un solo valor: de el
     salen el tope pegajoso, el alto y el corrimiento de la pila.

     El techo lo pone el contenido de la captura: dentro del panel, lo primero
     que se dibuja arranca 31px por debajo de su borde, y las tarjetas de atras
     van achicadas hasta 0.895, asi que en la mas profunda ese margen se reduce
     a unos 16px de pantalla. Con un paso mayor, por la franja que asoma se leen
     los titulos de las capturas. */
  --paso: 14px;
}


/* La primera tarjeta entra con el mismo fade que el resto de las secciones,
   pero solo en opacidad: el translateY de .fade-up la correria 24px, y el
   script mide justamente esta caja para calcular el apilado. */
.fn-tarjeta.fade-up { transform: none; }
.fn-tarjeta {
  position: sticky;

  /* Mismo tope para las cuatro, y de ahi el escalonado sale del transform. Con
     un tope distinto por tarjeta el sticky suelta antes a la que quedo mas
     abajo, y al seguir bajando la ultima se despega y sube por encima de las
     que siguen clavadas, deshaciendo la pila. Con el tope igual y el alto igual
     las cuatro se sueltan en el mismo punto y bajan juntas, solapadas.

     El tope deja lugar arriba para los escalones, que suben desde aca. */
  top: calc(var(--nav-h) + 1.5rem + (var(--total) - 1) * var(--paso));

  /* Al alto hay que descontarle la profundidad de la pila, si no la tarjeta de
     adelante se sale por debajo del pliegue y se le corta el borde redondeado
     de la imagen. */
  height: calc(100vh - var(--nav-h) - 5rem - (var(--total) - 1) * var(--paso));
  min-height: 520px;
}

.fn-tarjeta-cuerpo {
  height: 100%;
  background: #181818;
  border: 1px solid #181818;
  /* Un solo valor para la tarjeta y para la esquina de la captura: asi no
     pueden quedar con radios distintos. */
  --fn-radio: 36px;
  /* La imagen lleva su propio radio, mas suave que el de la tarjeta. */
  --fn-radio-img: 18px;
  border-radius: var(--fn-radio);
  overflow: hidden;
  display: grid;
  /* Texto angosto y fijo: la imagen se queda con todo el ancho sobrante, y
     cuanto mas ancha, mas alta se ve mostrandose entera. */
  grid-template-columns: 420px 1fr;
  align-items: center;
  gap: 7rem;
  /* Solo relleno a la izquierda: la captura llega al borde de arriba, al de
     abajo y al de la derecha de la tarjeta. */
  padding: 0 0 0 3.5rem;

  /* El achicado sale del centro de arriba para que el borde superior no se
     mueva: es lo que hace que se lea como un mazo y no como algo que encoge. */
  transform-origin: 50% 0;
  /* --d es la profundidad acumulada: cuantas tarjetas se le montaron encima,
     no solo la de adelante. Con eso cada escalon queda mas angosto y mas arriba
     que el anterior; usando --p todas las apiladas terminaban iguales y la pila
     se veia como un bloque parejo.

     El corrimiento vertical va aca y no en el `top`: el transform no participa
     del calculo del sticky, asi que las cuatro comparten tope y se sueltan
     juntas. Ademas el script mide `.fn-tarjeta`, que no lleva transform, y de
     ese modo la medicion no se realimenta con el propio movimiento. */
  transform: translateY(calc(-1 * var(--d, 0) * var(--paso)))
             scale(calc(1 - 0.035 * var(--d, 0)));

  /* Oscurecido muy leve por escalon. La tarjeta es rgb(24,24,24) y el fondo de
     la pagina rgb(15,15,15): oscurecer de mas la lleva al color del fondo y en
     vez de quedar atras desaparece. */
  filter: brightness(calc(1 - 0.04 * var(--d, 0)));

  /* Sombra hacia arriba: la proyecta esta tarjeta sobre la de atras al
     montarsele encima. Es lo que marca la juntura; sin ella las dos son del
     mismo #181818 y la pila se lee como un bloque unico.

     Entra apenas empieza el solape y crece con el. El max() solo se come el
     primer 10% del recorrido, para que la tarjeta que todavia viene bajando
     suelta no arrastre una mancha. La primera no lleva sombra nunca: no tapa a
     ninguna y el script le deja --c en 0. */
  box-shadow: 0 -10px 18px -10px
              rgba(0, 0, 0, calc(max(0, var(--c, 0) - 0.1) * 0.24));

  will-change: transform, filter;
}


/* La primera no lleva sombra nunca: no tiene ninguna tarjeta detras sobre la
   cual proyectarla. El script ya le deja --c en 0, pero dejarlo dicho tambien
   aca lo vuelve independiente de que el script llegue a correr -- entre otras
   cosas, requestAnimationFrame no se ejecuta en pestanas ocultas. */
.fn-tarjeta:first-child .fn-tarjeta-cuerpo {
  box-shadow: none;
}
.fn-tarjeta-texto {
  padding-bottom: 3.5rem;
}

/* El enlace de cada tarjeta usa .btn-primary tal cual, que ya es el boton
   oscuro del sitio. Solo se corrige el armado: la regla base lo declara
   display:flex y como hijo del bloque de texto se estiraria a todo el ancho.
   Mismo apano que en .contact-form .btn-primary. */
.fn-tarjeta-texto .btn-primary {
  display: inline-flex;
  width: auto;
  margin-top: 1.75rem;
}

/* La captura se ve ENTERA a lo ancho y queda pegada al borde de abajo de la
   tarjeta. Sin marco ni sombra. La columna apila figura + captura hacia abajo,
   asi la figura queda centrada en el aire que sobra arriba, sin recortarse. */
.fn-tarjeta-media {
  position: relative;
  align-self: stretch;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

/* El panel ocupa x 110..1899 en las cuatro capturas; el resto es cromo de la
   app -- barra lateral, buscador, boton Crear, campana, foto de perfil, boton
   de colapsar -- y se recorta.

   La captura llena todo el alto de la tarjeta. Como el panel es apaisado y el
   hueco es mas alto que ancho, la imagen se escala por el ALTO -- no por el
   ancho -- y lo que sobra se va por el costado derecho. Asi entra el panel
   entero de arriba abajo y se ven las primeras columnas.

   El recorte va al ras del panel por los cuatro lados: no queda a la vista
   nada del fondo #0f0f0f de la app. El clip-path es lo que lo hace posible --
   correr la imagen sola no alcanza, porque se dibuja encima del fondo de la
   caja.

   Los desplazamientos van en transform y no en top/left a proposito: el
   porcentaje del transform se mide contra la propia imagen, asi que no depende
   de cuanto mida la caja -- que ahora cambia con el alto de la ventana. */
.fn-tarjeta-media .fn-captura {
  position: relative;
  inset: auto;
  order: 2;
  flex: 0 0 auto;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  background: #0f0f0f;
  border: 0;
  border-radius: var(--fn-radio-img);
  overflow: hidden;
}

/* Solo en calendario: ahi la curva de la captura llega a rozar la de la
   tarjeta en la esquina de abajo a la izquierda. */
.fn-tarjeta:has(.fn-captura--calendario) .fn-captura {
  border-bottom-left-radius: 0;
}
.fn-tarjeta-media .fn-captura img {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: calc(100% * var(--fn-zh));
  max-width: none;
  transform: translate(calc(-1 * var(--fn-ox)), calc(-1 * var(--fn-oy)));
  display: block;
  clip-path: inset(var(--fn-c-arriba) var(--fn-c-der)
                   var(--fn-c-abajo) var(--fn-c-izq));
}

/* --fn-zh: cuanto mide la imagen entera respecto del alto de la caja.
   --fn-ox/--fn-oy: cuanto hay que correrla, en porcentaje de si misma.
   --fn-c-*: donde cortarla, tambien en porcentaje de si misma.
   Cambian con cada captura porque cambia el alto de origen y la fila donde
   empieza y termina el panel. --fn-ox/--fn-oy coinciden con --fn-c-izq y
   --fn-c-arriba justamente porque el recorte arranca en la esquina del panel,
   sin ninguna franja de por medio. */
.fn-tarjeta-media .fn-captura--ventas img,
.fn-tarjeta-media .fn-captura--calendario img {
  --fn-zh: 1.1135; --fn-ox: 5.888%; --fn-oy: 8.341%;
  --fn-c-arriba: 8.341%; --fn-c-der: 0.990%; --fn-c-abajo: 1.854%; --fn-c-izq: 5.888%;
}
.fn-tarjeta-media .fn-captura--galerias img {
  --fn-zh: 1.1040; --fn-ox: 5.904%; --fn-oy: 9.418%;
  --fn-c-arriba: 9.418%; --fn-c-der: 0.731%; --fn-c-abajo: 0%; --fn-c-izq: 5.904%;
}
.fn-tarjeta-media .fn-captura--video img {
  --fn-zh: 1.1346; --fn-ox: 5.888%; --fn-oy: 9.322%;
  --fn-c-arriba: 9.322%; --fn-c-der: 0.990%; --fn-c-abajo: 2.542%; --fn-c-izq: 5.888%;
}

/* Va arriba de la captura, centrada, en el espacio libre de la tarjeta. */
.fn-tarjeta-media .fn-figura {
  /* Ocultas por ahora. Se saca esta linea y vuelven a su lugar sobre la
     captura, con todo lo de abajo ya calculado. */
  display: none;
  /* relative, no static: el svg de adentro va con inset:0 y necesita medirse
     contra la figura. En static se estiraba a la columna entera. */
  position: relative;
  /* la regla base la posiciona con left/bottom para el diseño viejo de panel;
     en el mazo va en el flujo, asi que hay que anular esos desplazamientos. */
  inset: auto;
  order: 1;
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  margin: 0 0 2.5rem;
}

.fn-tarjeta-media .fn-figura-icono {
  width: 38px;
  height: 38px;
}

@media (max-width: 900px) {

  /* Va aca y no en el bloque mobile de mas arriba: la regla de escritorio de
     #planes esta despues de aquel y le ganaba por orden de aparicion. Son los
     mismos 132px que separan el CTA de las preguntas. */
  #planes { padding: 96px 0 114px; }

  /* En el telefono el carrusel se maneja arrastrando y los puntos de abajo ya
     dicen en cual estas, asi que la franja entera sobra: sin flechas y sin
     titulo, no queda nada que mostrar. */
  #planes .carousel-header { display: none; }

  /* El padding de .section-inner se anula aca y no en su regla movil, porque
     esa la comparte con #cta, que ya tiene el suyo propio. */
  #planes .section-inner,
  #faq .section-inner,
  .fn-pagina .section-inner {
    padding: 0;
  }

  /* Planes acompana a las tarjetas y al CTA, que son cajas con borde visible.
     Las preguntas y el footer son texto sobre el fondo y llevan un poco mas. */
  #planes .section-inner { width: calc(100% - 32px); }
  #faq .section-inner    { width: calc(100% - 40px); }
  .fn-pagina .section-inner { width: calc(100% - 40px); }
  .fn-mazo { gap: 4vh; }

  .fn-mazo { --paso: 10px; --hueco: 4vh; }

  .fn-tarjeta {
    top: calc(var(--nav-h) + 1rem + (var(--total) - 1) * var(--paso));

    /* Alto igual para las cuatro, y fijo: si cada una mide lo que mide su
       contenido, el sticky las suelta en momentos distintos y la de adelante se
       despega y sube por encima de las demas.

       Antes salia del alto de la ventana y daba 680, contra un contenido de
       465 a 537 segun el ancho. Esos 150 y pico de sobra caian justo entre el
       texto y la imagen, porque la imagen va anclada abajo. Los 560 cubren la
       tarjeta mas alta medida -- 537 a 320 de ancho -- y dejan el resto en un
       margen razonable. */
    height: 560px;
  }

  .fn-tarjeta-cuerpo {
    grid-template-columns: 1fr;

    /* Sin relleno ni separacion propios: la captura llega a los tres bordes de
       la tarjeta. El aire lateral que se pierde aca lo pone el texto, que es lo
       unico que lo necesita. */
    gap: 0;
    padding: 0;

    --fn-radio: 28px;
    --fn-radio-img: 18px;
  }

  /* Recibe el relleno que se le saco a la tarjeta. Abajo lleva menos: era la
     separacion con la imagen y quedaba demasiado suelta. */
  .fn-tarjeta-texto {
    max-width: none;
    padding: 2rem 1.5rem 1rem;
  }

  .fn-tarjeta-media {
    height: auto;
  }


  .fn-tarjeta-media .fn-figura {
    width: 68px;
    height: 68px;
    /* 6px arriba: el hexagono lleva scale(1.14) y se desborda de su caja */
    margin: 6px 0 1.5rem;
  }

  .fn-tarjeta-media .fn-figura-icono { width: 26px; height: 26px; }

  /* En mobile la captura se queda como estaba: se escala por el ANCHO, con el
     panel entero a la vista y cortado abajo contra el borde de la tarjeta. El
     recorte por alto es para la tarjeta apaisada del escritorio; en una columna
     angosta dejaria una tira de panel demasiado finita. */
  .fn-tarjeta-media .fn-captura {
    height: auto;
    aspect-ratio: var(--fn-rel);
  }
  .fn-tarjeta-media .fn-captura img {
    width: calc(100% * var(--fn-z));
    height: auto;
    top: calc(-1 * var(--fn-y));
    left: calc(-1 * var(--fn-x));
    transform: none;
    clip-path: inset(var(--fn-c-arriba) var(--fn-c-der) 0 var(--fn-c-izq));
  }

  /* Aca --fn-x y --fn-y van en porcentaje de la caja, no de la imagen: se
     aplican con top/left y no con transform. */
  .fn-tarjeta-media .fn-captura--ventas,
  .fn-tarjeta-media .fn-captura--calendario { --fn-rel: 1787 / 969; }
  .fn-tarjeta-media .fn-captura--galerias   { --fn-rel: 1787 / 856; }
  .fn-tarjeta-media .fn-captura--video      { --fn-rel: 1787 / 832; }

  .fn-tarjeta-media .fn-captura--ventas img,
  .fn-tarjeta-media .fn-captura--calendario img { --fn-z: 1.0739; --fn-x: 6.323%; --fn-y: 9.288%; }
  .fn-tarjeta-media .fn-captura--galerias img   { --fn-z: 1.0711; --fn-x: 6.323%; --fn-y: 10.397%; }
  .fn-tarjeta-media .fn-captura--video img      { --fn-z: 1.0739; --fn-x: 6.323%; --fn-y: 10.577%; }
}

/* ── PAGINA DE FUNCION ──────────────────────────────────────────────────────── */
/* Una pagina por funcion (oportunidades.php y las que siguen). Reusa el
   encabezado, el CTA y las preguntas del inicio; esto es solo lo propio. */

.fn-pagina {
  padding: 8rem 0;
}

#fn-intro {
  padding-top: calc(var(--nav-h) + 5rem);
}

.fn-migas {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.fn-migas a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--tran);
}

.fn-migas a:hover { color: var(--text); }

.fn-bajada {
  max-width: 640px;
  margin: 0 0.9rem 2.5rem;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-text-soft);
}

.fn-bajada strong { color: var(--text); font-weight: 600; }

.fn-acciones {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.25rem;
  margin: 0 0.9rem 4rem;
}

.fn-nota {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.fn-captura-grande {
  margin: 0;
  border-radius: 24px;
  overflow: hidden;
  background: #0f0f0f;
}

.fn-captura-grande img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
}

.fn-captura-grande figcaption {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.fn-grilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem;
}

.fn-bloque {
  background: #181818;
  border: 1px solid var(--linea);
  border-radius: 24px;
  padding: 2rem;
}

.fn-bloque h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: var(--text);
}

.fn-bloque p {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--color-text-soft);
}

.fn-pasos {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  margin-top: 2.5rem;
  padding: 0;
  counter-reset: paso;
}

.fn-paso {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.fn-paso-numero {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-primary-soft);
  color: var(--brand-primary);
  font-weight: 700;
}

.fn-paso h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--text);
}

.fn-paso p {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--color-text-soft);
}

@media (max-width: 900px) {
  .fn-pagina { padding: 4.5rem 0; }
  #fn-intro  { padding-top: calc(var(--nav-h) + 2.5rem); }

  .fn-bajada,
  .fn-acciones { margin-left: 0; margin-right: 0; }

  .fn-captura-grande,
  .fn-captura-grande img { border-radius: 16px; }

  .fn-bloque { padding: 1.5rem; }
}

/* ── CTA: tarjeta de cierre ──────────────────────────────────────────────────── */
/* Estaba en el <style> de index.php. Se mueve aca porque ahora las paginas de
   cada funcion tambien cierran con esta tarjeta. */

/* ── CTA (bloque de cierre antes del FAQ) ─────────────────────────────────── */
/* Tarjeta de cierre: el alto se ata al de la ventana para que las cuatro
   esquinas redondeadas entren en pantalla a la vez. Se descuenta tambien la
   barra fija: reaparece al scrollear hacia arriba y taparia el borde
   superior de la tarjeta. */
#cta {
  background: var(--brand-primary);
  border-radius: 36px;
  /* Mismo ancho maximo que el resto de las secciones. El `width` explicito es
     necesario: sin el, al ser item flex del body se estiraria y `auto` no
     centraria. Debajo de 1240px deja los 20px de aire a los costados. */
  width: calc(100% - 40px);
  max-width: 1200px;
  margin: 20px auto;
  min-height: calc(100vh - var(--nav-h) - 140px);
  display: flex;
  align-items: center;
  padding: 4rem 1.5rem;
}

/* En el inicio la tarjeta del CTA es hija directa de <main> y se descuenta
   sola los 20px de aire lateral. En /planes vive adentro de .site-page-inner,
   que ya esta acotado a 1200px: sin esto quedaria 40px mas angosta que las
   tarjetas de planes de arriba y se notaria el escalon. */
.site-page-inner > #cta {
  width: 100%;
  /* Los 20px que trae del inicio dejaban la tarjeta pegada al carrusel. Son
     los mismos 100px que separan al FAQ, asi que los tres bloques respiran
     igual. */
  margin: 160px 0 20px;
}

@media (max-width: 900px) {
  /* Los 160px de escritorio en una pantalla de 812 de alto se comen media
     ventana en blanco. */
  .site-page-inner > #cta {
    margin-top: 90px;
  }

  #cta + .faq-contacto {
    margin-top: 90px;
  }
}

#cta .cta-inner {
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
  text-align: center;
}

/* El logo queda reducido a una insignia: circulo negro con el simbolo en
   blanco. El ancho fijo es lo que permite centrarlo con `margin: auto`. */
#cta .cta-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  background: #000000;
  border-radius: 999px;
  color: #FFFFFF;
  margin: 0 auto 2.5rem;
}

#cta .cta-logo svg {
  width: 48px;
  height: 48px;
}

/* Misma tipografia que el h1 del hero: si solo igualara el tamano, el
   interlineado de 1.4 del titulo de seccion lo dejaria muy suelto a 4rem. */
#cta .section-title {
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: #000000;
  margin-bottom: 3rem;
}

/* El boton invierte los colores del primario: sobre el fondo lima va negro,
   con el texto y la flecha en blanco. */
#cta .btn-hero-primary {
  background: #000000;
  color: #FFFFFF;
}

/* Pantallas bajas: aca el alto lo manda el contenido mas el padding, no el
   `min-height`. Sin recortarlo, la tarjeta mas sus margenes no entra debajo
   de la barra fija y se le corta el borde superior. */
@media (max-height: 700px) {
  #cta {
    padding: 2.5rem 1.5rem;
  }

  #cta .cta-logo {
    margin-bottom: 1.5rem;
  }

  #cta .section-title {
    margin-bottom: 1.75rem;
  }
}

/* El fondo no cambia en hover: sin esta regla heredaria el lima del boton
   base y desapareceria contra la seccion. */
#cta .btn-hero-primary:hover {
  background: #000000;
}

@media (max-width: 768px) {
  #cta {
    /* Solo el ancho: el margen sigue en 12 porque tambien es el vertical, y ese
       entra en la separacion con planes y con las preguntas. */
    width: calc(100% - 32px);
    margin: 12px auto;
    min-height: calc(100vh - var(--nav-h) - 64px);
    padding: 3rem 1.2rem;
  }

  /* A este ancho el corte forzado deja "caos." colgado solo; se anula y se
     deja que el navegador reparta las lineas de forma pareja. */
  #cta .section-title br {
    display: none;
  }

  #cta .section-title {
    /* El minimo del clamp baja de 2.4 a 1.8rem: en pantallas angostas el
       titulo se comia la tarjeta entera. */
    font-size: clamp(1.8rem, 5vw, 4rem);
    margin-bottom: 2rem;
    text-wrap: balance;
  }

  #cta .cta-logo {
    margin: 0 auto 1.75rem;
  }
}

.fn-etapas {
  list-style: none;
  display: grid;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
}

.fn-etapa {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  background: #181818;
  border: 1px solid var(--linea);
  border-radius: 24px;
  padding: 2rem;
}

.fn-etapa-numero {
  flex: 0 0 auto;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--brand-primary);
  /* Ancho fijo para que los textos arranquen todos en la misma columna. */
  width: 44px;
}

.fn-etapa h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: var(--text);
}

.fn-etapa p {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--color-text-soft);
}

/* Los bloques cortos entran de a tres; los largos, de a dos. */
.fn-grilla--compacta {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.fn-bajada--cierre {
  margin-top: 3rem;
  margin-bottom: 0;
}

.fn-bajada a {
  color: var(--brand-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 900px) {
  .fn-etapa {
    padding: 1.5rem;
    gap: 1rem;
  }

  .fn-etapa-numero { width: 34px; font-size: 1.25rem; }
}

/* Bloque de dos columnas: el argumento a la izquierda y el recorte que lo
   prueba a la derecha. Se usa para lo que necesita ver la pantalla real. */
.fn-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 5rem;
  background: #181818;
  border: 1px solid var(--linea);
  border-radius: 36px;
  padding: 3.5rem;
}

.fn-duo-texto .section-title { margin-bottom: 1.25rem; }

.fn-duo-texto p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text-soft);
}

.fn-marcas {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.fn-marcas li {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--color-text-soft);
  padding-left: 1.1rem;
  position: relative;
}

/* El punto usa el verde de marca, que es el mismo que la barra de progreso de
   la captura de al lado: el ojo asocia una cosa con la otra. */
.fn-marcas li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-primary);
}

.fn-marcas strong { color: var(--text); font-weight: 600; }

.fn-remate {
  font-size: 0.95rem !important;
  padding-top: 1.25rem;
  border-top: 1px solid var(--linea);
}

.fn-duo-media {
  margin: 0;
  display: flex;
  justify-content: center;
}

/* La captura se muestra al doble de su tamano de origen: es un recorte chico y
   a escala 1 se perderia el detalle, que es justamente lo que hay que leer. */
.fn-duo-media img {
  width: 100%;
  max-width: 452px;
  height: auto;
  display: block;
  border-radius: 16px;
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.8);
}

/* Tira horizontal: un recorte ancho y bajo que funciona como evidencia. */
.fn-tira {
  margin: 2.5rem 0 0;
  border-radius: 16px;
  overflow: hidden;
  background: #0f0f0f;
}

.fn-tira img {
  width: 100%;
  height: auto;
  display: block;
}

.fn-tira figcaption {
  margin-top: 0.9rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.fn-tira--alta { margin-bottom: 2.5rem; }

.fn-bloque-icono {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 1.25rem;
  border-radius: 12px;
  background: var(--brand-primary-soft);
  color: var(--brand-primary);
}

.fn-bloque-icono svg { width: 22px; height: 22px; }

/* Listas de termino y definicion: mas compactas que las tarjetas, para lo que
   es enumeracion y no argumento. */
.fn-definiciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.75rem 2.5rem;
  margin: 0;
}

.fn-definiciones--dos { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.fn-definiciones dt {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.4rem;
}

.fn-definiciones dd {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text-soft);
}

@media (max-width: 900px) {
  .fn-duo {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding: 2rem;
    border-radius: 24px;
  }

  /* Primero la captura y despues el texto: en una columna, la prueba entra por
     el ojo antes que el argumento. */
  .fn-duo-media { order: -1; }

  /* La tira de etapas es demasiado ancha para un telefono: se desplaza a lo
     ancho en vez de encogerse hasta volverse ilegible. */
  .fn-tira {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .fn-tira::-webkit-scrollbar { width: 0; height: 0; }

  .fn-tira img {
    width: auto;
    max-width: none;
    height: 44px;
  }

  .fn-tira--alta img { height: 76px; }
}

/* ── ESTADO DEL SERVICIO ────────────────────────────────────────────────────── */
/* Tres estados y un solo juego de colores. El color nunca viaja solo: siempre
   va con una etiqueta escrita, para quien no distingue verde de rojo. */
.est-ok    { --est-color: #4ADE80; }
.est-aviso { --est-color: #F5C244; }
.est-mal   { --est-color: #F87171; }

.est-faro {
  display: inline-block;
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--est-color, var(--color-text-muted));
  /* El halo lo separa del fondo oscuro sin necesidad de un borde. */
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--est-color, #888) 18%, transparent);
}

.est-resumen {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin: 0 0 2.5rem;
  padding: 1.75rem 2rem;
  background: #181818;
  border: 1px solid var(--linea);
  border-left: 3px solid var(--est-color);
  border-radius: 24px;
}

.est-resumen-titulo {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.25rem;
}

.est-resumen-detalle {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text-soft);
}

.est-actualizado {
  margin-left: auto;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.est-lista {
  display: grid;
  gap: 0.75rem;
}

.est-fila {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem 2rem;
  background: #181818;
  border: 1px solid var(--linea);
  border-radius: 20px;
}

.est-icono {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text-soft);
}

.est-icono svg { width: 22px; height: 22px; }

.est-fila-texto { flex: 1 1 auto; min-width: 0; }

.est-fila-texto h2 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.25rem;
}

.est-fila-texto p {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-text-soft);
}

.est-pastilla {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 99px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--est-color);
  background: color-mix(in srgb, var(--est-color) 12%, transparent);
}

.est-historial {
  list-style: none;
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
}

.est-incidente {
  padding: 1.75rem 2rem;
  background: #181818;
  border: 1px solid var(--linea);
  border-left: 3px solid var(--est-color);
  border-radius: 20px;
}

.est-incidente-cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.est-incidente h3 { font-size: 1.05rem; font-weight: 700; color: var(--text); }

.est-fecha { font-size: 0.85rem; color: var(--color-text-muted); white-space: nowrap; }

.est-incidente-servicios {
  font-size: 0.85rem;
  color: var(--est-color);
  margin-bottom: 0.75rem;
}

.est-incidente p { font-size: 0.95rem; line-height: 1.65; color: var(--color-text-soft); }

/* En la leyenda el faro va en linea con el termino. */
.fn-definiciones dt .est-faro { margin-right: 8px; vertical-align: 1px; }

@media (max-width: 900px) {
  .est-resumen {
    padding: 1.5rem;
    gap: 1rem;
  }

  /* La fecha pasa a renglon propio: al costado obligaba a partir el titulo. */
  .est-actualizado { margin-left: 0; flex-basis: 100%; }

  .est-fila {
    flex-wrap: wrap;
    padding: 1.5rem;
    gap: 1rem;
  }

  /* La pastilla baja debajo del texto y se alinea con el, no con el icono. */
  .est-fila-texto { flex-basis: calc(100% - 60px); }
  .est-pastilla { margin-left: 60px; }

  .est-incidente { padding: 1.5rem; }
}