/* ============================================================
   PÁGINAS DE INFORMACIÓN (js/store/info.js): Sobre nosotros, Contacto,
   Envíos, Cambios y garantía, Términos, Privacidad. Dentro de la tienda,
   con el navbar y el pie de siempre.
   ============================================================ */
.info-page { max-width: 1040px; margin: 0 auto; padding: 40px 20px 70px; display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 48px; align-items: start; }
@media (max-width: 820px) { .info-page { grid-template-columns: 1fr; gap: 28px; padding-top: 28px; } }
.info-page__cuerpo h1 { font-family: var(--font-display, 'Bebas Neue', sans-serif); font-weight: 400; font-size: 38px; letter-spacing: .5px; margin: 0 0 6px; line-height: 1.1; }
.info-page__cuerpo h2 { font-size: 16px; margin: 24px 0 6px; }
.info-page__cuerpo p, .info-page__cuerpo li { font-size: 14.5px; line-height: 1.7; color: #333; }
.info-page__cuerpo ul { padding-left: 20px; }
.info-page__cuerpo a { color: #111; }
.info-page__cuerpo .fecha { font-size: 12.5px; color: #777; margin: 0 0 12px; }
.info-page__cuerpo .caja { background: #f5f5f3; border-radius: 10px; padding: 14px 16px; margin: 14px 0; font-size: 14.5px; line-height: 1.8; }
.info-page__mas { position: sticky; top: 90px; border: 1px solid #e6e6e6; border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 2px; }
.info-page__mas-tit { font-size: 12px; font-weight: 600; color: var(--color-gray-600); margin: 0 0 6px 6px; }
.info-page__mas a { font-size: 14px; font-weight: 600; color: #222; text-decoration: none; padding: 8px 6px; border-radius: 8px; }
.info-page__mas a:hover { background: #f3f3f1; }
@media (max-width: 820px) { .info-page__mas { position: static; } }

/* Contacto: una tarjeta por canal. */
.info-contacto { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 18px 0 8px; }
.info-contacto__item { display: flex; flex-direction: column; gap: 3px; border: 1px solid #e6e6e6; border-radius: 12px; padding: 16px; text-decoration: none; color: #111; transition: border-color .15s ease, transform .15s ease; }
.info-contacto__item:hover { border-color: #111; transform: translateY(-2px); }
.info-contacto__item strong { font-size: 14px; font-weight: 700; color: var(--color-black); }
.info-contacto__item span { font-size: 14.5px; color: #555; word-break: break-word; }
.info-page__mas-tit:not(:first-child) { margin-top: 12px; }
.info-page__mas a.activo { background: #111; color: #fff; }

/* Pasos con captura (Cómo comprar, Rastrear): el texto a la izquierda y la
   pantalla del celular a la derecha; en el celular, una debajo del otro. */
.info-paso { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 24px; align-items: start; padding: 22px 0; border-bottom: 1px solid #eee; }
.info-paso:last-of-type { border-bottom: 0; }
.info-paso__n { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #111; color: #fff; font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.info-paso h2 { margin: 0 0 4px !important; }
.info-paso__img { width: 100%; height: auto; border-radius: 14px; border: 1px solid #e6e6e6; box-shadow: 0 6px 18px rgba(0,0,0,.08); }
@media (max-width: 620px) { .info-paso { grid-template-columns: 1fr; } .info-paso__img { max-width: 260px; } }

/* Preguntas frecuentes: acordeón. */
.info-faq { border-bottom: 1px solid #eee; }
.info-faq summary { cursor: pointer; list-style: none; padding: 14px 28px 14px 0; font-weight: 600; font-size: 15px; position: relative; }
.info-faq summary::-webkit-details-marker { display: none; }
.info-faq summary::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 20px; font-weight: 400; color: #888; }
.info-faq[open] summary::after { content: '−'; }
.info-faq > div { padding: 0 0 12px; }
.info-faq > div p { margin: 0 0 8px; }

/* Cuidados: tarjetas por consejo y el video de Instagram (se carga al tocarlo). */
.info-cuidados { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 18px 0 8px; }
.info-cuidado { border: 1px solid #e6e6e6; border-radius: 12px; padding: 16px; }
.info-cuidado span { font-size: 24px; }
.info-cuidado h2 { margin: 8px 0 4px !important; font-size: 15px !important; }
.info-cuidado p { margin: 0; font-size: 13.5px !important; }
.info-video { margin: 12px 0 6px; max-width: 420px; }
.info-video__abrir { width: 100%; display: flex; align-items: center; gap: 14px; text-align: left; border: 1px solid #e6e6e6; border-radius: 12px; background: #fafaf8; padding: 18px; cursor: pointer; font: inherit; color: #111; }
.info-video__abrir:hover { border-color: #111; }
.info-video__play { width: 46px; height: 46px; border-radius: 50%; background: #111; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; padding-left: 3px; }
.info-video__abrir strong { display: block; font-size: 15px; }
.info-video__abrir small { display: block; font-size: 12px; color: #777; margin-top: 2px; }
.info-video__marco { width: 100%; max-width: 420px; aspect-ratio: 4 / 5.6; border: 1px solid #e6e6e6; border-radius: 12px; background: #fff; }
.info-video__link { font-size: 13px; margin: 0 0 16px; }