/* RedFune · Quiénes somos (P7) — reglas about-* con la paleta «Papel y tinta».
   Depende de styles.css (§4). No redefine clases del contrato: solo about-* y el equipo dentro de .about-team. */

/* Presentación */
.about-intro{padding:var(--s-7) 0}
@media (min-width:1024px){.about-intro{padding:var(--s-8) 0}}
.about-intro .t-display{font-size:2.5rem}
.about-lead{max-width:38ch;margin:var(--s-4) 0;font-family:var(--f-serif);font-weight:400;font-size:1.65rem;line-height:1.35;color:var(--ink)}
.about-copy{max-width:76ch}
.about-actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-5)}
.about-caption{margin:var(--s-3) 0 0;font-size:.9375rem;color:var(--ink-2)}
@media (max-width:479px){.about-actions{flex-direction:column}}

/* Laurel (grabado de S. Paulli, 1648; clase base .grabado en styles.css).
   Solo desde 900 px: a la derecha de la presentación, en una franja reservada con
   relleno para que nunca quede bajo el texto, y con las raíces apoyadas en el
   filete que abre «Cómo te ayudamos». En móvil se oculta: empujaría el contenido. */
.about-grabado{display:none}
@media (min-width:900px){
  .about-intro{--about-grabado-w:12.5rem}
  .about-intro>.container{position:relative;padding-right:calc(var(--gutter) + var(--about-grabado-w) + var(--s-7))}
  /* La xilografía es mucho más negra que las otras dos láminas: al 85 % no compite con el titular. */
  .about-grabado{display:block;position:absolute;right:var(--gutter);bottom:calc(-1*var(--s-7));width:var(--about-grabado-w);opacity:.85}
}
@media (min-width:1024px){
  .about-intro{--about-grabado-w:15rem}
  .about-grabado{bottom:calc(-1*var(--s-8))}
}

/* Secciones: filete de 1 px arriba; las bandas, en papel 2 */
.about-section{padding:var(--s-7) 0;border-top:1px solid var(--rule)}
@media (min-width:1024px){.about-section{padding:var(--s-8) 0}}
.about-band{background-color:var(--paper-2)}
.about-layout{display:grid;gap:var(--s-5)}
@media (min-width:900px){.about-layout{grid-template-columns:minmax(0,1fr) minmax(0,1.8fr);gap:var(--s-8)}}
.about-layout>*{min-width:0}

/* Cómo te ayudamos: numeral en cursiva almagre, sin círculo, en la línea base del título;
   filete de tinta arriba del índice (como el equipo) y filete de 1 px entre pasos */
.about-steps{margin:0;padding:0;list-style:none;counter-reset:about-step;border-top:1px solid var(--ink)}
.about-steps>li{display:grid;grid-template-columns:3.5rem minmax(0,1fr);align-items:baseline;padding:var(--s-4) 0 var(--s-5);counter-increment:about-step}
.about-steps>li+li{border-top:1px solid var(--rule)}
.about-steps>li:last-child{padding-bottom:0}
.about-steps>li::before{content:counter(about-step,decimal-leading-zero);grid-column:1;grid-row:1;
  font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:1.5rem;line-height:1.1;color:var(--almagre);font-variant-numeric:lining-nums tabular-nums}
.about-steps>li>*{grid-column:2}
.about-steps p{margin:var(--s-2) 0 0;color:var(--ink-2)}
/* Móvil: el numeral va en línea con el título (§3) y el texto recupera todo el ancho */
@media (max-width:639px){
  .about-steps>li{grid-template-columns:auto minmax(0,1fr);column-gap:var(--s-3)}
  .about-steps>li>p{grid-column:1 / -1}
}

/* Nuestros precios */
.about-first{margin-top:0}
.about-price-details{margin:var(--s-5) 0;border-bottom:1px solid var(--rule)}
.about-price-details>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--s-4);padding:var(--s-3) 0;border-top:1px solid var(--rule)}
.about-price-details dt{font-weight:600;color:var(--ink)}
.about-price-details dd{margin:0;color:var(--ink-2)}
@media (max-width:479px){.about-price-details>div{grid-template-columns:1fr;gap:var(--s-1)}}
.about-price-links a,.about-policy-links a{display:inline-block;padding:.2rem 0}
.about-policy-links{margin-top:var(--s-5);font-size:.9375rem}

/* El equipo: filas con filete de tinta (sin caja) y monograma en círculo (§7.8). Solo esta página usa team-* */
.team-grid{display:grid;gap:var(--s-5);grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.team-card{padding:var(--s-4) 0 0;border-top:1px solid var(--ink)}
.team-head{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-3)}
.team-initials{display:inline-flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;border:1px solid var(--ink);border-radius:50%;
  background:transparent;color:var(--ink);font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:1.125rem}
.about-team{grid-template-columns:minmax(0,1fr);gap:0;margin:0}
.about-team .team-card{display:grid;gap:var(--s-2) var(--s-6);padding:var(--s-4) 0 var(--s-5)}
.about-team .team-card:last-child{padding-bottom:0}
.about-team .team-head{margin:0}
.about-team .team-head>div{min-width:0}
.about-role{margin:var(--s-1) 0 0;font-size:.9375rem;color:var(--ink-2)}
.about-team .team-card>p{margin:0;color:var(--ink-2)}
.about-team .team-card>a{justify-self:start}
@media (min-width:640px){
  .about-team .team-card{grid-template-columns:minmax(0,15rem) minmax(0,1fr);align-items:start}
  .about-team .team-head{grid-row:1 / span 2}
  .about-team .team-card>p,.about-team .team-card>a{grid-column:2}
}

/* Nuestros compromisos: 2×2 con filete fino en tinta */
.about-principles{display:grid;gap:var(--s-5) var(--s-6);margin:0;padding:0;list-style:none}
@media (min-width:640px){.about-principles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.about-principles>li{padding-top:var(--s-4);border-top:1px solid var(--ink)}
.about-principles p{margin:var(--s-2) 0 0;color:var(--ink-2)}

/* Hablemos */
.about-phone{display:inline-block;margin-bottom:var(--s-2);font-family:var(--f-serif);font-weight:500;font-size:2.25rem;line-height:1.1;letter-spacing:0;
  color:var(--ink);white-space:nowrap;text-decoration:none;font-variant-numeric:tabular-nums lining-nums}
.about-phone:hover{color:var(--cipres);text-decoration:underline;text-decoration-thickness:2px}
.about-contact .btn{margin-top:var(--s-1)}
.about-contact a[href^="mailto:"]{display:inline-block;padding:var(--s-1) 0}   /* objetivo ≥ 24 px */

/* Datos de la empresa (bloque de contacto) */
.about-company{margin-top:var(--s-6);padding-top:var(--s-4);border-top:0}
.about-company>.t-h3{margin-bottom:var(--s-2)}
.about-company>p{margin:0;color:var(--ink-2)}
