/* ============================================================
PROYECTO-DETALLE.CSS
Hoja única para proy-vetiver.html · proy-dignos.html · proy-moscas.html
Estructura: opción B. Paleta: la tuya de vetiver1.css.
REQUISITOS
1. Cargar DESPUÉS de shared.css:
2. El body debe llevar la clase:
============================================================ */
/* ============================================================
1. TOKENS
Tus colores originales de vetiver1.css, ahora como variables.
Cambia uno acá y cambia en toda la página.
============================================================ */
.proyecto-detalle {
--pd-verde-hondo : #1f3d2b; /* barras oscuras, footer, nav */
--pd-verde : #2f5233; /* títulos, números de la ficha */
--pd-verde-medio : #4f6f3f; /* texto secundario en verde */
--pd-verde-suave : #5e9d27; /* detalles, bordes activos */
--bg-dark: #0F1E15;
--bg-soft: #f7f7f7;
--pd-crema : #f3f2ed; /* fondo de bloques claros */
--pd-crema-hondo : #f6edd8; /* fondo de tarjetas y ficha */
--pd-linea : #E2DFD5; /* hairlines y separadores */
--pd-blanco : #ffffff;
--pd-tinta : #2a2f2a; /* cuerpo de texto */
--pd-tinta-suave : #5d6b5d;
--pd-verdebon : #328a3c; /* pies de foto, etiquetas */
--pd-dorado : var(--accent, #279d57);
/* Escala de espaciado: usa SIEMPRE estos valores, nunca números
sueltos. Es lo que mantiene el ritmo vertical parejo. */
--pd-s1: 8px;
--pd-s2: 16px;
--pd-s3: 28px;
--pd-s4: 48px;
--pd-s5: 80px;
--pd-ancho : 1180px;
--pd-medida : 70ch; /* ancho máximo de lectura cómoda */
background: var(--pd-blanco);
color: var(--pd-tinta);
}
/* ============================================================
2. NAVBAR
No tocamos shared.css. La clase del body por delante nos da
más especificidad, así que estas reglas ganan solo acá.
============================================================ */
.proyecto-detalle .v3-nav,
.proyecto-detalle .v3-nav.scrolled {
background: var(--bg-dark);
height: 68px;
padding: 0 var(--pd-s4);
box-shadow: none;
border-bottom: 1px solid rgba(255, 255, 255, .10);
}
.proyecto-detalle .v3-nav.scrolled { box-shadow: 0 2px 14px rgba(31, 61, 43, .22); }
.proyecto-detalle .nav-back {
display: inline-flex;
align-items: center;
gap: var(--pd-s1);
font-family: var(--font-texto);
font-size: 13px;
font-weight: 500;
color: rgba(255, 255, 255, .80);
padding: 8px 14px;
border: 1px solid rgba(255, 255, 255, .20);
border-radius: var(--r-sm, 8px);
transition: color .25s, border-color .25s, background .25s;
}
.proyecto-detalle .nav-back:hover {
color: var(--pd-blanco);
border-color: rgba(255, 255, 255, .48);
background: rgba(255, 255, 255, .07);
}
.proyecto-detalle .nav-back i { font-size: 11px; }
/* Título que aparece en el nav al hacer scroll: le dice al lector
dónde está cuando el hero ya salió de pantalla. */
.proyecto-detalle .nav-titulo-proyecto {
font-family: var(--font-titulo);
font-size: 17px;
color: var(--pd-blanco);
opacity: 0;
transform: translateY(6px);
transition: opacity .35s ease, transform .35s ease;
pointer-events: none;
}
.proyecto-detalle .v3-nav.scrolled .nav-titulo-proyecto {
opacity: 1;
transform: translateY(0);
}
/* Línea de progreso de lectura. El ancho lo mueve el JS. */
.proyecto-detalle .pd-progreso {
position: fixed;
top: 68px;
left: 0;
height: 2px;
width: 0;
background: var(--pd-dorado);
z-index: 1001;
transition: width .1s linear;
}
/* ============================================================
3. HERO
============================================================ */
.pd-hero {
position: relative;
min-height: 440px;
display: flex;
align-items: flex-end;
overflow: hidden;
padding-bottom: var(--pd-s4);
margin-top: 68px;
}
.pd-hero__bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center 45%;
}
/* El velo es más fuerte abajo, que es donde vive el texto. */
.pd-hero__velo {
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(31, 61, 43, .48) 0%,
rgba(31, 61, 43, .22) 38%,
rgba(31, 61, 43, .88) 100%);
}
.pd-hero__cnt {
position: relative;
z-index: 2;
width: 100%;
max-width: var(--pd-ancho);
margin: 0 auto;
padding: 0 var(--pd-s4);
}
.pd-hero h1 {
font-family: var(--font-titulo);
font-size: clamp(38px, 5.5vw, 62px);
font-weight: 500;
line-height: 1.04;
letter-spacing: -.015em;
color: var(--pd-blanco);
margin: 0;
}
.pd-hero__sub {
font-family: var(--font-texto);
font-size: 17px;
line-height: 1.6;
color: rgba(255, 255, 255, .84);
margin: var(--pd-s2) 0 0;
max-width: 46ch;
}
.pd-intro p,
.pd-verde p {
text-align: justify;
}
/* Etiqueta dorada reutilizable en toda la página */
.pd-eyebrow {
display: block;
font-family: var(--font-texto);
font-size: 11px;
font-weight: 600;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--pd-dorado);
margin-bottom: var(--pd-s2);
}
/* ============================================================
4. FICHA NUMÉRICA
============================================================ */
.pd-ficha {
background: var(--pd-blanco);
border-bottom: 1px solid var(--pd-blanco);
}
.pd-ficha__grid {
max-width: var(--pd-ancho);
margin: 0 auto;
padding: 0 var(--pd-s4);
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.pd-ficha__item {
padding: var(--pd-s3) var(--pd-s2);
text-align: center;
border-right: 0px solid var(--pd-linea);
}
.pd-ficha__item:last-child { border-right: none; }
.pd-ficha__valor {
display: block;
font-family: var(--font-titulo);
font-size: 30px;
font-weight: 500;
line-height: 1.1;
color: var(--bg-dark);
}
.pd-ficha__etiqueta {
display: block;
font-family: var(--font-texto);
font-size: 11px;
font-weight: 500;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--pd-tinta-suave);
margin-top: var(--pd-s1);
}
/* ============================================================
VETIVER — SECCIONES NUEVAS
Pegar al final de proyecto-detalle.css
============================================================ */
.vt-sec { padding: 20px 24px; }
.vt-sec--crema { background: var(--bg); }
.vt-sec--blanco { background: var(--bg-soft); }
.vt-wrap {
max-width: 1152px;
margin: 35px auto; }
.vt-eyebrow {
display: block;
font-family: var(--font-texto);
font-size: 11px;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 14px;
}
.vt-titulo {
font-family: var(--font-titulo);
font-size: 30px; font-weight: 700;
color: var(--text); line-height: 1.25;
margin: 0 0 20px;
}
.vt-texto {
font-size: 16px;
line-height: 1.75;
color: var(--text-muted);
margin: 0 0 30px;
text-align: justify;
}
.vt1-texto {
font-size: 16px;
line-height: 1.75;
color: var(--text-muted);
margin: 0 0 10px;
text-align: justify;
}
.vt-texto strong {
color: var(--text);
font-weight: 600; }
.vt-mini {
display: block;
font-size: 11px; font-weight: 600;
letter-spacing: 2px; text-transform: uppercase;
color: #8A6420; margin-bottom: 18px;
}
/* ---------- 1 · EL RETO ---------- */
.vt-reto__foto {
margin: 0 0 22px;
border-radius: var(--r-md);
overflow: hidden;
box-shadow: 0 8px 20px rgba(0,0,0,.10);
}
.vt-reto__foto img {
width: 100%;
display: block;
aspect-ratio: 35 / 7;
object-fit: cover;
object-position: center 45%;
}
.vt-reto__datos {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.vt-dato {
background: var(--bg);
border-radius: var(--r-md);
padding: 16px 18px;
box-shadow: 0 8px 20px rgba(0,0,0,.07);
}
.vt-dato__num {
display: block;
font-family: var(--font-titulo);
font-size: 26px;
font-weight: 700;
color: var(--primary);
line-height: 1.1;
}
.vt-dato__nom { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-top: 6px; }
.vt-dato__sub { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; line-height: 1.5; }
@media (max-width: 900px) {
.vt-reto__foto img { aspect-ratio: 16 / 7; }
.vt-reto__datos { grid-template-columns: 1fr; gap: 10px; }
.vt-dato { display: flex; align-items: baseline; gap: 13px; padding: 14px 16px; }
.vt-dato__num { font-size: 22px; flex-shrink: 0; }
.vt-dato__nom { margin-top: 0; }
}
/* ---------- 2 · LA SOLUCIÓN ---------- */
.vt-sol { display: grid; grid-template-columns: 1.1fr 1fr; gap: 44px; align-items: center; margin-bottom: 56px; }
.vt-sol__lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 26px; }
.vt-sol__lista li { display: flex; gap: 16px; align-items: flex-start; }
.vt-sol__lista i {
font-size: 17px; color: var(--primary);
width: 42px; height: 42px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
background: var(--bg-green); border-radius: 50%;
}
.vt-sol__lista strong { display: block; font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.vt-sol__lista span { display: block; font-size: 14px; color: var(--text-muted); line-height: 1.6; }
.vt-sol__foto {
margin: 0;
border-radius: var(--r-md);
overflow: hidden;
box-shadow: var(--sh-lg); }
.vt-sol__foto img {
width: 100%;
display: block; aspect-ratio: 4/3;
object-fit: cover; }
.vt-proceso {
padding-top: 50px;
}
.vt-proceso__grid {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 26px;
}
.vt-proceso__grid li {
border-top: 2px solid var(--accent);
padding-top: 16px;
}
.vt-paso__n {
display: block;
font-family: var(--font-titulo);
font-size: 13px;
font-weight: 700;
color: var(--accent);
margin-bottom: 8px;
}
.vt-proceso__grid strong {
display: block;
font-size: 15px;
font-weight: 600;
color: var(--text);
margin-bottom: 6px;
line-height: 1.3; }
.vt-proceso__grid span:last-child {
display: block;
font-size: 13px;
color: var(--text-muted);
line-height: 1.6;
}
.vt-solu__foto {
margin: 0 0 22px;
border-radius: var(--r-md);
overflow: hidden;
box-shadow: 0 8px 20px rgba(0,0,0,.10);
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.vt-solu__foto img {
width: 100%;
height: 100%;
display: block;
aspect-ratio: 5 / 3;
object-fit: cover;
object-position: center 45%;
}
.vt-solu__datos {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 150px;
align-items: center;
}
.vts-dato__num {
display: block;
font-family: var(--font-titulo);
font-size: 30 px;
font-weight: 700;
color: var(--primary);
line-height: 1.1;
}
.vt-dato__nom { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-top: 6px; }
.vts-dato__sub { display: block;
font-size: 13px;
color: var(--text-muted);
margin-top: 2px;
line-height: 1.5; }
@media (max-width: 900px) {
.vt-reto__foto img { aspect-ratio: 16 / 7; }
.vt-solu__foto img { aspect-ratio: 1 / 1; }
.vt-solu__datos {
grid-template-columns: 1fr;
gap: 10px; }
.vts-dato {
display: flex;
align-items: baseline;
gap: 13px;
padding: 14px 16px;
}
.vts-dato__num { font-size: 22px; flex-shrink: 0; }
.vts-dato__nom { margin-top: 0; }
}
/* ---------- 3 · RESULTADOS ---------- */
.vt-res { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.vt-res__card {
background: var(--bg);
border-radius: var(--r-md);
padding: 28px 24px 26px;
box-shadow: 0 8px 40px rgba(0,0,0,.10);
transition: transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s;
}
.vt-res__card:hover { transform: translateY(-6px); box-shadow: 0 20px 55px rgba(8,20,12,.18); }
.vt-res__num { display: block; font-family: var(--font-titulo); font-size: 42px; font-weight: 700; color: var(--primary); line-height: 1; }
.vt-res__num em { font-style: normal; font-size: 22px; }
.vt-res__card--oro .vt-res__num { color: var(--accent); }
.vt-res__nom { display: block; font-size: 14px; font-weight: 600; color: var(--text); margin-top: 12px; }
.vt-res__sub { display: block; font-size: 13px; color: var(--text-muted); margin-top: 3px; line-height: 1.5; }
.vt-fuente { display: flex; gap: 10px; align-items: flex-start; margin: 30px 0 0; font-size: 13px; color: var(--text-muted); line-height: 1.6; }
.vt-fuente i { color: var(--accent); margin-top: 3px; }
/* ---------- 4 · LOS TRES MÓDULOS ---------- */
.vt-mods { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.vt-mod {
background: var(--bg-soft);
border-radius: var(--r-md);
overflow: hidden;
box-shadow: 0 8px 40px rgba(0,0,0,.10);
transition: transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s;
}
.vt-mod:hover { transform: translateY(-8px); box-shadow: 0 24px 60px rgba(8,20,12,.20); }
.vt-mod__foto { margin: 0; aspect-ratio: 16/10; overflow: hidden; }
.vt-mod__foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s cubic-bezier(.2,.7,.3,1); }
.vt-mod:hover .vt-mod__foto img { transform: scale(1.05); }
.vt-mod__body { padding: 22px 24px 26px; }
.vt-mod__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.vt-mod__caso { font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); }
.vt-badge { font-size: 11px; font-weight: 600; padding: 4px 11px; border-radius: 100px; }
.vt-badge--ok { color: #1F7A45; background: #E4F2E8; }
.vt-badge--wip { color: #8A6420; background: #F6EDD8; }
.vt-mod__body h3 { font-family: var(--font-titulo); font-size: 19px; font-weight: 700; color: var(--text); margin: 0 0 14px; }
.vt-mod__num { display: block; font-family: var(--font-titulo); font-size: 36px; font-weight: 700; color: var(--primary); line-height: 1; }
.vt-mod__num em { font-style: normal; font-size: 19px; }
.vt-mod__sub { display: block; font-size: 13px; color: var(--text-muted); margin-top: 5px; }
.vt-mod__pie { border-top: 1px solid var(--border); margin: 16px 0 0; padding-top: 14px; font-size: 13px; color: var(--text-muted); line-height: 1.7; }
/* ============================================================
8. VIDEO
============================================================ */
.vtv-wrap{
text-align: center;
}
.pd-video {
max-width: 1152px;
margin: 25px auto
}
.pd-video__marco {
/* position: relative;*/
width: 100%;
/*padding-bottom: 56.25%; /* 16:9 */
/*height: 0;*/
overflow: hidden;
border-radius: 12px; /* opcional, si ya lo tenías */
}
.pd-video__marco iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
.pd-video--compacto .pd-video__marco {
aspect-ratio: 21 / 9; /* video más bajo, a la altura de la foto de la solución */
}
.pd-video__marco video {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.pd-video__pie {
font-family: var(--font-texto);
font-size: 13px;
color: var(--pd-tinta-suave);
margin: var(--pd-s2) 0 0;
}
.pd-video__marco--yt {
position: relative;
width: 100%;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.pd-video__marco--yt iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
.pd-video__marco--yt {
position: relative;
width: 100%;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
border-radius: 12px;
}
.pd-video__marco--yt iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
.pd-video__portada {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
padding: 0;
border: 0;
cursor: pointer;
background: #000;
display: block;
}
.pd-video__portada img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.pd-video__play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 76px;
height: 76px;
border-radius: 50%;
background: rgba(0, 0, 0, .6);
transition: background .2s ease, transform .2s ease;
}
.pd-video__play::after {
content: "";
position: absolute;
top: 50%;
left: 55%;
transform: translate(-50%, -50%);
border-style: solid;
border-width: 14px 0 14px 23px;
border-color: transparent transparent transparent #fff;
}
.pd-video__portada:hover .pd-video__play {
background: rgba(0, 0, 0, .85);
transform: translate(-50%, -50%) scale(1.08);
}
/* ============================================================
9. GALERÍA
Mosaico estático. La primera foto ocupa 2x2 para dar jerarquía
y evitar la cuadrícula plana de miniaturas iguales.
============================================================ */
.pd-galeria {
max-width: 1152px;
margin: 30px auto;
}
.pd-galeria__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 190px;
gap: 12px;
}
.pd-galeria__grid a {
display: block;
overflow: hidden;
border-radius: var(--r-sm, 8px);
background: var(--pd-crema-hondo);
}
.pd-galeria__grid a:first-child {
grid-column: span 2;
grid-row: span 2;
}
.pd-galeria__grid img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.pd-galeria__grid a:hover img { transform: scale(1.05); }
/* ============================================================
10. SIGUIENTE PROYECTO
============================================================ */
.pd-siguiente {
display: block;
background: #d9e0dd;
color: var(--pd-blanco);
}
.pd-siguiente__wrap {
max-width: var(--pd-ancho);
margin: 0 auto;
padding: var(--pd-s4);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--pd-s3);
}
.pd-siguiente__nombre {
font-family: var(--font-titulo);
font-size: clamp(22px, 3vw, 30px);
font-weight: 500;
color: var(--bg-dark);
margin: 0;
}
.pd-siguiente__flecha {
flex-shrink: 0;
background: var(--pd-blanco);
width: 52px;
height: 52px;
border: 1px solid rgba(225, 230, 226, 0.893);
border-radius: 50%;
display: grid;
place-items: center;
color: var(--pd-tinta);
transition: background .3s, transform .3s, border-color .3s;
}
.pd-siguiente:hover .pd-siguiente__flecha {
background: var(--pd-dorado);
border-color: var(--pd-dorado);
color: var(--pd-blanco);
transform: translateX(5px);
}
/* ============================================================
11. RESPONSIVE
============================================================ */
@media (max-width: 980px) {
.pd-intro { grid-template-columns: 1fr; gap: var(--pd-s3); justify-items: center; text-align: center; }
.pd-intro p { text-align: left; }
.pd-verde__wrap { grid-template-columns: 1fr; gap: var(--pd-s3); }
.pd-verde__img { order: -1; }
.pd-tarjetas { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
.proyecto-detalle { --pd-s5: 52px; }
.proyecto-detalle .v3-nav { padding: 0 var(--pd-s2); }
.proyecto-detalle .nav-titulo-proyecto { display: none; }
.proyecto-detalle .nav-back span { display: none; }
.pd-hero { min-height: 320px; }
.pd-hero__cnt,
.pd-intro, .pd-tarjetas, .pd-verde__wrap,
.pd-video, .pd-galeria, .pd-ficha__grid,
.pd-siguiente__wrap { padding-left: var(--pd-s3); padding-right: var(--pd-s3); }
.pd-ficha__grid { grid-template-columns: repeat(2, 1fr); }
.pd-ficha__item:nth-child(2) { border-right: none; }
.pd-ficha__item:nth-child(-n+2) { border-bottom: 1px solid var(--pd-linea); }
.pd-intro__circulo { width: 200px; height: 200px; }
.pd-galeria__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; }
.pd-galeria__grid a:first-child { grid-column: span 2; grid-row: span 1; }
.pd-siguiente__wrap { flex-direction: column; align-items: flex-start; }
/* ---------- Reducción validada en laboratorio ---------- */
.vt-res {
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
.vt-res__card {
padding: 18px 16px 16px;
}
.vt-res__num { font-size: 30px; }
.vt-res__num em { font-size: 16px; }
.vt-res__nom { font-size: 13px; }
.vt-res__sub { font-size: 12px; }
/* ---------- Tres parcelas: carrusel horizontal, igual que en index ---------- */
.vt-mods {
display: flex;
grid-template-columns: none;
gap: 14px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding-bottom: 8px;
margin: 0 -24px;
padding-left: 24px;
padding-right: 24px;
}
.vt-mods::-webkit-scrollbar { display: none; }
.vt-mod {
flex: 0 0 78%;
scroll-snap-align: center;
}
/* ---------- Video de resultados: sin recorte 21:9 en celular ---------- */
.pd-video--compacto .pd-video__marco {
aspect-ratio: 16 / 9;
}
}
@media (max-width: 420px) {
.vt-res {
gap: 10px;
}
.vt-res__card {
padding: 14px 12px;
}
.vt-res__num { font-size: 26px; }
}
/* ============================================================
12. ACCESIBILIDAD
============================================================ */
@media (prefers-reduced-motion: reduce) {
.proyecto-detalle *,
.proyecto-detalle *::before,
.proyecto-detalle *::after {
animation-duration: .01ms !important;
transition-duration: .01ms !important;
}
}
.proyecto-detalle a:focus-visible {
outline: 2px solid var(--pd-dorado);
outline-offset: 3px;
}
/* ============================================================
13. TIPOGRAFÍA
Todo en sans, como en la versión original de la página.
Va al final para sobrescribir las reglas de arriba.
Si algún día quieres los títulos en serif otra vez, comenta
este bloque completo y vuelven a usar --font-titulo.
============================================================ */
.proyecto-detalle .pd-hero h1,
.proyecto-detalle .pd-ficha__valor,
.proyecto-detalle .pd-intro h2,
.proyecto-detalle .pd-tarjeta h3,
.proyecto-detalle .pd-verde h2,
.proyecto-detalle .pd-siguiente__nombre,
.proyecto-detalle .nav-titulo-proyecto {
font-family: var(--font-texto);
font-weight: 700; /* peso real de Inter: sin negrita fingida */
letter-spacing: -.015em;
}
/* Tamaños tomados de vetiver1.css (.hero-title, .beneficiario-numero) */
.proyecto-detalle .pd-hero h1 { font-size: clamp(32px, 5vw, 48px); }
.proyecto-detalle .pd-intro h2,
.proyecto-detalle .pd-verde h2 { font-size: clamp(22px, 2.6vw, 28px); }
.proyecto-detalle .pd-tarjeta h3 { font-size: 16px; }
.proyecto-detalle .pd-tarjeta li { font-size: 13.5px; }
.proyecto-detalle .pd-ficha__valor { font-size: 24px; }
/* =========================================================
BLOQUES DE ACTIVIDAD — compartidos por las páginas de proyecto
.pd-avance / .pd-linea / .pd-barra / .pd-total
.pd-grid / .pd-card / .pd-cifras / .pd-enfoque
========================================================= */
/* ---------- AVANCE: barras de progreso ---------- */
.pd-avance {
display: grid;
grid-template-columns: repeat(3, 1fr) 0.9fr;
gap: 18px;
align-items: stretch;
margin-top: 40px;
}
.pd-linea {
background: #fff;
/*border: 0px solid var(--border);*/
border-radius: var(--r-sm);
padding: 22px 24px;
box-shadow: var(--sh-sm);
}
.pd-linea__nom {
display: block;
font-family: var(--font-titulo);
font-size: 16px;
font-weight: 600;
color: var(--primary);
line-height: 1.3;
}
.pd-barra {
height: 7px;
background: var(--bg-green);
border-radius: 99px;
margin-top: 16px;
overflow: hidden;
}
.pd-barra span {
display: block;
height: 100%;
background: var(--pd-verdebon);
border-radius: 99px;
}
.pd-linea__sub {
display: block;
font-size: 13px;
color: var(--text-muted);
margin-top: 10px;
}
.pd-total {
background: var(--bg-dark);
border-radius: var(--r-sm);
padding: 22px 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.pd-total strong {
font-family: var(--font-titulo);
font-size: 42px;
font-weight: 700;
color: var(--pd-blanco);
line-height: 1;
}
.pd-total span {
font-size: 13px;
color: var(--pd-crema-hondo);
margin-top: 8px;
line-height: 1.4;
}
/* ---------- TARJETAS DE ACTIVIDAD ---------- */
.pd-grid { display: grid; gap: 20px; margin-top: 40px; }
.pd-grid--3 { grid-template-columns: repeat(3, 1fr); }
.pd-grid--2 { grid-template-columns: repeat(2, 1fr); }
.pd-card {
background: var(--bg-soft);
border-radius: var(--r-md);
overflow: hidden;
box-shadow: var(--sh-md);
transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s;
}
.pd-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); }
.pd-card__foto { margin: 0; overflow: hidden; height: 210px; }
.pd-card__foto img {
width: 100%; height: 100%;
object-fit: cover; display: block;
transition: transform .6s ease;
}
.pd-card:hover .pd-card__foto img { transform: scale(1.05); }
.pd-card__foto--mosaico {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr 1fr;
gap: 0;
}
.pd-card__foto--mosaico .pd-foto-cel {
position: relative;
overflow: hidden;
min-width: 0;
min-height: 0;
}
.pd-card__foto--mosaico .pd-foto-cel img {
position: absolute;
inset: 0;
}
.pd-card__foto--mosaico .pd-foto-cel:first-child { grid-column: 1 / -1; }
.pd-card__body { padding: 16px 18px 20px; }
.pd-card__meta {
display: block;
font-family: var(--font-titulo);
font-size: 11px;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--accent);
}
.pd-card h3 {
font-family: var(--font-titulo);
font-size: 15px;
font-weight: 600;
color: var(--primary);
line-height: 1.35;
margin: 7px 0 0;
}
.pd-card__pie {
font-size: 13px;
color: var(--text-muted);
margin: 10px 0 0;
line-height: 1.5;
}
/* ---------- CIFRAS DE BENEFICIARIOS ---------- */
.pd-cifras {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
margin-top: 40px;
}
.pd-cifra {
background: #fff;
border-radius: var(--r-md);
padding: 28px 18px;
text-align: center;
box-shadow: var(--sh-md);
}
.pd-cifra strong {
display: block;
font-family: var(--font-titulo);
font-size: 40px;
font-weight: 700;
color: var(--primary);
line-height: 1;
}
.pd-cifra span {
display: block;
font-size: 13px;
color: var(--text-muted);
margin-top: 10px;
}
.pd-enfoque {
margin-top: 28px;
padding-left: 18px;
border-left: 3px solid var(--accent);
font-size: 16px;
color: var(--text-muted);
line-height: 1.7;
max-width: 60ch;
}
.pd-enfoque strong { color: var(--primary); font-weight: 600; }
/* ---------- AJUSTE POR ANCHO DE COLUMNA ---------- */
@media (min-width: 1200px) {
.pd-grid--2 .pd-card__foto { height: 240px; }
.pd-grid--3 .pd-card__foto { height: 195px; }
}
/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
.pd-avance { grid-template-columns: repeat(2, 1fr); }
.pd-grid--3 { grid-template-columns: repeat(2, 1fr); }
.pd-cifras { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.pd-card__foto { height: 190px; }
.pd-avance,
.pd-grid--3,
.pd-grid--2,
.pd-cifras { grid-template-columns: 1fr; }
.pd-total strong { font-size: 34px; }
.pd-cifra strong { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
.pd-card, .pd-card__foto img { transition: none; }
}
/* ---------- HITOS TÉCNICOS ---------- */
.pd-card__hitos {
list-style: none;
padding: 14px 0 0;
margin: 14px 0 0;
border-top: 1px solid var(--border);
display: grid;
gap: 7px;
}
.pd-card__hitos li {
position: relative;
padding-left: 16px;
font-size: 13px;
line-height: 1.5;
color: var(--text-muted);
}
.pd-card__hitos li::before {
content: "";
position: absolute;
left: 0;
top: 8px;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--accent);
}
/* =========================================================
PASANTÍAS EN PESTAÑAS
Agregar al final de proyecto-detalle.css
========================================================= */
.pd-tabs {
margin-top: 40px;
background: #fff;
border: 1px solid var(--bg-soft);
border-radius: var(--r-md);
overflow: hidden;
box-shadow: var(--sh-md);
}
/* ---------- Cabecera de pestañas ---------- */
.pd-tabs__nav {
display: grid;
grid-template-columns: repeat(3, 1fr);
border-bottom: 1px solid var(--border);
}
.pd-tab {
appearance: none;
border: 0;
background: transparent;
padding: 16px 12px;
text-align: center;
cursor: pointer;
font-family: inherit;
border-bottom: 0px solid transparent;
transition: background .25s, border-color .25s;
}
.pd-tab + .pd-tab { border-left: 1px solid var(--border); }
.pd-tab:hover { background: var(--bg-soft); }
.pd-tab__n {
display: block;
font-family: var(--font-titulo);
font-size: 12px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: #9aa79a;
transition: color .25s;
}
.pd-tab__fecha {
display: block;
font-size: 13px;
color: var(--text-muted);
margin-top: 4px;
transition: color .25s;
}
.pd-tab[aria-selected="true"] {
background: var(--bg-soft);
border-bottom-color: var(--pd-verde-suave);
}
.pd-tab[aria-selected="true"] .pd-tab__n { color: var(--accent); }
.pd-tab[aria-selected="true"] .pd-tab__fecha { color: var(--bg-dark); font-weight: 600; }
.pd-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
/* ---------- Panel ---------- */
.pd-panel { display: none; }
.pd-panel.is-activo {
display: grid;
grid-template-columns: 2.5fr 1fr;
animation: pdFade .35s ease;
}
@keyframes pdFade { from { opacity: 0 } to { opacity: 1 } }
.pd-panel__fotos {
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 2px;
background: var(--border);
min-height: 500px;
}
.pd-panel__fotos a {
display: block;
overflow: hidden;
background: var(--bg-green);
}
.pd-panel__fotos a:first-child { grid-row: span 2; }
.pd-panel__fotos img {
width: 100%; height: 100%;
object-fit: cover; display: block;
transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.pd-panel__fotos a:hover img {
transform: scale(1.05); }
.pd-panel__info {
padding: 26px 28px 22px;
display: flex;
flex-direction: column;
}
.pd-panel__info h3 {
font-family: var(--font-titulo);
font-size: 25px;
font-weight: 600;
color: var(--bg-dark);
line-height: 1.35;
margin: 0;
}
.pd-panel__lugar {
font-size: 13px;
color: var(--text-muted);
margin: 10px 0 0;
}
.pd-panel__hitos {
list-style: none;
padding: 0 0 0 15px;
margin: 18px 0 0;
border-left: 2px solid var(--accent);
display: grid;
gap: 8px;
}
.pd-panel__hitos li {
font-size: 13.5px;
line-height: 1.55;
color: var(--text-muted);
}
/* ---------- Flecha de "hay más" ---------- */
.pd-panel__pie {
margin-top: auto;
padding-top: 20px;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
}
.pd-panel__pista {
font-size: 12px;
color: var(--text-muted);
opacity: .85;
}
.pd-siguiente-tab {
appearance: none;
cursor: pointer;
width: 42px;
height: 42px;
flex-shrink: 0;
border: 1px solid var(--border);
border-radius: 50%;
background: transparent;
color: var(--primary);
display: grid;
place-items: center;
font-size: 14px;
transition: background .3s, border-color .3s, color .3s, transform .3s;
}
.pd-siguiente-tab:hover {
background: var(--bg-dark);
border-color: var(--bg-dark);
color: #fff;
transform: translateX(4px);
}
.pd-siguiente-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* ---------- Responsive ---------- */
@media (max-width: 900px) {
.pd-panel.is-activo { grid-template-columns: 1fr; }
.pd-panel__fotos { min-height: 220px; }
.pd-panel__info { padding: 22px 20px 20px; }
.pd-tabs__nav { grid-template-columns: repeat(2, 1fr); }
.pd-tab:nth-child(3) { border-left: 0; }
.pd-tab:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
.pd-tab[aria-selected="true"] { border-bottom-color: var(--primary); }
}
@media (max-width: 520px) {
.pd-panel__fotos { grid-template-columns: 1fr; grid-template-rows: 180px 110px; }
.pd-panel__fotos a:first-child { grid-row: auto; }
.pd-panel__fotos a:last-child { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.pd-panel.is-activo { animation: none; }
.pd-panel__fotos img, .pd-siguiente-tab { transition: none; }
}
/* =========================================================
PARCELAS DE APRENDIZAJE
Agregar al final de proyecto-detalle.css
========================================================= */
/* ---------- Franja de los 3 componentes ---------- */
.pd-componentes {
margin-top: 34px;
display: grid;
grid-template-columns: repeat(3, 1fr);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.pd-comp { padding: 20px 24px 20px 0; }
.pd-comp + .pd-comp {
padding-left: 24px;
border-left: 1px solid var(--border);
}
.pd-comp__nom {
display: block;
font-family: var(--font-titulo);
font-size: 10px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
}
.pd-comp__num {
display: block;
font-family: var(--font-titulo);
font-size: 26px;
font-weight: 700;
color: var(--primary);
line-height: 1;
margin-top: 10px;
}
.pd-comp--oro .pd-comp__num {
color: #8a6420;
}
.pd-comp p {
font-size: 12.5px;
line-height: 1.5;
color: var(--text-muted);
margin: 6px 0 0;
}
/* ---------- Los dos bloques por tipo ---------- */
.pd-tipos {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 22px;
margin-top: 26px;
}
.pd-tipo {
background: #fff;
border: 1px solid var(--pd-blanco);
/*border-top: 3px solid var(--primary);*/
border-radius: var(--r-md);
overflow: hidden;
box-shadow: 0 18px 40px -20px rgba(26, 60, 40, .40);
display: flex;
flex-direction: column;
}
.pd-tipo--oro {
/*border-top-color: var(--accent); */
}
.pd-tipo__cab { padding: 24px 26px 18px; }
.pd-tipo__eyebrow {
display: block;
font-family: var(--font-titulo);
font-size: 10px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--accent);
}
.pd-tipo__cab h3 {
font-family: var(--font-titulo);
font-size: 30px;
font-weight: 600;
color: var(--primary);
margin: 6px 0 0;
}
.pd-tipo__cab p {
font-size: 13.5px;
line-height: 1.65;
color: var(--text-muted);
margin: 10px 0 0;
}
/* Fotos */
.pd-tipo__fotos {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px;
background: var(--border);
}
.pd-tipo__fotos a {
display: block;
overflow: hidden;
height: 160px;
background: var(--bg-green);
}
.pd-tipo__fotos img {
width: 100%; height: 100%;
object-fit: cover; display: block;
transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.pd-tipo__fotos a:hover img { transform: scale(1.05); }
/* Datos: cada uno ocupa su mitad, centrado */
.pd-tipo__datos {
display: grid;
grid-template-columns: 1fr 1fr;
border-bottom: 1px solid var(--border);
}
.pd-tipo__dato {
padding: 22px 16px;
text-align: center;
}
.pd-tipo__dato + .pd-tipo__dato { border-left: 1px solid var(--border); }
.pd-tipo__num {
display: block;
font-family: var(--font-titulo);
font-size: 25px;
font-weight: 700;
color: var(--primary);
line-height: 1;
}
.pd-tipo--oro .pd-tipo__num--destaca {
color: #8a6420;
}
.pd-tipo__nota {
display: block;
font-size: 11.5px;
color: var(--text-muted);
margin-top: 8px;
line-height: 1.4;
}
.pd-tipo__lugares {
margin-top: auto;
padding: 16px 24px 20px;
font-size: 12px;
color: #9aa79a;
text-align: center;
}
/* ---------- Responsive ---------- */
@media (max-width: 900px) {
.pd-componentes { grid-template-columns: 1fr; }
.pd-comp { padding: 16px 0; }
.pd-comp + .pd-comp {
padding-left: 0;
border-left: 0;
border-top: 1px solid var(--border);
}
.pd-tipos { grid-template-columns: 1fr; gap: 18px; }
.pd-tipo__fotos a { height: 140px; }
.pd-tipo__num { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
.pd-tipo__fotos img { transition: none; }
}
/* =========================================================
PASANTÍAS INTERNAS
========================================================= */
/* ---------- Franja de totales ---------- */
.pd-totales {
margin-top: 30px;
display: grid;
grid-template-columns: repeat(3, 1fr);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.pd-total-item { padding: 20px 24px 20px 0; }
.pd-total-item + .pd-total-item {
padding-left: 24px;
border-left: 1px solid var(--border);
}
.pd-total-item__nom {
display: block;
font-family: var(--font-titulo);
font-size: 10px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--accent);
}
.pd-total-item__num {
display: block;
font-family: var(--font-titulo);
font-size: 26px;
font-weight: 700;
color: var(--primary);
line-height: 1;
margin-top: 10px;
}
.pd-total-item p {
font-size: 12.5px;
line-height: 1.5;
color: var(--text-muted);
margin: 6px 0 0;
}
/* ---------- Tarjetas con foto a sangre ---------- */
.pd-temas {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin-top: 26px;
}
.pd-tema {
position: relative;
display: flex;
align-items: flex-end;
min-height: 360px;
border-radius: 18px;
overflow: hidden;
background: var(--bg-green);
box-shadow: 0 18px 40px -20px rgba(26, 60, 40, .42);
transition: transform .4s cubic-bezier(.2, .7, .3, 1), box-shadow .4s;
}
.pd-tema:hover {
transform: translateY(-6px);
box-shadow: 0 28px 58px -22px rgba(26, 60, 40, .5);
}
.pd-tema__foto {
position: absolute;
inset: 0;
margin: 0;
}
.pd-tema__foto img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: transform .7s cubic-bezier(.2, .7, .3, 1);
}
.pd-tema:hover .pd-tema__foto img { transform: scale(1.05); }
/* Etiqueta flotante arriba a la izquierda */
.pd-tema__chip {
position: absolute;
top: 16px;
left: 16px;
z-index: 2;
background: rgba(255, 255, 255, .92);
color: var(--primary);
border-radius: 99px;
padding: 6px 13px;
font-size: 11.5px;
font-weight: 600;
backdrop-filter: blur(4px);
}
.pd-tema__chip--oro {
background: var(--accent);
color: #fff;
}
/* Texto sobre el degradado */
.pd-tema__cuerpo {
position: relative;
z-index: 2;
width: 100%;
padding: 24px 22px 22px;
background: linear-gradient(180deg,
rgba(15, 30, 21, 0) 0%,
rgba(15, 30, 21, .55) 35%,
rgba(15, 30, 21, .94) 100%);
}
.pd-tema__eyebrow {
display: block;
font-family: var(--font-titulo);
font-size: 10px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--accent);
}
.pd-tema__cuerpo h3 {
font-family: var(--font-titulo);
font-size: 17px;
font-weight: 600;
color: #fff;
line-height: 1.35;
margin: 7px 0 0;
}
.pd-tema__lugar {
font-size: 11.5px;
color: rgba(255, 255, 255, .78);
margin: 7px 0 0;
}
/* ---------- Responsive ---------- */
@media (max-width: 900px) {
.pd-totales { grid-template-columns: 1fr; }
.pd-total-item { padding: 16px 0; }
.pd-total-item + .pd-total-item {
padding-left: 0;
border-left: 0;
border-top: 1px solid var(--border);
}
.pd-temas { grid-template-columns: 1fr; gap: 14px; }
.pd-tema { min-height: 300px; }
}
@media (prefers-reduced-motion: reduce) {
.pd-tema, .pd-tema__foto img { transition: none; }
}
/* ===========================================================
v3/proy-socios.css — Proyecto "Nuevos Socios"
Se carga DESPUÉS de shared.css y proyecto-detalle.css.
El hero y la ficha usan las clases ya existentes (pd-hero,
pd-ficha). Todo lo demás usa el prefijo .ps- para no chocar
con nada de las otras páginas.
=========================================================== */
.ps-sec {
padding: 72px 40px;
}
.ps-sec--blanco { background: var(--bg); }
.ps-sec--soft { background: var(--bg-soft); }
.ps-sec--crema { background: var(--accent-light); }
.ps-wrap {
max-width: 1152px;
margin: 0 auto;
}
.ps-eyebrow {
display: block;
font-family: var(--font-texto);
font-size: 11px;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 14px;
}
.ps-titulo {
font-family: var(--font-titulo);
font-size: 30px;
font-weight: 700;
color: var(--text);
line-height: 1.25;
margin: 0 0 18px;
}
.ps-texto {
font-size: 16px;
line-height: 1.75;
color: var(--text-muted);
max-width: 720px;
margin: 0;
text-align: justify;
}
/* ---------- 1 · TRES PASOS ---------- */
.ps-pasos {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 34px;
}
.ps-paso {
background: var(--bg);
border-radius: var(--r-md);
padding: 28px 26px 26px;
box-shadow: 0 8px 40px rgba(0, 0, 0, .10);
transition: transform .4s cubic-bezier(.2, .7, .3, 1), box-shadow .4s;
}
.ps-paso:hover {
transform: translateY(-6px);
box-shadow: 0 20px 55px rgba(8, 20, 12, .18);
}
.ps-paso__n {
display: block;
font-family: var(--font-titulo);
font-size: 13px;
font-weight: 700;
letter-spacing: 3px;
color: var(--dorado);
margin-bottom: 12px;
}
.ps-paso h3 {
font-family: var(--font-titulo);
font-size: 18px;
font-weight: 700;
color: var(--primary);
line-height: 1.3;
margin: 0 0 8px;
}
.ps-paso p {
font-size: 14px;
line-height: 1.6;
color: var(--text-muted);
margin: 0;
}
/* ---------- 2 · MAPA A SANGRE + PANEL ---------- */
.ps-mapa {
display: grid;
grid-template-columns: 1.15fr .85fr;
min-height: 520px;
}
.ps-mapa__foto {
position: relative;
background: var(--bg-green);
overflow: hidden;
}
.ps-mapa__foto img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ps-mapa__panel {
background: var(--primary);
color: #fff;
padding: 64px 56px;
display: flex;
flex-direction: column;
justify-content: center;
}
.ps-mapa__panel .ps-eyebrow { color: var(--dorado); }
.ps-mapa__panel h2 {
font-family: var(--font-titulo);
font-size: 28px;
font-weight: 700;
line-height: 1.25;
margin: 0 0 14px;
}
.ps-mapa__panel p {
font-size: 15px;
line-height: 1.7;
color: #cfe0d4;
margin: 0 0 26px;
}
.ps-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.ps-chip {
font-size: 12px;
font-weight: 500;
line-height: 1;
padding: 8px 14px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, .25);
color: #9fbfa9;
}
.ps-chip--ok {
border-color: var(--dorado);
color: var(--dorado);
}
.ps-leyenda {
display: flex;
gap: 18px;
flex-wrap: wrap;
margin-top: 26px;
font-size: 12px;
color: #9fbfa9;
}
.ps-leyenda span {
display: inline-flex;
align-items: center;
gap: 7px;
}
.ps-leyenda i {
width: 11px;
height: 11px;
border-radius: 3px;
display: inline-block;
}
/* ---------- 3 · RESULTADOS ---------- */
.ps-res {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-top: 34px;
}
.ps-res__card {
background: var(--bg);
border-radius: var(--r-md);
padding: 30px 24px 26px;
box-shadow: 0 8px 40px rgba(0, 0, 0, .10);
transition: transform .4s cubic-bezier(.2, .7, .3, 1), box-shadow .4s;
}
.ps-res__card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 55px rgba(8, 20, 12, .18);
}
.ps-res__num {
display: block;
font-family: var(--font-titulo);
font-size: 42px;
font-weight: 700;
line-height: 1;
color: var(--primary);
}
.ps-res__num em {
font-style: normal;
font-size: 20px;
}
.ps-res__card--oro .ps-res__num { color: var(--dorado); }
.ps-res__nom {
display: block;
font-size: 14px;
font-weight: 600;
color: var(--text);
margin-top: 12px;
}
.ps-res__sub {
display: block;
font-size: 13px;
line-height: 1.5;
color: var(--text-muted);
margin-top: 3px;
}
/* ---------- 4 · FRANJA ORGÁNICOS ---------- */
.ps-organicos {
display: grid;
grid-template-columns: auto 1fr;
gap: 56px;
align-items: center;
}
.ps-organicos__cifra {
text-align: center;
flex-shrink: 0;
}
.ps-organicos__num {
display: block;
font-family: var(--font-titulo);
font-size: 92px;
font-weight: 700;
line-height: 1;
color: var(--primary);
}
.ps-organicos__cifra span {
display: block;
font-size: 11px;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
color: #8a6f33;
margin-top: 8px;
}
.ps-organicos h2 {
font-family: var(--font-titulo);
font-size: 28px;
font-weight: 700;
color: var(--primary);
line-height: 1.25;
margin: 0 0 12px;
}
.ps-organicos p {
font-size: 15px;
line-height: 1.75;
color: #5c5545;
max-width: 640px;
margin: 0 0 22px;
}
.ps-benef {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.ps-benef div {
background: rgba(255, 255, 255, .55);
border-radius: var(--r-sm);
padding: 14px 16px;
}
.ps-benef strong {
display: block;
font-size: 14px;
font-weight: 600;
color: var(--primary);
margin-bottom: 3px;
}
.ps-benef span {
font-size: 13px;
line-height: 1.5;
color: #5c5545;
}
/* ---------- 5 · ZONAS NUEVAS ---------- */
.ps-zonas {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 28px;
margin-top: 34px;
}
.ps-zona {
background: var(--bg);
border-radius: var(--r-md);
overflow: hidden;
box-shadow: 0 8px 40px rgba(0, 0, 0, .10);
transition: transform .4s cubic-bezier(.2, .7, .3, 1), box-shadow .4s;
}
.ps-zona:hover {
transform: translateY(-6px);
box-shadow: 0 20px 55px rgba(8, 20, 12, .18);
}
.ps-zona__foto {
position: relative;
aspect-ratio: 16 / 9;
margin: 0;
overflow: hidden;
}
.ps-zona__foto img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .7s cubic-bezier(.2, .7, .3, 1);
}
.ps-zona:hover .ps-zona__foto img { transform: scale(1.05); }
.ps-zona__tag {
position: absolute;
top: 16px;
left: 16px;
z-index: 2;
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: #fff;
background: var(--accent);
border-radius: var(--r-xm);
padding: 6px 12px;
}
.ps-zona__tag--oro { background: var(--dorado); }
.ps-zona__cuerpo { padding: 24px 26px 26px; }
.ps-zona__cuerpo h3 {
font-family: var(--font-titulo);
font-size: 20px;
font-weight: 700;
color: var(--primary);
margin: 0 0 8px;
}
.ps-zona__cuerpo p {
font-size: 14px;
line-height: 1.6;
color: var(--text-muted);
margin: 0 0 14px;
}
.ps-zona__dato {
font-size: 13px;
font-weight: 600;
color: var(--accent);
}
/* ---------- 6 · GALERÍA ---------- */
.ps-galeria {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-top: 30px;
}
.ps-galeria a {
display: block;
aspect-ratio: 4 / 3;
border-radius: var(--r-sm);
overflow: hidden;
}
.ps-galeria img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}
.ps-galeria a:hover img { transform: scale(1.06); }
/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
.ps-sec { padding: 56px 28px; }
.ps-pasos { grid-template-columns: 1fr; }
.ps-res { grid-template-columns: repeat(2, 1fr); }
.ps-mapa { grid-template-columns: 1fr; }
.ps-mapa__foto { aspect-ratio: 4 / 3; }
.ps-mapa__panel { padding: 44px 28px; }
.ps-zonas { grid-template-columns: 1fr; }
.ps-galeria { grid-template-columns: repeat(3, 1fr); }
.ps-organicos { grid-template-columns: 1fr; gap: 28px; }
.ps-organicos__cifra { text-align: left; }
}
@media (max-width: 640px) {
.ps-sec { padding: 46px 20px; }
.ps-titulo { font-size: 24px; }
.ps-res { grid-template-columns: 1fr; }
.ps-benef { grid-template-columns: 1fr; }
.ps-galeria { grid-template-columns: repeat(2, 1fr); }
.ps-organicos__num { font-size: 68px; }
}