/* ==========================================================================
   Muebles Cárdenas — plantilla 3.0 (sin Expose; Joomla 3.10, 4, 5 y 6)
   Complementos de cardenas.css para lo que antes hacía el framework Expose.
   ========================================================================== */

/* Logo: el texto queda solo para lectores de pantalla */
#logo a { text-indent: -9999px; overflow: hidden; white-space: nowrap; }
#logo.cd-custom-logo a { background-image: var(--cd-logo) !important; }

/* Mega menú: despliegue al pasar el mouse o con el teclado */
#menu ul.level-0 > li.mega { position: relative; display: inline-block; vertical-align: middle; }
#menu ul.level-0 > li.mega > .childcontent {
  display: block; position: absolute; top: 100%; left: 0; z-index: 1000; min-width: 220px; text-align: left;
  margin-top: 0 !important; opacity: 0; visibility: hidden; transform: translateY(6px);
  /* Al salir del menú espera un momento antes de cerrar: da tiempo de llegar a la opción */
  transition: opacity .18s ease .25s, transform .18s ease .25s, visibility 0s linear .43s;
}
/* Puente invisible entre "Catálogo" y su lista: el mouse no "cae" en el espacio entre ambos */
#menu ul.level-0 > li.mega > .childcontent::before { content: ""; position: absolute; left: -12px; right: -12px; top: -18px; height: 18px; }
#menu ul.level-0 > li.mega:hover > .childcontent,
#menu ul.level-0 > li.mega:focus-within > .childcontent,
#menu ul.level-0 > li.mega.cd-open > .childcontent { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s, 0s, 0s; }
#menu ul.level-0 > li.mega:last-child > .childcontent { left: auto; right: 0; }
#menu .megamenu ul, #menu ul.megamenu { list-style: none; }
#menu ul.level-1 { margin: 0; padding: 0; }
@media (max-width: 979px) {
  body.cd-nav-open #menu ul.level-0 > li.mega { display: block; }
  body.cd-nav-open #menu ul.level-0 > li.mega > .childcontent { display: block; position: static; min-width: 0; box-shadow: none !important; opacity: 1; visibility: visible; transform: none; transition: none; }
  body.cd-nav-open #menu ul.level-0 > li.mega > .childcontent::before { display: none; }
}

/* Migas de pan */
.cd-breadcrumbs .breadcrumb { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; background: none; font-size: 13px; }
.cd-breadcrumbs .breadcrumb li { display: inline-flex; align-items: center; gap: 6px; }
.cd-breadcrumbs .breadcrumb li + li::before { content: "/"; color: var(--cd-muted, #80857a); }

/* Mensajes del sistema (Joomla 4+ usa <joomla-alert>) */
#system-message-container-wrap { width: 100%; }
#system-message-container joomla-alert, #system-message-container .alert {
  display: block; margin: 16px 10px; padding: 14px 18px; border-radius: 12px; border: 1px solid var(--cd-line, #e5e3da);
  background: #fff; color: var(--cd-ink, #23271d); box-shadow: 0 6px 18px rgba(35,39,29,.06);
}
#system-message-container joomla-alert[type="success"], #system-message-container .alert-success { border-left: 4px solid #6f7d14; }
#system-message-container joomla-alert[type="warning"], #system-message-container .alert-warning { border-left: 4px solid #c99a06; }
#system-message-container joomla-alert[type="danger"], #system-message-container .alert-error, #system-message-container .alert-danger { border-left: 4px solid #b3261e; }
#system-message-container .alert-heading, #system-message-container .alert-heading + div { font-size: 14px; }
#system-message-container .joomla-alert--close, #system-message-container .close { float: right; background: none; border: 0; font-size: 20px; cursor: pointer; }

/* Joomla 4+: Bootstrap 5 no trae la rejilla "gridN" de Expose; template.css la define.
   Estas reglas cubren elementos de los formularios del sitio (login, contacto) */
body.j4 .control-group { margin-bottom: 14px; }
body.j4 .control-label label { display: block; font-weight: 600; margin-bottom: 4px; }
body.j4 input.form-control, body.j4 select.form-select, body.j4 textarea.form-control { width: 100%; max-width: 100%; }
body.j4 .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Mensajes del sistema a ancho completo dentro del cuerpo */
#main > #system-message-container-wrap { flex: 0 0 100%; width: 100%; order: 0; }

/* Portada: las promociones (content-top y barras laterales) quedan en columnas iguales */
body.homepage.cd-empty-component #main > #mainbody,
body.homepage.cd-empty-component #main > #sidebar-a,
body.homepage.cd-empty-component #main > #sidebar-b { flex: 1 1 0 !important; width: auto !important; min-width: 260px; }
body.homepage #content-top .block img, body.homepage #sidebar-a .block img, body.homepage #sidebar-b .block img { aspect-ratio: 16 / 9; object-fit: cover; }
@media (max-width: 767px) {
  body.homepage.cd-empty-component #main > #mainbody,
  body.homepage.cd-empty-component #main > #sidebar-a,
  body.homepage.cd-empty-component #main > #sidebar-b { flex: 1 1 100% !important; }
}

/* Empresa: se muestra «Cómo llegar»; solo se ocultan las pestañas viejas (la filosofía ya va dentro de la página) */
#middle-wrap:has(.cd-page-empresa) #main-bottom { display: flex !important; }
#middle-wrap:has(.cd-page-empresa) #main-bottom .column:has(.txtabs-wrap) { display: none !important; }

/* 3.1.1 · Franja verde pegada al pie de página */
.cd-cta-band-wrap { display: block; margin: 0; padding: 0; overflow: hidden; }
.cd-cta-band-wrap .cd-cta-band { width: 100%; margin: 0; }
.cd-has-footband #cd-footer { margin-top: 0; }
.cd-has-footband #bottom { padding-bottom: 56px; }

/* 3.1.2 · Letra manuscrita incluida en la plantilla (no depende de Google Fonts) */
@font-face { font-family: "Allura"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/allura-latin-400-normal.woff2") format("woff2"), url("../fonts/allura-latin-400-normal.woff") format("woff"); }
.cd-script { font-family: var(--cd-script); font-weight: 400; letter-spacing: 0; }
.cd-cta-band .cd-script {
  font-family: var(--cd-script) !important; font-size: clamp(36px, 3.6vw, 50px); line-height: .95;
  max-width: 300px; color: #fff; transform: rotate(-6deg); margin: 0; position: relative; padding-bottom: 14px;
  text-shadow: 0 2px 10px rgba(0,0,0,.18);
}
.cd-cta-band .cd-script::after { content: ""; position: absolute; left: 6px; bottom: 0; width: 70%; height: 3px; border-radius: 3px; background: var(--cd-lime-200, #dfe8a6); opacity: .9; transform: rotate(-2deg); }
@media (max-width: 900px) { .cd-cta-band .cd-script { font-size: 36px; max-width: 250px; margin: 4px 0 6px 8px; transform: rotate(-4deg); } }

/* ==================================================================
   3.4 · Animaciones (plantilla › Animaciones y velocidad)
   Suaves, sin mover el contenido de lugar; se apagan con «reducir movimiento».
   ================================================================== */
/* Aparición al desplazarse: solo lo que está debajo de la pantalla al cargar */
.cd-anim .cd-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--cd-d, 0ms); will-change: opacity, transform; }
.cd-anim .cd-reveal.is-in { opacity: 1; transform: none; will-change: auto; }
.cd-anim .cd-reveal-zoom { transform: scale(.96); }
.cd-anim .cd-reveal-zoom.is-in { transform: none; }

/* Barra de progreso de lectura (navegadores con animaciones ligadas al scroll) */
.cd-progress { display: none; }
@supports (animation-timeline: scroll()) {
  .cd-anim .cd-progress { display: block; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 10001; pointer-events: none; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--cd-green, #8a9a1c), var(--cd-lime, #b9cc3a)); animation: cdProgress linear both; animation-timeline: scroll(root); }
  @keyframes cdProgress { to { transform: scaleX(1); } }
}

/* Fotos que se cargan: aparecen con un fundido */
.cd-anim img.cd-fadeimg { opacity: 0; transition: opacity .5s ease; }
.cd-anim img.cd-fadeimg.is-loaded { opacity: 1; }

/* Tarjetas: se elevan y la foto se acerca un poco */
.cd-anim .mcg-card { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease; }
.cd-anim .mcg-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(30,31,28,.12); }
.cd-anim .mcg-card-media { overflow: hidden; }
.cd-anim .mcg-card-media img { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.cd-anim .mcg-card:hover .mcg-card-media img { transform: scale(1.05); }

/* Botones: brillo que cruza al pasar el mouse */
.cd-anim .cd-btn, .cd-anim .mcg-btn { position: relative; overflow: hidden; }
.cd-anim .cd-btn::after, .cd-anim .mcg-btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-18deg); pointer-events: none; transition: left .6s ease; }
.cd-anim .cd-btn:hover::after, .cd-anim .mcg-btn:hover::after { left: 120%; }

/* Botón flotante de WhatsApp: onda suave cada pocos segundos */
.cd-anim .cd-wa-float { isolation: isolate; }
.cd-anim .cd-wa-float::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #25d366; z-index: -1; animation: cdWaPulse 3.2s ease-out infinite; }
.cd-anim .cd-wa-float:hover::before { animation: none; }
@keyframes cdWaPulse { 0% { transform: scale(1); opacity: .55; } 60%, 100% { transform: scale(1.35); opacity: 0; } }

/* Franja verde: el degradado se mueve muy lentamente */
.cd-anim .cd-cta-band { background-size: 180% 100%; animation: cdBandShift 14s ease-in-out infinite alternate; }
@keyframes cdBandShift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* Menú: subrayado que crece */
.cd-anim #top .nav > li > a, .cd-anim #top .menu > li > a { background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-size: 0 2px; background-position: 0 100%; transition: background-size .3s ease; }
.cd-anim #top .nav > li > a:hover, .cd-anim #top .menu > li > a:hover { background-size: 100% 2px; }

@media (prefers-reduced-motion: reduce) {
  .cd-anim .cd-reveal, .cd-anim img.cd-fadeimg { opacity: 1 !important; transform: none !important; transition: none !important; }
  .cd-anim .cd-progress, .cd-anim .cd-wa-float::before { display: none !important; animation: none !important; }
  .cd-anim .cd-cta-band { animation: none !important; }
  .cd-anim .mcg-card, .cd-anim .mcg-card-media img { transition: none !important; transform: none !important; }
}