:root{
	  --green:#39e991;
	  --green-2:#18d777;
	  --brand:#39e991;      /* alias consistente para 'brand' */
	  --ink:#0f172a;
	  --ink-2:#334155;
	  --muted:#718096;
	  --bg:#ffffff;
	  --card:#ffffff;
	  --soft:#f6f8fb;
	  --line:#e6eef5;
	}
  *{box-sizing:border-box}
  html,body{margin:0}
  body{font-family:Montserrat,system-ui,Arial;background:var(--bg);color:var(--ink)}
  img{max-width:100%;display:block}
  a{color:inherit;text-decoration:none}

  /* Layout base */
  .container{max-width:1160px;margin:0 auto;padding:0 20px}
  .section{padding:64px 0}
  .center{text-align:center}

  /* NAV blanco liviano */
  .nav{
    display:flex;align-items:center;gap:16px;padding:14px 0;
    position:sticky;top:0;z-index:50;background:#fff;
    border-bottom:1px solid var(--line);box-shadow:0 4px 14px rgba(16,24,40,.06);
  }
  .brand{height:64px}
  .links{margin-left:auto;display:flex;gap:12px;flex-wrap:wrap}
  .links a{
    color:#243041;font-weight:500;font-size:15px;
    padding:10px 10px;border-radius:10px;opacity:.9;
  }
  .links a:hover{opacity:1;background:#f6f8fb}

  /* Full-bleed helper (hero full width) */
  .full-bleed{
    width:100vw;position:relative;left:50%;right:50%;
    margin-left:-50vw;margin-right:-50vw;
  }

  /* HERO oscuro centrado */
  .hero-dark{
    background:linear-gradient(180deg,#262833,#3c3f50);
    color:#fff;text-align:center;padding:56px 0 40px;
  }
  .hero-dark .container{
    max-width:1100px;margin:0 auto;padding:40px 20px;
    display:flex;flex-direction:column;align-items:center;text-align:center;
  }
  .logo-hero{height:76px;margin-bottom:10px}
  .hero-dark h1{
    color:var(--green);font-weight:700;letter-spacing:-.02em;
    font-size:clamp(24px,3vw,40px);line-height:1.08;margin:10px 0 12px;
    white-space:nowrap;
  }
  @media (max-width:900px){
    .hero-dark h1{white-space:normal;font-size:clamp(24px,6vw,34px)}
  }
  .hero-dark .sub{font-size:clamp(15px,1.9vw,18px);color:#e7f3ff;margin-bottom:18px}

  /* Botones */
  .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
  .btn{border:0;border-radius:12px;padding:11px 14px;font-weight:700;cursor:pointer}
  .btn-primary{background:#0f172a;color:#fff;box-shadow:0 10px 24px rgba(0,0,0,.35)}
  .btn-primary:hover{transform:translateY(-1px)}
  .btn-ghost{background:transparent;border:1px solid #2a2f3d;color:#e6f4ff}
  .btn-ghost:hover{background:rgba(42,47,61,.2)}

  /* “El comercio digital…” */
  .complex{display:grid;gap:26px;align-items:center}
  @media(min-width:980px){.complex{grid-template-columns:1.1fr .9fr}}
  .punch{
    background:linear-gradient(135deg,#eafff4,#f7fffb);
    border:1px solid #d8f5e5;color:#0d6d4b;padding:14px 16px;border-radius:14px;
    font-weight:800;margin:14px 0;
  }

  /* Cards de insights */
  .grid-6{display:grid;gap:16px}
  @media(min-width:980px){.grid-6{grid-template-columns:repeat(3,1fr)}}
  .card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:0 8px 20px rgba(16,24,40,.04)}
  .card h4{margin:8px 0 6px;font-size:18px}
  .card p{margin:0;color:var(--ink-2)}
  .mini{width:56px;height:56px;object-fit:contain;margin-bottom:8px}

  /* Solución Escanon (3 pilares) */
  .pillars{display:grid;gap:18px}
  @media(min-width:980px){.pillars{grid-template-columns:repeat(3,1fr)}}
  .pillar{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;text-align:center}
  .pillar h3{margin:10px 0 6px}
  .pillar p{margin:0;color:var(--ink-2)}
  .icon-xl{width:120px;height:120px;object-fit:contain;margin:4px auto 10px}

  /* Bloques simples + bullets */
  .simple{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px}
  .bullets{display:grid;gap:10px;margin:12px 0 0}
  .bullets div{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:flex-start}
  .dot{width:10px;height:10px;background:var(--green);border-radius:999px;margin-top:7px}

  /* CTA final + footer */
  .cta-box{background:linear-gradient(135deg,#f5fff9,#ffffff);border:1px solid #dff7ea;border-radius:18px;padding:28px}
  footer{padding:36px 0 56px;color:#7b8aa0;border-top:1px solid var(--line);text-align:center}
  
  .hero-dark h1{color: var(--green) !important;}
  
  /* ——— Intro blanco (texto + arte) ——— */
	.context-intro{
	  background:#fff;
	  padding: 36px 0 8px;
	}
	.intro-grid{
	  display:grid;
	  gap:28px;
	  align-items:center;
	}
	@media (min-width: 980px){
	  .intro-grid{ grid-template-columns: 1.1fr .9fr; }
	}
	.intro-copy .kicker{
	  margin:0 0 6px;
	  font-size: clamp(20px, 2.6vw, 28px);
	}
	.intro-copy .lead{
	  margin: 6px 0 12px;
	  color:#334155;
	  font-size: clamp(15px, 2vw, 18px);
	}
	.intro-mini{
	  margin: 6px 0 0;
	  padding-left: 18px;
	  color:#475569;
	  font-size: 15px;
	}
	.intro-mini li{ margin: 4px 0; }
	.intro-art img{
	  width:100%;
	  height:auto;
	  object-fit:contain;
	  filter: drop-shadow(0 18px 40px rgba(16,24,40,.12));
	}

	/* ——— Breaker verde (full-bleed) ——— */
	.breaker-green{
	  background: linear-gradient(90deg, var(--green), #18d777);
	  padding: 16px 0;
	  /* la clase full-bleed ya está en tu proyecto, mantiene ancho completo */
	}
	.breaker-green .breaker-text{
	  margin:0;
	  text-align:center;
	  color:#073b2d;              /* buen contraste sobre el verde */
	  font-weight:800;
	  letter-spacing:.1px;
	  font-size: clamp(13px, 1.6vw, 15px);
	  line-height:1.35;
	  background: rgba(255,255,255,.15);
	  display:inline-block;
	  padding:8px 14px;
	  border-radius:10px;
	}



	/* ——— Ajustes de la sección "El Comercio Digital" ——— */
	/* Título de la intro (El Comercio Digital: una carrera compleja) */
	.context-intro .kicker{
	  color: var(--ink);             /* o var(--green) si lo querías verde, pero más liviano */
	  font-weight: 700;              /* unifica con el resto (antes estaba muy bold) */
	  letter-spacing: -.02em;
	  font-size: clamp(26px, 3.1vw, 36px);
	  line-height: 1.12;
	  margin: 0 0 8px;
	}

	/* Si lo quieres en verde pero liviano: */
	.context-intro .kicker.k--verde { 
	  color: var(--green);
	  font-weight: 700;
	}

	.context-intro .intro-mini{
	  font-size: clamp(16px, 1.9vw, 18px);
	  line-height: 1.6;
	  color: var(--ink-2);
	  margin-top: 8px;
	}
	.context-intro .intro-mini li{ margin: 6px 0; }


	/* ——— Breaker verde ——— */
	.breaker-green{
	  background: linear-gradient(90deg, var(--green), #18d777);
	  padding: 20px 0;              /* un poco más de aire */
	}

	.breaker-green .breaker-text{
	  margin: 0;
	  text-align: center;
	  color: #0d3a2c;               /* buen contraste sobre el verde */
	  font-weight: 800;
	  letter-spacing: .1px;
	  font-size: clamp(16px, 2vw, 20px);  /* más grande */
	  line-height: 1.35;
	  background: none;             /* sin pastilla/blister blanco */
	  padding: 0;                   /* sin “borde” visual */
	  display: block;               /* asegura centrado del texto */
	}

	/* Breaker verde — tipografía menos pesada + énfasis con gris de la paleta */
	.breaker-green .breaker-text{
	  font-weight: 600;                 /* antes 700/800 -> se siente más liviano */
	  letter-spacing: .1px;
	  color: #0d3a2c;                   /* buen contraste sobre el verde */
	}

	.breaker-green .breaker-text .dark{
	  color: #3c3f50;                   /* gris oscuro de la paleta */
	  font-weight: 700;                 /* enfatiza solo esta parte */
	}

	/* ===== Reglas del juego (grid 3×2) ===== */
	.rules-title{
	  color: var(--brand);           /* verde corporativo */
	  font-weight: 700;
	  letter-spacing: -0.5px;
	  margin-bottom: 26px;
	}

	.rules-grid{
	  display: grid;
	  grid-template-columns: repeat(3,minmax(0,1fr));
	  gap: 44px 36px;
	  align-items: start;
	}

	.rule{
	  text-align: center;
	  padding: 6px 10px;
	}

	.rule-icon{
	  width: 140px; height: 140px;
	  object-fit: contain;
	  margin: 0 auto 14px;
	  filter: saturate(0) brightness(0) invert(43%) sepia(96%) saturate(558%) hue-rotate(93deg) brightness(94%) contrast(90%);
	  /* ↑ asegura el verde corporativo si el PNG es monocromo oscuro */
	}

	.rule-h{
	  font-size: 20px;
	  line-height: 1.25;
	  font-weight: 600;              /* menos pesado */
	  margin: 6px 0 8px;
	  color: var(--ink);             /* gris oscuro de la paleta */
	}

	.rule-p{
	  color: var(--muted);
	  font-size: 16px;
	  line-height: 1.55;
	  max-width: 34ch;
	  margin: 0 auto;
	}

	/* Responsive */
	@media (max-width: 1100px){
	  .rule-icon{ width: 120px; height: 120px; }
	}
	@media (max-width: 900px){
	  .rules-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); }
	}
	@media (max-width: 560px){
	  .rules-grid{ grid-template-columns: 1fr; gap: 32px; }
	  .rule-icon{ width: 104px; height: 104px; }
	}


	/* --- Fix definitivo para iconos como imagen --- */
	img.rule-icon {
	  width: 140px;
	  height: 140px;
	  object-fit: contain;
	  display: block;
	  margin: 0 auto 14px;

	  /* Limpieza agresiva: quita cualquier relleno/efecto heredado */
	  background: transparent !important;
	  box-shadow: none !important;
	  filter: none !important;
	  mix-blend-mode: normal !important;
	  opacity: 1 !important;
	  -webkit-mask: none !important;
			  mask: none !important;
	  border: 0 !important;
	}

	/* Si acaso hubiera un estilo global sobre .rules-grid img, neutralízalo */
	.rules-grid img {
	  background: transparent !important;
	  filter: none !important;
	  mix-blend-mode: normal !important;
	  -webkit-mask: none !important;
			  mask: none !important;
	}

	/* Responsive opcional */
	@media (max-width: 1100px){
	  img.rule-icon{ width: 120px; height: 120px; }
	}
	@media (max-width: 560px){
	  img.rule-icon{ width: 104px; height: 104px; }
	}

	#comercio .rules-title {
	  color: #39e991;          /* brand green */
	}
	
	/* ====== Solución: tabs de pilares ====== */
	.solucion .pillars-tabs {
	  display: grid;
	  grid-template-columns: repeat(3, 1fr);
	  gap: 16px;
	  margin-bottom: 20px;
	}

	.pillar-tab {
	  display: grid;
	  place-items: center;
	  padding: 24px 16px;
	  border-radius: 16px;
	  background: #ffffff;
	  border: 2px solid rgba(60,63,80,.10);
	  box-shadow: 0 6px 18px rgba(60,63,80,.10);
	  cursor: pointer;
	  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
	  text-align: center;
	}

	.pillar-tab .icon-xl { width: 96px; height: 96px; margin-bottom: 12px; }
	.pillar-tab .pillar-title { font-weight: 800; font-size: 20px; color: #2a2f3a; }
	.pillar-tab .pillar-teaser { font-size: 14px; color: #6b7280; margin-top: 4px; }

	.pillar-tab:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(60,63,80,.14); }
	.pillar-tab.is-active {
	  border-color: #18d777;
	  box-shadow: 0 10px 22px rgba(24,215,119,.20);
	}

	.pillar-panels { margin-top: 12px; }
	.pillar-panel { display: block; }
	.pillar-panel[hidden] { display: none !important; }

	.panel-title { margin: 4px 0 4px; font-size: 24px; }
	.panel-copy  { margin: 0 0 16px; color: #3c3f50; }

	.panel-grid {
	  display: grid;
	  gap: 16px;
	  grid-template-columns: repeat(12, 1fr);
	}

	.panel-card {
	  grid-column: span 4;
	  background: #fff;
	  border-radius: 14px;
	  border: 1px solid rgba(60,63,80,.10);
	  box-shadow: 0 6px 18px rgba(60,63,80,.08);
	  overflow: hidden;
	  transition: transform .12s ease, box-shadow .12s ease;
	}
	.panel-card:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(60,63,80,.12); }

	.panel-card img { display:block; width:100%; height:auto; }
	.panel-card figcaption {
	  padding: 10px 12px;
	  font-size: 14px;
	  color: #3c3f50;
	}

	.panel-card.wide { grid-column: span 12; }

	/* mobile */
	@media (max-width: 900px) {
	  .solucion .pillars-tabs { grid-template-columns: 1fr; }
	  .panel-grid { grid-template-columns: repeat(6, 1fr); }
	  .panel-card { grid-column: span 6; }
	  .panel-card.wide { grid-column: span 6; }
	}

	/* 1) Asegura el comportamiento de mostrar/ocultar paneles */
	.pillar-panel { display: none; }
	.pillar-panel.is-active { 
	  display: block;
	  animation: fadeIn 180ms ease-out;
	}
	@keyframes fadeIn {
	  from { opacity: 0; transform: translateY(6px); }
	  to   { opacity: 1; transform: translateY(0); }
	}

	/* 2) Figcaption centrado y verde corporativo */
	.panel-card figcaption{
	  text-align: center;
	  color: var(--brand, #18d777); /* usa tu variable si existe; fallback incluido */
	  font-weight: 600;
	  margin: 8px 0 6px;
	  letter-spacing: .2px;
	}

	/* Zoom suave para gráficos dentro de los paneles */
	@media (hover: hover) and (pointer: fine) {
	  .panel-card {
		overflow: hidden;            /* evita que se salga el zoom */
		cursor: zoom-in;             /* pista visual */
		transition: box-shadow .25s ease, transform .25s ease;
	  }

	  .panel-card img {
		display: block;
		width: 100%;
		height: auto;
		transform-origin: 50% 50%;
		transition: transform .28s cubic-bezier(.2,.7,.2,1), filter .28s ease;
		will-change: transform;
	  }

	  .panel-card:hover img,
	  .panel-card:focus-within img {
		transform: scale(1.8);      /* ajusta 1.05–1.12 a gusto */
	  }

	  .panel-card:hover,
	  .panel-card:focus-within {
		box-shadow: 0 14px 30px rgba(0,0,0,.10); /* leve realce */
	  }
	}

	/* Respeto a usuarios con “reducir movimiento” */
	@media (prefers-reduced-motion: reduce) {
	  .panel-card,
	  .panel-card img {
		transition: none !important;
	  }
	}
	
	
	/* ---------- Lightbox (overlay) ---------- */
	#lb-overlay {
	  position: fixed;
	  inset: 0;
	  background: rgba(15, 17, 26, 0.86);
	  display: grid;
	  grid-template-rows: 1fr auto;
	  justify-items: center;
	  align-items: center;
	  gap: 10px;
	  opacity: 0;
	  pointer-events: none;
	  transition: opacity .22s ease;
	  z-index: 9999;
	}

	#lb-overlay.is-open {
	  opacity: 1;
	  pointer-events: auto;
	}

	#lb-figure {
	  max-width: 92vw;
	  max-height: 88vh;
	  margin: 0;
	}

	#lb-img {
	  display: block;
	  max-width: 92vw;
	  max-height: 78vh;
	  border-radius: 10px;
	  box-shadow: 0 18px 40px rgba(0,0,0,.35);
	}

	#lb-caption {
	  color: #e8f0ff;
	  font: 500 14px/1.4 "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	  text-align: center;
	  max-width: 92vw;
	  opacity: .9;
	}

	/* Botones navegación / cerrar */
	.lb-btn {
	  position: fixed;
	  top: 50%;
	  transform: translateY(-50%);
	  width: 42px;
	  height: 42px;
	  border-radius: 999px;
	  background: rgba(255,255,255,.12);
	  color: #fff;
	  border: 1px solid rgba(255,255,255,.25);
	  display: grid;
	  place-items: center;
	  cursor: pointer;
	  user-select: none;
	  backdrop-filter: blur(2px);
	}

	.lb-btn:hover { background: rgba(255,255,255,.18); }

	#lb-prev { left: 18px; }
	#lb-next { right: 18px; }

	#lb-close {
	  top: 18px;
	  right: 18px;
	  transform: none;
	  width: 40px;
	  height: 40px;
	}

	/* Accesibilidad / reducción de movimiento */
	@media (prefers-reduced-motion: reduce) {
	  #lb-overlay { transition: none; }
	}

	/* (opcional) Deja el zoom suave al hover tal como lo agregamos antes */
	.panel-card { overflow: hidden; cursor: zoom-in; }
	.panel-card img { transition: transform .25s ease; }
	.panel-card:hover img { transform: scale(1.08); }


	/* ===== METODOLOGÍA (texto + imagen) ===== */
	.method-grid{
	  display:grid;
	  grid-template-columns: 1.05fr 1fr;
	  gap: 32px;
	  align-items:center;
	}

	.method-figure img{
	  width:100%;
	  max-width:560px;
	  display:block;
	  margin-inline:auto;
	  filter: drop-shadow(0 10px 22px rgba(0,0,0,.10));
	  border-radius: 10px; /* quítalo si no quieres bordes curvos */
	}

	.method-bullets{
	  margin:10px 0 0;
	  padding-left:20px;
	  color: var(--muted);
	}
	.method-bullets li{ margin:6px 0; }

	/* Responsive */
	@media (max-width: 980px){
	  .method-grid{
		grid-template-columns: 1fr;
		text-align:center;
	  }
	  .method-figure{ order:-1; }
	  .method-bullets{
		text-align:left;
		max-width: 540px;
		margin:12px auto 0;
	  }
	}

	/* ===== Ajustes bloque METODOLOGÍA ===== */
	.section.method {
	  padding: 56px 0;
	}

	.method-grid{
	  display: grid;
	  grid-template-columns: 1.05fr 1fr;
	  gap: 44px;                /* + espacio entre columnas */
	  align-items: center;
	}

	/* "Tarjeta" para la imagen */
	.method-figure{
	  margin: 0;
	}
	.method-figure img{
	  width: 100%;
	  max-width: 600px;         /* un poco más grande */
	  display: block;
	  margin-inline: auto;
	  background: #fff;
	  border-radius: 14px;
	  padding: 14px;            /* da borde blanco interno */
	  box-shadow: 0 14px 30px rgba(0,0,0,.10);
	}

	/* Texto */
	.method-copy h2{
	  font-weight: 700;         /* evita ultra-bold */
	  font-size: clamp(22px, 2.2vw, 28px);
	  line-height: 1.18;
	  margin: 0 0 8px;
	}
	.method-copy .lead{
	  font-size: 16px;
	  line-height: 1.55;
	}

	/* Bullets */
	.method-bullets{
	  margin: 12px 0 0;
	  padding-left: 0;
	  list-style: none;
	  color: var(--muted);
	}
	.method-bullets li{
	  position: relative;
	  margin: 10px 0;
	  padding-left: 22px;
	}
	.method-bullets li::before{
	  content: "";
	  width: 8px; height: 8px;
	  border-radius: 50%;
	  background: var(--green);
	  position: absolute;
	  left: 0; top: 10px;
	}

	/* Resaltar keywords en verde */
	.method-bullets strong{
	  color: var(--green);
	  font-weight: 700;
	}

	/* CTA */
	.section.method .cta{
	  display: flex;
	  gap: 10px;
	  margin-top: 16px;
	}

	/* Responsive */
	@media (max-width: 980px){
	  .method-grid{
		grid-template-columns: 1fr;
		gap: 28px;
		text-align: center;
	  }
	  .method-figure{ order: -1; }
	  .method-bullets{
		text-align: left;
		max-width: 560px;
		margin: 12px auto 0;
	  }
	  .section.method .cta{
		justify-content: center;
		flex-wrap: wrap;
	  }
	}


	/* ===== ¿POR QUÉ ESCANON? (usa tu mismo markup) ===== */
	#porque-ahora .simple{
	  background: #fff;
	  border: 1px solid rgba(60,63,80,.08);   /* más tenue */
      box-shadow: 0 8px 22px rgba(0,0,0,.05); /* un poco más suave */	  
	  border-radius: 16px;	  
	  padding: clamp(22px, 3.5vw, 36px);
	}

	#porque-ahora h2.center{
	  margin: 0 0 6px;
	  font-weight: 800;                        /* un poco más de presencia */
	  letter-spacing: -0.2px;
	}

	#porque-ahora p.center{
	  color: var(--muted);
	  color: #8793a5;  
	  margin: 0 0 10px;
	  font-size: 15px; 
	}

	/* Punchline: "Simple. Transparente. Sin cobros extraños." */
	#porque-ahora h3.center{
	  margin: 10px 0 16px;
	  font-size: clamp(18px, 2.1vw, 20px);
	  font-weight: 700;
	  line-height: 1.4;
	}
	
	/* Lista de bullets (mantiene tu estructura .bullets + .dot) */
	#porque-ahora .bullets{
	  display: grid;
	  gap: 12px;
	  max-width: 820px;
	  margin: 0 auto;
	}

	#porque-ahora .bullets > div{
	  display: grid;	  
	  grid-template-columns: 16px 1fr; /* puntito + texto */
	  align-items: start;
	  gap: 10px;
	}

	#porque-ahora .bullets .dot{
	  width: 9px; height: 9px;	  	 
	  border-radius: 50%;
	  background: var(--green);
	  margin-top: 7px;                         /* alinea visualmente con primer renglón */
	}

	/* Texto del bullet */
	#porque-ahora .bullets > div > div{
	  color: #203040;                          /* un gris oscuro legible */
	  line-height: 1.6;
	}

	/* Respuesta móvil */
	@media (max-width: 720px){
	  #porque-ahora .simple{
		padding: 20px;
	  }
	  #porque-ahora .bullets{
		gap: 10px;
	  }
	}

	/* Título verde en la sección ¿Por qué Escanon? */
	#porque-ahora h2.center{
	  color: var(--green);      /* usa tu variable de marca */
	  font-weight: 900;         /* un poco más de presencia */
	}



	/* ¿Por qué Escanon? -> énfasis en gris oscuro, no verde */
	#porque-ahora .bullets strong,
	#porque-ahora .bullets em{
	  color: var(--ink-2);   /* gris oscuro corporativo */
	  font-weight: 700;
	}


	/* — CTA: un solo botón en el hero — */
	.hero-dark .cta .btn-ghost { 
	  display: none;            /* oculta "Agenda una demo" sólo en el hero */
	}

	/* — Botón primario por defecto (oscuro) y hover verde — */
	.btn {
	  border: 0;
	  border-radius: 12px;
	  padding: 11px 16px;
	  font-weight: 800;
	  letter-spacing: .2px;
	  transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .12s ease;
	}

	.btn-primary{
	  background:#0f172a;       /* base: oscuro */
	  color:#fff;
	  box-shadow: 0 10px 24px rgba(0,0,0,.35);
	}

	.btn-primary:hover{
	  background: var(--green); /* hover: verde corporativo */
	  color:#0f172a;            /* texto oscuro sobre verde */
	  box-shadow: 0 12px 26px rgba(39,217,119,.35);
	  transform: translateY(-1px);
	}

	.btn-primary:active{
	  transform: translateY(0);
	}

/* Alinea verticalmente imagen y texto en la sección método */
.method-grid{
  align-items: center;                 /* centra ambos en la misma línea base */
}

/* CTA: pegado al inicio de la columna de texto (desktop) */
.section.method .cta{
  display: flex;
  gap: 12px;
  justify-content: flex-start;         /* <-- a la izquierda de la columna */
  margin-top: 12px;                    /* un respiro bajo los bullets */
}
.section.method .cta .btn{
  align-self: flex-start;              /* asegura que no “salte” verticalmente */
}

/* En móvil volvemos a centrar el CTA para mejor balance */
@media (max-width: 980px){
  .section.method .cta{
    justify-content: center;
  }
}


.contact-card{
  max-width:780px;margin:0 auto;
  background:#fff;border:1px solid var(--line);
  border-radius:18px;padding:28px;text-align:center;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
}
.contact-form{
  display:grid;gap:12px;
  grid-template-columns:1fr 1fr;
  margin-top:8px;text-align:left;  
}


/* Centrar el botón dentro del formulario */
.contact-form button{
  grid-column: 1 / -1;    /* que ocupe el ancho de ambas columnas */
  justify-self: center;   /* y él mismo se centre */
  margin-top: 4px;        /* un pelín de aire extra */
}


.contact-form .field{display:flex;flex-direction:column;gap:6px}
.contact-form .field.full{grid-column:1 / -1}
.contact-form label{font-size:13px;color:#3c3f50}
.contact-form input,.contact-form textarea{
  border:1px solid var(--line);border-radius:12px;
  padding:10px 12px;font:inherit;outline:none;
}
.contact-form input:focus,.contact-form textarea:focus{border-color:#18d777}
@media (max-width:720px){
  .contact-form{grid-template-columns:1fr}
}


/* Badge "Pronto" en tabs deshabilitadas */
.pillar-tab .soon{
  position:absolute; top:10px; right:10px;
  background:rgba(24,215,119,.12);
  color:#18d777; border:1px solid rgba(24,215,119,.35);
  padding:3px 8px; font-size:12px; border-radius:999px;
}

/* Estado deshabilitado (look visual + sin hover) */
.pillar-tab.is-disabled{
  position:relative;
  opacity:.55;
  filter: grayscale(1);
  border-style: dashed;
  cursor: not-allowed;
  box-shadow:none;
}
.pillar-tab.is-disabled:hover{
  transform:none;
  box-shadow:none;
}
.pillar-tab.is-disabled .pillar-teaser{ color:#94a3b8; }
.pillar-tab.is-disabled .icon-xl{ opacity:.75; }


/* Head de los paneles de pilares */
.panel-head{
  margin-bottom: 14px;
  text-align: center;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.panel-eyebrow{
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 24px 0 6px;     /* MÁS ESPACIO ARRIBA */
  color: #157a5e;         /* VERDE ESCANON OSCURO Y LEGIBLE */
  font-weight: 600;
}


.panel-title{
  margin: 0 0 4px;
  font-size: clamp(18px, 1.9vw, 22px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink-2);      /* Gris oscuro de los quiebres */
}

.panel-copy{
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 14px;
}


.pillar-tab.is-disabled{
  position:relative;
  opacity:.55;
  filter: grayscale(1);
  border-style: dashed;
  cursor: not-allowed;
  box-shadow:none;
  pointer-events: none;          /* 👈 no recibe clicks ni hovers */
}