/* Capa de identidad PROMALLAS (Manual v1.0). Se carga después de styles.css. */
:root {
  --background: 0 0% 6.67%;            /* Negro #111111 */
  --foreground: 0 0% 100%;
  --card: 0 0% 6.67%;
  --card-foreground: 0 0% 100%;
  --popover: 0 0% 6.67%;
  --popover-foreground: 0 0% 100%;
  --primary: 10.9 100% 55.7%;          /* Naranja #FF461D */
  --primary-foreground: 0 0% 6.67%;    /* Sobre naranja, el texto va en negro */
  --secondary: 43.5 16% 92.4%;         /* Arena #EFEDE8 */
  --secondary-foreground: 0 0% 6.67%;
  --accent: 10.9 100% 55.7%;
  --accent-foreground: 0 0% 6.67%;
  --muted: 0 0% 6.67%;
  --muted-foreground: 0 0% 60%;        /* #999999: el gris del manual con mejor contraste sobre negro */
  --border: 0 0% 40%;                  /* Gris Acero #666666 */
  --input: 0 0% 40%;
  --ring: 10.9 100% 55.7%;
  --logo-card-text: 0 0% 6.67%;
  --font-sans: "Barlow", Arial, sans-serif;
  --font-heading: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
}

body { line-height: 1.5; }

/* Tipografía */
h1, h2, h3 { text-transform: uppercase; line-height: 1 !important; }
h1, h2 { font-weight: 800 !important; }
h3 { font-weight: 700 !important; }
.cta-dato {
  font-family: var(--font-heading) !important;
  font-weight: 800;
  font-size: 1.375rem;
  line-height: 1;
  text-transform: uppercase;
}

/* Zonas claras: Arena o blanco, con texto negro y Óxido en lugar de naranja */
.zona-clara {
  --background: 43.5 16% 92.4%;
  --foreground: 0 0% 6.67%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 6.67%;
  --muted: 0 0% 100%;
  --muted-foreground: 0 0% 40%;
  --border: 0 0% 60%;
  --input: 0 0% 60%;
  background: #EFEDE8 !important;
  color: #111111;
}
.zona-clara.zona-blanca { background: #FFFFFF !important; }
.zona-clara .text-primary,
.zona-clara h2.text-primary { color: #8A2A0B !important; }
.zona-clara .bg-primary { color: #111111 !important; }

/* Logo: mínimo 180 px, con su área de protección */
img[src$="logo-promallas.svg"] {
  display: block;
  width: 180px !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
}
header { position: static !important; }
header .h-16 { height: auto !important; padding-block: 18px; }

/* Corte diagonal con filete naranja */
.border-l-4:has(> img) {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #FF461D;
  clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}
.border-l-4:has(> img) > img {
  object-fit: cover !important;
  clip-path: polygon(0 0, 100% 0, 100% calc(90% - 6px), 0 calc(100% - 6px));
}
img[src*="hero-panel"] { object-position: center bottom; }
img[src*="about-fence"] { object-position: center top; }

/* Patrón de malla: rombos a 43° al 12% */
section > .absolute.inset-0.opacity-5 {
  opacity: 1 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='37.3'%3E%3Cpath d='M0 0L40 37.3M40 0L0 37.3' stroke='%23fff' stroke-opacity='.12' stroke-width='1.5'/%3E%3C/svg%3E") !important;
  background-size: 40px 37.3px !important;
}

/* Franja de contacto */
.franja a { display: block; font-family: var(--font-heading); font-weight: 800; line-height: 1; }
.franja-cta { background: #FF461D; color: #111111; font-size: clamp(1.75rem, 4vw, 2.5rem); text-transform: uppercase; padding: 20px 0; }
.franja-dominio { background: #111111; color: #FFFFFF; font-size: 1.375rem; padding: 14px 0; }
.franja a:hover { text-decoration: underline; }

/* En pantallas estrechas, recortar la foto para que no asome el logo incrustado */
@media (max-width: 1023px) {
  img[src*="about-fence"] { height: 240px !important; }
}

/* Área de protección del logo: 18 px */
footer a:has(> img[src$="logo-promallas.svg"]) { display: block; margin-bottom: 2px; }
@media (max-width: 639px) {
  header .px-4, footer .px-4 { padding-inline: 18px; }
}

select { appearance: auto; }

/* Catálogo */
.catalogo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 24px; }
.catalogo-item { background: #FFFFFF; display: flex; flex-direction: column; }
.catalogo-foto { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #FF461D; clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%); }
.catalogo-foto img { position: absolute; inset: 0; display: block; width: 100%; height: 100% !important; max-width: none; object-fit: cover; object-position: center bottom; clip-path: polygon(0 0, 100% 0, 100% calc(90% - 6px), 0 calc(100% - 6px)); }
.catalogo-foto--patron { background-color: #FF461D; }
.catalogo-foto--patron::before { content: ""; display: block; width: 100%; height: 100%; clip-path: polygon(0 0, 100% 0, 100% calc(90% - 6px), 0 calc(100% - 6px)); background: #111111 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='37.3'%3E%3Cpath d='M0 0L40 37.3M40 0L0 37.3' stroke='%23fff' stroke-opacity='.12' stroke-width='1.5'/%3E%3C/svg%3E") 0 0 / 40px 37.3px; }
.catalogo-texto { padding: 16px 20px 24px; display: flex; flex-direction: column; gap: 8px; }
.catalogo-texto h3 { font-size: 1.5rem; }
.catalogo-cta { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 40px; }

/* Aviso de privacidad */
.aviso { max-width: 720px; display: flex; flex-direction: column; gap: 12px; }
.aviso-h2 { font-size: 1.5rem; margin-top: 20px; }
.aviso-borrador { background: #FF461D; color: #111111; padding: 14px 18px; font-weight: 500; }
.aviso-fecha { margin-top: 20px; }

/* Micrositios de tarjeta */
.micro-body { background: #111111; color: #FFFFFF; }
.micro { max-width: 440px; margin-inline: auto; padding: 32px 18px 40px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.micro-logo { margin-bottom: 18px; }
.micro-nombre { font-family: var(--font-heading); font-size: 2.5rem; color: #FF461D; }
.micro-puesto { color: #999999; margin-top: -6px; }
.micro-principal { display: block; width: 100%; background: #FF461D; color: #111111; font-family: var(--font-heading); font-weight: 800; font-size: 1.5rem; text-transform: uppercase; line-height: 1; padding: 18px; margin-top: 8px; border-radius: 9999px; }
.micro-lista { width: 100%; display: grid; gap: 10px; }
.micro-btn { display: block; width: 100%; padding: 13px 16px; border: 1px solid #666666; border-radius: 9999px; color: #FFFFFF; font-weight: 600; font-size: .9375rem; background: transparent; cursor: pointer; }
.micro-btn:hover, .micro-principal:hover { opacity: .85; }
.micro-qr { background: #FFFFFF; padding: 14px; margin-top: 12px; border-radius: 8px; line-height: 0; }
.micro-lema { color: #999999; font-size: .875rem; margin-top: 8px; }

/* Estado del formulario */
.aviso-formulario:empty { display: none; }
.aviso-formulario { font-weight: 500; }
.aviso-formulario[data-tipo="ok"] { color: #111111; border-left: 4px solid #FF461D; padding-left: 10px; }
.aviso-formulario[data-tipo="error"] { color: #8A2A0B; border-left: 4px solid #8A2A0B; padding-left: 10px; }