/* Camilo Veterinario · /guias/ (guía gratis a cambio del correo). Se suma a base.css; mismos tokens (DESIGN.md).
   Sin estilos en línea: la CSP de la ruta es estricta. Si se edita este archivo, cambiar el nombre (guias-v2.css): la caché dura un año. */
main.guia{max-width:980px;display:grid;gap:22px;padding-top:12px}

.portada{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr;border-radius:32px;background:linear-gradient(180deg,#E3F1F4,#F4F9FA);box-shadow:0 22px 44px -26px rgba(10,52,65,.5)}
.portada-txt{position:relative;z-index:1;padding:28px 24px 12px}
.eti{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:var(--white);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 6px 18px -12px rgba(10,52,65,.5)}
.eti i{width:8px;height:8px;border-radius:50%;background:var(--ok)}
.portada h1{margin:16px 0 14px;font-size:clamp(2.3rem,9vw,4.2rem);line-height:.98}
.resalta{color:var(--brand)}
.portada .lead{margin-bottom:16px;max-width:46ch}
.puntos{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:8px;font-weight:600;font-size:16px}
.puntos li{display:flex;align-items:center;gap:10px}
.puntos .ico{width:22px;height:22px;padding:3px;border-radius:50%;background:var(--pastel);color:var(--brand)}
.foto{display:block;width:calc(100% - 28px);height:auto;margin:6px 14px 14px;aspect-ratio:16/10;object-fit:cover;object-position:50% 55%;border-radius:24px}

.pedir{display:grid;gap:0}
.pedir h2{margin:0 0 8px;font-family:var(--f-display);font-weight:600;font-size:clamp(1.7rem,5vw,2.3rem);line-height:1.04;letter-spacing:-.04em}
.pedir .lead{margin-bottom:18px}
.acepto{display:flex;align-items:flex-start;gap:12px;margin:6px 0 4px;font-size:14px;line-height:1.5;color:var(--muted);cursor:pointer}
.acepto input{flex:none;width:24px;height:24px;margin:1px 0 0;accent-color:var(--brand)}
.acepto a{color:var(--brand);font-weight:600}
.acepto span{padding-top:1px}
/* Trampa para robots: fuera de pantalla, no se muestra ni se enfoca. */
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.estado-ic{display:grid;place-items:center;width:64px;height:64px;margin:0 0 16px;border-radius:50%;background:var(--ok-tint);color:var(--ok)}
.estado-ic .ico{display:block}
#paso-listo .btn .ico{width:24px;height:24px}
#paso-listo .ayuda{margin-top:20px}
.aviso{margin:0 4px;font-size:14px;line-height:1.55;color:var(--muted)}

@media (min-width:760px){
  main.guia{padding-top:20px}
  .portada{grid-template-columns:1.15fr .85fr;align-items:center}
  .portada-txt{padding:44px 0 44px 44px}
  .foto{width:calc(100% - 20px);margin:20px 20px 20px 0;aspect-ratio:4/3;border-radius:24px}
  .pedir{padding:40px 44px 38px}
}
@media (prefers-reduced-motion:no-preference){
  .portada,.pedir{animation:sube .5s cubic-bezier(.2,.7,.2,1) backwards}
  .pedir{animation-delay:.1s}
  @keyframes sube{from{opacity:0;transform:translateY(14px)}}
}