/* public/css/institucional.css y content.css están embebidos en global.css */
/* Este archivo centraliza los estilos de las páginas secundarias (Institucional + Contenido) */

/* ── Institucional ────────────────────────────── */
.institucional-main { padding: 0 0 5rem; }

.inst-intro--book { 
  padding: 8rem 2rem; 
  background: url('https://www.transparenttextures.com/patterns/wood-pattern.png'), #2c1e14;
  background-blend-mode: multiply;
  overflow: hidden; display: flex; align-items: center; justify-content: center;
}

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

.book { 
  display: flex; position: relative;
  min-height: 700px;
}

/* Tapa del libro */
.book::before {
  content: ''; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px;
  background: #1a252f; border-radius: 4px; z-index: -1;
  box-shadow: 0 20px 40px rgba(0,0,0,0.6);
}

.book-page { 
  flex: 1; position: relative; padding: 4rem 3.5rem; display: flex; flex-direction: column; 
  background-color: #fdf6e3;
  background-image: url('https://www.transparenttextures.com/patterns/paper-fibers.png');
  box-shadow: inset 0 0 50px rgba(0,0,0,0.05);
}

/* Bordes irregulares de papel */
.book-page--left { 
  border-radius: 2px 0 0 2px;
  clip-path: polygon(0% 2%, 100% 0%, 100% 100%, 0% 98%);
  padding-right: 4.5rem;
  background: linear-gradient(to right, #fdf6e3 95%, #e5dcc3 100%);
}

.book-page--right { 
  border-radius: 0 2px 2px 0;
  clip-path: polygon(0% 0%, 100% 2%, 100% 98%, 0% 100%);
  padding: 2rem;
  background: #fdf6e3;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Pliegue central sutil */
.book::after {
  content: ''; position: absolute; left: 50%; top: 0; width: 2px; height: 100%;
  background: rgba(0,0,0,0.2);
  box-shadow: 0 0 15px rgba(0,0,0,0.3);
  transform: translateX(-50%); z-index: 10;
}

.book-inner { width: 100%; }
.book-title { 
  font-family: 'Inter', sans-serif; font-size: 2.2rem; font-weight: 800;
  color: #1a1a1a; margin-bottom: 2.5rem;
}

.book-text { 
  font-family: 'Inter', sans-serif; font-size: 0.95rem; line-height: 1.7; color: #222; text-align: left;
}
.book-text p { margin-bottom: 1.5rem; }
.book-text strong { font-weight: 800; color: #000; }

.book-illustration-wrap { 
  width: 100%; height: 100%; display: flex;
}
.book-illustration { 
  width: 100%; height: 100%; object-fit: contain;
  filter: contrast(1.02) saturate(1.05);
  max-height: 600px;
}

@media(max-width: 992px) {
  .book { flex-direction: column; min-height: auto; }
  .book::after { display: none; }
  .book-page { padding: 3rem 2rem; clip-path: none !important; }
  .book-illustration { height: 500px; }
}

.inst-mission-vision { padding: 4rem 3rem; }
.mission-vision-grid { 
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; 
  max-width: 1000px; margin: 0 auto; 
}
.mv-card { 
  background: white; padding: 2.5rem; border-radius: 24px; 
  box-shadow: 0 10px 30px rgba(139,107,74,0.05); border: 1px solid rgba(139,107,74,0.08);
  text-align: center; transition: transform 0.3s ease;
}
.mv-card:hover { transform: translateY(-5px); }
.mv-icon { font-size: 2.5rem; display: block; margin-bottom: 1rem; }
.mv-card h3 { font-family: 'Playfair Display', serif; font-size: 1.5rem; color: var(--text-dark); margin-bottom: 1rem; }
.mv-card .cms-content { color: var(--text-mid); line-height: 1.6; font-size: 0.95rem; }

.inst-value-card {
  border-radius: 20px; padding: 2rem; border: 1px solid transparent;
  position: relative;
}

.inst-value-card--green {
  background: rgba(74,114,69,.06); border-color: rgba(74,114,69,.15);
}

.inst-value-card--terra {
  background: rgba(196,112,74,.06); border-color: rgba(196,112,74,.15);
}

.inst-value-icon { font-size: 2rem; margin-bottom: 0.8rem; }

.inst-value-card h2 {
  font-family: 'Playfair Display', serif; font-size: 1.3rem;
  color: #2a2318; color: var(--text-dark, #2a2318); margin-bottom: 0.8rem;
}

.inst-value-card p { font-size: 0.92rem; color: var(--text-mid); line-height: 1.75; }

.inst-story {
  max-width: 720px; display: flex; flex-direction: column; gap: 1rem;
}

.inst-story p {
  font-size: 0.97rem; color: var(--text-mid); line-height: 1.85;
}

/* Valores Interactivos */
.section-header-center { text-align: center; margin-bottom: 3.5rem; }
.section-header-center .eyebrow { color: var(--terra); font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.75rem; margin-bottom: 0.8rem; }
.section-subtitle { color: var(--text-soft); font-size: 0.9rem; margin-top: 0.5rem; }

.values-interactive-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 2rem; max-width: 1200px; margin: 0 auto;
}

.value-item { perspective: 1000px; }
.value-item__card {
  background: white; border: 1px solid rgba(139,107,74,0.1);
  padding: 2.5rem 1.5rem; border-radius: 20px; text-align: center;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  position: relative; overflow: hidden; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}

.value-item__icon { font-size: 2.5rem; margin-bottom: 1.2rem; transition: transform 0.4s ease; }
.value-item__title { font-size: 1.1rem; font-weight: 600; color: var(--text-dark); margin: 0; transition: opacity 0.3s ease; }

.value-item__popup {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(74, 114, 69, 0.92); backdrop-filter: blur(10px);
  padding: 2rem 1.5rem; display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transform: translateY(20px);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.value-item__popup p { 
  color: white; font-size: 0.9rem; line-height: 1.6; text-align: center; margin: 0;
}

.value-item:hover .value-item__card { border-color: var(--green); box-shadow: 0 15px 35px rgba(74,114,69,0.12); }
.value-item:hover .value-item__icon { transform: scale(1.1) translateY(-10px); }
.value-item:hover .value-item__popup { opacity: 1; visibility: visible; transform: translateY(0); }

.inst-cta {
  text-align: center; padding: 3rem;
  background: rgba(74,114,69,.05); border-top: 1px solid rgba(74,114,69,.12);
}

.inst-cta h2 {
  font-family: 'Playfair Display', serif; font-size: 1.8rem; color: var(--text-dark);
  margin-bottom: 0.5rem;
}

.inst-cta p { font-size: 0.95rem; color: var(--text-mid); }

/* ── Biblioteca de Contenido ──────────────────── */
.content-main { padding: 2.5rem 3rem 5rem; max-width: 1100px; margin: 0 auto; }

.content-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: 2.5rem; flex-wrap: wrap;
}

.content-empty {
  text-align: center; padding: 4rem 1rem; color: var(--text-soft);
  font-style: italic; font-size: 1rem;
}

.content-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr));
  gap: 1.4rem;
}

.resource-card {
  background: rgba(255,255,255,.75); backdrop-filter: blur(8px);
  border: 1px solid rgba(139,107,74,.12); border-radius: 18px;
  padding: 1.8rem 1.5rem; display: flex; flex-direction: column; gap: 0.7rem;
  position: relative; transition: transform .2s, box-shadow .2s;
}

.resource-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(74,114,69,.1); }
.resource-card--premium { border-color: rgba(196,112,74,.25); }

.resource-card__icon { font-size: 2.2rem; }

.resource-card__title {
  font-size: 1rem; font-weight: 600; color: var(--text-dark); line-height: 1.35;
}

.resource-card__desc { font-size: 0.84rem; color: var(--text-soft); line-height: 1.6; flex: 1; }

.resource-card__meta { font-size: 0.75rem; color: var(--text-soft); }

.resource-card__btn {
  padding: 0.65rem 1.2rem; font-size: 0.88rem; text-align: center; margin-top: 0.3rem;
}

@media(max-width: 768px) {
  .inst-intro__grid, .mission-vision-grid, .values-interactive-grid { grid-template-columns: 1fr; }
  .inst-intro { padding: 3rem 1.5rem; }
  .inst-intro__image { order: -1; }
  .inst-intro__grid { gap: 2rem; }
  .inst-section, .inst-cta { padding: 3rem 1.5rem; }
}