/* ==========================================================================
   layout.css — Disposición visual global
   Naming: siempre minúsculas, sin espacios — layout.css
   Regla: layout define SOLO estructura y disposición.
   Colores, tipografía y estilos específicos van en main.css o key.css

   CONTRATO DE ATRIBUTOS:
   align      → posición del bloque (left | center | right)
   text_align → alineación del texto dentro del bloque (center | left | right | justify)
   valign     → posición vertical del bloque (top | middle | bottom)

   DEFAULTS:
   left   → 50% izquierdo, títulos centrados, texto left
   right  → 50% derecho,   títulos centrados, texto right
   center → 90% central,   todo centrado
   ========================================================================== */

:root {
  --fullscreen-content-width:        50%;
  --fullscreen-content-width-center: 90%;
  --fullscreen-padding:              5%;
  --fullscreen-gap:                  0.6rem;
  --layout-content-top-gap:            1.7rem;
  --layout-content-top-gap-mobile:     2.5rem;
}

/* ==========================================================================
   BASE FULLSCREEN
   ========================================================================== */
.layout--fullscreen {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
}

.layout--fullscreen > * {
  position: relative;
  z-index: 1;
}

.layout-content {
  display: flex;
  flex-direction: column;
  gap: var(--fullscreen-gap);
  padding: calc(var(--nav-height) + var(--layout-content-top-gap)) var(--fullscreen-padding) 2rem;
}

/* ==========================================================================
   ALIGN — posición del bloque
   ========================================================================== */

/* LEFT — bloque en 50% izquierdo */
.layout--fullscreen[data-align="left"] {
  justify-content: flex-start;
}
.layout--fullscreen[data-align="left"] .layout-content {
  width: var(--fullscreen-content-width);
  align-items: flex-start;
  text-align: left;
}
/* títulos siempre centrados en left */
.layout--fullscreen[data-align="left"] .layout-content h1,
.layout--fullscreen[data-align="left"] .layout-content h2,
.layout--fullscreen[data-align="left"] .layout-content h3 {
  text-align: center;
  width: 100%;
}

/* RIGHT — bloque en 50% derecho */
.layout--fullscreen[data-align="right"] {
  justify-content: flex-end;
}
.layout--fullscreen[data-align="right"] .layout-content {
  width: var(--fullscreen-content-width);
  align-items: flex-end;
  text-align: right;
  padding-right: 2%;
  padding-left: 3%;
}
/* títulos siempre centrados en right */
.layout--fullscreen[data-align="right"] .layout-content h1,
.layout--fullscreen[data-align="right"] .layout-content h2,
.layout--fullscreen[data-align="right"] .layout-content h3 {
  text-align: center;
  width: 100%;
}

/* CENTER — bloque en 60% central, todo centrado */
.layout--fullscreen[data-align="center"] {
  justify-content: center;
}
.layout--fullscreen[data-align="center"] .layout-content {
  width: var(--fullscreen-content-width-center);
  align-items: center;
  text-align: center;
}

/* ==========================================================================
   TEXT_ALIGN — sobreescribe alineación del texto dentro del bloque
   Uso: data-text-align="center | left | right | justify"
   ========================================================================== */
.layout--fullscreen[data-text-align="center"] .layout-content,
.layout--fullscreen[data-text-align="center"] .layout-content h1,
.layout--fullscreen[data-text-align="center"] .layout-content h2,
.layout--fullscreen[data-text-align="center"] .layout-content h3 {
  text-align: center;
  align-items: center;
}

.layout--fullscreen[data-text-align="left"] .layout-content,
.layout--fullscreen[data-text-align="left"] .layout-content h1,
.layout--fullscreen[data-text-align="left"] .layout-content h2,
.layout--fullscreen[data-text-align="left"] .layout-content h3 {
  text-align: left;
  align-items: flex-start;
}

.layout--fullscreen[data-text-align="right"] .layout-content,
.layout--fullscreen[data-text-align="right"] .layout-content h1,
.layout--fullscreen[data-text-align="right"] .layout-content h2,
.layout--fullscreen[data-text-align="right"] .layout-content h3 {
  text-align: right;
  align-items: flex-end;
}

.layout--fullscreen[data-text-align="justify"] .layout-content {
  text-align: justify;
}
.layout--fullscreen[data-text-align="justify"] .layout-content h1,
.layout--fullscreen[data-text-align="justify"] .layout-content h2,
.layout--fullscreen[data-text-align="justify"] .layout-content h3 {
  text-align: center;
}

/* ==========================================================================
   VALIGN — posición vertical del layout-content
   Uso: data-valign="top | middle | bottom"
   Controla align-self del contenido, no del contenedor
   ========================================================================== */
.layout--fullscreen { align-items: stretch; }

.layout--fullscreen[data-valign="top"] .layout-content    { align-self: flex-start; margin-top: 0; }
.layout--fullscreen[data-valign="middle"] .layout-content { align-self: center; }
.layout--fullscreen[data-valign="bottom"] .layout-content { align-self: flex-end; margin-bottom: 0; }
.layout--fullscreen:not([data-valign]) .layout-content    { align-self: center; }

/* ==========================================================================
   SPLIT BASE — Estructura común 50/50
   ========================================================================== */
.layout--split {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
}
.layout--split > * {
  position: relative;
  z-index: 1;
}
/* Columnas base */
.layout--split .layout-content,
.layout--split .layout-media {
  width: 50%;
  box-sizing: border-box;
}
.layout--split .layout-content {
  display: flex;
  flex-direction: column;
  gap: var(--fullscreen-gap);
  padding: calc(var(--nav-height) + var(--layout-content-top-gap)) var(--fullscreen-padding) 2rem;
}
.layout--split .layout-media {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ==========================================================================
   SPLIT-LEFT — Contenido izquierda / Media derecha (default)
   ========================================================================== */
.layout--split-left.layout--split .layout-content { order: 1; }
.layout--split-left.layout--split .layout-media   { order: 2; }

/* ==========================================================================
   SPLIT-RIGHT — Media izquierda / Contenido derecha (inverso)
   ========================================================================== */
.layout--split-right.layout--split .layout-content { order: 2; }
.layout--split-right.layout--split .layout-media   { order: 1; }

/* ==========================================================================
   ACCORDION LAYOUT
   ========================================================================== */
.section-accordion {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

/* --- Item base --- */
.accordion-item {
  position: relative;          /* ancla el toggle absoluto */
  width: 100%;
  border: 1px solid rgba(13, 13, 13, 0.1);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 10px 30px rgba(13, 13, 13, 0.06);
  overflow: hidden;
}

.accordion-item[open] {
  border-color: rgba(200, 65, 42, 0.32);
  box-shadow: 0 14px 38px rgba(13, 13, 13, 0.09);
}

/* --- Toggle — esquina superior derecha del card --- */
.accordion-toggle {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--accent);
  font-size: 1.4rem;
  line-height: 1;
  pointer-events: none;        /* el click lo gestiona el <details> nativo */
  transition: transform 0.25s ease;
  z-index: 2;
}

.accordion-item[open] .accordion-toggle {
  transform: rotate(45deg);
}

/* --- Header (summary) — sin columna para el toggle --- */
.accordion-header {
  display: grid;
  grid-template-columns: auto 1fr;   /* icono + info; toggle ya no está aquí */
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 3.5rem 1.1rem 1.25rem; /* padding-right deja espacio al toggle */
  cursor: pointer;
  list-style: none;
}

.accordion-header::-webkit-details-marker {
  display: none;
}

.accordion-icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(200, 65, 42, 0.08);
  flex: 0 0 auto;
}

.accordion-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.accordion-title {
  margin: 0;
  color: var(--text-title);
  font-size: 1.2rem;
  letter-spacing: var(--tracking-titles);
}

.accordion-summary {
  margin: 0.25rem 0 0;
  color: var(--text-main);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* --- Body — layout lado a lado: texto izquierda, imagen derecha --- */
.accordion-body {
  display: flex;
  gap: 2rem;
  align-items: stretch;
  padding: 1rem 1.25rem 1.25rem calc(1.25rem + 42px + 1rem);
}

/* Imagen — derecha, se estira al alto del texto */
.accordion-media {
  flex: 0 0 35%;
  order: 2;
  position: relative;   /* ← contenedor relativo */
  border-radius: 8px;
  overflow: hidden;
  background: rgba(13, 13, 13, 0.04);
  margin: 0;
  /* sin align-self, sin display:flex, sin height */
}

.accordion-media img {
  position: absolute;   /* ← se estira al 100% del contenedor */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Texto — izquierda, toma el espacio restante */
.accordion-content-text {
  flex: 1;
  order: 1;
}

.accordion-description {
  margin: 0 0 1rem;
  color: var(--text-main);
  font-size: 1rem;
  line-height: 1.7;
}

.accordion-features {
  display: grid;
  gap: 0.45rem;
  margin: 0 0 1rem;
  padding-left: 1.1rem;
  color: var(--text-main);
  font-size: 0.95rem;
  line-height: 1.5;
}

.accordion-features li::marker {
  color: var(--accent);
}

.accordion-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 1rem;
  border-radius: 8px;
  background: var(--accent);
  color: var(--text-light);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.accordion-cta:hover {
  filter: brightness(0.95);
}

/* ==========================================================================
   RESPONSIVE — mobile siempre centrado, 100% ancho
   ========================================================================== */
@media (max-width: 768px) {
  :root {
    --fullscreen-content-width:        100%;
    --fullscreen-content-width-center: 100%;
    --fullscreen-padding:              6%;
    --fullscreen-gap:                  1rem;
  }

  .layout--fullscreen {
    justify-content: center !important;
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .layout--fullscreen .layout-content {
    padding: calc(var(--nav-height) + var(--layout-content-top-gap-mobile)) var(--fullscreen-padding) 4rem !important;
    width: 100% !important;
    box-sizing: border-box;
    align-items: center !important;
    text-align: center !important;
  }

  .layout--fullscreen .layout-content h1,
  .layout--fullscreen .layout-content h2,
  .layout--fullscreen .layout-content h3,
  .layout--fullscreen .layout-content p {
    text-align: center !important;
  }

  /* Grids y cards — siempre 1 columna en mobile */
  .hero-cards,
  [class*="layout--grid"],
  [class*="layout--cards"],
  [class*="layout--list"] {
    grid-template-columns: repeat(1, 1fr) !important;
  }

  /* Accordion mobile — apilado vertical */
  .accordion-header {
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    padding: 1rem 3rem 1rem 1rem; /* espacio al toggle */
    text-align: left;
  }

  .accordion-body {
    flex-direction: column;
    padding: 0.75rem 1rem 1.25rem;
  }

  /* Imagen arriba en mobile, ancho completo */
  .accordion-media {
    flex: none;
    order: 1;
    width: 100%;
    min-height: 200px;
    align-self: auto;
  }

  .accordion-content-text {
    order: 2;
  }

  .accordion-title,
  .accordion-summary,
  .accordion-description,
  .accordion-features {
    text-align: left !important;
  }

  .accordion-cta {
    width: 100%;
    box-sizing: border-box;
  }

  /* Split mobile — apilado, contenido siempre primero */
  .layout--split {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .layout--split .layout-content,
  .layout--split .layout-media {
    width: 100% !important;
    min-height: auto !important;
    order: unset !important;
  }
  .layout--split .layout-content {
    padding: calc(var(--nav-height) + var(--layout-content-top-gap-mobile)) var(--fullscreen-padding) 4rem !important;
  }

  /* Panel media es auxiliar — en mobile se oculta. Acceso vía dock + modal */
  .layout--split .layout-media {
    display: none;
  }
}