/* Página comercial (www): resalte sobrio de las secciones y tarjetas. v3.11.19
   Solo afecta a .commercial-landing. Movimiento mínimo; se desactiva con prefers-reduced-motion. */
@property --cg-sec-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* Hover con mouse: sombra suave, subrayado del título y borde tenue */
@media (hover: hover) and (pointer: fine) {
  .commercial-landing .landing-section {
    position: relative;
    transition: box-shadow .4s ease, border-color .4s ease;
  }
  .commercial-landing .landing-section::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from var(--cg-sec-angle), transparent 0 70%, #93c5fd, transparent 90%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease;
  }
  .commercial-landing .landing-section:hover {
    box-shadow: 0 24px 60px #2563eb26;
  }
  .commercial-landing .landing-section:hover::after {
    opacity: .6;
    animation: cgSecSpin 8s linear infinite;
  }
  .commercial-landing .landing-section h2 {
    background-image: linear-gradient(#1d4ed8, #1d4ed8);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 2px;
    padding-bottom: 6px;
    transition: background-size .6s ease;
  }
  .commercial-landing .landing-section:hover h2 {
    background-size: 100% 2px;
  }
  .commercial-landing .value-card,
  .commercial-landing .plan-card {
    transition: transform .3s ease, box-shadow .3s ease;
  }
  .commercial-landing .landing-section:hover .value-card:hover,
  .commercial-landing .landing-section:hover .plan-card:hover {
    transform: translateY(-2px);
  }
}

@keyframes cgSecSpin {
  to { --cg-sec-angle: 360deg; }
}

/* Entrada suave al hacer scroll (navegadores compatibles) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .commercial-landing .landing-section {
      animation: cgSecReveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 30%;
    }
  }
}
@keyframes cgSecReveal {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Iconos de "Quién está detrás" y "Planes": color institucional fijo, sin movimiento */
.cg-card-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: #1d4ed8;
}
.cg-card-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (prefers-reduced-motion: reduce) {
  .commercial-landing .landing-section,
  .commercial-landing .landing-section::after,
  .commercial-landing .landing-section h2 { animation: none; transition: none; }
  .commercial-landing .landing-section::after { display: none; }
}