/* ============================================================
   cp-landing.css — estilos compartidos de las landings GEO
   ------------------------------------------------------------
   Lo usan las paginas de funciones, comparativas y respuestas
   creadas a partir del 1-sep-2026. NO lo usan las landings
   anteriores (ventajas, marca blanca, informe PDF, gestion,
   vs-simply-coach, vs-paperbell, vs-notion...), que llevan su
   CSS embebido y se dejan como estan: funcionan, estan
   verificadas y migrarlas seria riesgo sin beneficio.

   CACHE — LEER ANTES DE EDITAR:
   .htaccess:204-206 sirve todo .css con
   "public, max-age=31536000, immutable". Un navegador que ya
   tenga este archivo NO va a volver a pedirlo en un año.
   Por eso cada <link> lo carga con ?v=N y por eso, al tocar
   este archivo, HAY QUE SUBIR ESE NUMERO EN TODAS LAS PAGINAS
   QUE LO ENLAZAN. Si no, el cambio no lo ve nadie salvo quien
   entre por primera vez.

   Version actual del parametro: v=1
   ============================================================ */

/* === BASE === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{font-family:"Poppins",sans-serif;background:#E6E5E0;color:#1a1a2e;line-height:1.7;}

/* === NAV === */
nav{background:linear-gradient(135deg,#203590 0%,#213f95 60%,#6083C5 100%);padding:0 24px;position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;height:64px;box-shadow:0 2px 16px rgba(32,53,144,0.2);}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;}
.nav-logo img{border-radius:50%;}
.nav-logo span{font-family:"Sora",sans-serif;font-weight:700;font-size:18px;color:#fff;}
.nav-links{display:flex;gap:24px;align-items:center;}
.nav-links a{color:rgba(255,255,255,0.85);text-decoration:none;font-size:14px;font-weight:500;}
.nav-cta{background:#fff;color:#203590;padding:8px 20px;border-radius:8px;font-size:14px;font-weight:600;text-decoration:none;}

/* === BREADCRUMB === */
.breadcrumb{background:white;padding:12px 24px;font-size:13px;color:#888;border-bottom:1px solid #e8e8e8;}
.breadcrumb a{color:#203590;text-decoration:none;}
.breadcrumb span{margin:0 6px;}

/* === HERO === */
.hero{background:linear-gradient(135deg,#203590 0%,#213f95 60%,#6083C5 100%);color:white;padding:56px 24px 72px;text-align:center;}
.hero-badge{display:inline-block;background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.3);color:white;font-size:12px;font-weight:600;padding:5px 14px;border-radius:20px;margin-bottom:16px;text-transform:uppercase;letter-spacing:0.5px;}
.hero h1{font-family:"Sora",sans-serif;font-size:clamp(22px,4vw,38px);font-weight:700;margin-bottom:16px;line-height:1.25;}
.hero p{font-size:17px;opacity:0.9;max-width:720px;margin:0 auto;font-weight:300;}
.vs-chips{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:28px;flex-wrap:wrap;}
.chip{background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.3);padding:10px 24px;border-radius:40px;font-size:15px;font-weight:600;}
.chip-vs{font-size:13px;opacity:0.7;}
.chip-win{background:white;color:#203590;}

/* === LAYOUT === */
.container{max-width:960px;margin:0 auto;padding:48px 24px 80px;}
.card{background:white;border-radius:16px;padding:32px;margin-bottom:24px;box-shadow:0 4px 20px rgba(32,53,144,0.06);}
.card h2{font-family:"Sora",sans-serif;font-size:20px;color:#203590;margin-bottom:20px;padding-bottom:12px;border-bottom:2px solid #f0f4ff;}
.card h3{font-family:"Sora",sans-serif;font-size:17px;color:#203590;margin:24px 0 10px;}
.card p{font-size:15px;color:#444;line-height:1.7;}
.card p + p{margin-top:14px;}

/* === RESPUESTA DIRECTA — lo que extraen los modelos === */
.answer-lead{font-size:17px;color:#1a1a2e;line-height:1.7;border-left:4px solid #203590;background:#f0f4ff;padding:20px 24px;border-radius:0 12px 12px 0;}
.answer-lead strong{color:#203590;}

/* === TABLAS === */
.comp-table{width:100%;border-collapse:collapse;font-size:14px;}
.comp-table th{padding:14px 14px;font-size:13px;font-weight:600;text-align:left;}
.comp-table th.feat-h{color:#888;background:#f8f9fc;border-radius:8px 0 0 0;}
.comp-table th.cp-h{background:#203590;color:white;text-align:left;}
.comp-table th.rival-h{background:#f0f4ff;color:#203590;text-align:left;}
.comp-table td{padding:13px 14px;border-bottom:1px solid #f0f4ff;vertical-align:top;color:#444;}
.comp-table tr:last-child td{border-bottom:none;}
.comp-table tr:hover td{background:#f8f9fc;}
.comp-table td.q,.comp-table .feat{font-weight:500;max-width:200px;}
.cp-cell,.cp-col{color:#1a6e3e;font-weight:500;}
.rv-cell{color:#1a6e3e;font-weight:500;}
.rival-col{text-align:center;color:#666;}
.yes{color:#2E9E6B;font-weight:700;margin-right:4px;}
.table-note{font-size:13px;color:#888;margin-top:14px;line-height:1.6;}

.price-table{width:100%;border-collapse:collapse;font-size:14px;}
.price-table th{padding:12px 14px;font-size:13px;font-weight:600;text-align:left;background:#f8f9fc;color:#5A6380;}
.price-table td{padding:13px 14px;border-bottom:1px solid #f0f4ff;color:#444;}
.price-table tr:last-child td{border-bottom:none;}
.price-table .cp{color:#1a6e3e;font-weight:600;}
.price-table .up{color:#C0392B;font-weight:600;}

/* === REJILLAS DE CAJAS === */
.feat-grid,.fields-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.feat-box,.field-box{background:#f8f9fc;border:1px solid #e0e8f0;border-radius:12px;padding:16px 18px;}
.feat-box h3,.field-box h3{font-family:"Sora",sans-serif;font-size:15px;color:#203590;margin:0 0 4px;}
.feat-box p,.field-box p{font-size:13px;color:#5A6380;line-height:1.6;}

.tie-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.tie-box{background:#f8f9fc;border:1px solid #e0e8f0;border-radius:10px;padding:14px 16px;font-size:14px;color:#5A6380;}
.tie-box strong{color:#203590;display:block;font-size:14px;margin-bottom:2px;}

/* === CONSERVA / DESCARTA === */
.keep-drop{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.kd-box{border-radius:12px;padding:22px;}
.kd-box.keep{background:#f0fff4;border:1px solid #a3e0b5;}
.kd-box.drop{background:#f8f9fc;border:1px solid #e0e8f0;}
.kd-box h3{font-family:"Sora",sans-serif;font-size:16px;margin:0 0 14px;}
.kd-box.keep h3{color:#1a6e3e;}
.kd-box.drop h3{color:#5A6380;}
.kd-box ul{list-style:none;display:flex;flex-direction:column;gap:10px;}
.kd-box li{font-size:14px;color:#444;padding-left:22px;position:relative;line-height:1.6;}
.kd-box.keep li::before{content:"\2713";position:absolute;left:0;color:#2E9E6B;font-weight:700;}
.kd-box.drop li::before{content:"\2014";position:absolute;left:0;color:#8892a8;font-weight:700;}

/* === CAPAS === */
.layer{border:1px solid #e0e8f0;border-radius:14px;padding:24px;margin-bottom:18px;background:#fbfcfe;}
.layer:last-child{margin-bottom:0;}
.layer-head{display:flex;align-items:baseline;gap:12px;margin-bottom:6px;flex-wrap:wrap;}
.layer-num{font-family:"Sora",sans-serif;font-size:13px;font-weight:700;color:#fff;background:#203590;border-radius:6px;padding:3px 9px;}
.layer-head h3{font-family:"Sora",sans-serif;font-size:17px;color:#203590;margin:0;}
.layer > p{font-size:14px;color:#5A6380;margin-bottom:16px;}
.layer ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;}
.layer li{font-size:14px;color:#444;padding-left:22px;position:relative;line-height:1.6;}
.layer li::before{content:"\2713";position:absolute;left:0;color:#2E9E6B;font-weight:700;}
.layer.gap{background:#f0fff4;border-color:#a3e0b5;}
.layer.gap .layer-num{background:#2E9E6B;}
.layer.gap .layer-head h3{color:#1a6e3e;}

/* === PASOS NUMERADOS === */
.steps{list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:16px;}
.steps li{counter-increment:s;position:relative;padding-left:44px;font-size:15px;color:#444;line-height:1.7;}
.steps li::before{content:counter(s);position:absolute;left:0;top:2px;width:28px;height:28px;border-radius:50%;background:#203590;color:#fff;font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center;}
.steps strong{color:#203590;}

/* === LISTAS === */
.win-list{list-style:none;display:flex;flex-direction:column;gap:14px;margin-top:6px;}
.win-list li{font-size:15px;color:#444;padding-left:26px;position:relative;line-height:1.7;}
.win-list li::before{content:"\2713";position:absolute;left:0;top:0;color:#2E9E6B;font-weight:700;}
.win-list strong{color:#203590;}
.fair-list{list-style:none;display:flex;flex-direction:column;gap:12px;margin-top:6px;}
.fair-list li{font-size:15px;color:#444;padding-left:26px;position:relative;line-height:1.7;}
.fair-list li::before{content:"\2022";position:absolute;left:4px;top:0;color:#6083C5;font-weight:700;}

/* === ENLACE DESTACADO === */
.link-demo{background:#0A2463;border-radius:12px;padding:22px 24px;text-align:center;margin:4px 0 18px;}
.link-demo .lbl{font-size:12px;color:rgba(197,219,240,0.6);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:8px;}
.link-demo .url{font-family:"Sora",sans-serif;font-size:clamp(15px,3vw,21px);color:#fff;font-weight:600;word-break:break-all;}
.link-demo .url em{color:#6083C5;font-style:normal;}

/* === VEREDICTO === */
.verdict-box{background:#f0f4ff;border-left:4px solid #203590;border-radius:0 12px 12px 0;padding:20px 24px;}
.verdict-box strong{color:#203590;}

/* === FAQ === */
.faq-item{border-bottom:1px solid #f0f4ff;padding:18px 0;}
.faq-item:last-child{border-bottom:none;padding-bottom:0;}
.faq-item h3{font-family:"Sora",sans-serif;font-size:16px;color:#203590;margin:0 0 8px;}
.faq-item p{font-size:15px;color:#444;}

/* === CTA === */
.cta-section{background:linear-gradient(135deg,#203590,#6083C5);color:white;border-radius:16px;padding:48px 32px;text-align:center;margin-top:8px;}
.cta-section h2{font-family:"Sora",sans-serif;font-size:26px;margin-bottom:12px;}
.cta-section p{font-size:15px;opacity:0.9;margin-bottom:24px;max-width:520px;margin-left:auto;margin-right:auto;}
.cta-btn{display:inline-block;background:white;color:#203590;padding:14px 36px;border-radius:10px;font-size:16px;font-weight:700;text-decoration:none;transition:all 0.2s;}
.cta-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.2);}
.cta-second{display:block;margin-top:18px;color:rgba(255,255,255,0.9);font-size:14px;font-weight:500;text-decoration:underline;}
.cta-price{font-size:12px;opacity:0.8;margin-top:16px;}

/* === ENLACES RELACIONADOS === */
.other-grid{display:flex;flex-wrap:wrap;gap:10px;}
.other-link{background:#f0f4ff;color:#203590;padding:8px 16px;border-radius:20px;font-size:13px;font-weight:500;text-decoration:none;transition:all 0.2s;}
.other-link:hover{background:#203590;color:white;}

/* === FOOTER === */
.footer{background:#0A2463;color:#fff;padding:64px 24px 32px;}
.footer-inner{max-width:1100px;margin:0 auto;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;}
.footer-brand-row{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
.footer-brand-row img{border-radius:50%;}
.footer-brand-name{font-family:"Sora",sans-serif;font-weight:700;font-size:20px;color:#fff;}
.footer-brand-text{font-size:14px;color:rgba(197,219,240,0.6);line-height:1.7;max-width:280px;margin-bottom:16px;}
.footer-email{font-size:13px;color:rgba(197,219,240,0.6);text-decoration:none;transition:color 0.2s;display:block;margin-bottom:16px;}
.footer-email:hover{color:#fff;}
.footer-socials{display:flex;gap:12px;}
.footer-socials a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;text-decoration:none;transition:background 0.2s;}
.footer-socials a:hover{background:rgba(255,255,255,0.2);}
.footer h4{font-family:"Sora",sans-serif;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:rgba(197,219,240,0.5);margin-bottom:20px;}
.footer-col a{display:block;font-size:14px;color:rgba(197,219,240,0.7);padding:6px 0;text-decoration:none;transition:color 0.2s;}
.footer-col a:hover{color:#fff;}
.footer-bottom{margin-top:48px;padding-top:24px;border-top:1px solid rgba(255,255,255,0.1);text-align:center;font-size:13px;color:rgba(197,219,240,0.4);}

/* === RESPONSIVE — movil primero se valida a 480px === */
@media(max-width:768px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px;}
  .feat-grid,.fields-grid,.tie-grid,.keep-drop{grid-template-columns:1fr;}
  .layer ul{grid-template-columns:1fr;}
  .comp-table{font-size:13px;}
  .comp-table td.q,.comp-table .feat{max-width:130px;}
}
@media(max-width:640px){
  nav .nav-links a:not(.nav-cta){display:none;}
  .hero{padding:36px 16px 52px;}
  .card{padding:20px;}
  .layer{padding:18px;}
  .answer-lead{font-size:15px;padding:16px 18px;}
  .comp-table td,.comp-table th,.price-table td,.price-table th{padding:10px 8px;}
}
@media(max-width:480px){
  .footer-grid{grid-template-columns:1fr;gap:32px;}
}