/* =================== BASE =================== */
.navbar-brand img { height: 50px; }

:root {
  --text: #111;
  --nav-h: 64px;

  --turboyellow: #F9C114;
  --turboblack: #1b1b1a;
  --turbodarkblue: #000D2A;
  --turbomoredarkblue: #000a20;
  --turbowhite: #ffffff;
  --turbored: #BF0811;
  --turboredb: #ff2133;
  --turboblue: #376282;
  --turboblueb: #4b85b0;
  --turboorange: #D15D1E;
  --turboorangeb: #ff7124;
  --turbogreen: #358E7D;
  --turbogreenb: #3fa894;
}

a { text-decoration: none !important; }

.mailcontact {
  color: var(--turboblack) !important;
  font-size: 22px !important;
  line-height: 24px !important;
}

.mailfooter {
  color: var(--turbowhite) !important;
  font-size: 22px !important;
  line-height: 24px !important;
}

/* Paleta de colores */
.turboyellow { background-color: var(--turboyellow) !important; }
.tturboyellow { color: var(--turboyellow) !important; }

.turboblack { background-color: var(--turboblack) !important; }
.turboblack .table,
.turboblack .table thead th,
.turboblack .table tbody th,
.turboblack .table tbody td {
  background: transparent;
  color: var(--turbowhite);
}
.turboblack .table > :not(caption) > * > * { border-color: rgba(0,0,0,.15); margin: 10px; }
.turboblack .table td:nth-child(2),
.turboblack .table td:nth-child(3),
.turboblack .table td:nth-child(4) {
  text-align: center;
  color: var(--turbowhite);
  font-weight: bold;
}

.turbored { background-color: var(--turbored); }
.tturbored { color: var(--turbored); }
.tturboredb { color: var(--turboredb); }

.turboblue { background-color: var(--turboblue); }
.tturboblueb { color: var(--turboblueb) !important; }

.turbodarkblue { background-color: var(--turbodarkblue) !important; }
.turbomoredarkblue { background-color: var(--turbomoredarkblue) !important; }

.tturbodarkblue { color: var(--turbodarkblue) !important; }

.tturbowhite { color: var(--turbowhite) !important; }

.turboorange { background-color: var(--turboorange); }
.tturboorangeb { color: var(--turboorangeb); }

.turbogreen { background-color: var(--turbogreen); }
.tturbogreenb { color: var(--turbogreenb) !important; }

.tabladescarga { margin: 10px; }

/* Tipografía global */
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  font-family: "Play", sans-serif;
  padding-top: var(--nav-h);
  overflow-x: hidden;
}

h2 { font-weight: 900; letter-spacing: .2px; font-size: 32px; }
h3 { font-weight: 900; letter-spacing: .2px; font-size: 22px; }
p  { font-weight: 700; letter-spacing: .2px; font-size: 16px; opacity: .8; line-height:18px; }
.col-text { color: var(--turboblack); }

/* Navbar */
.navbar {
  height: var(--nav-h);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  background: var(--turbowhite);
  z-index: 1050;
}
.navbar .nav-link { font-weight: 800; }
.navbar .nav-link:hover { opacity: .8; }

/* Hero */
.title { font-weight: 900; font-size: 28px; color: var(--turbowhite); padding-left: 100px; padding-bottom: 10px; }
.sub { font-weight: 800; color: var(--turboyellow); font-size: 21px; padding-left: 100px; padding-bottom: 10px; }
.logo-wrap { display: flex; justify-content: center; align-items: center; z-index: 1; }
.logo-wrap svg { display: block; width: 100%; max-width: clamp(340px,60vmin,820px); height: auto; }
.sleft { padding-right: 100px; }
.sright { padding-left: 100px; }

/* Features */
.feature-list { z-index: 2; }
.feature-list .list-group-item {
  display: flex; align-items: start; justify-content: start; text-align: left;
  width: 100%; background: transparent; color: var(--turbowhite);
  font-weight: 800; font-size: 18px; line-height: .60;
  padding-left: 100px; border: 0;
}

/* Secciones */
section.screen {
  min-height: calc(100vh - var(--nav-h));
  scroll-margin-top: calc(var(--nav-h) + 0px);
  display: flex; align-items: center;
}
@supports (height:100svh) { section.screen { min-height: calc(100svh - var(--nav-h)); } }
@supports (-webkit-touch-callout:none) { section.screen { min-height: -webkit-fill-available; } }
section.screen > .container { min-height: inherit; display: flex; align-items: center; justify-content: center; }

.sec {
  color: var(--turbowhite);
  position: relative; isolation: isolate; overflow: hidden;
  --textbackcolor: var(--turbodarkblue);
  --imagebackcolor: var(--turbodarkblue);
  background: var(--imagebackcolor);
}
.sec > * { position: relative; z-index: 1; }

/* Paleta desktop */
#inicio { --textbackcolor: var(--turbodarkblue); --imagebackcolor: var(--turboyellow); }
#facuracion-para-autonomos { --textbackcolor: var(--turbowhite); --imagebackcolor: var(--turbored); }
#software-facil-facturacion-autonomos { --textbackcolor: var(--turbowhite); --imagebackcolor: var(--turboblue); }
#software-facturacion-inmediata { --textbackcolor: var(--turbowhite); --imagebackcolor: var(--turboorange); }
#autonomos-y-pequenas-empresas { --textbackcolor: var(--turbowhite); --imagebackcolor: var(--turbogreen); }
#seguridad { --textbackcolor: var(--turbowhite); --imagebackcolor: var(--turboblue); }
#verifactu { --textbackcolor: var(--turbowhite); --imagebackcolor: var(--turbored); }
#versiones-turbofactu { --textbackcolor: var(--turbowhite); --imagebackcolor: var(--turboblue); }
#turbofactu-sos { --textbackcolor: var(--turbowhite); --imagebackcolor: var(--turboyellow); }
#precios { --textbackcolor: var(--turbowhite); --imagebackcolor: var(--turbogreen); }
#descargas { --textbackcolor: var(--turbowhite); --imagebackcolor: var(--turbored); }
#turbofactory { --textbackcolor: var(--turbowhite); --imagebackcolor: var(--turboblack); }
#contacto { --textbackcolor: var(--turbowhite); --imagebackcolor: var(--turboorange); }

/* Diagonales desktop */
@media (min-width:992px) {
  .sec::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; --cut:50%; }
  .sec:nth-of-type(even)::before {
    --angle:70deg;
    background:linear-gradient(var(--angle),var(--textbackcolor) 0,var(--textbackcolor) var(--cut),var(--imagebackcolor) var(--cut),var(--imagebackcolor) 100%);
  }
  .sec:nth-of-type(odd)::before {
    --angle:-70deg;
    background:linear-gradient(var(--angle),var(--textbackcolor) 0,var(--textbackcolor) var(--cut),var(--imagebackcolor) var(--cut),var(--imagebackcolor) 100%);
  }
}


/* Animaciones entrada */
.sec:not(#inicio) .col-image img {
  opacity: 0;
  transition: opacity .8s ease-out, transform .8s ease-out;
  /* will-change quitado aquí para evitar sobrecarga */
}

.sec:not(#inicio) .row:not(.simage) .col-text > * { 
  transform: translateX(-100px); 
}
.sec:not(#inicio) .row:not(.simage) .col-image img { 
  transform: translateX(100px); 
}
.sec:not(#inicio) .row.simage .col-text > * { 
  transform: translateX(100px); 
}
.sec:not(#inicio) .row.simage .col-image img { 
  transform: translateX(-100px); 
}

/* Cuando el bloque entra en vista */
.sec.in-view .col-text > *,
.sec.in-view .logo-wrap svg,
.sec.in-view .col-image img { 
  opacity: 1 !important; 
  transform: translateX(0) !important; 
  will-change: transform, opacity; /* Se aplica solo aquí */
}

@media (max-width: 991.98px) {
  .sec:not(#inicio) .row:not(.simage) .col-text > *,
  .sec:not(#inicio) .row:not(.simage) .col-image img,
  .sec:not(#inicio) .row.simage .col-text > *,
  .sec:not(#inicio) .row.simage .col-image img {
    transform: translateY(20px);
  }
}



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

/* Navbar desktop */
@media (min-width:992px) {
  .navbar .nav-link { color: var(--turbodarkblue) !important; opacity:1 !important; }
  .navbar .nav-link:hover { color:#0b1a4a !important; }
}

/* =================== RESPONSIVE =================== */

/* Móviles y tablets */
@media (max-width:1024px) {
  section.screen { min-height:auto !important; padding:0 !important; }
  section.screen > .container { min-height:auto !important; display:block !important; }
  .sec::before { content:none !important; }
  .sec { background:none !important; margin:0; border:0; }
  .sec + .sec { margin-top:-1px; }
  .sec .container { max-width:100% !important; padding-left:0 !important; padding-right:0 !important; }
  .sec .row { --bs-gutter-x:0; --bs-gutter-y:0; margin-left:0 !important; margin-right:0 !important; }
  .sec .row > .col-text { padding:24px 20px !important; }
  .sec .col-text { background:var(--textbackcolor); color: var(--turboblack); }
  .sec .col-image { background:var(--imagebackcolor); }
  .sec.split .logo-wrap { position:static !important; margin-top:20px; }
  .sec.split .logo-wrap svg { margin:0 auto; max-width:420px; width:100%; }
  #inicio { background:var(--imagebackcolor) !important; }
  #inicio .col-text { background:var(--textbackcolor) !important; }
  #inicio .logo-wrap { background:var(--imagebackcolor) !important; }
  .sec .col-image img,
  .sec .col-image svg,
  .sec .logo-wrap svg { max-width:320px; width:70%; margin:0 auto; display:block; }
  .navbar-brand img { height:40px; }
  .sleft { padding-right:16px !important; }
  .sright { padding-left:16px !important; }
  .title,.sub,.feature-list .list-group-item { padding-left:0 !important; text-align:left; }
}

/* XS */
@media (max-width:576px) {
  h1 { font-size:22px !important; }
  h2,h3 { font-size:21px !important; }
  p { font-size:16px !important; }
  .feature-list .list-group-item { font-size:16px !important; line-height:20px; }
}

/* iPad retrato */
@media (orientation:portrait) and (min-width:577px) and (max-width:1024px) {
  #inicio .logo-wrap svg { max-width:clamp(280px,40vmin,520px); }
  h1 { font-size:28px !important; }
  h2,h3 { font-size:21px !important; }
  p { font-size:16px !important; }
}

/* Headings numerados */
:root {
  --tf-square:clamp(52px,6vw,74px);
  --tf-gap:clamp(10px,1.4vw,18px);
  --tf-top:clamp(24px,6vw,56px);
  --tf-edge-pad:12px;
}
.heading-flag {
  position:absolute; top:var(--tf-top); left:0;
  display:flex; align-items:center; gap:var(--tf-gap); z-index:2;
}
.sec.stripe-right .heading-flag { left:auto; right:0; flex-direction:row-reverse; }
.heading-flag h2 { margin:0; line-height:1.1; color:var(--turboblack); }
.heading-flag .heading-num {
  width:var(--tf-square); height:var(--tf-square);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--turbowhite); font-weight:700; font-size:clamp(1.15rem,2.1vw,1.9rem);
}

/* Heading móvil */
@media (max-width:991.98px) {
  .heading-flag { display:none !important; }
  .heading-mobile {
    display:flex !important; align-items:center; gap:10px;
    margin:10px 0 12px 0; padding-top:10px;
  }
  .heading-mobile .heading-num {
    width:40px; height:40px; color:var(--turbowhite);
    display:inline-flex; align-items:center; justify-content:center;
    font-weight:700; font-size:1rem;
  }
  .heading-mobile h2 {
    margin:0; line-height:1.15; font-size:clamp(1.25rem,6vw,1.6rem);
    color:var(--turboblack);
  }
}

/* Botones */
.btn-turbo {
  background-color:#000C29; border-color:#000C29; color:var(--turbowhite); font-weight:700;
}
.btn-turbo:hover, .btn-turbo:focus {
  background-color:var(--turboyellow); border-color:var(--turboyellow); color:var(--turbodark);
}
.btn-turbo:active { background-color:var(--turboyellow); border-color:var(--turboyellow); }

.btn-turboinverse {
  background-color:#fff; border-color:var(--turbowhite); color:var(--turboblack); font-weight:700;
}
.btn-turboinverse:hover, .btn-turboinverse:focus {
  background-color:var(--turboyellow); border-color:var(--turboblack); color:var(--turboblack);
}
.btn-turboinverse:active { background-color:var(--turboyellow); border-color:var(--turboyellow); }

@media (max-width: 991.98px) {
  .offcanvas {
    background-color: rgba(0, 13, 42, 0.9) !important;
    color: #fff;
  }
  .offcanvas-header {
    border-bottom: 1px solid rgba(255,255,255,0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
  }
  .offcanvas-header .toggler-logo { height: 40px; }
  .offcanvas .btn-close { filter: invert(1); opacity: 1; }
  .offcanvas .nav-link { color: #fff !important; font-weight: 600; padding: 0.5rem 0; }
  .offcanvas .nav-link:hover { color: var(--turboyellow) !important; }
  .navbar-toggler { border: none; }
  .navbar-toggler-icon { filter: invert(1); }
}

/* iPad en apaisado (todas las generaciones) */
@media (orientation: landscape) and (min-width: 768px) and (max-width: 1366px) {
  h2 { font-size: 22px !important; }
  h3 { font-size: 14px !important; }
  h4 { font-size: 14px !important; }
  li { font-size: 14px !important; }
  p  { font-size: 13px !important; line-height: 14px !important; }
  .col-text { color: var(--turboblack); }
}

/* ===== Reviews ===== */
.review-container { padding-top: 100px; padding-bottom: 100px; }
.review-block{ background-color:#FAFAFA; border:1px solid #EFEFEF; padding:15px; border-radius:3px; margin-bottom:15px; }
.review-block-web hr { border:1px solid #938d86; }
.review-block-web { padding:15px; border-radius:3px; margin-bottom:15px; text-align: left !important; }
.review-block-date{ font-size:12px; padding-bottom: 10px; }
.review-block-rate{ font-size:33px; margin-bottom:15px; }
.review-block-web { font-size:13px; margin-bottom:15px; }
.review-star-active { color: #ffc107 !important; font-size: 45px; }
.review-star-inactive { color: #938d86 !important; font-size: 45px; }
.review-block-page{ font-size:15px; font-weight:bolder; margin-bottom:6px; }
.review-block-user{ font-size:15px; font-weight:bolder; margin-bottom:6px; }
.review-block-description{ font-size:13px; margin-bottom:6px; }
.review-circle {
  display: block;
  width: 70px; height: 70px; border-radius: 50%;
  padding: 0; font-size: 35px; text-transform: uppercase;
  font-weight: bolder; line-height: 70px; text-align: center; margin-bottom: 8px;
}
.review-circle-web {
  display: block; background-color: #358E7D !important; color: #fff;
  width: 70px; height: 70px; border-radius: 50%;
  padding: 0; font-size: 35px; text-transform: uppercase;
  font-weight: bolder; line-height: 70px; text-align: center; margin-bottom: 8px;
}

/* ===== Accesibilidad sin cambiar la paleta (AÑADIDO) ===== */

/* 1) Contraste en secciones de fondo oscuro */
.turbodarkblue,
.turbomoredarkblue,
.turboblack { color: var(--turbowhite) !important; }

.turbodarkblue a,
.turbomoredarkblue a,
.turboblack a { color: var(--turbowhite) !important; text-decoration: underline; }

/* Texto de la columna de #inicio (su fondo es oscuro) */
#inicio .col-text { color: var(--turbowhite) !important; }
#inicio .col-text p,
#inicio .col-text li,
#inicio .col-text h1,
#inicio .col-text h2,
#inicio .col-text h3 { color: var(--turbowhite) !important; }

/* Evita colores brand poco legibles sobre fondos oscuros */
.turbodarkblue .tturboblueb,
.turbodarkblue .tturbogreenb,
.turbodarkblue .tturboorangeb,
.turbodarkblue .tturbored,
.turboblack .tturboblueb,
.turboblack .tturbogreenb,
.turboblack .tturboorangeb,
.turboblack .tturbored { color: var(--turbowhite) !important; }

/* Tablas en bloques oscuros */
.turboblack .table > :not(caption) > * > * { border-color: rgba(255,255,255,.25) !important; }
.turbodarkblue .table,
.turbodarkblue .table thead th,
.turbodarkblue .table tbody th,
.turbodarkblue .table tbody td { color: var(--turbowhite) !important; }

/* 2) Tamaño mínimo táctil (48x48) */
a, button, .nav-link { min-width: 48px; min-height: 48px; }
.navbar .nav-link { padding: .75rem 1rem; }
.btn.btn-sm { padding: .625rem .875rem; line-height: 1.25; font-size: 1rem; }

/* 3) Foco visible */
a:focus-visible,
button:focus-visible,
.nav-link:focus-visible,
.btn:focus-visible {
  outline: 3px solid var(--turboyellow);
  outline-offset: 2px;
}

/* 4) Contraste en botones personalizados conservando tu paleta */
.btn-turbo,
.btn-turboinverse { color: var(--turbowhite); }
.btn-turboinverse { background-color: var(--turboblack); border-color: var(--turboblack); }
.btn-turbo:hover, .btn-turbo:focus { filter: brightness(.95); }
.btn-turboinverse:hover, .btn-turboinverse:focus {
  background-color: var(--turboyellow); color: var(--turboblack);
}

/* 5) Enlaces en fondos oscuros: más distinguibles al hover */
.turbodarkblue a:hover, .turboblack a:hover, .turbomoredarkblue a:hover { text-decoration: underline; }

/* 6) Tabla de descargas: más área clicable */
.tabladescarga td, .tabladescarga th { padding: 1rem; }




/* Botones centrados verticalmente */
.btn-turbo,
.btn-turboinverse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;          /* evita texto aplastado */
  padding: 0.75rem 1.25rem;  /* espacio vertical/horizontal */
  font-weight: 700;
  border-radius: 8px;        /* opcional: bordes más suaves */
}