/*
 * productor.css — ConservasDeNavarra.org
 * Estilos de la ficha de productor.
 * Usado en /productores/[slug]/index.html
 * Requiere base.css cargado antes.
 */

/* ── Utilidades de sección compartidas ───────────────────── */
.sec-ey {
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tl);
  margin-bottom: 1.25rem;
  display: block;
  font-weight: 500;
}

.sec-h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 44px;
  font-weight: 300;
  color: var(--o);
  line-height: 1.03;
  margin-bottom: 1.75rem;
}

.sec-h2 em {
  font-style: italic;
  color: var(--t);
}

.sec-p {
  font-size: 18px;
  color: #5C4E3E;
  line-height: 1.88;
  font-weight: 400;
  margin-bottom: 1.25rem;
}

.sec-p strong {
  color: var(--o);
  font-weight: 600;
}

/* ══ HERO ══════════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #1A1208;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-image: url('/productores/oses/img/fabrica-lodosa.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.92;
  transform: scale(1.04);
  transition: transform 8s ease-out;
}

.hero-bg.loaded {
  transform: scale(1);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(26, 18, 8, 0.55) 0%,
    rgba(26, 18, 8, 0.14) 45%,
    rgba(26, 18, 8, 0.0) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 0 2.5rem 5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: end;
  width: 100%;
}

.hero-eyebrow {
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(196, 176, 124, 0.90);
  margin-bottom: 1.5rem;
  display: block;
  font-weight: 500;
}

.hero-h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 72px;
  font-weight: 300;
  line-height: 0.88;
  color: var(--c);
  letter-spacing: -0.03em;
  margin-bottom: 1.75rem;
}

.hero-h1 em {
  font-style: italic;
  color: rgba(196, 176, 124, 0.75);
}

.hero-rule {
  width: 28px;
  height: 1px;
  background: rgba(196, 176, 124, 0.3);
  margin-bottom: 1.75rem;
}

.hero-sub {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 400;
  font-style: italic;
  color: rgba(245, 237, 224, 0.95);
  line-height: 1.58;
  max-width: 460px;
  margin-bottom: 2.5rem;
}

.hero-btns {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.hero-btn-p {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--c);
  color: var(--o);
  padding: 13px 28px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  transition: opacity 0.2s, transform 0.2s;
}

.hero-btn-p:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

.hero-btn-g {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: rgba(245, 237, 224, 0.85);
  padding: 13px 28px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 400;
  border: 0.5px solid rgba(245, 237, 224, 0.28);
  transition: all 0.22s;
}

.hero-btn-g:hover {
  border-color: rgba(245, 237, 224, 0.65);
  color: var(--c);
  background: rgba(245, 237, 224, 0.08);
}

/* Ficha identidad (panel derecho del hero) */
.hero-ficha {
  background: rgba(26, 22, 16, 0.6);
  border: 0.5px solid rgba(196, 176, 124, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 2rem 2.25rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.hf-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 1.5rem;
  width: fit-content;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 5px 12px;
  border: 0.5px solid rgba(60, 78, 48, 0.65);
  background: rgba(60, 78, 48, 0.18);
  color: rgba(168, 200, 128, 0.75);
}

.hf-badge-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(168, 200, 128, 0.65);
}

.hf-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px;
  font-weight: 400;
  color: rgba(196, 176, 124, 0.85);
  letter-spacing: 0.06em;
  margin-bottom: 1.25rem;
}

.hf-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 0.5rem;
  align-items: baseline;
  padding: 0.6rem 0;
  border-bottom: 0.5px solid rgba(196, 176, 124, 0.05);
}

.hf-row:last-child {
  border-bottom: none;
}

.hf-k {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(196, 176, 124, 0.78);
}

.hf-v {
  font-size: 16px;
  color: rgba(245, 237, 224, 0.95);
  font-weight: 400;
}

/* Badges flotantes */
.hero-badges {
  position: absolute;
  bottom: 2.5rem;
  left: 2.5rem;
  z-index: 3;
  display: flex;
  gap: 1px;
}

.hb {
  padding: 1rem 1.25rem;
  background: rgba(26, 22, 16, 0.5);
  backdrop-filter: blur(8px);
  border: 0.5px solid rgba(196, 176, 124, 0.1);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.hb-n {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  font-weight: 300;
  color: rgba(196, 176, 124, 0.92);
  line-height: 1;
}

.hb-l {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(196, 176, 124, 0.90);
}

/* ══ EMPRESA ═══════════════════════════════════════════════════ */
.empresa {
  padding: 7rem 2.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7rem;
  align-items: center;
  background: var(--w);
}

.emp-stats {
  display: flex;
  gap: 0;
  margin-top: 2.5rem;
  border-top: 0.5px solid rgba(122, 92, 58, 0.1);
  border-bottom: 0.5px solid rgba(122, 92, 58, 0.1);
}

.es {
  flex: 1;
  padding: 1.5rem 1rem;
  border-right: 0.5px solid rgba(122, 92, 58, 0.1);
}

.es:last-child {
  border-right: none;
}

.es-n {
  font-family: 'Cormorant Garamond', serif;
  font-size: 38px;
  font-weight: 300;
  color: var(--o);
  line-height: 1;
}

.es-l {
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--g);
  margin-top: 0.3rem;
}

.emp-img {
  position: relative;
  overflow: hidden;
}

.emp-img img.emp-logo {
  width: auto;
  height: auto;
  max-width: 180px;
  max-height: 80px;
  object-fit: contain;
  aspect-ratio: auto;
  overflow: visible;
  margin-bottom: 2rem;
  display: block;
}

.emp-img img:not(.emp-logo) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4/5;
}

.emp-img-ph {
  aspect-ratio: 4/5;
  background: linear-gradient(160deg, #3A2C10 0%, #4A3818 50%, #2A2008 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.emp-img-ph span {
  font-size: 8.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(196, 176, 124, 0.26);
}

.emp-img-ph em {
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px;
  font-weight: 300;
  font-style: italic;
  color: rgba(196, 176, 124, 0.18);
  text-align: center;
  padding: 0 2rem;
}

/* ══ VALORES ═══════════════════════════════════════════════════ */
.valores {
  padding: 6rem 2.5rem;
  background: var(--os);
}

.valores-hd {
  max-width: 560px;
  margin: 0 auto 4rem;
  text-align: center;
}

.vh-ey {
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(196, 176, 124, 0.95);
  font-weight: 500;
  margin-bottom: 1rem;
  display: block;
}

.vh-h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 40px;
  font-weight: 300;
  color: var(--c);
  line-height: 1.04;
  margin-bottom: 1rem;
}

.vh-h2 em {
  font-style: italic;
  color: rgba(196, 176, 124, 0.92);
}

.vh-sub {
  font-size: 17px;
  color: rgba(245, 237, 224, 0.90);
  font-weight: 400;
  line-height: 1.75;
}

.valores-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
}

.valor {
  padding: 2.5rem 2.25rem;
  background: rgba(245, 237, 224, 0.025);
  border: 0.5px solid rgba(245, 237, 224, 0.04);
  transition: background 0.25s;
}

.valor:hover {
  background: rgba(245, 237, 224, 0.05);
}

.valor-n {
  font-family: 'Cormorant Garamond', serif;
  font-size: 56px;
  font-weight: 300;
  color: rgba(196, 176, 124, 0.07);
  line-height: 1;
  margin-bottom: 1.25rem;
}

.valor-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--c);
  margin-bottom: 0.75rem;
}

.valor-body {
  font-size: 16px;
  color: rgba(245, 237, 224, 0.92);
  line-height: 1.78;
  font-weight: 400;
}

/* ══ ELABORACIÓN ═══════════════════════════════════════════════ */
.elaboracion {
  padding: 7rem 2.5rem;
  background: var(--o);
}

.elab-hd {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: end;
  margin-bottom: 5rem;
}

.elab-h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 44px;
  font-weight: 300;
  color: var(--c);
  line-height: 1.03;
}

.elab-h2 em {
  font-style: italic;
  color: rgba(196, 176, 124, 0.85);
}

.elab-intro {
  font-size: 17px;
  color: rgba(245, 237, 224, 0.90);
  line-height: 1.82;
  font-weight: 400;
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
}

.step {
  background: rgba(245, 237, 224, 0.02);
  border: 0.5px solid rgba(245, 237, 224, 0.04);
  overflow: hidden;
  transition: background 0.25s;
}

.step:hover {
  background: rgba(245, 237, 224, 0.05);
}

.step-foto {
  width: 100%;
  height: 200px;
  position: relative;
  overflow: hidden;
}

.step-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.7) saturate(0.8);
  transition: transform 0.45s ease, filter 0.35s;
}

.step:hover .step-foto img {
  transform: scale(1.04);
  filter: brightness(0.82) saturate(0.9);
}

.step-foto-ph {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 1rem;
}

.step-foto-ph span {
  font-size: 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(196, 176, 124, 0.22);
}

.step-foto-ph em {
  font-family: 'Cormorant Garamond', serif;
  font-size: 12px;
  font-style: italic;
  font-weight: 300;
  text-align: center;
  color: rgba(196, 176, 124, 0.15);
  line-height: 1.4;
}

.step-body {
  padding: 2rem 1.75rem;
}

.step-barra {
  height: 1.5px;
  margin-bottom: 1.75rem;
}

.step-num {
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(196, 176, 124, 0.95);
  font-weight: 500;
  margin-bottom: 0.6rem;
  display: block;
}

.step-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-weight: 400;
  color: var(--c);
  margin-bottom: 0.75rem;
  line-height: 1.2;
}

.step-desc {
  font-size: 15px;
  color: rgba(245, 237, 224, 0.90);
  line-height: 1.78;
  font-weight: 400;
}

/* ══ FRASE SEPARADORA ══════════════════════════════════════════ */
.frase {
  padding: 5rem 2.5rem;
  background: var(--c);
  display: flex;
  align-items: center;
  justify-content: center;
}

.frase-in {
  max-width: 680px;
  text-align: center;
}

.frase-ey {
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--t);
  margin-bottom: 1.5rem;
  display: block;
  font-weight: 500;
}

.frase-q {
  font-family: 'Cormorant Garamond', serif;
  font-size: 36px;
  font-weight: 400;
  font-style: italic;
  color: var(--os);
  line-height: 1.38;
  letter-spacing: -0.01em;
}

.frase-rule {
  width: 24px;
  height: 1px;
  background: rgba(122, 92, 58, 0.22);
  margin: 1.75rem auto 0;
}

/* ══ JOURNAL ═══════════════════════════════════════════════════ */
.journal {
  padding: 7rem 2.5rem;
  background: var(--w);
}

.journal-hd {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: end;
  margin-bottom: 4rem;
}

.journal-intro {
  font-size: 18px;
  color: var(--t);
  font-weight: 400;
  line-height: 1.78;
  align-self: end;
}

.journal-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 2px;
}

.jcard {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform 0.3s;
}

.jcard:hover {
  transform: translateY(-2px);
}

.jcard-img {
  width: 100%;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.jcard.main .jcard-img {
  height: 520px;
}

.jcard-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.jcard-stack .jcard .jcard-img {
  height: 254px;
}

.jcard-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.72) saturate(0.82);
  transition: transform 0.5s ease, filter 0.4s ease;
}

.jcard:hover .jcard-img img {
  transform: scale(1.04);
  filter: brightness(0.84);
}

.jcard-img-ph {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 2rem;
}

.jcard-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(26, 22, 16, 0.75) 0%, transparent 50%);
}

.jcard-body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem;
  z-index: 2;
}

.jcard-tag {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(196, 176, 124, 0.95);
  margin-bottom: 0.5rem;
  display: block;
}

.jcard-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--c);
  line-height: 1.25;
  margin-bottom: 0.6rem;
}

.jcard.main .jcard-title {
  font-size: 30px;
}

.jcard-excerpt {
  font-size: 15px;
  color: rgba(245, 237, 224, 0.92);
  font-weight: 400;
  line-height: 1.65;
  margin-bottom: 1rem;
}

.jcard:not(.main) .jcard-excerpt {
  display: none;
}

.jcard-foot {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: rgba(245, 237, 224, 0.82);
  letter-spacing: 0.06em;
}

/* ══ REVIEWS ═══════════════════════════════════════════════════ */
.reviews {
  padding: 6rem 2.5rem;
  background: var(--c);
}

.reviews-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 3rem;
}

.rev-stars {
  color: var(--t);
  font-size: 13px;
  letter-spacing: 2px;
}

.rev-nota {
  font-size: 13px;
  color: var(--g);
  font-style: italic;
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
}

.rc {
  background: var(--w);
  border: 0.5px solid rgba(122, 92, 58, 0.06);
  padding: 2rem;
  display: flex;
  flex-direction: column;
}

.rc-stars {
  color: var(--t);
  font-size: 12px;
  letter-spacing: 2px;
  margin-bottom: 1rem;
}

.rc-txt {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-style: italic;
  font-weight: 400;
  color: var(--o);
  line-height: 1.5;
  margin-bottom: 1.25rem;
  flex: 1;
}

.rc-auth {
  font-size: 14px;
  color: var(--g);
  font-weight: 400;
}

.rc-auth span {
  display: block;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--g);
  margin-top: 2px;
}

.rev-disclaimer {
  font-size: 12px;
  color: var(--g);
  font-style: italic;
  margin-top: 1.75rem;
  text-align: center;
  letter-spacing: 0.04em;
}

/* ══ CONTACTO ══════════════════════════════════════════════════ */
.contacto {
  padding: 6rem 2.5rem;
  background: var(--cw);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: start;
}

.cont-cards {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ccard {
  padding: 1.5rem 1.75rem;
  background: var(--w);
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 1.25rem;
  align-items: start;
  border-left: 2px solid transparent;
  transition: border-color 0.2s;
}

.ccard:hover {
  border-left-color: var(--tl);
}

.ccard-icon {
  width: 36px;
  height: 36px;
  border: 0.5px solid rgba(122, 92, 58, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ccard-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-weight: 400;
  color: var(--o);
  margin-bottom: 0.3rem;
}

.ccard-body {
  font-size: 16px;
  color: var(--t);
  font-weight: 400;
  line-height: 1.72;
}

.ccard-body a {
  color: var(--t);
  border-bottom: 0.5px solid rgba(122, 92, 58, 0.25);
  transition: color 0.18s;
}

.ccard-body a:hover {
  color: var(--o);
}

/* Formulario de contacto */
.cont-form {
  background: var(--w);
  padding: 2.5rem;
  border: 0.5px solid rgba(122, 92, 58, 0.08);
}

.form-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  font-weight: 400;
  color: var(--o);
  margin-bottom: 0.3rem;
}

.form-sub {
  font-size: 12px;
  color: var(--gl);
  margin-bottom: 1.75rem;
  letter-spacing: 0.06em;
}

.ff {
  display: flex;
  flex-direction: column;
  margin-bottom: 1px;
}

.ff label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--t);
  padding: 0.75rem 1rem 0.2rem;
  display: block;
  background: var(--c);
}

.ff input,
.ff textarea,
.ff select {
  background: var(--c);
  border: none;
  outline: none;
  font-family: 'Jost', sans-serif;
  font-size: 15px;
  color: var(--o);
  padding: 0.35rem 1rem 0.85rem;
  font-weight: 300;
  border-bottom: 0.5px solid rgba(122, 92, 58, 0.1);
  transition: border-color 0.2s;
  width: 100%;
  resize: none;
}

.ff input:focus,
.ff textarea:focus {
  border-bottom-color: var(--t);
}

.ff input::placeholder,
.ff textarea::placeholder {
  color: var(--gl);
}

.ff textarea {
  min-height: 80px;
}

.ff-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-bottom: 1px;
}

.form-submit {
  width: 100%;
  background: var(--v);
  color: var(--w);
  padding: 14px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  margin-top: 1px;
  transition: background 0.2s;
}

.form-submit:hover {
  background: var(--vm);
}

.form-privacy {
  font-size: 12px;
  color: var(--g);
  text-align: center;
  margin-top: 1rem;
  letter-spacing: 0.04em;
}

.form-privacy a {
  color: var(--t);
  border-bottom: 0.5px solid rgba(122, 92, 58, 0.2);
}

/* ══ CTA FINAL ═════════════════════════════════════════════════ */
.cta-final {
  padding: 6rem 2.5rem;
  background: var(--v);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: center;
}

.cta-h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 44px;
  font-weight: 300;
  color: var(--c);
  line-height: 0.97;
  margin-bottom: 1.5rem;
}

.cta-h2 em {
  font-style: italic;
  color: rgba(245, 237, 224, 0.72);
}

.cta-desc {
  font-size: 17px;
  color: rgba(245, 237, 224, 0.92);
  line-height: 1.8;
  font-weight: 400;
}

.cta-actions {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.btn-solid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c);
  color: var(--v);
  padding: 15px 36px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  transition: opacity 0.2s, transform 0.2s;
}

.btn-solid:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: rgba(245, 237, 224, 0.82);
  padding: 15px 36px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 400;
  border: 0.5px solid rgba(245, 237, 224, 0.22);
  transition: all 0.22s;
}

.btn-ghost:hover {
  border-color: rgba(245, 237, 224, 0.5);
  color: rgba(245, 237, 224, 0.95);
  background: rgba(245, 237, 224, 0.06);
}

.cta-note {
  font-size: 12px;
  color: rgba(245, 237, 224, 0.58);
  margin-top: 0.5rem;
  font-style: italic;
  letter-spacing: 0.05em;
}

/* ══ RESPONSIVE — productor ════════════════════════════════════ */
@media (max-width: 1100px) {
  .hero-content      { grid-template-columns: 1fr; }
  .hero-ficha        { display: none; }
  .hero-h1           { font-size: 52px; }
  .empresa           { grid-template-columns: 1fr; gap: 3rem; }
  .valores-grid      { grid-template-columns: 1fr 1fr; }
  .elab-hd           { grid-template-columns: 1fr; gap: 2rem; }
  .steps             { grid-template-columns: 1fr 1fr; }
  .journal-hd        { grid-template-columns: 1fr; gap: 2rem; }
  .journal-grid      { grid-template-columns: 1fr; }
  .jcard.main .jcard-img { height: 340px; }
  .jcard-stack       { flex-direction: row; gap: 2px; }
  .jcard-stack .jcard .jcard-img { height: 220px; }
  .reviews-grid      { grid-template-columns: 1fr 1fr; }
  .contacto          { grid-template-columns: 1fr; gap: 3rem; }
  .cta-final         { grid-template-columns: 1fr; gap: 3rem; }
}

@media (max-width: 768px) {
  .hero              { min-height: 70vh; }
  .hero-content      { padding: 0 1.5rem 3.5rem; }
  .hero-h1           { font-size: 38px; }
  .hero-btns         { flex-direction: column; }
  .hero-badges       { display: none; }
  .empresa,
  .elaboracion,
  .journal,
  .contacto          { padding: 4rem 1.25rem; }
  .valores,
  .reviews,
  .cta-final         { padding: 4rem 1.25rem; }
  .frase             { padding: 3.5rem 1.5rem; }
  .frase-q           { font-size: 28px; }
  .sec-h2,
  .elab-h2,
  .cta-h2            { font-size: 32px; }
  .valores-grid      { grid-template-columns: 1fr; }
  .steps             { grid-template-columns: 1fr; }
  .jcard-stack       { flex-direction: column; }
  .reviews-grid      { grid-template-columns: 1fr; }
  .ff-row            { grid-template-columns: 1fr; }
}