/*!
Theme Name: saico_salud
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: saico_salud
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

saico_salud is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

@import 'build/app.css';

.capacitaciones-section {
  position: relative;
}

.capacitaciones-heading {
  max-width: 70rem;
  margin: 0 auto 40px auto;
  color: #0f172a;
  font-size: clamp(1.5rem, 2.8vw, 1.875rem);
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
}

.capacitaciones-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.96fr);
  gap: 3rem;
  align-items: start;
}

.capacitaciones-layout--single {
  grid-template-columns: minmax(0, 1fr);
}

.capacitaciones-content {
  order: 1;
}

.capacitaciones-visual {
  order: 2;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.capacitaciones-cta--mobile {
  display: none;
}

.capacitaciones-cta--desktop {
  display: block;
}

.capacitaciones-accordion {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.capacitaciones-item {
  overflow: hidden;
  border: 1px solid #35682d;
  border-radius: 1.5rem;
  background: #ffffff;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);
}

.capacitaciones-item.is-open {
  background: #c4ceb0;
}

.capacitaciones-trigger {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 0;
  background: transparent;
  padding: .9rem 1.5rem;
  text-align: left;
  cursor: pointer;
}

.capacitaciones-trigger-text {
  margin: 0;
  color: #111827;
  font-size: clamp(.95rem, 1vw, .85rem);
  font-weight: 800;
  line-height: 1.15;
  text-transform: uppercase;
}

.capacitaciones-icon {
  display: inline-flex;
  min-width: 2.5rem;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(53, 104, 45, 0.3);
  border-radius: 999px;
  background: #ffffff;
  color: #35682d;
}

.capacitaciones-icon svg {
  width: 1.25rem;
  height: 1.25rem;
  transition: transform 0.3s ease;
}

.capacitaciones-item.is-open .capacitaciones-icon svg {
  transform: rotate(180deg);
}

.capacitaciones-panel {
  overflow: hidden;
  max-height: 0;
}

.capacitaciones-panel-inner {
  padding: 0 1.25rem 1.5rem;
}

.capacitaciones-table-wrap {
  overflow-x: auto;
  border-radius: 1.25rem;
}

.capacitaciones-table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
}

.capacitaciones-table th,
.capacitaciones-table td {
  padding: 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.55);
  text-align: left;
  vertical-align: top;
}

.capacitaciones-table thead th {
  background: #3d7a33;
  color: #ffffff;
  font-size: .85rem;
  font-weight: 700;
}

.capacitaciones-table tbody td {
  background: rgba(255, 255, 255, 0.16);
  color: #1f2937;
  font-size: 0.8rem;
  line-height: 1.35;
}

.capacitaciones-table tbody td:first-child {
  width: 42%;
  font-weight: 700;
}

.capacitaciones-media {
  min-height: 32rem;
  height: 100%;
  overflow: hidden;
  border-radius: 1.75rem;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
}

.capacitaciones-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.capacitaciones-cta {
  margin-top: 1.5rem;
}

.capacitaciones-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #35682d;
  padding: 0.95rem 1.5rem;
  color: #ffffff;
  font-size: .95rem;
  line-height: 1;
  text-decoration: none;
}

a.capacitaciones-pill:hover {
  background: #2c5725;
  color: #ffffff;
}

@media (max-width: 1024px) {
  .capacitaciones-layout {
    grid-template-columns: 1fr;
  }

  .capacitaciones-content {
    order: 2;
  }

  .capacitaciones-visual {
    order: 1;
  }

  .capacitaciones-cta--desktop {
    display: none;
  }

  .capacitaciones-cta--mobile {
    display: block;
  }

  .capacitaciones-media {
    min-height: 26rem;
  }
}

@media (max-width: 768px) {
  .capacitaciones-trigger {
    padding: 1rem 1.1rem;
  }

  .capacitaciones-trigger-text {
    font-size: 1.05rem;
  }

  .capacitaciones-panel-inner {
    padding: 0 0.75rem 1rem;
  }

  .capacitaciones-table-wrap {
    overflow-x: visible;
  }

  .capacitaciones-table {
    min-width: 0;
    table-layout: fixed;
  }

  .capacitaciones-table th,
  .capacitaciones-table td {
    padding: 0.75rem;
  }

  .capacitaciones-table thead {
    display: none;
  }

  .capacitaciones-table,
  .capacitaciones-table tbody,
  .capacitaciones-table tr,
  .capacitaciones-table td {
    display: block;
    width: 100%;
  }

  .capacitaciones-table tr {
    margin-bottom: 0.85rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 1rem;
  }

  .capacitaciones-table tbody td {
    border: 0;
    padding: 0.75rem 0.85rem;
  }

  .capacitaciones-table tbody td + td {
    border-top: 1px solid rgba(255, 255, 255, 0.55);
  }

  .capacitaciones-table tbody td:first-child {
    width: 100%;
  }

  .capacitaciones-table tbody td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.35rem;
    color: #35682d;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
  }

  .capacitaciones-pill {
    padding: 0.85rem 1.25rem;
    font-size: 1rem;
  }

  .capacitaciones-media {
    min-height: 0;
    background: #eef2e6;
  }

  .capacitaciones-media img {
    height: auto;
    object-fit: contain;
  }
}