/*
Theme Name: Sacos Fernández
Theme URI: https://sacosfernandez.com/
Description: Tema hijo de Astra para Sacos Fernández S.L. Contiene el sistema de identidad
  visual del proyecto: color, tipografía y las reglas base de maquetación. Todos los
  contrastes están calculados con la fórmula de luminancia relativa de la WCAG 2.1 y
  documentados en 1-marca/identidad-visual.md. No se estima ninguno a ojo.
Author: CentroMIPC
Author URI: https://centromipc.com/
Template: astra
Version: 1.0.0
Requires PHP: 7.4
Text Domain: sacosfernandez
*/

/* ==================================================================
   1 · TOKENS
   ================================================================== */
:root{
  /* --- Color. Verdes tomados del logotipo real, no inventados --- */
  --sf-verde-rafia:#14532D;        /* bandas y titulares · blanco encima 9,11 AAA */
  --sf-verde-campo:#076A0B;        /* acción y enlaces  · 6,83 AA · ES EL VERDE DEL RÓTULO */
  --sf-verde-hover:#05540A;        /* hover de botón    · 9,21 AAA */
  --sf-verde-espiga:#259400;       /* decorativo        · 3,95 · NUNCA como texto */
  --sf-tinta:#1E293B;              /* cuerpo            · 14,63 AAA */
  --sf-tinta-suave:#475569;        /* secundario        · 7,58 AAA */
  --sf-borde:#CBD5E1;              /* filete de tarjeta · NUNCA en un control */
  --sf-borde-control:#7C8B99;      /* contorno de campo · 3,49 · exigido por WCAG 1.4.11 */
  --sf-fondo:#FFFFFF;
  --sf-fondo-alt:#F1F5F3;
  --sf-aviso:#9A4A06;              /* blanco encima 6,26 AA */

  /* --- Velo del hero sobre foto o vídeo ---
     Calculado por el PEOR CASO: como si debajo hubiera blanco puro.
     0,80 → 7,9 AAA · 0,88 → 9,9 AAA. Cumple sobre cualquier fotograma. */
  --sf-velo:10 46 25;

  /* --- Tipografía --- */
  --sf-titulo:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sf-cuerpo:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* --- Maquetación. Margen lateral fluido en lugar de contenedor centrado --- */
  --sf-gutter:clamp(20px, 5vw, 88px);
  --sf-aire:clamp(56px, 9vw, 116px);

  --sf-radio:10px;
  --sf-radio-campo:6px;
}

/* ==================================================================
   2 · BASE = MÓVIL
   Todo lo de esta sección es el caso base. Las ampliaciones van al
   final, siempre con @media (min-width: …). Nunca max-width.
   ================================================================== */
body{
  font-family:var(--sf-cuerpo);
  font-size:1.0625rem;          /* 17px: el comprador industrial no tiene veinte años */
  line-height:1.65;
  color:var(--sf-tinta);
  background:var(--sf-fondo);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4,h5,h6,
.elementor-heading-title{
  font-family:var(--sf-titulo);
  letter-spacing:-.015em;
  text-wrap:balance;
}
h1{font-size:clamp(2rem, 6.2vw, 4rem);line-height:1.08;font-weight:700}
h2{font-size:clamp(1.6rem, 4.2vw, 2.6rem);line-height:1.15;font-weight:700}
h3{font-size:clamp(1.1875rem, 2.2vw, 1.375rem);line-height:1.3;font-weight:600}

/* El ÚNICO tope de anchura del sitio es tipográfico: es legibilidad, no maquetación.
   Se aplica al texto corrido, nunca a los contenedores. */
.entry-content p:not([class]),
.sf-medida{max-width:68ch}

a{color:var(--sf-verde-campo)}
a:hover{color:var(--sf-verde-hover)}

img{max-width:100%;height:auto}

/* --- Foco visible. Nunca se suprime: outline:none sin sustituto es fallo de nivel A.
   Sobre las bandas verde oscuro ningún verde llega a 3:1, así que ahí va blanco. --- */
:is(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--sf-verde-campo);
  outline-offset:3px;
  border-radius:4px;
}
.sf-banda :is(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline-color:#FFFFFF;
}

/* ==================================================================
   3 · UTILIDADES DE MAQUETACIÓN
   ================================================================== */

/* Franja a sangre: el fondo llega a los bordes, el contenido respira */
.sf-franja{padding-inline:var(--sf-gutter)}
.sf-aire{padding-block:var(--sf-aire)}
.sf-banda{background:var(--sf-verde-rafia);color:#fff}
.sf-banda :is(h1,h2,h3,h4){color:#fff}
.sf-alt{background:var(--sf-fondo-alt)}

/* Velo para texto sobre foto o vídeo */
.sf-velo{position:relative}
.sf-velo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,
    rgb(var(--sf-velo) / .80) 0%,
    rgb(var(--sf-velo) / .84) 55%,
    rgb(var(--sf-velo) / .92) 100%);
}
.sf-velo > *{position:relative;z-index:1}

/* ==================================================================
   4 · COMPONENTES
   ================================================================== */

/* --- Botones. El hover OSCURECE, nunca aclara: si aclarase al verde espiga,
   el texto blanco caería a 3,95 y dejaría de cumplir AA justo al interactuar. --- */
.wp-block-button__link,
.elementor-button,
.sf-btn{
  font-family:var(--sf-cuerpo);
  font-weight:600;
  border-radius:var(--sf-radio);
  min-height:48px;              /* objetivo táctil */
  padding:13px 26px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  transition:background-color .15s ease,border-color .15s ease;
}
.sf-btn--p{background:var(--sf-verde-campo);color:#fff;border:2px solid transparent}
.sf-btn--p:hover{background:var(--sf-verde-hover);color:#fff}
.sf-btn--s{background:transparent;color:var(--sf-tinta);border:2px solid var(--sf-borde-control)}
.sf-btn--s:hover{background:var(--sf-fondo-alt)}
.sf-banda .sf-btn--s{color:#fff;border-color:#fff}
.sf-banda .sf-btn--s:hover{background:rgb(255 255 255 / .12)}

/* --- Campos de formulario.
   El borde usa --sf-borde-control, no --sf-borde: la WCAG 1.4.11 exige 3:1 en el
   contorno de cualquier componente de interfaz, y el gris de tarjeta da 1,48. --- */
input[type=text],input[type=email],input[type=tel],input[type=number],
input[type=search],input[type=url],select,textarea,
.wpcf7 input:not([type=submit]),.wpcf7 textarea,.wpcf7 select{
  font-family:var(--sf-cuerpo);
  font-size:1rem;
  min-height:48px;
  padding:12px 14px;
  color:var(--sf-tinta);
  background:#fff;
  border:1px solid var(--sf-borde-control);
  border-radius:var(--sf-radio-campo);
}
input:focus,select:focus,textarea:focus{
  border-color:var(--sf-verde-campo);
  outline:3px solid var(--sf-verde-campo);
  outline-offset:2px;
}
/* La casilla de RGPD debe ser visible y cómoda de pulsar */
input[type=checkbox],input[type=radio]{
  width:22px;height:22px;
  accent-color:var(--sf-verde-campo);
  border:1px solid var(--sf-borde-control);
}

/* --- Etiqueta de dato sin confirmar. Se usa mientras el cliente no valide
   una cifra. Nunca debe llegar a producción con datos reales. --- */
.sf-pendiente{
  display:inline-block;
  font-size:.6875rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  background:var(--sf-aviso);color:#fff;
  padding:4px 9px;border-radius:4px;
}

/* --- Tablas técnicas.
   Son el contenido que más consulta el comprador industrial. En móvil no se
   apilan ni se encogen: se desplazan en horizontal dentro de su propio
   contenedor, que es la única forma de no romper la relación fila/columna. --- */
.sf-tabla{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:8px 0 4px}
.sf-tabla table{
  width:100%;min-width:480px;
  border-collapse:collapse;
  font-size:.9375rem;
  background:#fff;
  border:1px solid var(--sf-borde);
  border-radius:var(--sf-radio);
  overflow:hidden;
}
.sf-tabla th{
  background:var(--sf-verde-rafia);color:#fff;   /* 9,11 AAA */
  font-family:var(--sf-titulo);font-weight:600;
  font-size:.8125rem;letter-spacing:.04em;text-transform:uppercase;
  text-align:left;padding:12px 16px;
}
.sf-tabla td{
  padding:11px 16px;
  border-top:1px solid var(--sf-borde);
  color:var(--sf-tinta);
  vertical-align:top;
}
.sf-tabla tbody tr:nth-child(even) td{background:var(--sf-fondo-alt)}
.sf-tabla td:first-child{font-weight:500}

/* --- Listas del contenido --- */
.elementor-widget-text-editor :is(ul,ol){padding-left:1.25em;margin:.25em 0 1em}
.elementor-widget-text-editor li{margin-bottom:.4em}

/* --- Citas --- */
.elementor-widget-text-editor blockquote{
  margin:1em 0;padding:4px 0 4px 18px;
  border-left:3px solid var(--sf-verde-espiga);
  color:var(--sf-tinta);font-style:normal;
}

/* --- Tarjetas --- */
.sf-tarjeta{
  background:#fff;
  border:1px solid var(--sf-borde);
  border-radius:var(--sf-radio);
  overflow:hidden;
}

/* ==================================================================
   5 · AJUSTES SOBRE ASTRA
   El header y el footer de Astra se desactivan: se construyen con
   Elementor Pro. Esto solo neutraliza restos de estilo.
   ================================================================== */
.ast-container,.ast-container-fluid{max-width:none}
.site-content .ast-container{padding-inline:0}

/* ==================================================================
   5 bis · CABECERA CONSTRUIDA CON ELEMENTOR PRO
   Correcciones sobre la banda verde que no se pueden expresar bien
   desde los controles del widget.
   ================================================================== */

/* El rótulo flotante del buscador se solapaba con el propio campo sobre
   la banda verde. El campo ya lleva placeholder, así que el rótulo sobra:
   se oculta visualmente pero SIGUE EN EL DOM para los lectores de pantalla. */
header .elementor-widget-search label,
header .elementor-search-form__label{
  position:absolute!important;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  clip-path:inset(50%);
  overflow:hidden;white-space:nowrap;
}

/* El importe del carrito heredaba el verde oscuro del tema antiguo y
   quedaba invisible sobre la banda. Blanco sobre #14532D da 9,11 AAA. */
header .elementor-button-icon,
header .elementor-button-text,
header .woocommerce-Price-amount,
header .elementor-menu-cart__toggle .elementor-button{
  color:#FFFFFF!important;
}
header .elementor-menu-cart__toggle .elementor-button{
  background:transparent!important;
  border:1px solid rgb(255 255 255 / .35);
  border-radius:var(--sf-radio-campo);
}

/* El desplegable del carrito vuelve a fondo claro: su contenido es texto
   oscuro y sobre verde no se leería. */
header .elementor-menu-cart__container{color:var(--sf-tinta)}

/* ==================================================================
   5 ter · BANNER DE COOKIES (Complianz)
   Se estiliza aquí y no desde el plugin porque Complianz regenera su CSS
   cada vez que cambia la configuración, y se llevaría los ajustes por
   delante. Estas reglas sobreviven.
   ================================================================== */
.cmplz-cookiebanner{
  background:var(--sf-verde-rafia)!important;   /* blanco encima: 9,11 AAA */
  color:#FFFFFF!important;
  border:1px solid rgb(255 255 255 / .18)!important;
  border-radius:var(--sf-radio)!important;
  font-family:var(--sf-cuerpo)!important;
  box-shadow:0 14px 44px rgb(9 32 20 / .38)!important;
}
.cmplz-cookiebanner .cmplz-title{
  font-family:var(--sf-titulo)!important;
  font-weight:700!important;
  color:#FFFFFF!important;
}
.cmplz-cookiebanner :is(.cmplz-message,.cmplz-description,.cmplz-category-title,
  .cmplz-divider-header,.cmplz-documents a,.cmplz-links a){
  color:#FFFFFF!important;
}
.cmplz-cookiebanner .cmplz-documents a,
.cmplz-cookiebanner .cmplz-links a{text-decoration:underline!important}

/* Botones. El de aceptar en verde de acción; rechazar y preferencias con
   contorno blanco. Los tres con el MISMO tamaño y peso visual: un «rechazar»
   menos visible que «aceptar» invalida el consentimiento, no es una
   decisión de diseño. */
.cmplz-cookiebanner .cmplz-btn{
  font-family:var(--sf-cuerpo)!important;
  font-weight:600!important;
  border-radius:var(--sf-radio)!important;
  min-height:44px!important;
  padding:11px 20px!important;
  border:2px solid #FFFFFF!important;
}
.cmplz-cookiebanner .cmplz-btn.cmplz-accept{
  background:var(--sf-verde-campo)!important;   /* blanco encima: 6,83 AA */
  color:#FFFFFF!important;
  border-color:var(--sf-verde-campo)!important;
}
.cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover{
  background:var(--sf-verde-hover)!important;   /* oscurece, nunca aclara */
  border-color:var(--sf-verde-hover)!important;
}
.cmplz-cookiebanner .cmplz-btn:is(.cmplz-deny,.cmplz-view-preferences,.cmplz-save-preferences){
  background:transparent!important;
  color:#FFFFFF!important;
}
.cmplz-cookiebanner .cmplz-btn:is(.cmplz-deny,.cmplz-view-preferences,.cmplz-save-preferences):hover{
  background:rgb(255 255 255 / .14)!important;
}

/* Foco visible sobre la banda oscura: ningún verde llega a 3:1 ahí */
.cmplz-cookiebanner :is(a,button,input):focus-visible{
  outline:3px solid #FFFFFF!important;
  outline-offset:3px!important;
}

/* Interruptores de categoría */
.cmplz-cookiebanner .cmplz-category{
  background:rgb(255 255 255 / .07)!important;
  border-radius:var(--sf-radio-campo)!important;
}

/* La pestaña de «gestionar consentimiento» */
.cmplz-manage-consent{
  background:var(--sf-verde-rafia)!important;
  color:#FFFFFF!important;
  border-radius:var(--sf-radio-campo) var(--sf-radio-campo) 0 0!important;
  font-family:var(--sf-cuerpo)!important;
}

/* ==================================================================
   6 · MOVIMIENTO
   ================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
}

/* ==================================================================
   7 · AMPLIACIONES · SOLO min-width
   ================================================================== */
@media (min-width:860px){
  .sf-partido{display:grid;grid-template-columns:1fr 1fr;align-items:center}
  .sf-partido .sf-media img{width:100%;height:100%;object-fit:cover;
    min-height:clamp(420px,46vw,660px)}
}

/* ==================================================================
   8 · IMPRESIÓN
   ================================================================== */
@media print{
  .sf-banda{background:none!important;color:#000!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em}
}