/* ═══════════════════════════════════════════════════════════════════════════
   4-bloques-personas.css   ·   Página PERSONAS NATURALES (/personas-naturales/)
   ───────────────────────────────────────────────────────────────────────────
   Bloques:
     1. per-hero          → título + tarjeta negra con barras de "estrés"
     2. per-clasificador  → selector: "¿cuál es tu situación?"
     3. per-plan          → plan negro único
     4. per-declaracion   → tarjeta blanca de declaración de renta
     5. per-servicios     → 4 servicios adicionales
     6. per-faq           → acordeón de preguntas frecuentes
     7. banner de cierre
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════ 1 · HERO ═══════════════ */
.per-hero{ padding:var(--ESPACIO-SECCION); }
.per-hero .contenido{
  max-width:var(--ANCHO-MAXIMO); margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center;
}
.per-hero .titulo-hero{ margin-bottom:24px; }
.per-hero .intro{
  font-size:15px; font-weight:300; color:var(--GRIS-TEXTO);
  line-height:1.75; margin-bottom:32px; max-width:440px;
}
.per-hero .pildoras{ display:flex; flex-wrap:wrap; gap:8px; }

/* tarjeta negra con barras de estrés */
.per-hero .tarjeta-negra{
  background:var(--NEGRO); border-radius:var(--REDONDEO-TARJETA);
  padding:32px 36px; position:relative; overflow:hidden;
}
.per-hero .tarjeta-negra::after{
  content:""; position:absolute; bottom:-50px; right:-50px;
  width:180px; height:180px; background:var(--VERDE);
  border-radius:50%; opacity:.1; pointer-events:none;
}
.per-hero .tarjeta-negra .cabecera{
  font-size:10px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.35); margin-bottom:24px; display:block;
}
.per-hero .separador{ height:1px; background:rgba(255,255,255,.07); margin:24px 0 20px; }
.per-hero .insignia{
  display:flex; align-items:flex-start; gap:14px;
  background:rgba(34,197,94,.15); border:1px solid rgba(34,197,94,.3);
  border-radius:var(--REDONDEO-CHICO); padding:16px;
}
.per-hero .insignia-icono{
  width:28px; height:28px; flex-shrink:0;
  background:rgba(34,197,94,.2); border-radius:6px;
  display:flex; align-items:center; justify-content:center; font-size:14px;
}
.per-hero .insignia h3{
  font-family:var(--LETRA-TEXTO); font-size:14px; font-weight:500;
  color:var(--VERDE-BRILLANTE); margin-bottom:4px;
}
.per-hero .insignia p{ font-size:12px; font-weight:300; color:rgba(255,255,255,.5); line-height:1.5; }
@media(max-width:960px){
  .per-hero .contenido{ grid-template-columns:1fr; gap:40px; }
  .per-hero{ padding:48px 5%; }
  .per-hero .titulo-hero{ font-size:52px; }
}
@media(max-width:500px){ .per-hero .titulo-hero{ font-size:40px; } }


/* ═══════════════ 2 · CLASIFICADOR ═══════════════ */
.per-clasificador{ background:var(--GRIS-FONDO); padding:var(--ESPACIO-SECCION); }
.per-clasificador .contenido{
  max-width:var(--ANCHO-MAXIMO); margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start;
}
.per-clasificador .titulo{ font-size:var(--TITULO-MEDIO); margin-bottom:20px; }
.per-clasificador .intro{
  font-size:14px; font-weight:300; color:var(--GRIS-TEXTO);
  line-height:1.75; margin-bottom:28px;
}
.per-clasificador .tip{
  background:var(--VERDE-SUAVE); border:1px solid var(--VERDE-BORDE);
  border-radius:var(--REDONDEO-CHICO); padding:16px 20px;
  font-size:13px; font-weight:300; color:var(--GRIS-FUERTE); line-height:1.65;
}
.per-clasificador .tip strong{ font-weight:500; color:var(--NEGRO); }

/* tarjeta con opciones */
.per-clasificador .tarjeta{
  background:var(--BLANCO); border:1px solid var(--GRIS-BORDE);
  border-radius:var(--REDONDEO-CAJA); padding:32px;
}
.per-clasificador .tarjeta > h3{
  font-family:var(--LETRA-TEXTO); font-size:17px; font-weight:500;
  color:var(--NEGRO); margin-bottom:6px;
}
.per-clasificador .tarjeta > .aclara{
  font-size:13px; font-weight:300; color:var(--GRIS-TEXTO); margin-bottom:24px; display:block;
}
.per-clasificador .opciones{ display:flex; flex-direction:column; gap:10px; }
.per-clasificador .opcion{
  display:flex; align-items:flex-start; gap:14px;
  padding:16px 20px; border:1px solid var(--GRIS-BORDE);
  border-radius:var(--REDONDEO-CHICO); cursor:pointer; background:var(--BLANCO);
  transition:border-color var(--SUAVE);
}
.per-clasificador .opcion:hover{ border-color:var(--GRIS-SUAVE); }
.per-clasificador .opcion.activa{ border-color:var(--NEGRO); }
.per-clasificador .radio{
  width:18px; height:18px; flex-shrink:0; margin-top:2px;
  border-radius:50%; border:2px solid var(--GRIS-BORDE);
  display:flex; align-items:center; justify-content:center; transition:border-color var(--SUAVE);
}
.per-clasificador .opcion.activa .radio{ border-color:var(--NEGRO); }
.per-clasificador .radio::after{
  content:""; width:8px; height:8px; border-radius:50%; background:var(--NEGRO); display:none;
}
.per-clasificador .opcion.activa .radio::after{ display:block; }
.per-clasificador .opcion h4{
  font-family:var(--LETRA-TEXTO); font-size:15px; font-weight:500;
  color:var(--NEGRO); margin-bottom:3px;
}
.per-clasificador .opcion p{ font-size:13px; font-weight:300; color:var(--GRIS-SUAVE); line-height:1.5; }
/* resultado */
.per-clasificador .resultado{
  background:var(--VERDE-SUAVE); border:1px solid var(--VERDE-BORDE);
  border-radius:var(--REDONDEO-CHICO); padding:20px 24px; margin-top:16px; display:none;
}
.per-clasificador .resultado.visible{ display:block; }
.per-clasificador .resultado h4{
  font-family:var(--LETRA-TEXTO); font-size:15px; font-weight:500;
  color:var(--VERDE); margin-bottom:8px;
}
.per-clasificador .resultado p{ font-size:14px; font-weight:300; color:var(--GRIS-FUERTE); line-height:1.7; }
@media(max-width:960px){
  .per-clasificador .contenido{ grid-template-columns:1fr; gap:36px; }
  .per-clasificador{ padding:48px 5%; }
  .per-clasificador .titulo{ font-size:34px; }
}


/* ═══════════════ 3 · PLAN NEGRO ÚNICO ═══════════════ */
.per-plan{ padding:var(--ESPACIO-SECCION); }
.per-plan .contenido{
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center;
}
.per-plan .titulo{ font-size:var(--TITULO-MEDIO); margin-bottom:16px; }
.per-plan .intro{ font-size:14px; font-weight:300; color:var(--GRIS-TEXTO); line-height:1.75; margin-bottom:32px; }
.per-plan .tarjeta{
  background:var(--NEGRO-SUAVE); border-radius:var(--REDONDEO-TARJETA); padding:36px 32px 32px;
  display:flex; flex-direction:column; position:relative; overflow:hidden;
}
.per-plan .tarjeta::after{
  content:""; position:absolute; top:-60px; right:-60px;
  width:180px; height:180px; background:var(--VERDE); border-radius:50%; opacity:.1; pointer-events:none;
}
.per-plan .precio{
  font-family:var(--LETRA-TITULOS); font-size:42px; font-weight:400;
  color:var(--VERDE-BRILLANTE); letter-spacing:-1px; line-height:1;
  display:flex; align-items:baseline; gap:3px; margin-bottom:2px;
}
.per-plan .precio-mes{ font-size:15px; font-weight:300; color:rgba(255,255,255,.35); }
.per-plan .nombre{
  font-family:var(--LETRA-TITULOS); font-size:28px; font-weight:300;
  color:var(--BLANCO); letter-spacing:-.3px; margin:6px 0 10px; display:block;
}
.per-plan .resumen{
  font-size:13px; font-weight:300; color:rgba(255,255,255,.45); line-height:1.6;
  padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,.08); margin-bottom:20px;
}
.per-plan .sublabel{
  font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.28); margin-bottom:12px; display:block;
}
.per-plan .tags{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:22px; }
.per-plan .tags span{
  padding:5px 12px; border-radius:var(--REDONDEO-BOTON);
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
  font-size:12px; font-weight:300; color:rgba(255,255,255,.5);
}
.per-plan .separador2{ height:1px; background:rgba(255,255,255,.08); margin-bottom:18px; }
.per-plan .incluye{ list-style:none; display:flex; flex-direction:column; gap:10px; margin-bottom:28px; flex:1; }
.per-plan .incluye li{
  display:flex; align-items:flex-start; gap:10px;
  font-size:13px; color:rgba(255,255,255,.82); line-height:1.5;
}
.per-plan .tarjeta .boton{ margin-top:auto; }
@media(max-width:900px){
  .per-plan .contenido{ grid-template-columns:1fr; gap:36px; }
  .per-plan{ padding:48px 5%; }
  .per-plan .titulo{ font-size:34px; }
}


/* ═══════════════ 4 · DECLARACIÓN (tarjeta blanca) ═══════════════ */
.per-declaracion{ padding:var(--ESPACIO-SECCION); }
.per-declaracion .contenido{
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center;
}
.per-declaracion .titulo{ font-size:var(--TITULO-MEDIO); margin-bottom:16px; }
.per-declaracion .intro{ font-size:14px; font-weight:300; color:var(--GRIS-TEXTO); line-height:1.75; margin-bottom:32px; }
.per-declaracion .tarjeta{
  background:var(--BLANCO); border:1px solid var(--GRIS-BORDE);
  border-radius:var(--REDONDEO-TARJETA); padding:36px 32px 32px;
  display:flex; flex-direction:column;
}
.per-declaracion .precio{
  font-family:var(--LETRA-TITULOS); font-size:42px; font-weight:400;
  color:var(--VERDE); letter-spacing:-1px; line-height:1;
  display:flex; align-items:baseline; gap:3px; margin-bottom:2px;
}
.per-declaracion .precio-mes{ font-size:15px; font-weight:300; color:var(--GRIS-SUAVE); }
.per-declaracion .nombre{
  font-family:var(--LETRA-TITULOS); font-size:28px; font-weight:300;
  color:var(--NEGRO); letter-spacing:-.3px; margin:6px 0 10px; display:block;
}
.per-declaracion .resumen{
  font-size:13px; font-weight:300; color:var(--GRIS-SUAVE); line-height:1.6;
  padding-bottom:20px; border-bottom:1px solid var(--GRIS-BORDE); margin-bottom:20px;
}
.per-declaracion .sublabel{
  font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--GRIS-SUAVE); margin-bottom:14px; display:block;
}
.per-declaracion .incluye{ list-style:none; display:flex; flex-direction:column; gap:10px; margin-bottom:28px; flex:1; }
.per-declaracion .incluye li{
  display:flex; align-items:flex-start; gap:10px;
  font-size:13px; color:var(--GRIS-FUERTE); line-height:1.5;
}
.per-declaracion .tarjeta .boton{ margin-top:auto; }
@media(max-width:900px){
  .per-declaracion .contenido{ grid-template-columns:1fr; gap:36px; }
  .per-declaracion{ padding:48px 5%; }
  .per-declaracion .titulo{ font-size:34px; }
}


/* ═══════════════ 5 · SERVICIOS ═══════════════ */
.per-servicios{ padding:var(--ESPACIO-SECCION); }
.per-servicios .contenido{ max-width:var(--ANCHO-MAXIMO); margin:0 auto; }
.per-servicios .titulo{ margin-bottom:10px; }
.per-servicios .sub{ font-size:14px; font-weight:300; color:var(--GRIS-TEXTO); line-height:1.7; margin-bottom:40px; }
.per-servicios .grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.per-servicios .servicio .icono{ font-size:28px; display:block; margin-bottom:14px; line-height:1; }
.per-servicios .servicio h3{
  font-family:var(--LETRA-TEXTO); font-size:15px; font-weight:500;
  color:var(--NEGRO); margin-bottom:6px;
}
.per-servicios .servicio .valor{
  font-family:var(--LETRA-TITULOS); font-size:26px; font-weight:300;
  color:var(--VERDE); letter-spacing:-.5px; margin-bottom:8px; line-height:1; display:block;
}
.per-servicios .servicio p{ font-size:13px; font-weight:300; color:var(--GRIS-TEXTO); line-height:1.6; }
@media(max-width:900px){
  .per-servicios .grid{ grid-template-columns:repeat(2,1fr); }
  .per-servicios{ padding:48px 5%; }
  .per-servicios .titulo{ font-size:36px; }
}
@media(max-width:500px){ .per-servicios .grid{ grid-template-columns:1fr; } }


/* ═══════════════ 6 · PREGUNTAS FRECUENTES (acordeón) ═══════════════ */
.per-faq{ padding:var(--ESPACIO-SECCION); }
.per-faq .contenido{
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1.6fr; gap:80px; align-items:start;
}
.per-faq .titulo{ margin-bottom:16px; }
.per-faq .intro{ font-size:14px; font-weight:300; color:var(--GRIS-TEXTO); line-height:1.75; margin-bottom:32px; }
.per-faq .lista-faq{ display:flex; flex-direction:column; }
.per-faq .faq-item{ border-bottom:1px solid var(--GRIS-BORDE); padding:20px 0; }
.per-faq .faq-item:first-child{ border-top:1px solid var(--GRIS-BORDE); }
.per-faq .faq-pregunta{
  width:100%; background:none; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  text-align:left; font-family:var(--LETRA-TEXTO);
}
.per-faq .faq-pregunta > span:first-child{ font-size:15px; font-weight:500; color:var(--NEGRO); line-height:1.4; flex:1; }
.per-faq .faq-icono{
  width:28px; height:28px; flex-shrink:0; border-radius:50%;
  background:#f3f4f6; border:1px solid var(--GRIS-BORDE);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; color:var(--GRIS-SUAVE); transition:all var(--SUAVE); line-height:1;
}
.per-faq .faq-item.abierto .faq-icono{
  background:var(--VERDE); border-color:var(--VERDE); color:var(--BLANCO);
  transform:rotate(45deg);   /* el "+" gira y parece "×" */
}
.per-faq .faq-respuesta{
  font-size:14px; font-weight:300; color:var(--GRIS-TEXTO); line-height:1.75;
  max-height:0; overflow:hidden; transition:max-height .35s ease, padding .35s ease;
}
.per-faq .faq-item.abierto .faq-respuesta{ max-height:320px; padding-top:14px; }
@media(max-width:900px){
  .per-faq .contenido{ grid-template-columns:1fr; gap:36px; }
  .per-faq{ padding:48px 5%; }
  .per-faq .titulo{ font-size:38px; }
}


/* ═══════════════ 7 · CIERRE ═══════════════ */
.per-cierre{ padding:40px 6%; }
@media(max-width:860px){
  .per-cierre .banner-cierre{ grid-template-columns:1fr; gap:32px; padding:40px 32px; }
  .per-cierre .banner-cierre .formulario{ min-width:unset; width:100%; }
}
@media(max-width:480px){
  .per-cierre{ padding:24px 16px; }
  .per-cierre .banner-cierre{ padding:32px 24px; }
}