/* ============================================================
   EL SAUCE — Sistema editorial
   Sustituye la rejilla de diapositivas por maquetación de página:
   asimetría, medida de lectura, jerarquía real, filetes en vez
   de sombras. Se carga la última: manda sobre lo anterior.
   ============================================================ */

:root{
  --ed-measure: 68ch;
  --ed-rule: rgba(58,82,54,.22);
  --ed-rule-strong: rgba(58,82,54,.42);
  --ed-ink: #1C1A14;
  --ed-ink-soft: #4A4437;
  --ed-paper: #FBF8F0;
}

/* ---------- Escala tipográfica: solo el hero grita ---------- */
.ed-display{ font-family: var(--font-heading); font-weight:600; font-size: clamp(2.9rem, 8vw, 6.4rem); line-height:.98; letter-spacing:-.022em; }
.ed-h2{ font-family: var(--font-heading); font-weight:600; font-size: clamp(1.7rem, 3.4vw, 2.7rem); line-height:1.12; letter-spacing:-.012em; color: var(--color-primary-dark); }
.ed-h3{ font-family: var(--font-heading); font-weight:600; font-size: clamp(1.15rem, 1.9vw, 1.45rem); line-height:1.25; color: var(--color-primary-dark); }
.ed-lede{ font-family: var(--font-heading); font-weight:400; font-size: clamp(1.24rem, 2.05vw, 1.62rem); line-height:1.5; color: var(--ed-ink); }
.ed-body{ font-size: 1.0625rem; line-height:1.75; color: var(--ed-ink-soft); max-width: var(--ed-measure); }
.ed-body + .ed-body{ margin-top: 1.1em; }

/* Versalitas con filete: sustituye a los numeritos de plantilla */
.ed-kicker{
  font-family: var(--font-body); font-size:.72rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color: var(--color-gold);
  display:flex; align-items:center; gap:.9rem; margin:0 0 1.6rem;
}
.ed-kicker::after{ content:""; flex:1; height:1px; background: var(--ed-rule); }
.ed-kicker--alone::after{ display:none; }

/* ---------- Rejilla de 12 columnas ---------- */
.ed-section{ padding: clamp(3.5rem, 8vw, 8rem) 0; position:relative; }
.ed-section--tight{ padding: clamp(2.2rem, 4vw, 3.5rem) 0; }
.ed-section--airy{ padding: clamp(6rem, 14vw, 12rem) 0; }
.ed-grid{
  display:grid; grid-template-columns: repeat(12, 1fr);
  gap: 0 clamp(1rem, 2.4vw, 2.2rem);
  max-width: 1280px; margin:0 auto; padding: 0 clamp(1.25rem, 5vw, 4rem);
}
/* Posiciones asimétricas — nada centrado por defecto */
.ed-c1-5  { grid-column: 1 / span 5; }
.ed-c1-6  { grid-column: 1 / span 6; }
.ed-c1-7  { grid-column: 1 / span 7; }
.ed-c1-8  { grid-column: 1 / span 8; }
.ed-c2-7  { grid-column: 2 / span 6; }
.ed-c3-8  { grid-column: 3 / span 8; }
.ed-c4-9  { grid-column: 4 / span 6; }
.ed-c6-12 { grid-column: 6 / span 7; }
.ed-c7-12 { grid-column: 7 / span 6; }
.ed-c8-12 { grid-column: 8 / span 5; }
.ed-full  { grid-column: 1 / -1; }

/* ---------- Capitular ---------- */
.ed-dropcap::first-letter{
  font-family: var(--font-heading); font-weight:600;
  float:left; font-size: 3.9em; line-height:.82;
  padding: .06em .1em 0 0; color: var(--color-primary);
}

/* ---------- Cita destacada (no es una tarjeta) ---------- */
.ed-pull{
  border-top:1px solid var(--ed-rule-strong);
  border-bottom:1px solid var(--ed-rule-strong);
  padding: clamp(1.8rem,3.5vw,3rem) 0; margin:0;
}
.ed-pull p{
  font-family: var(--font-heading); font-weight:500;
  font-size: clamp(1.6rem, 4vw, 3.1rem); line-height:1.16;
  letter-spacing:-.015em; margin:0;
}
.ed-pull cite{ display:block; margin-top:1.4rem; font-family:var(--font-body); font-style:normal;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color: var(--color-gold); }

/* ---------- Nota al margen ---------- */
.ed-marginal{
  font-size:.85rem; line-height:1.6; color: var(--ed-ink-soft);
  border-left:2px solid var(--color-gold); padding-left:1rem; font-style:italic;
}

/* ---------- Proceso: lista editorial con filetes, sin cajas ---------- */
.ed-steps{ border-top:1px solid var(--ed-rule); margin-top: 2.5rem; }
.ed-step{
  display:grid; grid-template-columns: 4.5rem 1fr; gap: 0 clamp(1rem,2.5vw,2.5rem);
  padding: clamp(1.4rem,2.6vw,2.1rem) 0; border-bottom:1px solid var(--ed-rule);
  align-items:start;
}
.ed-step__n{
  font-family: var(--font-body); font-size:.72rem; font-weight:600; letter-spacing:.16em;
  color: var(--color-gold); padding-top:.45em;
}
.ed-step__t{ margin:0 0 .4rem; }
.ed-step__d{ margin:0; font-size:1rem; line-height:1.7; color: var(--ed-ink-soft); max-width: 58ch; }

/* ---------- Ficha de catálogo ---------- */
.ed-cat{ display:grid; grid-template-columns: minmax(0,4fr) minmax(0,7fr); gap: clamp(1.8rem,5vw,4.5rem); align-items:start; }
.ed-cat__fig{ margin:0; }
.ed-cat__fig img{
  width:100%; height:auto; display:block; border-radius:0;
  box-shadow: 0 26px 60px -34px rgba(0,0,0,.6);
}
.ed-cat__data{ list-style:none; margin:1.8rem 0 0; padding:0; border-top:1px solid var(--ed-rule); }
.ed-cat__data li{
  display:flex; justify-content:space-between; gap:1.5rem;
  padding:.62rem 0; border-bottom:1px solid var(--ed-rule); font-size:.92rem;
}
.ed-cat__data dt, .ed-cat__data .k{
  font-family:var(--font-body); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color: var(--ed-ink-soft); flex-shrink:0;
}
.ed-cat__data .v{ text-align:right; color: var(--ed-ink); }

/* ---------- Bloques oscuros: sin bordes redondeados ---------- */
.ed-dark{ background: linear-gradient(165deg,#22331D 0%, #101C0D 100%); color: var(--color-bg); border-radius:0; }
.ed-dark .ed-h2, .ed-dark .ed-h3{ color:#F7F3E7; }
.ed-dark .ed-body, .ed-dark .ed-step__d{ color: rgba(245,240,228,.8); }
.ed-dark .ed-pull{ border-color: rgba(212,175,90,.42); }
.ed-dark .ed-pull p{ color:#F9F5E9; }
.ed-dark .ed-kicker{ color: var(--color-gold-light); }
.ed-dark .ed-kicker::after{ background: rgba(212,175,90,.3); }
.ed-dark .ed-steps, .ed-dark .ed-step{ border-color: rgba(245,240,228,.16); }
.ed-dark .ed-marginal{ color: rgba(245,240,228,.78); }

.ed-paper{ background: var(--ed-paper); }

/* ---------- Botones: sobrios, no pastillas ---------- */
.ed-actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top: 2.2rem; }
.ed-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:.85rem 1.9rem; border-radius:2px !important;
  font-family:var(--font-body); font-size:.95rem; font-weight:600; letter-spacing:.01em;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.ed-btn--solid{ background: var(--color-primary-dark); color:#F7F3E7; border:1px solid var(--color-primary-dark); }
.ed-btn--solid:hover{ background:#0C160A; border-color:#0C160A; }
.ed-btn--line{ background:transparent; color: var(--color-primary-dark); border:1px solid var(--ed-rule-strong); }
.ed-btn--line:hover{ border-color: var(--color-primary-dark); background: rgba(58,82,54,.05); }
.ed-dark .ed-btn--solid{ background: var(--color-gold); color:#221C0A; border-color: var(--color-gold); }
.ed-dark .ed-btn--solid:hover{ background: var(--color-gold-light); border-color: var(--color-gold-light); }
.ed-dark .ed-btn--line{ color:#F7F3E7; border-color: rgba(245,240,228,.45); }
.ed-dark .ed-btn--line:hover{ background: rgba(245,240,228,.1); border-color:#F7F3E7; }

/* ---------- Figura a sangre ---------- */
.ed-figure{ margin:0; }
.ed-figure img{ width:100%; height:auto; display:block; border-radius:0 !important; }
.ed-figure figcaption{
  font-size:.78rem; letter-spacing:.06em; color: var(--ed-ink-soft);
  padding-top:.7rem; border-top:1px solid var(--ed-rule); margin-top:.9rem;
}

/* ---------- Neutraliza el vocabulario de "tarjeta de negocio" ---------- */
.ed-section .card,
.ed-section .pilar-item,
.ed-section .propuesta-card{ box-shadow:none !important; border-radius:0 !important; }

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .ed-grid{ grid-template-columns: repeat(6, 1fr); }
  .ed-c1-5,.ed-c1-6,.ed-c1-7,.ed-c1-8,.ed-c2-7,.ed-c3-8,.ed-c4-9,.ed-c6-12,.ed-c7-12,.ed-c8-12{ grid-column: 1 / -1; }
  .ed-cat{ grid-template-columns: 1fr; }
  .ed-cat__fig{ max-width: 300px; }
}
@media (max-width: 560px){
  .ed-step{ grid-template-columns: 1fr; gap:.35rem; }
  .ed-step__n{ padding-top:0; }
  .ed-dropcap::first-letter{ font-size:3.1em; }
}

/* ============================================================
   CORRECCIÓN GLOBAL — páginas interiores
   Quita el vocabulario de "tarjeta de negocio" y restablece
   jerarquía y alineación editorial sin rehacer el marcado.
   ============================================================ */

/* 1. Jerarquía: los títulos de sección dejan de competir con el hero */
.section-title-literary,
.section .card-body h3,
h2.text-center{
  font-size: clamp(1.6rem, 3.2vw, 2.5rem) !important;
  line-height:1.14; letter-spacing:-.012em;
}

/* 2. El texto largo se alinea a la izquierda y respeta la medida */
.section p,
.card-text,
.propuesta-lede p,
.paso-contenido p,
.pilar-texto{
  max-width: var(--ed-measure);
  text-align: left;
}
.propuesta-lede-wrap[style*="text-align: center"]{ text-align:left !important; }
.propuesta-lede-wrap[style*="text-align: center"] .propuesta-lede{ margin-left:0; }
.propuesta-lede p{ margin-left:0; margin-right:0; }
/* Los títulos y kickers centrados sí pueden seguir centrados */
.section-tag.text-center, h2.text-center{ text-align:center; }

/* 3. Fuera sombras y esquinas: filete superior en su lugar */
.card,
.pilar-item,
.propuesta-card,
.nosotros-valor,
.proceso-paso,
.faq-item,
.highlight-box,
.book-card{
  box-shadow: none !important;
  border-radius: 0 !important;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--ed-rule);
  padding-top: 1.6rem;
}
.card:hover,
.pilar-item:hover,
.propuesta-card:hover,
.nosotros-valor:hover,
.proceso-paso:hover,
.book-card:hover{
  transform: none !important;
  box-shadow: none !important;
}
.card .card-body{ padding-left:0 !important; padding-right:0 !important; }

/* Las fichas de libro conservan la portada limpia */
.book-card{ border-top:0; padding-top:0; }
.book-cover{ border-radius:0 !important; box-shadow: 0 20px 44px -28px rgba(0,0,0,.55); }

/* 4. Numeritos de plantilla → versalitas discretas */
.pilar-numero,
.nosotros-valor-num,
.nosotros-card-num,
.paso-numero{
  font-family: var(--font-body) !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase;
  color: var(--color-gold) !important;
  background: none !important;
  width: auto !important; height: auto !important;
  border-radius: 0 !important; border: 0 !important;
  display: block !important;
  line-height: 1.4 !important;
  margin-bottom: .5rem !important;
}

/* 5. Cabeceras interiores: composición asimétrica, no cartel centrado */
.page-hero-content,
.el-photohead .container{
  text-align: left !important;
  max-width: 780px; margin-left: 0;
}
.el-photohead .container.text-center{ text-align:left !important; }
.page-hero-content h1, .el-photohead h1{
  font-size: clamp(2rem, 5vw, 3.4rem) !important;
  line-height:1.1; letter-spacing:-.018em;
}
.page-hero-subtitle, .el-photohead p{
  font-style: normal !important;
  max-width: 56ch; margin-left:0 !important; margin-right:0 !important;
}
.page-hero, .el-photohead{ border-radius:0 !important; }

/* 6. Separador: filete fino, no adorno */
.gold-divider{
  width:64px !important; height:1px !important;
  background: var(--color-gold) !important; background-image:none !important;
  margin-left:0 !important;
}
.text-center + .gold-divider, .gold-divider.text-center{ margin-left:auto !important; margin-right:auto !important; }

/* ============================================================
   FORMULARIO DE CONTACTO
   ============================================================ */
.ed-form{ margin-top: 2.5rem; }
.ed-form__row{ margin-bottom: 1.35rem; }
.ed-form__grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
@media (max-width: 620px){ .ed-form__grid{ grid-template-columns: 1fr; } }
.ed-form label{
  display:block; font-family: var(--font-body);
  font-size:.78rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color: var(--ed-ink-soft); margin-bottom:.5rem;
}
.ed-form .req{ color: var(--color-gold); }
.ed-form input,
.ed-form select,
.ed-form textarea{
  width:100%; font-family: var(--font-body); font-size:1rem; color: var(--ed-ink);
  background: var(--color-white,#FFFDF7);
  border:1px solid var(--color-border,#D4CABB); border-radius:2px;
  padding:.85rem .95rem; min-height:48px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.ed-form textarea{ min-height:150px; resize:vertical; line-height:1.65; }
.ed-form input:focus,
.ed-form select:focus,
.ed-form textarea:focus{
  outline:none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(58,82,54,.15);
}
.ed-form input[aria-invalid="true"],
.ed-form textarea[aria-invalid="true"]{ border-color:#A32D2D; box-shadow:0 0 0 3px rgba(163,45,45,.12); }
.ed-form__err{ display:block; color:#A32D2D; font-size:.85rem; margin-top:.4rem; min-height:0; }
.ed-form__hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.ed-form__status{ margin-top:1.25rem; padding:0; font-size:.98rem; line-height:1.6; }
.ed-form__status:empty{ display:none; }
.ed-form__status[data-state="ok"]{ padding:1rem 1.2rem; border-left:3px solid var(--color-primary); background: rgba(58,82,54,.07); color: var(--color-primary-dark); }
.ed-form__status[data-state="error"]{ padding:1rem 1.2rem; border-left:3px solid #A32D2D; background: rgba(163,45,45,.06); color:#7A2020; }
.ed-form button[type="submit"]{ min-height:52px; }
.ed-form button[disabled]{ opacity:.6; cursor:progress; }

/* ============================================================
   CONTRASTE — corrección de textos ilegibles
   Verificado con el ratio de contraste WCAG (mínimo 4.5:1)
   ============================================================ */

/* 1. Ficha del libro sobre fondo oscuro.
      Las etiquetas y valores heredaban tinta oscura (1.3:1 = invisible). */
.ed-dark .ed-cat__data{ border-color: rgba(245,240,228,.22); }
.ed-dark .ed-cat__data li{ border-color: rgba(245,240,228,.16); }
.ed-dark .ed-cat__data dt,
.ed-dark .ed-cat__data .k{ color: var(--color-gold-light); }   /* 7.4:1 */
.ed-dark .ed-cat__data .v{ color: #F1EDE0; }                   /* 12.9:1 */
.ed-dark .ed-lede,
.ed-dark .ed-verse,
.ed-dark p,
.ed-dark li{ color: rgba(245,240,228,.88); }
.ed-dark .ed-h2, .ed-dark .ed-h3, .ed-dark h2, .ed-dark h3{ color:#F7F3E7; }
.ed-dark .ed-figure figcaption{ color: rgba(245,240,228,.75); border-color: rgba(245,240,228,.2); }
.ed-dark .ed-cat__data .v a{ color:#F1EDE0; text-decoration: underline; }

/* 2. Hero: el texto es oscuro porque el fondo base es claro, pero al
      revelarse la capa de musgo verde quedaba invisible (1.4:1).
      Un halo de papel bajo el texto lo mantiene legible en ambos estados. */
.hero-over-tree__content{
  background: radial-gradient(ellipse 78% 128% at 50% 50%,
              rgba(244,241,232,.92) 0%,
              rgba(244,241,232,.80) 45%,
              rgba(244,241,232,0) 100%) !important;
  padding: 2.6rem 2.4rem 3rem !important;
  border-radius: 4px;
}
.hero-over-tree__content .hero-eyebrow{ color:#6B5216 !important; }  /* 6.4:1 */
.hero-over-tree__content h1{ color:#1C2A16 !important; }             /* 12:1  */
.hero-over-tree__content .hero-subtitle{ color:#3B4433 !important; } /* 7.6:1 */
@media (max-width: 560px){
  .hero-over-tree__content{ padding: 2rem 1.4rem 2.4rem !important; }
}

/* 3. Botón claro del hero: legible sobre el halo */
.hero-over-tree__content .ed-btn--line{ border-color: rgba(28,42,22,.55); color:#1C2A16; }
.hero-over-tree__content .ed-btn--line:hover{ background: rgba(28,42,22,.08); border-color:#1C2A16; }

/* 4. Cabeceras con foto: velo suficiente para el texto claro */
.page-hero::before, .el-photohead::before{
  background: linear-gradient(160deg, rgba(9,16,7,.74) 0%, rgba(9,16,7,.88) 100%) !important;
}
.page-hero-subtitle, .el-photohead p{ color: rgba(245,240,228,.94) !important; }
.breadcrumb-nav, .breadcrumb-nav a{ color: rgba(245,240,228,.85) !important; }
