@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;500;600;700&display=swap');

/* Nota: esta previsualización requiere conexión a internet para cargar Lato desde Google Fonts.
   Sin conexión, el navegador usará Arial como respaldo (font-family con fallback seguro). */

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: #ffffff;
  font-family: "Lato", Arial, sans-serif;
  color: #333333;
}

/* =========================================================
   Sistema de clases universal (BEM: .section + elementos)
   Estas clases no dependen del tema del contenido: sirven
   igual para una sección de jardín que para cualquier otra
   landing (navidad, ofertas, etc.). El detalle visual de
   cada bloque de contenido va en el HTML, no en el nombre
   de la clase.
   ========================================================= */

.section {
  width: 100%;
  max-width: 1270px;
  margin: 0 auto;
  padding: 24px 24px 36px;
}

/* --- Bloque interno opcional (agrupa contenido antes del grid) --- */

.section__inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* --- Layout en dos columnas (texto + imagen destacada) --- */

.section__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 56px;
  align-items: center;
  width: 100%;
}

.section__content {
  min-width: 0;
  text-align: left;
}

/* --- Título principal (variante centrada, uso general) --- */

.section__title {
  position: relative;
  margin: 0 auto 32px;
  max-width: 800px;
  color: #333333;
  font-family: "Lato", Arial, sans-serif;
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 2.125rem;
  text-align: center;
}

.section__title strong {
  font-weight: 700;
}

.section__title::after {
  content: "";
  display: block;
  width: 30%;
  height: 4px;
  margin: 10px auto 0;
  background-color: #0072CE;
}

/* --- Título destacado (variante hero, alineado a la izquierda) --- */

.section__title--hero {
  width: 75%;
  max-width: none;
  margin: 0 0 24px;
  font-size: 2.25rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
}

.section__title--hero::after {
  width: 35%;
  margin: 10px 0 0;
}

/* --- Subtítulo de bloque --- */

.section__subtitle {
  margin: 0 0 12px;
  color: #333333;
  font-family: "Lato", Arial, sans-serif;
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.75rem;
  text-align: left;
}

/* --- Párrafo de texto (variante por defecto: alineado a la izquierda) --- */

.section__text {
  margin: 0 0 16px;
  max-width: 900px;
  color: #333333;
  font-family: "Lato", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;
  text-align: left;
}

.section__text:last-child {
  margin-bottom: 0;
}

.section__text strong {
  font-weight: 700;
}

/* --- Párrafo de texto centrado (ej: bajada bajo el título) --- */

.section__text--center {
  margin: 0 auto 32px;
  max-width: 800px;
  text-align: center;
}

/* --- Agrupador de contenido bajo un subtítulo --- */

.section__block {
  margin: 0 0 32px;
}

.section__block:last-child {
  margin-bottom: 0;
}

/* --- Variante de bloque con fondo alterno (quiebre visual entre secciones
   parecidas: título + checklist + cierre, sin imagen) --- */

.section__block--alt {
  background-color: #F5F5F5;
  padding: 28px;
  border-radius: 16px;
}

.section__block--alt .section__text:last-child {
  margin-bottom: 0;
}

/* --- Variante de paso dentro de una guía con varios pasos en una sola
   sección: además del fondo alterno, suma borde propio para que cada
   paso se lea como una tarjeta independiente y no como una lista larga
   continua. Las tarjetas anidadas (ej. "Consejos adicionales") pasan a
   blanco para no repetir el mismo gris del fondo. --- */

.section__block--step {
  border: 1px solid #E4E4E4;
}

.section__block--step .section__item--card {
  background-color: #ffffff;
}

/* --- Callout de cierre (tip destacado, alternativa a un párrafo simple) --- */

.section__callout {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  max-width: 900px;
  background-color: #F5F5F5;
  border-left: 4px solid #0072CE;
  padding: 16px 20px;
  border-radius: 8px;
}

.section__callout-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.section__callout-text {
  margin: 0;
  color: #333333;
  font-family: "Lato", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;
  text-align: left;
}

.section__callout-text strong {
  font-weight: 700;
}

/* --- Lista con ícono (checklist) --- */

.section__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.section__list:last-child {
  margin-bottom: 0;
}

.section__item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.section__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #0072CE;
}

/* --- Variante de ícono para advertencias (ej: errores comunes) --- */

.section__icon--warning {
  background-color: #D64545;
}

.section__item-text {
  margin: 0;
  color: #333333;
  font-family: "Lato", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;
  text-align: left;
}

.section__item-text strong {
  font-weight: 700;
}

/* --- Encabezado de paso numerado (ej: guía con varios pasos dentro de
   una sola sección, para que cada paso tenga un ancla visual clara y no
   se perciba como una lista larga sin quiebres) --- */

.section__step-header {
  display: flex;
  gap: 16px;
  align-items: center;
  margin: 0 0 12px;
}

.section__step-header .section__subtitle {
  margin: 0;
}

.section__step-number {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #0072CE;
  color: #ffffff;
  font-family: "Lato", Arial, sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1;
}

/* Texto solo para lectores de pantalla: conserva "Paso N:" en el nombre
   accesible del encabezado sin repetirlo visualmente junto al círculo. */

.section__visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Variante de lista en grid de tarjetas (2 columnas, fondo suave) ---
   Uso: cuando los items son beneficios/razones independientes entre sí
   (no una secuencia de pasos), conviene agruparlos visualmente en
   tarjetas en vez de una columna simple de checklist. */

.section__list--cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.section__item--card {
  background-color: #F5F5F5;
  padding: 20px 24px;
  border-radius: 12px;
}

/* Si el grid queda con un número impar de tarjetas, la última ocupa todo
   el ancho en vez de quedar sola a media fila. */

.section__list--cards .section__item--card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

/* --- Lista de paneles tipo acordeón (ej: preguntas frecuentes) --- */

.section__list--panels {
  gap: 16px;
  margin: 0 0 32px;
}

.section__panel {
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid #E4E4E4;
  background-color: #ffffff;
  transition: box-shadow 0.2s ease;
}

.section__panel[open] {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.section__panel-summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 16px 64px 16px 40px;
  cursor: pointer;
  list-style: none;
  background-color: #F7F7F7;
}

.section__panel-summary::-webkit-details-marker,
.section__panel-summary::marker {
  display: none;
  content: "";
}

.section__panel-summary:focus-visible {
  outline: 2px solid #0072CE;
  outline-offset: -2px;
}

.section__panel-summary::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  background-color: transparent;
  transition: background-color 0.2s ease;
}

.section__panel[open] .section__panel-summary::before {
  background-color: #0072CE;
}

.section__panel-icon {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #9B9B9B;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.section__panel[open] .section__panel-icon {
  background-color: #0072CE;
  transform: translateY(-50%) rotate(180deg);
}

.section__panel-content {
  padding: 40px;
  background-color: #ffffff;
}

.section__panel-title {
  margin: 0;
  color: #333333;
  font-family: "Lato", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5rem;
  text-align: left;
}

.section__panel-text {
  margin: 0;
  color: #767676;
  font-family: "Lato", Arial, sans-serif;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
}

/* --- Tabla --- */

.section__table-wrap {
  width: 100%;
  margin: 0 0 24px;
  border: 1px solid #D9D9D9;
  border-radius: 12px;
  overflow: hidden;
}

.section__table {
  width: 100%;
  border-collapse: collapse;
  font-family: "Lato", Arial, sans-serif;
}

.section__table thead th {
  background-color: #0072CE;
  color: #ffffff;
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 20px;
  text-align: left;
}

.section__table tbody tr {
  background-color: #ffffff;
}

.section__table tbody tr:nth-child(even) {
  background-color: #F5F5F5;
}

.section__table tbody td {
  padding: 14px 20px;
  font-size: 1rem;
  line-height: 1.5rem;
  border-bottom: 1px solid #D9D9D9;
}

.section__table tbody tr:last-child td {
  border-bottom: none;
}

.section__table tbody td:first-child {
  color: #333333;
  font-weight: 700;
}

.section__table tbody td:last-child {
  color: #333333;
  font-weight: 400;
}

/* Etiqueta accesible de columna, repetida como texto real en cada celda.
   Se oculta en escritorio (la tabla ya tiene encabezados) y se muestra
   en la vista apilada de mobile, para no depender de contenido generado
   por CSS (soporte inconsistente en algunos lectores de pantalla). */

.section__table-label {
  display: none;
}

/* --- Figura / imagen con pie de foto --- */

.section__figure {
  width: 100%;
  max-width: 900px;
  margin: 24px auto 0;
}

.section__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.section__caption {
  margin: 10px 0 0;
  color: #717171;
  font-family: "Lato", Arial, sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  text-align: center;
}

/* --- Imagen destacada (hero, sin figure) --- */

.section__hero-image {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* El hero puede usar <picture> (con <source> para variante mobile) en vez
   de un <img> directo; por defecto <picture> es inline, así que necesita
   display:block para comportarse como celda de grid igual que el <img>. */

.section__layout picture {
  display: block;
  width: 100%;
}

/* ===== Breakpoints ===== */

@media (max-width: 900px) {
  .section {
    padding: 24px 16px 32px;
  }

  .section__layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (max-width: 767px) {
  .section {
    padding-inline: 8px;
  }

  .section__title {
    font-size: 1.375rem;
    line-height: 1.6875rem;
  }

  .section__title--hero {
    width: 100%;
    font-size: 1.625rem;
    line-height: 1.2;
  }

  .section__subtitle {
    font-size: 1.125rem;
    line-height: 1.5rem;
  }

  .section__step-header {
    gap: 12px;
  }

  .section__step-number {
    width: 32px;
    height: 32px;
    font-size: 1rem;
  }

  .section__panel-title {
    font-size: 1rem;
    line-height: 1.375rem;
  }

  .section__panel-summary {
    padding: 16px 56px 16px 20px;
  }

  .section__panel-icon {
    right: 12px;
  }

  .section__panel-content {
    padding: 20px;
  }

  .section__image,
  .section__hero-image {
    border-radius: 8px;
  }

  .section__list--cards {
    grid-template-columns: 1fr;
  }

  .section__block--alt {
    padding: 20px;
  }

  .section__callout {
    padding: 14px 16px;
  }

  .section__table-wrap {
    border: none;
    border-radius: 0;
    overflow: visible;
  }

  .section__table,
  .section__table tbody,
  .section__table tbody tr,
  .section__table tbody td {
    display: block;
    width: 100%;
  }

  .section__table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .section__table tbody tr {
    margin-bottom: 12px;
    border: 1px solid #D9D9D9;
    border-radius: 12px;
    overflow: hidden;
  }

  .section__table tbody tr:last-child {
    margin-bottom: 0;
  }

  .section__table tbody td {
    border-bottom: 1px solid #D9D9D9;
    padding: 12px 16px;
  }

  .section__table tbody td:last-child {
    border-bottom: none;
  }

  .section__table-label {
    display: block;
    margin-bottom: 4px;
    color: #0072CE;
    font-weight: 700;
  }
}