/* ============================================================
   creacion-marca.css — estilos exclusivos de public/creacion-marca.php
   Cargada solo en esta vista vía $pageStyles (ver header.php).

   El hero (.hero-marca) reutiliza las clases compartidas de
   style.css .parallax-visual / .parallax-media / .parallax-img
   para heredar el mismo efecto de zoom-por-scroll que ya tienen
   Nosotros y Servicios (lo controla main.js buscando cualquier
   .parallax-visual en la página, sin código extra). Lo único que
   se sobreescribe acá es el overlay: en vez del degradado navy
   genérico, usamos un tinte cálido/crimson acorde al tema de
   branding de esta página.
   ============================================================ */

.hero-marca{
  position:relative; overflow:visible; z-index:5; box-sizing:border-box;
  /* 100dvh como mejora progresiva sobre 100vh — ver la nota completa en
     .parallax-hero (style.css): 100vh a secas se recalcula cuando la
     barra de direcciones del navegador se anima en móvil, y eso puede
     descolocar el header fijo del sitio. */
  height:100vh;
  height:100dvh;
  display:flex; align-items:center; justify-content:center;
  padding:80px 0;
}

.hero-marca .parallax-overlay{
  background:
    linear-gradient(180deg, rgba(24,14,20,.86) 0%, rgba(30,15,24,.72) 45%, rgba(18,10,16,.92) 100%),
    radial-gradient(circle at 82% 12%, rgba(234,33,81,.35) 0%, transparent 45%);
}

@media (max-width:860px){
  .hero-marca{height:100vh; height:100dvh; padding:60px 0;}
}

/* ============================================================
   SECCIÓN "QUÉ INCLUYE" — copia adaptada de .benefits-grid /
   .benefit-card-float / .benefit-card (style.css, usadas en
   software-a-medida.php), renombrada a .marca-incluye-* para
   que viva solo acá y se pueda ajustar sin tocar la hoja
   compartida. Cambio principal frente al original: la tarjeta
   ya no lleva icon-box + imagen chica centrada, sino una FOTO
   grande de portada (mismo ancho que la tarjeta, esquinas
   redondeadas arriba) para las 4 imágenes de branding.
   ============================================================ */

.marca-incluye-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
  align-items:stretch;
}

.benefit-reveal, .marca-incluye-card-float{height:100%;}

.marca-incluye-card-float{
  --float-y: -14px;
  animation-duration:6s; animation-timing-function:ease-in-out; animation-iteration-count:infinite;
  animation-name:marcaIncluyeFloat;
}
.marca-incluye-float-up{ --float-y: -14px; }
.marca-incluye-float-down{ --float-y: 14px; }
@keyframes marcaIncluyeFloat{
  0%, 100%{transform:translateY(0);}
  50%{transform:translateY(var(--float-y));}
}

.marca-incluye-card{
  position:relative;
  height:100%; display:flex; flex-direction:column;
  background:#fff; border:1.5px solid var(--line); border-radius:18px;
  overflow:hidden;
  text-align:center;
  box-shadow:0 14px 34px -24px rgba(30,44,81,.25);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.marca-incluye-card:hover{
  transform:translateY(-5px);
  border-color:var(--crimson);
  box-shadow:0 0 0 1px var(--crimson), 0 0 24px rgba(234,33,81,.35), 0 22px 44px -20px rgba(30,44,81,.28);
}

/* Imagen grande de portada: ocupa todo el ancho de la tarjeta,
   sin margen lateral (a diferencia del .benefit-card-img
   original, que era chico y centrado con margen). */
.marca-incluye-card-img{
  width:100%; height:170px; object-fit:cover; display:block;
  margin:0 0 20px;
}

.marca-incluye-card h3{font-size:16.5px; color:var(--navy); margin:0 26px 8px;}

.marca-incluye-card .benefit-desc{
  color:var(--navy); font-weight:600; font-size:14.5px; line-height:1.5;
  margin:0 26px;
}

.marca-incluye-card ul{
  margin:16px 26px 30px; padding-left:18px; text-align:left;
  color:var(--muted); font-size:12.5px; line-height:1.85;
}
.marca-incluye-card ul li{margin-bottom:2px;}

@media (prefers-reduced-motion: reduce){
  .marca-incluye-card-float{animation:none;}
}

@media (max-width:1080px){
  .marca-incluye-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .marca-incluye-grid{grid-template-columns:1fr;}
  .marca-incluye-card-img{height:190px;}
}

/* ============================================================
   CTA FINAL dividido en texto + imagen (corte diagonal) — antes
   usaba .cta-fullwidth genérico con íconos sueltos esparcidos
   y un cuadrado decorativo rotado (::after). Esta vista ya no
   los lleva; en su lugar hay un panel de imagen real a la
   derecha, separado con un corte en diagonal. Se anula el
   ::after y el padding del componente compartido solo en esta
   página (no se toca cta-fullwidth en style.css: software-a-medida.php
   lo sigue usando tal cual).
   ============================================================ */

.marca-cta-split{
  padding:0 !important;
  display:flex; align-items:stretch;
  min-height:300px;
  background:var(--navy) !important;
}
.marca-cta-split::after{display:none;}

.marca-cta-split-inner{
  flex:1 1 auto; display:flex; flex-direction:column; justify-content:center;
  align-items:flex-start; gap:0;
  /* Ojo: NO usar "margin:0 auto" aquí — este bloque ya crece (flex:1 1
     auto) para ocupar todo el espacio que deja la imagen (flex:0 0 40%),
     así que un auto-margin lo centraría DENTRO de esa caja ya crecida en
     vez de pegarlo al borde izquierdo, dejando un hueco fantasma a la
     izquierda del texto (eso era el desalineado que se veía). */
  padding:56px 48px; max-width:680px; position:relative; z-index:2;
  /* La sección es full-bleed (sin .wrap), pero el texto debe arrancar
     alineado exactamente con el logo del header (--header-edge,
     definida en style.css — usa max-width:1340px, el mismo que
     .site-header .wrap, NO el de 1180px del .wrap normal). Va en
     margin-left, NO en padding-left: la caja ya tiene max-width:680px,
     así que un padding grande se come el espacio interno del propio
     texto (por eso se apilaba en pantallas anchas) — el margin en
     cambio solo reposiciona la caja completa, sin tocar su ancho. */
  margin-left:var(--header-edge);
}
.marca-cta-split-btn{margin-top:26px;}

.marca-cta-split-image{
  position:relative; flex:0 0 40%;
  margin-left:auto;
  clip-path:polygon(14% 0, 100% 0, 100% 100%, 0% 100%);
  background:var(--navy);
  overflow:hidden;
}
.marca-cta-split-image img{
  width:100%; height:100%; object-fit:cover; object-position:center 30%;
  display:block;
}
.marca-cta-split-image::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg, var(--navy) 0%, rgba(30,44,81,.5) 16%, rgba(30,44,81,0) 42%);
}

/* En un rango intermedio (tablet / ventana angosta de escritorio) la
   imagen fija al 40% le dejaba muy poco ancho al texto — el título de
   3-4 palabras se apilaba en 3 líneas y todo se veía apretujado. Se
   sube el corte a apilado vertical antes de llegar a ese punto en vez
   de a los 760px originales. */
@media (max-width:900px){
  .marca-cta-split{flex-direction:column;}
  .marca-cta-split-image{
    clip-path:none; flex:0 0 200px; width:100%; order:-1; margin-left:0;
  }
  .marca-cta-split-inner{padding:40px 26px; max-width:none; margin-left:0;}
}

/* ============================================================
   COMPARACIÓN "SIN MARCA" VS "CON MARCA" — reemplaza el
   carrusel de logos y los testimonios de esta vista. Propia
   de esta página, sin equivalente en style.css.
   ============================================================ */

.marca-compara-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
  margin-top:40px;
}

.marca-compara-card{
  border-radius:18px; padding:34px 32px;
  border:1.5px solid var(--line);
}

.marca-compara-tag{
  display:inline-block; font-size:12.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em;
  padding:6px 14px; border-radius:20px; margin-bottom:22px;
}

.marca-compara-sin{background:#F7F7FA;}
.marca-compara-sin .marca-compara-tag{background:#E4E6EE; color:var(--muted);}
.marca-compara-sin ul li{color:var(--muted);}
.marca-compara-sin ul li svg{color:#B4B9C9;}

.marca-compara-con{background:#fff; border-color:var(--crimson); box-shadow:0 20px 44px -26px rgba(234,33,81,.35);}
.marca-compara-con .marca-compara-tag{background:var(--crimson-tint); color:var(--crimson);}
.marca-compara-con ul li{color:var(--navy); font-weight:500;}
.marca-compara-con ul li svg{color:var(--crimson);}

.marca-compara-card ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px;}
.marca-compara-card ul li{
  display:flex; align-items:flex-start; gap:10px;
  font-size:14.5px; line-height:1.5;
}
.marca-compara-card ul li svg{flex-shrink:0; margin-top:2px;}

@media (max-width:760px){
  .marca-compara-grid{grid-template-columns:1fr;}
}

/* ============================================================
   BLOQUE UNIFICADO "Proceso" + "Por qué importa" — antes eran
   dos <section> separadas (.process-section con su propio fondo
   de imagen, .stats-band con fondo sólido + íconos esparcidos).
   Ahora comparten un solo fondo continuo (misma imagen de red,
   estirada a toda la altura de ambas) y ya no lleva los íconos
   sueltos. Se anula el fondo/padding propio de cada <section>
   para que no corten el continuo.
   ============================================================ */

.marca-proceso-porque{
  position:relative; overflow:hidden;
  background:var(--navy-ink);
}

.marca-proceso-porque-bg{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
  opacity:.16; pointer-events:none; user-select:none;
}

.marca-proceso-porque .process-section{
  background:transparent;
  padding-bottom:70px;
}
.marca-proceso-porque .stats-band{
  background:transparent;
  padding-top:0;
}

/* ============================================================
   TARJETAS "POR QUÉ IMPORTA" — antes usaban .card/.icon-box
   genéricos (heredaban color:#fff del fondo oscuro del stats-band,
   así que el título quedaba blanco sobre blanco = invisible).
   Rediseño propio: título con color fijo, ícono con anillo de
   pulso animado en loop (llama la atención sin esperar el hover)
   y borde degradado crimson que aparece al pasar el mouse.
   ============================================================ */

.marca-porque-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
}

.marca-porque-card{
  position:relative;
  background:var(--navy); border-radius:20px; padding:32px 26px;
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
}

.marca-porque-card::before{
  content:""; position:absolute; inset:0; border-radius:20px;
  padding:1.5px;
  background:linear-gradient(135deg, var(--crimson), rgba(234,33,81,0) 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  opacity:0; transition:opacity .35s ease;
  pointer-events:none;
}

.marca-porque-card:hover{
  transform:translateY(-8px);
  box-shadow:0 28px 54px -20px rgba(0,0,0,.55), 0 0 30px -6px rgba(234,33,81,.45);
}
.marca-porque-card:hover::before{opacity:1;}

.marca-porque-icon{
  position:relative;
  width:56px; height:56px; border-radius:16px;
  background:rgba(234,33,81,.16); color:var(--crimson);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:22px;
  transition:transform .45s cubic-bezier(.34,1.56,.64,1), background .35s ease, color .35s ease;
}
.marca-porque-card:hover .marca-porque-icon{
  transform:scale(1.12) rotate(-6deg);
  background:var(--crimson); color:#fff;
}

/* Anillo de pulso: siempre animando, escalonado por tarjeta */
.marca-porque-icon::after{
  content:""; position:absolute; inset:-6px; z-index:-1;
  border-radius:inherit; border:2px solid var(--crimson);
  opacity:0;
  animation:marcaPorquePulse 2.8s ease-out infinite;
}
.marca-porque-card:nth-child(1) .marca-porque-icon::after{animation-delay:0s;}
.marca-porque-card:nth-child(2) .marca-porque-icon::after{animation-delay:.5s;}
.marca-porque-card:nth-child(3) .marca-porque-icon::after{animation-delay:1s;}
.marca-porque-card:nth-child(4) .marca-porque-icon::after{animation-delay:1.5s;}

@keyframes marcaPorquePulse{
  0%{transform:scale(.85); opacity:.55;}
  70%{transform:scale(1.5); opacity:0;}
  100%{opacity:0;}
}

.marca-porque-card h3{color:#fff; font-size:16.5px; margin-bottom:8px;}
.marca-porque-card p{color:#B9C2E0; font-size:13.5px; line-height:1.6;}


@media (prefers-reduced-motion: reduce){
  .marca-porque-icon::after{animation:none;}
  .marca-porque-card{transition:none;}
}

@media (max-width:1080px){
  .marca-porque-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .marca-porque-grid{grid-template-columns:1fr;}
}