/* ═══════════════════════════════════════════════
   ESTUDIO DE ANUNCIOS (publicidad con IA) — Página de Información
   Prefijo: ea-*
   Reusa .cp-hero / .cp-badge / .cp-check / .cp-feature-visual / .ca-pg-plan
   de coco_pos.css y cocoArchitecture/pagina.css — solo overrides aquí.
   ═══════════════════════════════════════════════ */

/* Esta página tiene muchas secciones cortas seguidas — con el gap de
   8rem de .ca-pg-content (pagina.css) más el margin:4rem 0 propio de
   cada sección, el espacio entre bloques se duplicaba y se veía
   excesivo. Se reduce el gap solo en esta página (este archivo solo
   se carga aquí) y se quitan los márgenes redundantes más abajo. */
.ca-pg-content { gap: 4.5rem; }

/* Hero: negro/dorado para que combine con las muestras reales */
.ea-hero {
  background: linear-gradient(135deg, #0f0d0a 0%, #241c10 50%, #120f0a 100%);
}
.ea-blob--1 { background: #d4af37 !important; }
.ea-blob--2 { background: #8a6d1f !important; }

.ea-label {
  background: rgba(212,175,55,0.16) !important;
  border-color: rgba(212,175,55,0.4) !important;
  color: #e9cd71 !important;
}

.ea-title-gradient {
  background: linear-gradient(90deg, #d4af37, #f3e3a1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ea-hero-btn {
  display: inline-block;
  margin-top: .5rem;
  padding: .85rem 2.2rem;
  border-radius: 9999px;
  background: linear-gradient(90deg, #d4af37, #b8902c);
  color: #1a1206;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: opacity .2s, transform .2s;
}
.ea-hero-btn:hover { opacity: .9; transform: translateY(-2px); }

.ea-hero-note {
  margin-top: .9rem;
  color: #c9bd9a;
  font-size: .85rem;
}

/* Badge/check/visual dorado, mismo patrón que cp-badge--* */
.ea-badge {
  background: #fdf6e3 !important;
  color: #8a6d1f !important;
}
.ea-check {
  background: #fdf6e3 !important;
  color: #8a6d1f !important;
}
.ea-visual {
  background: linear-gradient(135deg, #fdf6e3, #f3e3a1) !important;
}
.ea-visual .cp-feature-visual__glow { background: #e9cd71; }

/* Centavos del precio, chicos y alineados arriba a la derecha */
.ea-cents {
  font-size: .5em;
  font-weight: 700;
  vertical-align: top;
  position: relative;
  top: .15em;
}

/* ── Ejemplo de foto mínima aceptable ─────────────── */
.ea-foto-ejemplo {
  background: #fff;
  border-radius: 16px;
  padding: 1rem;
  box-shadow: 0 8px 28px -8px rgba(0,0,0,0.15);
  max-width: 280px;
  margin: 0 auto;
}
.ea-foto-ejemplo img {
  width: 100%;
  border-radius: 10px;
  display: block;
}
.ea-foto-ejemplo figcaption {
  text-align: center;
  font-size: .85rem;
  color: #6b7280;
  font-weight: 600;
  margin-top: .75rem;
}

/* ── Galería "Así se ve" ──────────────────────────── */
.ea-gallery-section { scroll-margin-top: 90px; }

.ea-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
}

.ea-gallery-item {
  display: block;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 28px -8px rgba(0,0,0,0.15);
  text-decoration: none;
  background: #fff;
  transition: transform .2s, box-shadow .2s;
}
.ea-gallery-item:hover { transform: translateY(-4px); box-shadow: 0 14px 36px -8px rgba(0,0,0,0.22); }

.ea-gallery-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.ea-gallery-caption {
  display: block;
  padding: .75rem 1rem;
  font-size: .85rem;
  font-weight: 600;
  color: #374151;
}

/* ── Planes ───────────────────────────────────────── */
.ea-plans { margin: 0; }
.cp-compare { margin: 0; }

.ea-plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
  align-items: stretch;
}

.ea-plan-card {
  position: relative;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.ea-plan-card--featured {
  border-color: #d4af37;
  box-shadow: 0 10px 34px rgba(212,175,55,0.18);
}

.ea-plan-card__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #d4af37, #b8902c);
  color: #1a1206;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  padding: .3rem .9rem;
  border-radius: 9999px;
}

.ea-plan-card__title { font-size: 1.25rem; font-weight: 800; color: #1c1733; margin: 0 0 .5rem; }
.ea-plan-card__desc { color: #6b7280; font-size: .92rem; line-height: 1.55; margin: 0 0 1.25rem; flex: 1; }

.ea-plan-card__price {
  font-size: 1.5rem;
  font-weight: 800;
  color: #1c1733;
  margin-bottom: 1.25rem;
}
.ea-plan-card__price span { color: #9ca3af; font-weight: 400; margin: 0 .2rem; }
.ea-plan-card__price small { display: block; font-size: .8rem; font-weight: 500; color: #9ca3af; margin-top: .2rem; }

.ea-plan-card__btn {
  display: block;
  text-align: center;
  padding: .75rem 1rem;
  border-radius: 9999px;
  background: #fdf6e3;
  color: #8a6d1f;
  font-weight: 700;
  font-size: .92rem;
  text-decoration: none;
  transition: background .2s;
}
.ea-plan-card--featured .ea-plan-card__btn {
  background: linear-gradient(90deg, #d4af37, #b8902c);
  color: #1a1206;
}
.ea-plan-card__btn:hover { opacity: .88; }

.ea-extra-fotos { margin-top: 2rem; }

.ea-aviso {
  margin-top: .75rem;
  font-size: .85rem;
  color: #9a7b1a;
  background: #fdf6e3;
  border: 1px solid #f3e3a1;
  border-radius: 10px;
  padding: .6rem .9rem;
  display: inline-block;
}

/* ── Nota de integración con Pantallas Dinámicas ─── */
.ea-integracion {
  margin: 2.5rem 0 0;
  padding: 1.25rem 1.5rem;
  border-radius: 16px;
  background: #fdf6e3;
  border: 1px solid #f3e3a1;
  color: #6b5a1a;
  font-size: .9rem;
  line-height: 1.6;
}
.ea-integracion a { color: #8a6d1f; font-weight: 700; }

/* ── Pasos "Cómo funciona" ────────────────────────── */
.ea-steps { margin: 0; }
.ea-steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.ea-step {
  background: #fdf6e3;
  border-radius: 16px;
  padding: 1.5rem;
}
.ea-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem; height: 2rem;
  border-radius: 50%;
  background: #d4af37;
  color: #1a1206;
  font-weight: 800;
  font-size: .9rem;
  margin-bottom: .9rem;
}
.ea-step p { margin: 0; color: #374151; font-size: .9rem; line-height: 1.55; }
.ea-step strong { color: #1c1733; }

/* ── Lo que conviene saber ────────────────────────── */
.ea-notas { margin: 0; }
.ea-notas ul { margin: 2rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .9rem; }
.ea-notas li {
  padding-left: 1.6rem;
  position: relative;
  color: #6b7280;
  font-size: .95rem;
  line-height: 1.6;
}
.ea-notas li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: #d4af37;
  font-weight: 800;
}
.ea-notas strong { color: #1c1733; }

/* ── CTA final ─────────────────────────────────────── */
.ea-cta-final {
  margin: 0;
  padding: 3rem 2rem;
  border-radius: 24px;
  background: linear-gradient(135deg, #0f0d0a 0%, #241c10 100%);
  text-align: center;
}
.ea-cta-final h2 { color: #fff; font-size: clamp(1.5rem, 3.5vw, 2rem); font-weight: 800; margin: 0 0 .75rem; }
.ea-cta-final p { color: #c9bd9a; margin: 0 0 1.5rem; }

[data-theme="dark"] .ea-gallery-caption { color: #d1d5db; }
[data-theme="dark"] .ea-gallery-item { background: #1e293b; }
[data-theme="dark"] .ea-plan-card { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .ea-plan-card__title { color: #f1f0ff; }
[data-theme="dark"] .ea-step p { color: #d1d5db; }
[data-theme="dark"] .ea-step strong { color: #f1f0ff; }

@media (max-width: 640px) {
  .ea-gallery-grid { grid-template-columns: 1fr; }
}