/* ============================================================
   layout.css — Estructura de página y grillas
   Responsivo: una columna en móvil, dos en desktop.
   ============================================================ */

/* ── Body ── */
body {
  background:  #C8CDD6;
  font-family: var(--font-body);
  color:       var(--color-black);
  padding:     var(--space-lg) var(--space-sm);
}

/* ── Contenedor de página (portada y productos) ── */
.cover,
.product-page,
.email-section {
  width:      100%;
  max-width:  var(--page-max-w);
  margin:     0 auto var(--space-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-page);
}

/* ── PORTADA ── */
.cover {
  position:   relative;
  min-height: 480px;
  overflow:   hidden;
}

.cover__bg {
  position:        absolute;
  inset:           0;
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center top;
  opacity:         0.65;
}

.cover__content {
  position:        relative;
  z-index:         1;
  min-height:      480px;
  display:         flex;
  flex-direction:  column;
  justify-content: flex-end;
}

.cover__bottom {
  background: var(--color-navy);
  padding:    var(--space-md) var(--page-pad-h);
  display:    flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:  wrap;
  gap:        var(--space-sm);
}

.cover__logo-wrap {
  display:     flex;
  align-items: center;
  gap:         var(--space-sm);
}

.cover__logo-img {
  width:      56px;
  height:     56px;
  object-fit: contain;
}

.cover__logo-name {
  font-family:    var(--font-display);
  font-size:      var(--text-21);
  font-weight:    700;
  color:          var(--color-white);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.cover__titles {
  text-align: right;
}

.cover__label {
  font-family:    var(--font-display);
  font-size:      var(--text-13);
  letter-spacing: 2px;
  text-transform: uppercase;
  color:          var(--color-gray-soft);
  margin-bottom:  4px;
}

.cover__title {
  font-family: var(--font-display);
  font-size:   clamp(1.8rem, 5vw, 3rem);
  font-weight: 300;
  color:       var(--color-white);
  line-height: 1;
}

.cover__title strong {
  font-weight: 700;
  color:       var(--color-orange);
}

/* ── PÁGINA DE PRODUCTO ── */
.product-page {
  display: flex;
  flex-direction: column;
}

/* Encabezado */
.product-page__header {
  padding:         var(--page-pad-v) var(--page-pad-h);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             var(--space-sm);
  border-bottom:   var(--border-strong);
}

.header__logo-wrap {
  display:     flex;
  align-items: center;
  gap:         10px;
}

.header__logo-img {
  width:      36px;
  height:     36px;
  object-fit: contain;
}

.header__logo-name {
  font-family:    var(--font-display);
  font-size:      var(--text-16);
  font-weight:    700;
  color:          var(--color-navy);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.header__meta {
  text-align: right;
}

.header__category {
  font-family:    var(--font-display);
  font-size:      var(--text-13);
  letter-spacing: 2px;
  text-transform: uppercase;
  color:          var(--color-gray-soft);
  margin-bottom:  4px;
}

.header__product-name {
  font-family: var(--font-display);
  font-size:   var(--text-34);
  font-weight: 700;
  color:       var(--color-black);
  line-height: 1;
}

.header__product-name em {
  font-style: normal;
  color:      var(--color-orange);
}

/* Cuerpo: 2 columnas en desktop, 1 en móvil */
.product-page__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 640px) {
  .product-page__body {
    grid-template-columns: 1fr;
  }

  .col-left {
    border-right:  none !important;
    border-bottom: var(--border-soft);
  }
}

.col-left {
  border-right: var(--border-soft);
  display:      flex;
  flex-direction: column;
}

.col-right {
  display:        flex;
  flex-direction: column;
}

/* Pie de página */
.product-page__footer {
  border-top: var(--border-strong);
  padding:    var(--space-sm) var(--page-pad-h);
  display:    flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-sm);
  flex-wrap:       wrap;
}

.footer__note {
  font-size:   var(--text-11);
  color:       var(--color-gray-soft);
  font-style:  italic;
  max-width:   75%;
  line-height: 1.5;
}

.footer__page {
  font-family: var(--font-display);
  font-size:   var(--text-16);
  font-weight: 600;
  color:       var(--color-black);
}

/* ── SECCIÓN DE EMAIL ── */
.email-section {
  padding:    var(--space-lg) var(--page-pad-h);
  text-align: center;
}

.email-section__title {
  font-family:   var(--font-display);
  font-size:     var(--text-27);
  font-weight:   700;
  color:         var(--color-navy);
  margin-bottom: var(--space-sm);
}

.email-section__subtitle {
  font-size:     var(--text-16);
  color:         var(--color-gray-mid);
  margin-bottom: var(--space-md);
}

.email-form {
  display:   flex;
  gap:       var(--space-sm);
  max-width: 480px;
  margin:    0 auto;
  flex-wrap: wrap;
}

.email-form__input {
  flex:       1;
  min-width:  200px;
  padding:    12px var(--space-sm);
  border:     var(--border-strong);
  font-size:  var(--text-16);
  color:      var(--color-black);
  outline:    none;
  transition: border-color var(--transition-fast);
}

.email-form__input:focus {
  border-color: var(--color-navy);
}

.email-form__btn {
  padding:        12px var(--space-md);
  background:     var(--color-navy);
  color:          var(--color-white);
  font-family:    var(--font-display);
  font-size:      var(--text-16);
  font-weight:    600;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition:     background var(--transition-fast);
  white-space:    nowrap;
}

.email-form__btn:hover    { background: var(--color-orange); }
.email-form__btn:disabled { opacity: 0.5; cursor: not-allowed; }

.email-section__status {
  margin-top: var(--space-sm);
  font-size:  var(--text-13);
  min-height: 20px;
}

.email-section__status--ok  { color: #2a7a2a; }
.email-section__status--err { color: #c0392b; }