/* ═══════════════════════════════════════════════════════════════════════
   DOBLE V — piezas propias de "Nosotros"

   Se carga DESPUÉS de estilos.css y no redefine nada del sistema: todo parte
   por .marca3d-, .micro-, .socio-, .pastilla, .duo- o .rubro.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── La marca en 3D ───────────────────────────────────────────────────
   Los dos galones del logo, construidos con cuatro barras y tres capas de
   profundidad cada una (cara + dos capas hacia atrás en el eje Z). Sin
   librerías, sin imagen y sin canvas: es el mismo trazo del SVG del logo
   llevado al espacio.

   Geometría tomada del logo: brazo inclinado 22,9° respecto de la vertical
   (11 de ancho por 26 de alto), grosor 3,4 sobre 38 de ancho total, y el
   segundo galón desplazado 12/38 respecto del primero. */
.marca3d { display: flex; justify-content: center; perspective: 1000px; perspective-origin: 50% 44%; }
.marca3d-escena {
  position: relative;
  width: min(400px, 88%);
  aspect-ratio: 1 / 1;
  transform-style: preserve-3d;
  transform: rotateX(12deg);
}

/* Pedestal: un disco tendido en el piso, con anillo interior de plano técnico. */
.marca3d-pedestal {
  position: absolute; left: 50%; top: 86%; width: 76%; aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%) rotateX(76deg);
  border-radius: 50%;
  border: 1px solid rgba(127, 187, 140, .16);
  background: radial-gradient(circle, rgba(127, 187, 140, .14) 0%, rgba(127, 187, 140, .04) 46%, transparent 72%);
}
.marca3d-pedestal::before {
  content: ""; position: absolute; inset: 24%;
  border-radius: 50%; border: 1px solid rgba(127, 187, 140, .13);
}
/* Sombra proyectada: un óvalo tendido en el mismo plano del pedestal.
   Va como elemento y no como filter porque `filter` sobre un contenedor
   con `preserve-3d` lo aplana y mata el volumen de los galones. */
.marca3d-sombra {
  position: absolute; left: 50%; top: 87%; width: 54%; aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%) rotateX(76deg);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .28) 34%, transparent 66%);
}

/* El giro es un vaivén amplio y lento, no una vuelta completa: con 16 px de
   grosor, una rotación de 360° dejaría la marca de canto y desaparecería.
   El vaivén muestra las dos caras y el espesor sin perder nunca la lectura. */
.marca3d-giro {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  animation: marca3d-girar 20s ease-in-out infinite;
}
@keyframes marca3d-girar {
  0%, 100% { transform: rotateY(-32deg); }
  50%      { transform: rotateY(32deg); }
}
@media (prefers-reduced-motion: reduce) {
  .marca3d-giro { animation: none; transform: rotateY(-16deg); }
}

.marca3d-galon { position: absolute; top: 8%; height: 84%; width: 58%; transform-style: preserve-3d; }
/* Galón trasero: el verde sobrio del logo. */
.marca3d-galon-a { left: 5.2%; --cara: #4e8259; --medio: #3a6244; --fondo: #27412e; }
/* Galón delantero: el verde vivo, adelantado en el eje Z. */
.marca3d-galon-b { left: 36.8%; transform: translateZ(34px); --cara: #97d0a3; --medio: #6ea87b; --fondo: #47734f; }

.marca3d-pata {
  position: absolute; bottom: 0; left: 50%;
  width: 15%; height: 108%; margin-left: -7.5%;
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  background: linear-gradient(165deg, var(--cara), var(--medio));
}
.marca3d-pata-i { transform: rotateZ(-22.9deg); }
.marca3d-pata-d { transform: rotateZ(22.9deg); }
/* Las dos capas de atrás son el espesor: aparecen al girar y dan volumen. */
.marca3d-pata::before,
.marca3d-pata::after { content: ""; position: absolute; inset: 0; }
.marca3d-pata::before { background: var(--medio); transform: translateZ(-8px); }
.marca3d-pata::after  { background: var(--fondo); transform: translateZ(-16px); }

@media (max-width: 980px) { .marca3d { margin-top: 12px; } }

/* ── Micro-bloques del encabezado ─────────────────────────────────── */
.micros { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 38px; }
.micro { border-left: 1px solid var(--panel-borde); padding-left: 18px; }
.micro b { display: block; font-size: 13.5px; font-weight: 500; }
.micro span { display: block; font-size: 12.5px; color: var(--tinta-suave); margin-top: 6px; }
@media (max-width: 560px) { .micros { grid-template-columns: 1fr; } }

/* ── Fichas de los socios ─────────────────────────────────────────────
   El marco de la foto queda listo: basta reemplazar las iniciales por una
   etiqueta <img> y la caja no se mueve ni un píxel. */
.socios { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
@media (max-width: 1000px) { .socios { grid-template-columns: 1fr; } }
.socio {
  border: 1px solid var(--crema-borde); padding: 26px;
  display: grid; grid-template-columns: 118px 1fr; gap: 24px; align-items: start;
}
@media (max-width: 520px) { .socio { grid-template-columns: 1fr; gap: 20px; } }
.socio-foto {
  aspect-ratio: 3 / 4; overflow: hidden;
  display: grid; place-items: center;
  border: 1px solid var(--crema-borde);
  background: linear-gradient(160deg, rgba(63, 107, 74, .12), rgba(63, 107, 74, .03));
  font-family: var(--serif); font-size: 34px; letter-spacing: .05em; color: var(--verde);
}
@media (max-width: 520px) { .socio-foto { max-width: 140px; } }
.socio-foto img { width: 100%; height: 100%; object-fit: cover; }
.socio-nombre { font-family: var(--serif); font-size: clamp(21px, 2.2vw, 25px); }
.socio-rol { font-size: 10.5px; text-transform: uppercase; letter-spacing: .16em; color: var(--verde); margin-top: 9px; }
.socio-bajada { font-size: 13.5px; color: var(--tinta-media); margin-top: 14px; }
.pastillas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pastilla {
  font-size: 11px; letter-spacing: .03em; color: var(--tinta-media);
  border: 1px solid var(--crema-borde); border-radius: 2px; padding: 6px 11px;
}

/* ── Sección a dos columnas ───────────────────────────────────────── */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 900px) { .duo { grid-template-columns: 1fr; gap: 34px; } }
.duo-verde { padding: 38px 34px; border-radius: 3px; }
/* Dentro del bloque verde manda la paleta oscura, aunque la sección sea clara. */
.duo-verde .etiqueta { color: var(--verde-vivo); }
.duo-verde .filete { background: var(--verde-vivo); }

.rubros { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 28px; }
@media (max-width: 520px) { .rubros { grid-template-columns: 1fr; } }
.rubro { display: flex; gap: 12px; align-items: flex-start; }
.rubro svg { width: 20px; height: 20px; flex: none; color: var(--verde-vivo); margin-top: 2px; }
.rubro b { display: block; font-size: 13.5px; font-weight: 500; }
.rubro span { display: block; font-size: 12px; color: var(--tinta-suave); margin-top: 4px; }