/* ============================================================
   DESARROLLO DE APLICACIONES WEB EN PHP — CSS COMPLETO
   - Cabecera/Hero con el mismo formato visual que "Nosotros"
   - Bullets con "check" dibujándose
   - Secciones, grid, tarjetas y utilidades coherentes
   - Bloques no usados: comentados (puedes activarlos cuando quieras)
   - Accesibilidad: respeta prefers-reduced-motion
============================================================ */

/* ===========================
   VARIABLES + BASE
=========================== */
:root{
  /* Tono corporativo principal (verde usado en proyecto) */
  --brand: #82BD03;
  --brand-50:  #F3FBE6;
  --brand-100: #E6F6CC;

  /* Tono de acento secundario (morado ya usado en otras páginas) */
  --violet-600:#7c4dff;
  --violet-700:#5b2cff;

  /* Texto y superficies */
  --ink:#0b1020;
  --ink-soft:#64748b;
  --surface:#ffffff;
  --surface-alt:#F7F9F4;

  /* Dimensiones y sombras */
  --maxw:1200px;
  --radius:16px;
  --shadow-1:0 10px 24px rgba(16,19,23,.08);
  --shadow-2:0 18px 40px rgba(16,19,23,.12);
}

html,body{
  margin:0;
  background:var(--surface);
  color:var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
  line-height:1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Contenedor ancho controlado */
.dp-wrap{ width:min(100% - 32px, var(--maxw)); margin-inline:auto; }

/* Utilidades */
.u-center{ text-align:center; }
.u-muted{ color:var(--ink-soft); }
.u-hide{ display:none !important; }

/* Separación secciones */
section{ padding: clamp(56px, 8vw, 96px) 0; }

/* ===========================
   BOTONES (mismo look & feel)
=========================== */
.dp-btn{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.9rem 1.15rem; border-radius:16px; font-weight:900;
  text-decoration:none; transition: transform .16s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.dp-btn--primary{
  background: linear-gradient(135deg, var(--brand), #A7E34A);
  color:#0b2215; box-shadow: var(--shadow-1);
}
.dp-btn--primary:hover{ transform: translateY(-2px); }
.dp-btn--ghost{
  border:1.5px solid rgba(12,12,20,.16);
  color:#0c0c14; background:transparent;
}
.dp-btn--ghost:hover{ background:rgba(12,12,20,.04); transform:translateY(-1px); }

/* ============================================================
   HERO (formato igual que "Nosotros")
============================================================ */
.dp-hero{
  position:relative; isolation:isolate; overflow:hidden;
  color:#0c0c14;
  background:
    radial-gradient(1400px 520px at 80% 0%, rgba(130,189,3,.10), transparent 18%),
    #fff;
  padding: clamp(72px, 12vw, 140px) 16px;
}
.dp-kicker{
  font-size:.85rem; letter-spacing:.12em; text-transform:uppercase;
  color:#3b3b3b; margin:0 0 .5rem;
}
.dp-title{
  font-size: clamp(2rem, 6vw, 3.2rem);
  margin:.25rem 0 .55rem; font-weight:900;
}
.dp-sub{
  font-size: clamp(1rem, 2vw, 1.15rem);
  color:#4b5563; max-width: 64ch; margin:0 auto 1.2rem;
}

/* Fondo decorativo DESACTIVADO para igualarse a "Nosotros"
   (actívalo quitando el bloque de comentarios si lo quieres) */
/*
.dp-hero__bg{ position:absolute; inset:0; z-index:-1; }
.dp-glow{ position:absolute; width:55vmin; aspect-ratio:1/1; border-radius:50%; filter:blur(60px); opacity:.55; animation:float 14s ease-in-out infinite; }
.dp-g1{ top:-10vmin; left:-10vmin; background:var(--brand); }
.dp-g2{ bottom:-15vmin; right:-12vmin; background:var(--violet-600); animation-delay:.25s; }
.dp-g3{ top:10vmin; right:10vmin; background:rgba(255,255,255,.3); animation-delay:.5s; }
@keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-12px) } }
*/

/* Bullets bajo el subtítulo (mismo patrón) */
.dp-bullets{
  list-style:none; margin:0 0 1.6rem; padding:0;
  display:flex; gap:1rem 2rem; flex-wrap:wrap; justify-content:center; color:#1d2939;
}
.dp-ctas{ display:flex; gap:.75rem; flex-wrap:wrap; justify-content:center; }


.dp-plan2 .dp-mini2{ list-style: none; margin: 0 0 1rem; padding: 0; }
.dp-plan2 .dp-mini2 li{ position: relative; padding-left: 1.4rem; }
.dp-plan2 .dp-mini2 li::before{
  content: "";
  position: absolute;
  left: 0; top: .25rem;
  width: 1rem; height: 1rem;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="black" d="M7.6 13.2 3.9 9.5l1.4-1.4 2.3 2.3 6.1-6.1 1.4 1.4z"/></svg>') no-repeat center / contain;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="black" d="M7.6 13.2 3.9 9.5l1.4-1.4 2.3 2.3 6.1-6.1 1.4 1.4z"/></svg>') no-repeat center / contain;
  background: currentColor;
  opacity: .95;
}


/* ============================================================
   REVEAL SUAVE (para cualquier bloque con data-anim)
============================================================ */
[data-anim]{ opacity:0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
[data-anim].is-in{ opacity:1; transform:none; }

/* ============================================================
   CHECK "DIBUJÁNDOSE" EN BULLETS
============================================================ */
.icon-check .tick-circle,
.icon-check .tick-mark{
  stroke: currentColor; fill: none; stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 100; stroke-dashoffset: 100;
}
.icon-check .tick-circle{ opacity:.30; }
.icon-check.is-in .tick-circle{ animation: checkDraw .9s ease forwards; }
.icon-check.is-in .tick-mark{ animation: checkDraw .8s ease .25s forwards; }
@keyframes checkDraw { to { stroke-dashoffset: 0; } }
/* Color por si currentColor hereda claro en el hero */
.sh-bullets .icon-check{ color:#2b2b2b; opacity:.95; }

/* Accesibilidad: reduce motion */
@media (prefers-reduced-motion: reduce){
  .icon-check .tick-circle, .icon-check .tick-mark{
    animation:none !important; stroke-dasharray:0; stroke-dashoffset:0;
  }
}

/* ============================================================
   TITULARES DE SECCIÓN + ELEMENTOS GLOBALES
============================================================ */
.dp-sec__head{ text-align:center; margin:3rem 0 1.2rem; }
.dp-sec__head h2{
  font-size:clamp(1.8rem,2.8vw,2.4rem); margin:0 0 .6rem; color:#0f4227;
  position:relative; display:inline-block; padding-bottom:.35rem;
}
.dp-sec__head h2::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:6px; border-radius:6px;
  background: linear-gradient(90deg, var(--brand), var(--violet-600)); opacity:.35;
}
.dp-sec__head p{ margin:.2rem 0 0; color:var(--ink-soft); }

/* ===========================
   GRID & TARJETAS BASE
=========================== */
.dp-grid{ display:grid; gap:22px; }
.dp-grid--3{ grid-template-columns: repeat(1, minmax(0,1fr)); }
@media (min-width:780px){ .dp-grid--3{ grid-template-columns: repeat(3, minmax(0,1fr)); } }

.dp-card{
  background:#fff; border:1px solid #ececf3; border-radius:var(--radius);
  padding:20px; box-shadow: var(--shadow-1);
  transition: transform .16s ease, box-shadow .2s ease, border-color .2s ease;
}
.dp-card:hover{ transform: translateY(-2px); border-color: rgba(130,189,3,.28); box-shadow: var(--shadow-2); }

/* ===========================
   PLANES (3 COLUMNAS) — ACTIVO
=========================== */
.dp-plans{
  display:grid; gap:28px; margin-top:2rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
@media (max-width:960px){ .dp-plans{ grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); } }
@media (max-width:680px){ .dp-plans{ grid-template-columns: 1fr; } }

.dp-plan{
  position:relative;
  background:#fff; border:1px solid #ececf3; border-radius:18px;
  padding:24px 22px 28px; box-shadow: var(--shadow-1);
  transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease, background .2s ease;
}
.dp-plan:hover{
  transform: translateY(-4px);
  border-color: rgba(130,189,3,.30);
  box-shadow: 0 18px 42px rgba(34,197,94,.15);
}
.dp-plan h3{ font-size:1.2rem; font-weight:800; margin:.2rem 0 .35rem; }
.dp-plan .u-muted{ color:var(--ink-soft); margin-bottom:.6rem; }
.dp-price{ font-size:1.6rem; font-weight:900; color:#0f4227; margin-bottom:.8rem; }

/* chips/badges */
.dp-badge{
  display:inline-block; background:rgba(130,189,3,.12); color:#1f8c43;
  border:1px solid rgba(130,189,3,.25); border-radius:999px; padding:.25rem .6rem;
  font-weight:800; font-size:.8rem; margin-bottom:.3rem;
}
.dp-tag{
  display:inline-block; background:linear-gradient(135deg,#f59e0b,#22c55e);
  color:#0c0c14; font-weight:800; padding:.35rem .6rem; border-radius:10px;
  box-shadow:0 10px 24px rgba(20,20,41,.12); font-size:.8rem; margin-bottom:.4rem;
}
.dp-plan--popular{
  background: linear-gradient(180deg, #fefefe, #fbfff8);
  border:2px solid color-mix(in oklab, var(--brand) 60%, #fff 40%);
  box-shadow:0 18px 45px rgba(34,197,94,.22);
  transform: translateY(-2px);
}
.dp-plan--popular:hover{ transform: translateY(-6px); }

/* lista interna de plan */
.dp-mini{
  list-style:none; padding:0; margin:0 0 1rem;
  display:grid; gap:.45rem; font-size:.97rem; color:var(--ink-soft);
}
.dp-mini li{ display:grid; grid-template-columns:22px 1fr; align-items:center; gap:.45rem; }
.dp-ico{ width:18px; height:18px; flex-shrink:0; }

/* fila CTAs */
.dp-cta-row{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.8rem; }

/* ===========================
   BLOQUES ADICIONALES (OPCIONALES)
=========================== */

/* CTA banda clara */
.dp-cta-band{ padding:3.8rem 1.25rem; background: linear-gradient(180deg, var(--brand-50), #fff); }
.dp-cta-wrap{ width:var(--maxw); margin-inline:auto; text-align:center; }
.dp-cta-wrap h2{
  font-size:clamp(1.8rem,2.8vw,2.4rem); margin:0 0 .4rem; color:#0f4227;
  position:relative; display:inline-block; padding-bottom:.35rem;
}
.dp-cta-wrap h2::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:6px; border-radius:6px;
  background: linear-gradient(90deg, var(--brand), var(--violet-600)); opacity:.35;
}
.dp-cta-wrap p{ margin:.2rem 0 1rem; color:#2b2b2b; }
.dp-chips{ display:flex; gap:.5rem; flex-wrap:wrap; justify-content:center; list-style:none; padding:0; margin:0 0 1rem; }
.dp-chips li{
  background:#fff; border:1px solid var(--brand-100); padding:.4rem .7rem; border-radius:999px;
  font-weight:600; box-shadow:0 8px 20px rgba(130,189,3,.08);
}

/* ===========================
   BLOQUES NO USADOS (COMENTADOS PARA LIMPIEZA)
=========================== */

/* Acordeón FAQ (descomenta si lo usas)
.dp-acc{ border:1px solid #e2e2ea; border-radius:14px; padding:14px; background:#fff; margin-bottom:10px; }
.dp-acc summary{ cursor:pointer; font-weight:900; }
.dp-acc[open] summary{ color:#2b2f99; }
.dp-acc__content{ padding-top:10px; color:var(--ink-soft); }
*/

/* Hero con glows flotando (si prefieres el estilo con brillos, descomenta el bloque de arriba en HERO)
*/

/* ===========================
   ACCESIBILIDAD GLOBAL
=========================== */
@media (prefers-reduced-motion: reduce){
  [data-anim]{ transition: none !important; transform: none !important; opacity: 1 !important; }
}