/* ============ BASE ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root{
  /* Marco de diseño (centrado) */
  --frameW: clamp(1040px, 82vw, 1280px);
  --gutter: clamp(24px, 4vw, 48px);

  /* Carril de la tarjeta fija (desktop) */
  --cardW: 360px;
  --cardGap: 72px;
  --cardLeft: calc((100vw - var(--frameW)) / 2 + var(--gutter));
}

body{
  font-family: 'Lato', 'Segoe UI', sans-serif;
  background: #0e0e0e;
  color: white;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Nuevo: estilo del logo del hero */
.brand-logo{
  width: clamp(180px, 26vw, 250px);
  height: auto;
  margin-bottom: 12px;
  display: block;
  /* Sombra sutil para separarlo del fondo oscuro */
  filter: drop-shadow(0 2px 12px rgba(0,0,0,.35));
}

@media (max-width: 900px){
  /* ...lo que ya tienes... */

  /* Centrar el logo en móvil */
  .brand-logo{
    margin: 0 auto 12px;   /* centra horizontalmente el <img> block */
    display: block;        /* ya lo tienes, lo dejo explícito */
  }
}

/* ============ CONTENEDOR ============ */
.container{
  max-width: var(--frameW);
  margin: 0 auto;
  /* Reservamos el carril: gutter + ancho tarjeta + gap */
  padding: 64px var(--gutter) 64px calc(var(--gutter) + var(--cardW) + var(--cardGap));
  min-height: 100vh;
  z-index: 1;
}

/* ============ TARJETA 3D FIJA ============ */
.card-3d{
  /* variables de luz controladas por JS */
  --mouse-x: 50%;
  --mouse-y: 50%;
  --spot-x: 60%;
  --spot-y: 30%;
  --spot-alpha: 0.08;
  --spot-radius: 70%;
  --spot-blur: 40px;

  position: fixed;
  left: var(--cardLeft);
  top: clamp(96px, 18vh, 220px);
  width: var(--cardW);
  height: 540px;

  background: linear-gradient(135deg, #0a0a0a, #1a1a1a);
  border-radius: 24px;
  box-shadow:
    0 40px 60px rgba(0,0,0,0.6),
    0 0 80px rgba(255,255,255,0.05);
  display: flex; align-items: center; justify-content: center;
  transform-style: preserve-3d;
  transform: rotateX(15deg) rotateY(-15deg);
  transition: transform 0.1s ease;
  overflow: hidden; z-index: 3;
}

/* Contenido interno (opcional) */
.card-content{ text-align:center; padding:30px; z-index:2; pointer-events:none; }

/* Linterna sobre la tarjeta */
.shine{
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(circle at var(--mouse-x) var(--mouse-y),
    rgba(255,255,255,0.12), transparent 60%);
  transition: background 0.15s ease;
}

/* Barrido especular */
.sweep{
  position: absolute; inset: -20% -80%;
  background: linear-gradient(100deg,
    transparent 0%,
    rgba(255,255,255,0.06) 45%,
    rgba(255,255,255,0.18) 50%,
    rgba(255,255,255,0.06) 55%,
    transparent 100%);
  transform: rotate(-18deg) translateX(-180%);
  animation: sweepAcross 5.5s ease-in-out infinite;
  mix-blend-mode: screen; pointer-events:none; z-index:3;
}
@keyframes sweepAcross{
  0%{ transform: rotate(-18deg) translateX(-180%); opacity:0; }
  8%{ opacity:1; }
  50%{ transform: rotate(-18deg) translateX(180%); opacity:1; }
  92%{ opacity:0; }
  100%{ transform: rotate(-18deg) translateX(220%); opacity:0; }
}

/* Glow y sombra caída */
.card-3d::before{
  content:""; position:absolute; inset:0; border-radius:24px; pointer-events:none; z-index:1;
  box-shadow: 0 0 80px rgba(255,255,255,0.04), 0 60px 100px rgba(0,0,0,0.5);
}

/* Spotlight dirigido */
.card-3d::after{
  content:""; position:absolute; top:-40%; left:-40%; width:180%; height:180%;
  background: radial-gradient(circle at var(--spot-x) var(--spot-y),
    rgba(255,255,255,var(--spot-alpha)) 0%, transparent var(--spot-radius));
  transform: rotate(25deg); filter: blur(var(--spot-blur));
  pointer-events:none; z-index:0; transition: filter .2s ease, background .2s ease;
}

/* Icono contactless */
.contactless-icon{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:92px; height:92px; opacity:0.9; z-index:2;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.45)); pointer-events:none;
}

/* ============ COPY (COLUMNA DERECHA) ============ */
.content{ max-width: 640px; z-index: 2; }

/* HERO centrado vertical */
.hero{
  min-height: calc(100vh - 160px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding-bottom: 12px;
}
.hero .btn{ align-self: flex-start; }

.content h1{
  font-size: 44px;
  line-height: 1.15;
  letter-spacing: .3px;
  font-weight: 800;
  text-shadow: 0 2px 10px rgba(255,255,255,0.08);
}
.content p{ font-size:16px; color:#ccc; line-height:1.6; }

/* === Benefits con el mismo estilo de "includes" === */
.benefits{
  list-style: none;
  color: #cfcfcf;
  font-size: 15px;
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 12px 20px;
  margin: 10px 0 18px;
  padding: 0;
}
.benefits li{
  position: relative;
  padding-left: 26px;
  line-height: 1.55;
}
.benefits li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 14px;
  height: 14px;
  -webkit-mask-image: 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='m20 6-11 11-5-5'/%3E%3C/svg%3E");
  mask-image: 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='m20 6-11 11-5-5'/%3E%3C/svg%3E");
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:contain; mask-size:contain;
  background-color: rgba(255,255,255,.62);

  font-weight: 700;
}

/* Botón */
.btn{
  padding:12px 24px; border:1px solid white; border-radius:10px; color:white; text-decoration:none;
  font-weight:700; letter-spacing:.2px; transition: transform .25s ease, background .25s ease, color .25s ease;
}
.btn:hover{ background:white; color:#0e0e0e; transform: translateY(-2px); }

/* TRUST STRIP */
.trust-strip{
  margin-top: 40px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  padding: 18px;
}
.trust-strip ul{ list-style:none; display:flex; gap:14px; flex-wrap:wrap; }
.trust-strip li{
  font-size:13px; color:#d4d4d4; padding:10px 14px; border:1px solid rgba(255,255,255,0.12);
  border-radius:999px; background:rgba(255,255,255,0.03); backdrop-filter: blur(4px);
  display:inline-flex; align-items:center; gap:8px;
}
/* Iconos SVG en vez de emojis: se ven igual en todos los dispositivos */
.trust-strip .ts-ico{ flex-shrink:0; opacity:.72; }

/* ============ SECCIONES INFERIORES ============ */
section{ width: 100%; padding: 56px 0; position:relative; z-index:1; }
section h2{ font-size:28px; font-weight:700; margin-bottom:24px; letter-spacing:.4px; }

/* Testimonios */
.testimonials blockquote{
  position:relative; margin:14px 0; padding:18px 20px 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.10); border-radius:16px; color:#d9d9d9;
}
.testimonials blockquote::before{
  content:"“"; position:absolute; left:12px; top:-8px; font-size:42px; color:rgba(255,255,255,0.08);
}
.testimonials blockquote footer{ margin-top:8px; font-size:13px; color:#9a9a9a; }

/* Incluye */
.includes ul{
  list-style:none; display:grid; grid-template-columns: repeat(2, minmax(260px,1fr)); gap:12px 20px;
}
.includes li{ position:relative; padding-left:26px; color:#cfcfcf; }
.includes li::before{
  content:""; position:absolute; left:0; top:4px; width:14px; height:14px;
  -webkit-mask-image: 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='m20 6-11 11-5-5'/%3E%3C/svg%3E");
  mask-image: 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='m20 6-11 11-5-5'/%3E%3C/svg%3E");
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:contain; mask-size:contain;
  background-color: rgba(255,255,255,.62);
}
.includes { padding-bottom: 8px; }

/* FAQ */
.faq details{
  margin:10px 0; border:1px solid rgba(255,255,255,0.12); border-radius:12px;
  background: rgba(255,255,255,0.02); overflow:hidden;
}
.faq summary{
  cursor:pointer; padding:14px 16px; font-weight:600; color:#ededed; list-style:none; position:relative;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"＋"; position:absolute; right:16px; top:50%; transform:translateY(-50%); opacity:.8; }
.faq details[open] summary::after{ content:"－"; }
.faq details p{ padding:0 16px 16px; color:#cfcfcf; line-height:1.6; }

/* ============ PANEL FINAL (closing-cta) ============ */
.closing-cta{
  position: relative;
  margin-top: 56px;
  margin-bottom: 24px;
  padding: 28px 24px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.07);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  text-align: left;
}
.closing-cta::before{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(700px 240px at 30% -18%, rgba(255,255,255,0.06), transparent 60%);
  pointer-events: none;
}
.closing-cta h2{ margin: 0 0 10px; letter-spacing: .4px; }
.closing-cta p{
  margin: 0 0 14px;
  text-decoration: none;
  position: relative;
  z-index: 1;
  color: #d9d9d9;
}
.closing-cta .btn{ margin-top: 10px; }

/* ============ FOOTER (Opción A) ============ */
/* El pie tiene dos niveles: la firma y, debajo, los enlaces legales.
   Antes era una sola fila flex y ambos bloques quedaban uno al lado del
   otro, apelotonados. */
.content .pie-sitio{
  margin: 56px 0 24px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.07);
  color: #a9a9a9;
  font-size: 13px;
  letter-spacing: .25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  opacity: .9;
  position: relative;
  text-align: center;
}
.content .pie-sitio .pie-marca{
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.content .pie-sitio .pie-legal{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 22px;
  font-size: 12px;
}
.content .pie-sitio .pie-legal a{
  color: #8d8d8d;
  text-decoration: none;
  transition: color .2s ease;
}
.content .pie-sitio .pie-legal a:hover{ color: #fff; }

/* Separador entre enlaces, salvo antes del primero */
.content .pie-sitio .pie-legal a + a::before{
  content: "";
  display: inline-block;
  width: 3px; height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,.28);
  margin-right: 22px;
  vertical-align: middle;
}
.content .pie-sitio .pie-marca::before{
  content: "";
  width: 8px; height: 8px; border-radius: 999px;
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #cfcfcf 55%, rgba(255,255,255,0) 70%);
  box-shadow: 0 0 14px rgba(255,255,255,.28);
  flex: 0 0 auto;
}
/* El separador lo da ahora el border-top del propio pie */

/* Animaciones genéricas */
@keyframes fadeInUp{ from{opacity:0; transform:translateY(30px);} to{opacity:1; transform:translateY(0);} }

/* ============ RESPONSIVE ============ */
/* Tablets grandes / portátiles estrechos */
@media (max-width: 1200px){
  :root{
    --frameW: clamp(980px, 90vw, 1120px);
    --cardW: 330px;
    --cardGap: 60px;
    --cardLeft: calc((100vw - var(--frameW)) / 2 + var(--gutter));
  }
  .content h1{ font-size: 40px; }
}

/* Tablet vertical (~1024) */
@media (max-width: 1020px){
  :root{
    --frameW: clamp(880px, 92vw, 980px);
    --cardW: 310px;
    --cardGap: 48px;
    --cardLeft: calc((100vw - var(--frameW)) / 2 + var(--gutter));
  }
  .includes ul{ grid-template-columns:1fr; }
  .benefits{ grid-template-columns:1fr 1fr; }
  .content h1{ font-size: 36px; }
}

/* Móvil / tablet chica */
@media (max-width: 900px){
  .container{
    max-width: 680px;
    padding: 24px var(--gutter) 48px;
  }

  /* La tarjeta deja de ser fija y se apila arriba */
  .card-3d{
    position: static; left:auto; top:auto;
    width: 300px; height: 480px;
    margin: 0 auto 24px;
  }
  .contactless-icon{ width:84px; height:84px; }

  .content{
    max-width: 560px; margin:0 auto; text-align:center;
  }
  .hero{ min-height: auto; padding-top: 8px; }
  .hero .btn{ align-self: center; }

  .benefits{ grid-template-columns:1fr; }
  .trust-strip ul{ justify-content:center; }
  .testimonials h2, .closing-cta, .faq, .includes { text-align: center; }
  .includes ul{ grid-template-columns:1fr; }

  .content .pie-sitio{
    margin: 48px 0 20px; padding-top: 18px; gap: 12px;
  }
}

/* Teléfonos medianos */
@media (max-width: 600px){
  :root{ --gutter: 20px; }
  .card-3d{ width: 270px; height: 440px; }
  .contactless-icon{ width:76px; height:76px; }
  .content h1{ font-size: 32px; }
  .btn{ padding:12px 20px; }
  section{ padding: 44px 0; }
}

/* Teléfonos pequeños */
@media (max-width: 420px){
  :root{ --gutter: 16px; }
  .card-3d{ width: 250px; height: 420px; }
  .content h1{ font-size: 28px; }
  .content p{ font-size: 15px; }
  .trust-strip{ padding: 14px; }
  .trust-strip li{ font-size: 12.5px; padding: 8px 12px; }
}



/* ============ FORMULARIO DE SOLICITUD ============ */
/* ---- formulario propio (antes era un iframe externo) ---- */
.hp{ position:absolute; left:-9999px; opacity:0; pointer-events:none; }

.sol-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:14px 16px;
}
.sol-ancho{ grid-column:1 / -1; }

.sol-campo{ display:flex; flex-direction:column; gap:6px; }
.sol-campo > span{ font-size:12px; color:var(--fg-dim); }
.sol-campo > span em{ color:rgba(255,150,150,.9); font-style:normal; }
.sol-campo input,
.sol-campo select,
.sol-campo textarea{
  width:100%; padding:12px 14px; border-radius:11px; font:inherit; font-size:14px;
  background:rgba(255,255,255,0.04); border:1px solid var(--border); color:var(--fg);
}
.sol-campo textarea{ resize:vertical; min-height:96px; }
.sol-campo input::placeholder,
.sol-campo textarea::placeholder{ color:rgba(255,255,255,.28); }
.sol-campo input:focus,
.sol-campo select:focus,
.sol-campo textarea:focus{
  outline:none; border-color:rgba(255,255,255,.42);
  background:rgba(255,255,255,0.06);
}
.sol-campo select option{ background:#111; color:var(--fg); }

/* El formulario vive dentro de una sección centrada: lo devolvemos a la
   izquierda, que es como se leen los campos. */
.sol-form{ text-align:left; margin-top:22px; }
.sol-form .sol-campo > span{ text-align:left; }

/* Botón propio: no depende de .btn ni de .primary (que no existe aquí) */
.sol-enviar{
  margin-top:20px; width:100%;
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 24px; border:1px solid #fff; border-radius:11px;
  background:#fff; color:#0e0e0e;
  font:inherit; font-size:14px; font-weight:800; letter-spacing:.2px;
  cursor:pointer;
  transition: transform .2s ease, filter .2s ease;
}
.sol-enviar:hover{ transform:translateY(-2px); filter:brightness(.93); }
.sol-enviar:active{ transform:none; }
.sol-nota{ margin:10px 0 0 !important; font-size:12px; text-align:center; color:rgba(255,255,255,.4); }

.sol-aviso{
  border-radius:12px; padding:13px 16px; margin-bottom:18px; font-size:13px;
  border:1px solid var(--border); background:rgba(255,255,255,0.04); color:var(--fg-dim);
}
.sol-aviso.ok{ border-color:rgba(255,255,255,.28); color:var(--fg); }
.sol-aviso.mal{ border-color:rgba(240,90,90,.4); background:rgba(190,40,40,.12); color:#f6cccc; }

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

/* ============ PÁGINAS LEGALES ============ */
.legal-wrap{max-width:760px;margin:0 auto;padding:40px 20px 80px}
.legal-cab{padding:28px 0 22px;border-bottom:1px solid rgba(255,255,255,.10);margin-bottom:32px}
.legal-cab h1{font-size:clamp(26px,4vw,36px);font-weight:900;margin:0 0 8px;letter-spacing:.2px}
.legal-cab .legal-fecha{font-size:12px;color:rgba(255,255,255,.42)}
.legal-intro{font-size:14.5px;line-height:1.7;color:#cfcfcf;margin:0 0 8px}

.legal-indice{margin:28px 0 40px;padding:18px 20px;border:1px solid rgba(255,255,255,.10);
  border-radius:14px;background:rgba(255,255,255,.03)}
.legal-indice h2{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.45);margin:0 0 12px}
.legal-indice ol{margin:0;padding-left:20px;columns:2;column-gap:26px}
.legal-indice li{font-size:13px;line-height:1.9;color:#bdbdbd}
.legal-indice a{color:inherit;text-decoration:none}
.legal-indice a:hover{color:#fff;text-decoration:underline}

/* La landing define section{padding:56px 0}; aquí lo anulamos */
.legal-wrap section{width:auto;padding:0;position:static}
.legal-sec{margin-bottom:34px;scroll-margin-top:24px}
.legal-sec h2{font-size:17px;font-weight:800;margin:0 0 12px;letter-spacing:.2px}
.legal-sec h3{font-size:14px;font-weight:700;margin:20px 0 8px;color:#e4e4e4}
.legal-sec p{font-size:14px;line-height:1.75;color:#c4c4c4;margin:0 0 12px}
.legal-sec ul{margin:0 0 12px;padding-left:20px}
.legal-sec li{font-size:14px;line-height:1.75;color:#c4c4c4;margin-bottom:6px}
.legal-sec strong{color:#fff;font-weight:700}
.legal-sec a{color:#fff}

.legal-nota{border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:14px 16px;
  background:rgba(255,255,255,.04);margin:16px 0}
.legal-nota p{margin:0;font-size:13.5px;color:#d8d8d8}

.legal-dato{display:inline-block;padding:1px 7px;border-radius:5px;
  background:rgba(255,210,120,.14);border:1px dashed rgba(255,210,120,.45);
  color:#ffd88a;font-size:.92em;font-weight:600}

.legal-tabla{width:100%;border-collapse:collapse;margin:6px 0 16px;font-size:13px}
.legal-tabla th,.legal-tabla td{text-align:left;padding:9px 11px;border:1px solid rgba(255,255,255,.10);
  vertical-align:top;line-height:1.6}
.legal-tabla th{background:rgba(255,255,255,.05);color:#fff;font-weight:700;font-size:12px}
.legal-tabla td{color:#c4c4c4}
.legal-tabla-scroll{overflow-x:auto}

.legal-pie{margin-top:46px;padding-top:22px;border-top:1px solid rgba(255,255,255,.10);
  display:flex;gap:18px;flex-wrap:wrap;font-size:12.5px;color:rgba(255,255,255,.45)}
.legal-pie a{color:inherit;text-decoration:none}
.legal-pie a:hover{color:#fff}

@media (max-width:640px){ .legal-indice ol{columns:1} }