/*
Theme Name: Segurolo
Theme URI: https://seguroslopez.com
Author: Seguros López Arango
Description: Tema de una página para Segurolo, construido a partir del diseño de Lovable (Tailwind v4 compilado).
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: segurolo
*/

/* Los estilos de Tailwind viven en assets/css/main.css (compilado).
   Aquí solo van los complementos que no existen en el diseño original. */

/* Carrusel de aseguradoras: marquee CSS que sustituye al carrusel Embla de React */
.sla-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.sla-marquee__track {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: sla-marquee 55s linear infinite;
}
.sla-marquee:hover .sla-marquee__track {
  animation-play-state: paused;
}
.sla-marquee__item {
  flex: 0 0 auto;
  width: 11rem;
}
@media (min-width: 768px) {
  .sla-marquee__item { width: 13rem; }
}
@keyframes sla-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .sla-marquee__track { animation: none; flex-wrap: wrap; width: auto; }
  .sla-marquee { mask-image: none; -webkit-mask-image: none; }
}

/* Barra de administración de WordPress: no tapar la cabecera */
.admin-bar #inicio { padding-top: 32px; }
@media (max-width: 782px) {
  .admin-bar #inicio { padding-top: 46px; }
}

/* Contenido de páginas internas (sustituye al plugin Typography) */
.prose p, .prose ul, .prose ol { margin-block: 1em; }
.prose ul { list-style: disc; padding-left: 1.5em; }
.prose ol { list-style: decimal; padding-left: 1.5em; }
.prose h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; margin-top: 2em; }
.prose h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; margin-top: 1.5em; }
.prose a { color: var(--color-primary); text-decoration: underline; }
.prose img { max-width: 100%; height: auto; border-radius: 1rem; }