/* ===== Variables ===== */
:root{
  --primary:#F28C1B;          /* Naranja brillante */
  --primary-dark:#D6690D;     /* Naranja oscuro (botones) */
  --primary-darker:#B8570B;   /* Hover botones */
  --accent:#F1B72C;           /* Dorado */
  --black:#1F1F1F;
  --black-softer:#262626;     /* Oscuro pero más claro que el negro base */
  --white:#F5F5F5;
  --ink:#1F1F1F;
  --muted:#6B7280;
  --max:1200px;
  --radius:12px;
  --shadow:0 10px 24px rgba(0,0,0,.08);
  --transition: all .3s ease;

  /* Naranja claro derivado de Integraciones */
  --orange-soft:#FFC67A;            /* fondo tarjetas Casos/Blog */
  --orange-soft-border:#F4A64B;     /* borde */
}

/* ===== Reset & Base ===== */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Open Sans",system-ui,Arial,Helvetica,sans-serif;font-size:16px;line-height:1.6;color:var(--ink);background:var(--white)}
img{max-width:100%;height:auto;display:block}
a{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;     /* se ve más limpio */
  text-decoration-thickness: 1.5px;
  transition: var(--transition);
}
.btn, .navbar a, .social-links a { text-decoration: none; }
ul{list-style:none}
h1,h2,h3,h4{font-family:"Poppins",system-ui,Arial,Helvetica,sans-serif;color:var(--ink);line-height:1.2;margin-bottom:15px}
h1{font-size:clamp(32px,4.5vw,44px)}
h2{font-size:clamp(24px,3vw,32px)}
h3{font-size:clamp(18px,2.2vw,22px)}
p{margin-bottom:15px}
.container{max-width:var(--max);margin:0 auto;padding:0 20px}
.container2{max-width:var(--max);margin:0 auto;padding:clamp(16px,2vw,24px)}
section,.section{padding:80px 0}
.section-title{text-align:center;margin:0 auto 50px}
.section-title h2{display:inline-block;position:relative;margin-bottom:10px}
.section-title h2::after{content:"";position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);width:60px;height:3px;background:var(--primary)}
.section-title p{color:#666;max-width:700px;margin:0 auto}

/* ===== Buttons ===== */
.btn{display:inline-block;padding:12px 25px;border-radius:10px;font-weight:700;border:2px solid transparent;transition:var(--transition);cursor:pointer}
.btn-outline{border-color:#ddd;color:var(--ink);background:#fff}
.btn-outline:hover{border-color:var(--primary);color:var(--primary)}
.btn-primary{background:var(--primary-dark);color:#fff;border-color:var(--primary-dark)}
.btn-primary:hover{background:var(--primary-darker);border-color:var(--primary-darker);transform:translateY(-3px);box-shadow:0 5px 15px rgba(0,0,0,.1)}
.btn-secondary{background:transparent;color:#fff;border-color:#fff}
.btn-secondary:hover{background:#fff;color:var(--black)}

/* ==== Cards ==== */
.card{background:#fff;border:1px solid #eee;border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}

/* ==== Header ==== */
.header{position:sticky;top:0;z-index:1000;width:100%;background:var(--white);color:#000;box-shadow:0 2px 10px rgba(0,0,0,.15)}
.header-content{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.logo img{height:120px}
.navbar ul{display:flex;gap:22px}
.navbar a{color:#000;font-weight:600;position:relative}
.navbar a:hover{color:var(--primary)}
.link-cta{color:#000}
.mobile-menu-btn{display:none;width:32px;height:22px;background:transparent;border:0;cursor:pointer}
.mobile-menu-btn span{display:block;width:100%;height:3px;background:#fff;margin:4px 0;transition:.2s}

/* ===== Alternancia de secciones ===== */
.section--light{background:var(--white);color:var(--ink)}
.section--dark{background:var(--black-softer);color:#fff}
.section--dark .card{background:#1f1f1f;border-color:#2a2a2a}
.section--dark h1,.section--dark h2,.section--dark h3{color:#fff}
.section--dark .section-title p{color:#cfd3da}

/* ===== Hero (fondo con imagen y contenido a la derecha 50%) ===== */
.hero{
  position:relative;overflow:hidden;padding-top:150px;color:#fff;
  background:url("../assets/hero-bg.webp") center/cover no-repeat,#000;
}
.hero-content{
  display:grid;grid-template-columns:1fr 1fr;align-items:start;min-height:520px;
}
.hero-right{
  grid-column:2;display:flex;flex-direction:column;gap:22px;align-items:flex-start;max-width:100%;
}
.hero h1{color:#fff}
.lead{color:#f0f0f0;font-size:1.1rem}
.hero-buttons{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:6px}
.hero-form{background:#fff;padding:30px;border-radius:10px;box-shadow:0 5px 20px rgba(0,0,0,.1)}
.hero-image{position:absolute;top:0;right:0;width:45%;height:100%;z-index:-1}
.hero-image img{width:100%;height:100%;object-fit:cover;opacity:.85;filter:brightness(.9)}

/* ===== Integraciones ===== */
.integrations{background-color:var(--primary);color:#fff}
.integrations .section-title h2,.integrations .section-title p{color:#fff}
.integrations-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.integration-card{text-align:center;padding:30px;border-radius:10px;background:rgba(255,255,255,.15);border:none;transition:var(--transition)}
.integration-card:hover{transform:translateY(-10px);background:rgba(255,255,255,.25)}
.integration-card img{height:80px;margin:0 auto 20px}
.integration-card h3{margin-bottom:15px;color:#fff}
.integration-card p{color:#f8f8f8}

/* ===== Servicios (imágenes del mismo tamaño) ===== */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.service{display:grid;grid-template-rows:auto 1fr;gap:12px}
.service-media{width:100%;border-radius:10px;overflow:hidden;aspect-ratio:16/10} /* iguala tamaño */
.service-media img{width:100%;height:100%;object-fit:cover}
.service-copy ul{margin:12px 0 0 18px}
.service-copy li{margin:6px 0;color:#666}
.section--dark .service-copy li{color:#cfd3da}

/* ===== Casos (2 columnas, tarjetas naranja claro de integraciones) ===== */
.cards-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.card.case{
  display:grid;grid-template-columns:1.2fr .8fr;gap:18px;
  background:var(--orange-soft);border-color:var(--orange-soft-border);color:#1a1a1a;
}
.case-media img{border-radius:12px}
#casos .btn{background:var(--primary-dark);border-color:var(--primary-dark);color:#fff}
#casos .btn:hover{background:var(--primary-darker);border-color:var(--primary-darker)}

/* ===== PLANES (3→2→1 cols, misma altura; hover igual en las 3) ===== */
.plans{background:#f9f9f9}
.plans-content{
  display:grid;
  grid-template-columns:1fr; /* sin imagen, una sola columna */
  gap:50px;
  align-items:center;
}

/* Grid responsive con alturas iguales por fila */
.plans-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(280px, 1fr));
  gap:30px;
  align-items:stretch;
}
.plan-card{
  background:#fff;border-radius:10px;overflow:hidden;
  box-shadow:0 5px 15px rgba(0,0,0,.05);
  transition:var(--transition);position:relative;
  display:flex;flex-direction:column;height:100%;
}
.plan-card:hover{transform:translateY(-8px); box-shadow:0 10px 30px rgba(0,0,0,.1)}
/* La destacada conserva la banda pero NO cambia el transform base */
.plan-card.featured{} /* sin transform ni scale para que el hover sea igual a las otras */

.plan-badge{
  position:absolute; top:20px; right:-30px; background:var(--accent); color:#fff;
  padding:5px 30px; transform:rotate(45deg); font-size:12px; font-weight:600;
}
.plan-header{padding:30px 20px; text-align:center; background:var(--white)}
.plan-header h3{color:var(--ink); margin-bottom:15px}
.plan-price{display:flex; justify-content:center; align-items:baseline}
.price-currency{font-size:1.5rem; font-weight:600; color:var(--primary); margin-right:5px}
.price-number{font-size:2.2rem; font-weight:700; color:var(--primary)}
.price-period{font-size:1rem; color:#666; margin-left:5px}
.plan-features{padding:20px; flex:1 1 auto}
.plan-features ul{margin-bottom:0}
.plan-features li{padding:10px 0; border-bottom:1px solid #eee; color:#666; display:flex; align-items:flex-start}
.plan-features li:last-child{border-bottom:none}
.plan-features i{color:var(--primary); margin-right:10px; margin-top:5px}
.plan-footer{padding:20px; text-align:center; display:flex; justify-content:center}
.plan-footer .btn{width:auto}

/* ===== Blog + Newsletter (tarjetas naranja claro de integraciones) ===== */
.blog-newsletter-content{display:grid;grid-template-columns:2fr 1fr;gap:28px;align-items:start}
.blog-posts{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.blog-card{
  background:var(--orange-soft);border:1px solid var(--orange-soft-border);
  border-radius:12px;overflow:hidden;transition:var(--transition);color:#1a1a1a;
}
.blog-card:hover{transform:translateY(-5px);box-shadow:0 5px 15px rgba(0,0,0,.12)}
.blog-image{height:180px;overflow:hidden}
.blog-image img{width:100%;height:100%;object-fit:cover;transition:var(--transition)}
.blog-card:hover .blog-image img{transform:scale(1.05)}
.blog-content{padding:16px}
.blog-meta{display:flex;justify-content:space-between;font-size:14px;color:#333;margin-bottom:8px}
.blog-category{color:#8a4a00}
.blog-link{display:inline-block;margin-top:6px}
#blog .btn{background:var(--primary-dark);border-color:var(--primary-dark);color:#fff}
#blog .btn:hover{background:var(--primary-darker);border-color:var(--primary-darker)}

/* ===== Formularios ===== */
.form-group{margin-bottom:12px}
.form-group input,.form-group select{width:100%;padding:12px 14px;border:1px solid #ddd;border-radius:8px;background:#fff}
.section--dark .form-group input,.section--dark .form-group select{background:#111;border-color:#2a2a2a;color:#fff}

/* ===== FAQ ===== */
.faq-container{max-width:820px;margin:0 auto}
.faq-item{margin-bottom:12px}
.faq-item summary{cursor:pointer;list-style:none}
.faq-item p{margin-top:10px;color:#666}
.section--dark .faq-item p{color:#cfd3da}

/* ===== Contact CTA ===== */
.contact-cta-content{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}
.contact-cta-image{border-radius:12px;overflow:hidden}

/* ===== Footer ===== */
.footer{background:var(--primary);color:#fff;padding:70px 0 22px}
.footer-content{display:grid;grid-template-columns:1fr 2fr;gap:38px;margin-bottom:32px}
.footer-logo img{height:120px;margin-bottom:10px}
.footer-logo p{opacity:.9}
.footer-links{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.footer-links-column h4{margin-bottom:12px;position:relative;padding-bottom:6px}
.footer-links-column h4:after{content:"";position:absolute;bottom:0;left:0;width:40px;height:2px;background:#fff}
.footer-links a{color:#fff;opacity:.9}
.footer-links a:hover{opacity:1}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid rgba(255,255,255,.25);padding-top:14px}
.social-links{display:flex;gap:10px}
.social-links a{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.18);color:#fff}
.social-links a:hover{background:#fff;color:var(--primary)}

/* ===== Responsive ===== */
@media (max-width: 1180px){
  .plans-content{grid-template-columns:1fr} /* imagen arriba, cards abajo */
  .plans-image{order:2}
}
@media (max-width: 1024px){
  .hero-content{grid-template-columns:1fr}
  .hero-right{grid-column:1}
  .hero-image{position:relative;width:100%;height:360px}
  .integrations-grid{grid-template-columns:repeat(2,1fr)}
  .blog-newsletter-content{grid-template-columns:1fr}
  .contact-cta-content{grid-template-columns:1fr}
  .footer-content{grid-template-columns:1fr}
    .plans-content{grid-template-columns:1fr} /* imagen arriba, cards abajo */
  .plans-image{order:2}
  .plans-grid{grid-template-columns:repeat(2, minmax(260px, 1fr))}
}
@media (max-width: 860px){
  .cards-2{grid-template-columns:1fr} /* Casos: 1 columna en móvil */
  .card.case{grid-template-columns:1fr}
  .navbar{position:fixed;top:64px;left:-100%;width:100%;height:calc(100vh - 64px);background:var(--black-softer);transition:.2s;padding:28px;z-index:999}
  .navbar.active{left:0}
  .navbar ul{flex-direction:column;gap:15px}
  .mobile-menu-btn{display:block}
  .integrations-grid,.services-grid,.blog-posts{grid-template-columns:1fr}
  .footer-links{grid-template-columns:repeat(2,1fr)}
  .footer-bottom{flex-direction:column;gap:20px;text-align:center}
}
@media (max-width: 640px){
  .plans-grid{grid-template-columns:1fr}
}

@media (max-width: 480px){
  .section{padding:70px 0}
  .hero-buttons .btn{width:100%}
  .footer-links{grid-template-columns:1fr}
}