/* Web de venta de Atiendo (atiendoapp.com). Página estática: no depende de Angular. */
:root {
  --azul: #1565c0;
  --azul-oscuro: #0d47a1;
  --verde: #00897b;
  --tinta: #0f2440;
  --gris: #51607a;
  --fondo-claro: #f3f7fc;
  --borde: #dde6f1;
  --radio: 20px;
  --sombra: 0 18px 50px rgba(13, 43, 78, 0.14);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', 'Segoe UI', Roboto, Arial, sans-serif;
  color: var(--tinta);
  background: #fff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--azul); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 0.5em; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.5rem); text-align: center; }
h3 { font-size: 1.3rem; }

.contenedor { width: min(1120px, 100% - 40px); margin-inline: auto; }
.angosto { width: min(760px, 100% - 40px); }
.centrado { text-align: center; }

/* ---------- Botones ---------- */
.boton {
  display: inline-block; text-align: center;
  padding: 10px 20px; border-radius: 999px; font-weight: 700; text-decoration: none; white-space: nowrap;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.boton:hover { transform: translateY(-1px); }
.boton.grande { padding: 15px 28px; font-size: 1.05rem; }
.boton.primario { background: linear-gradient(135deg, var(--azul), var(--verde)); color: #fff; box-shadow: 0 8px 22px rgba(21, 101, 192, 0.3); }
.boton.secundario { background: #fff; color: var(--azul); border: 2px solid var(--borde); }
.boton.texto { color: var(--tinta); }
.boton.blanco { background: #fff; color: var(--azul-oscuro); }

/* ---------- Barra superior ---------- */
.barra {
  position: sticky; top: 0; z-index: 10;
  background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borde);
}
.barra-interior { display: flex; align-items: center; gap: 24px; height: 68px; }
.marca { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.3rem; color: var(--tinta); text-decoration: none; }
.menu { display: flex; gap: 22px; margin-left: auto; }
.menu a { color: var(--gris); text-decoration: none; font-weight: 600; }
.menu a:hover { color: var(--azul); }
.acciones { display: flex; gap: 8px; }

/* ---------- Portada ---------- */
.portada {
  background:
    radial-gradient(circle at 85% 20%, rgba(0, 137, 123, 0.14), transparent 45%),
    radial-gradient(circle at 10% 90%, rgba(21, 101, 192, 0.12), transparent 40%),
    var(--fondo-claro);
  overflow: hidden;
}
.portada-interior { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; padding: 72px 0 80px; }
.etiqueta { display: inline-block; margin: 0 0 18px; padding: 6px 14px; border-radius: 999px; background: #e1f2ef; color: #00695c; font-weight: 700; font-size: 0.9rem; }
h1 { font-size: clamp(2.4rem, 5.4vw, 4rem); font-weight: 800; }
h1 span { background: linear-gradient(135deg, var(--azul), var(--verde)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bajada { font-size: 1.15rem; color: var(--gris); max-width: 34em; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 12px; }
.cta.centrado { justify-content: center; }
.nota { color: var(--gris); font-size: 0.92rem; }
/* Aviso de la app en Google Play (todavía no publicada: sin link) */
.play-pronto {
  display: inline-flex; align-items: center; gap: 10px; margin: 14px 0 0; padding: 8px 18px 8px 14px;
  border-radius: 12px; background: var(--tinta); color: #fff; line-height: 1.2;
}
.play-pronto svg { color: #34d399; flex: none; }
.play-pronto span { font-weight: 700; }
.play-pronto small { display: block; font-weight: 500; font-size: 0.75rem; opacity: 0.75; }

.portada-telefonos { position: relative; height: 560px; }
.telefono {
  margin: 0; width: 270px; border-radius: 34px; padding: 9px; background: #0f2440;
  box-shadow: var(--sombra);
}
.telefono img { border-radius: 26px; width: 100%; height: auto; }
.portada-telefonos .telefono { position: absolute; }
.portada-telefonos .adelante { left: 0; top: 10px; z-index: 2; }
.portada-telefonos .atras { right: 0; top: 60px; transform: rotate(4deg); opacity: 0.95; }

/* ---------- Beneficios ---------- */
.beneficios { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: -40px; position: relative; z-index: 3; }
.beneficio {
  display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: var(--radio);
  background: #fff; box-shadow: var(--sombra);
}
.beneficio span:last-child { color: var(--gris); font-size: 0.95rem; }
.icono { font-size: 1.6rem; }

/* ---------- Secciones ---------- */
.seccion { padding: 96px 0; }
.seccion.clara { background: var(--fondo-claro); }
.seccion-bajada { text-align: center; color: var(--gris); font-size: 1.1rem; max-width: 40em; margin: 0 auto 56px; }

.funcion { display: grid; grid-template-columns: 1fr auto; gap: 64px; align-items: center; margin-bottom: 80px; }
.funcion.invertida { grid-template-columns: auto 1fr; }
.funcion.invertida .telefono { order: -1; }
.funcion h3 { font-size: 1.7rem; }
.funcion ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.funcion li { position: relative; padding-left: 32px; color: #2c3e57; }
.funcion li::before {
  content: '✓'; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%;
  background: #e1f2ef; color: var(--verde); font-weight: 800; font-size: 0.8rem; display: grid; place-items: center;
}
.pronto { display: inline-block; margin-left: 6px; padding: 1px 10px; border-radius: 999px; background: #fff3e0; color: #b45309; font-size: 0.8rem; font-weight: 700; }

.tarjetas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tarjeta { padding: 26px; border: 1px solid var(--borde); border-radius: var(--radio); }
.tarjeta h3 { font-size: 1.15rem; }
.tarjeta p { margin: 0; color: var(--gris); }

/* ---------- Especialidades ---------- */
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.chips li { padding: 9px 18px; border-radius: 999px; background: #fff; border: 1px solid var(--borde); font-weight: 600; }
.chips li.propia { background: linear-gradient(135deg, var(--azul), var(--verde)); color: #fff; border: 0; }

/* ---------- Precios ---------- */
.precios { display: grid; grid-template-columns: repeat(2, minmax(0, 340px)); justify-content: center; gap: 24px; }
.plan { position: relative; padding: 32px; border: 2px solid var(--borde); border-radius: var(--radio); text-align: center; }
.plan.destacado { border-color: var(--verde); box-shadow: var(--sombra); }
.cinta { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); padding: 4px 14px; border-radius: 999px; background: var(--verde); color: #fff; font-weight: 700; font-size: 0.85rem; white-space: nowrap; }
.precio { margin: 8px 0; }
.precio span { font-size: 2.4rem; font-weight: 800; }
.precio small { display: block; color: var(--gris); }
.detalle { margin: 0; color: var(--gris); font-size: 0.95rem; }
.tramos { text-align: center; margin-top: 28px; color: var(--gris); }
.tramos ul { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.tramos li { padding: 6px 14px; border-radius: 12px; background: var(--fondo-claro); color: var(--tinta); font-weight: 600; }
.incluye { list-style: none; padding: 0; margin: 32px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; font-weight: 600; }

/* ---------- Preguntas ---------- */
details { background: #fff; border: 1px solid var(--borde); border-radius: 14px; padding: 0 22px; margin-bottom: 12px; }
summary { cursor: pointer; padding: 18px 0; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; font-size: 1.4rem; line-height: 1; color: var(--azul); }
details[open] summary::after { content: '–'; }
details p { margin: 0 0 18px; color: var(--gris); }

/* ---------- Cierre y pie ---------- */
.cierre { padding: 88px 0; text-align: center; color: #fff; background: linear-gradient(135deg, var(--azul), var(--verde)); }
.cierre img { margin: 0 auto 18px; border-radius: 18px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); }
.cierre p { font-size: 1.15rem; opacity: 0.9; margin: 0 0 28px; }
.pie { padding: 32px 0; border-top: 1px solid var(--borde); }
.pie-interior { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.pie nav { display: flex; flex-wrap: wrap; gap: 20px; }
.pie nav a { color: var(--gris); text-decoration: none; }
.pie small { color: var(--gris); }

/* ---------- Celular y tablet ---------- */
@media (max-width: 960px) {
  .menu { display: none; }
  .acciones { margin-left: auto; }
  .portada-interior { grid-template-columns: 1fr; padding-top: 48px; text-align: center; }
  .bajada { margin-inline: auto; }
  .cta { justify-content: center; }
  .portada-telefonos { height: 440px; width: 340px; margin: 0 auto; }
  .portada-telefonos .telefono { width: 210px; }
  .beneficios { grid-template-columns: repeat(2, 1fr); }
  .funcion, .funcion.invertida { grid-template-columns: 1fr; gap: 32px; justify-items: center; margin-bottom: 64px; }
  .funcion.invertida .telefono { order: 0; }
  .funcion .telefono { width: 230px; }
  .tarjetas { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .acciones .texto { display: none; }
  .boton.grande { width: 100%; }
  .beneficios { grid-template-columns: 1fr; margin-top: -24px; }
  .precios { grid-template-columns: 1fr; }
  .seccion { padding: 64px 0; }
  .pie-interior { flex-direction: column; text-align: center; }
  .pie nav { justify-content: center; }
}