/* terralica-base.css · v1.0 · 2026-10-16
   Tokens y componentes del sitio web de Terrálica.
   Fuente: Manual de Imagen de Marca (2015) + maqueta v1.
   Prefijo tl- para no chocar con estilos de WordPress. */
:root{
  /* Marca: paleta oficial, manual p.03 */
  --tl-amarillo:#FFCB05;   /* Pantone 7408 C */
  --tl-naranja:#F6861F;    /* Pantone 715 C  */
  --tl-rojo:#ED1C24;       /* Pantone 485 C  */
  --tl-verde-1:#72BF44;    /* Pantone 360 C  */
  --tl-verde-2:#00813E;    /* Pantone 348 C  */
  --tl-verde-3:#003D11;    /* Pantone 3425 C */

  /* Neutros con sesgo verde */
  --tl-tinta:#1E2620;      /* texto principal */
  --tl-tinta-2:#4C574F;    /* texto secundario */
  --tl-blanco:#FFFFFF;
  --tl-fondo-2:#F3F6F1;    /* bandas claras */
  --tl-linea:#DCE3D8;      /* bordes y divisores */

  /* Funcionales (accesibles, AA sobre blanco) */
  --tl-naranja-texto:#AD5200; /* cejas y etiquetas en naranja */
  --tl-error:#B8141B;         /* rojo de marca oscurecido */
  --tl-exito:var(--tl-verde-2);
  --tl-foco:var(--tl-naranja-texto);

  /* Tipografía */
  --tl-fuente:"Avenir Next","Avenir","Nunito Sans",system-ui,sans-serif;
  --tl-paso--1:.875rem;
  --tl-paso-0:1.0625rem;
  --tl-paso-1:1.25rem;
  --tl-paso-2:1.6rem;
  --tl-paso-3:2.1rem;
  --tl-paso-4:clamp(2.2rem,4.6vw,3.6rem);

  /* Espaciado (base 4 px) */
  --tl-esp-1:.25rem; --tl-esp-2:.5rem; --tl-esp-3:.75rem; --tl-esp-4:1rem;
  --tl-esp-5:1.5rem; --tl-esp-6:2rem;  --tl-esp-7:3rem;   --tl-esp-8:4rem;
  --tl-seccion:clamp(3rem,7vw,5.5rem);

  /* Retícula, radios y sombra */
  --tl-ancho:72rem;
  --tl-margen:clamp(16px,4vw,40px);
  --tl-radio-s:4px;  /* etiquetas sobre foto */
  --tl-radio-m:6px;  /* botones y campos */
  --tl-radio-l:10px; /* tarjetas y paneles */
  --tl-radio-pill:999px;
  --tl-sombra:0 18px 40px rgba(0,61,17,.12); /* solo menús desplegables */
}

/* Base */
.tl-contenedor{max-width:var(--tl-ancho);margin-inline:auto;padding-inline:var(--tl-margen)}
.tl-texto{font-family:var(--tl-fuente);font-size:var(--tl-paso-0);line-height:1.6;color:var(--tl-tinta);-webkit-font-smoothing:antialiased}
.tl-titulo{font-family:var(--tl-fuente);font-weight:900;line-height:1.12;letter-spacing:-.01em;text-wrap:balance;color:var(--tl-verde-3);margin:0}
.tl-titulo--1{font-size:var(--tl-paso-4)}
.tl-titulo--2{font-size:var(--tl-paso-3)}
.tl-titulo--3{font-size:var(--tl-paso-1);font-weight:800;color:var(--tl-tinta)}
.tl-lead{font-size:var(--tl-paso-1);line-height:1.5;color:var(--tl-tinta-2);max-width:34em;margin:0}
.tl-ceja{font-family:var(--tl-fuente);font-size:var(--tl-paso--1);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--tl-naranja-texto);margin:0}
.tl-seccion{padding-block:var(--tl-seccion)}
.tl-seccion--clara{background:var(--tl-fondo-2)}
.tl-oscuro{background:var(--tl-verde-3);color:#E8F1E4;--tl-foco:var(--tl-amarillo)}
.tl-oscuro .tl-titulo{color:#fff}
.tl-oscuro .tl-ceja{color:var(--tl-amarillo)}
.tl-oscuro .tl-lead{color:#CFE0C9}
:where(a,button,input,select,textarea):focus-visible{outline:3px solid var(--tl-foco);outline-offset:3px}

/* Botones */
.tl-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.8rem 1.3rem;border-radius:var(--tl-radio-m);border:2px solid transparent;font-family:var(--tl-fuente);font-size:var(--tl-paso-0);font-weight:800;line-height:1.2;text-decoration:none;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.tl-btn--pri{background:var(--tl-verde-2);color:#fff}
.tl-btn--pri:hover{background:var(--tl-verde-3)}
.tl-btn--sec{background:transparent;border-color:var(--tl-verde-2);color:var(--tl-verde-2)}
.tl-btn--sec:hover{background:var(--tl-verde-2);color:#fff}
.tl-btn--claro{background:#fff;color:var(--tl-verde-3)}
.tl-btn--claro:hover{background:var(--tl-amarillo)}
.tl-oscuro .tl-btn--sec{border-color:#fff;color:#fff}
.tl-oscuro .tl-btn--sec:hover{background:#fff;color:var(--tl-verde-3)}
.tl-btn--peq{padding:.6rem 1rem;font-size:.95rem}
.tl-btn:disabled,.tl-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;pointer-events:none}
.tl-enlace{color:var(--tl-verde-2);font-weight:800;text-decoration:underline;text-underline-offset:.2em}
.tl-enlace:hover{color:var(--tl-verde-3)}

/* Etiquetas (chips) */
.tl-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0;list-style:none}
.tl-chip{font-family:var(--tl-fuente);font-size:.78rem;font-weight:600;color:var(--tl-verde-3);background:var(--tl-fondo-2);border-radius:var(--tl-radio-pill);padding:.2rem .6rem}

/* Icono de estratos: tres franjas consecutivas de la secuencia del símbolo */
.tl-estratos{width:44px;height:30px;display:grid;gap:3px}
.tl-estratos i{display:block;border-radius:2px}

/* Tarjeta de servicio */
.tl-servicio{background:#fff;border:1px solid var(--tl-linea);border-radius:var(--tl-radio-l);padding:1.6rem 1.5rem 1.7rem;display:flex;flex-direction:column;gap:.7rem;font-family:var(--tl-fuente)}
.tl-servicio .tl-ceja{font-size:.72rem;margin-bottom:-.4rem}
.tl-servicio p{margin:0;color:var(--tl-tinta-2);font-size:.98rem;line-height:1.55}

/* Paso de proceso */
.tl-paso{display:flex;flex-direction:column;gap:.55rem;padding-top:1rem;border-top:4px solid var(--c,var(--tl-verde-2));font-family:var(--tl-fuente)}
.tl-paso small{font-size:.75rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--tl-tinta-2)}
.tl-paso p{margin:0;font-size:.95rem;color:var(--tl-tinta-2)}

/* Tarjeta de proyecto */
.tl-proyecto{display:flex;flex-direction:column;border:1px solid var(--tl-linea);border-radius:var(--tl-radio-l);overflow:hidden;background:#fff;font-family:var(--tl-fuente)}
.tl-proyecto__foto{aspect-ratio:16/10;max-width:100%;display:flex;align-items:flex-end;padding:.8rem;background:linear-gradient(180deg,rgba(0,61,17,0) 30%,rgba(0,40,11,.88) 100%),var(--foto,var(--tl-verde-2))}
.tl-proyecto__foto small{background:rgba(255,255,255,.9);color:var(--tl-tinta);font-size:.72rem;font-weight:700;border-radius:var(--tl-radio-s);padding:.15rem .45rem}
.tl-proyecto__cuerpo{padding:1.2rem 1.3rem 1.4rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.tl-proyecto__cuerpo p{margin:0;font-size:.95rem;color:var(--tl-tinta-2)}
.tl-datos{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin:auto 0 0;padding-top:.9rem;border-top:1px solid var(--tl-linea);font-variant-numeric:tabular-nums}
.tl-datos dt{font-size:.7rem;color:var(--tl-tinta-2);text-transform:uppercase;letter-spacing:.06em}
.tl-datos dd{margin:0;font-weight:800;color:var(--tl-verde-3)}

/* Formularios */
.tl-campo{display:flex;flex-direction:column;gap:.3rem;min-width:0;font-family:var(--tl-fuente)}
.tl-campo label{font-size:.85rem;font-weight:700;color:var(--tl-tinta)}
.tl-campo input,.tl-campo select,.tl-campo textarea{font:inherit;font-size:.98rem;padding:.65rem .75rem;border:1px solid #B9C6B3;border-radius:var(--tl-radio-m);background:#fff;color:var(--tl-tinta);width:100%;box-sizing:border-box}
.tl-campo textarea{min-height:6.5rem;resize:vertical}
.tl-campo :is(input,select,textarea):focus{outline:2px solid var(--tl-verde-2);outline-offset:0;border-color:var(--tl-verde-2)}
.tl-campo small{font-size:.8rem;color:var(--tl-tinta-2)}
.tl-campo--error :is(input,select,textarea){border-color:var(--tl-error)}
.tl-campo--error small{color:var(--tl-error);font-weight:700}
.tl-aviso{font-family:var(--tl-fuente);font-size:.9rem;font-weight:700;border-radius:var(--tl-radio-m);padding:.7rem .9rem;border-left:4px solid}
.tl-aviso--ok{color:var(--tl-verde-3);background:#E6F3DE;border-color:var(--tl-verde-2)}
.tl-aviso--error{color:var(--tl-error);background:#FDE8E8;border-color:var(--tl-error)}

/* Cabecera */
.tl-cabecera{background:#fff;border-bottom:1px solid var(--tl-linea);font-family:var(--tl-fuente)}
.tl-cabecera__fila{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:76px}
.tl-logo-h{display:flex;align-items:flex-end;gap:.55rem;text-decoration:none;color:var(--tl-tinta)}
.tl-logo-h svg{width:40px;height:auto;flex:none}
.tl-logo-h span{font-weight:900;font-size:1.55rem;line-height:.9;letter-spacing:-.01em}
.tl-menu{display:flex;align-items:center;flex-wrap:wrap;gap:.4rem 1.6rem}
.tl-menu a:not(.tl-btn){text-decoration:none;font-weight:600;color:var(--tl-tinta-2);font-size:.98rem}
.tl-menu a:not(.tl-btn):hover,.tl-menu a[aria-current="page"]{color:var(--tl-verde-2)}