/**
 * @file
 * Estilos de marca del subtema df_theme (basado en Olivero).
 *
 * Reproduce la identidad visual de detrasdelafachada.com:
 * - Rojo principal #D80037, acento #E9503E.
 * - Tipografías Roboto (texto) y Open Sans (títulos).
 * - Cabecera roja, enlaces y botones en rojo de marca.
 */

/* ==========================================================================
   Tipografías locales (ligeras, servidas desde el propio tema)
   ========================================================================== */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Roboto.woff2") format("woff2");
}

@font-face {
  font-family: "Open Sans DF";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/OpenSans-Light.woff2") format("woff2");
}

/* ==========================================================================
   Variables de marca (sobrescriben los tokens de Olivero)
   ========================================================================== */
:root {
  /* Paleta copiada del tema Tara (https://tara.drupar.com). */
  --df-primary: #c25700;         /* naranja/terracota */
  --df-secondary: #6e7c03;       /* verde oliva */
  --df-primary-light: #f2e8dd;   /* crema claro */
  --df-bg-body: #f9f6f3;         /* fondo cálido */
  --df-light: #fffbf6;           /* casi blanco */
  --df-text: #3f3f3f;            /* texto */
  --df-gray: #767676;            /* gris */
  --df-bold: #222222;            /* títulos fuertes */
  --df-dark: #221f1d;            /* oscuro */
  --df-border: #dbdbd3;          /* bordes */

  /* Alias de compatibilidad. */
  --df-red: var(--df-primary);
  --df-red-accent: var(--df-secondary);
  --df-gray-border: var(--df-border);
  --df-gray-bg: var(--df-light);

  /* Sustituye las fuentes de Olivero (Metropolis/Lora) por las locales. */
  --font-sans: "Roboto", Arial, Helvetica, sans-serif;
  --font-serif: "Open Sans DF", "Open Sans", Arial, sans-serif;

  /* Tokens de color de Olivero (escalados desde el primario de Tara). */
  --color--primary-10: #3d1b00;
  --color--primary-20: #6b2f00;
  --color--primary-30: #984300;
  --color--primary-40: var(--df-primary);
  --color--primary-50: var(--df-primary);
  --color--primary-60: #d76a1a;
  --color--primary-70: #e58a45;
  --color--primary-80: #efb180;
  --color--primary-90: #f2e8dd;
  --color-text-neutral-loud: var(--df-bold);
}

/* ==========================================================================
   Tipografía global
   ========================================================================== */
body {
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  color: var(--df-text);
  background-color: var(--df-bg-body);
}

h1,
h2,
h3,
h4,
h5,
h6,
.site-branding__name {
  font-family: "Open Sans DF", "Open Sans", Arial, sans-serif;
}

/* ==========================================================================
   Cabecera de marca (barra primaria estilo Tara)
   ========================================================================== */
.site-header,
.site-header__inner,
.header-nav,
.site-header__initial {
  background-color: var(--df-primary);
}

.site-header a,
.site-header__inner a,
.site-branding__name,
.site-branding__name a,
.site-header .site-branding__text {
  color: #fff;
}

.site-branding__name a {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

@media (max-width: 74.999rem) {
  .mobile-buttons {
    order: 0;
    align-self: center;
    margin-block-start: 0;
    margin-inline-start: auto;
    margin-inline-end: 0;
  }

  .mobile-nav-button {
    color: #fff;
  }

  .mobile-nav-button__label {
    position: absolute;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    white-space: nowrap;
  }

  .mobile-nav-button__icon,
  .mobile-nav-button__icon::before,
  .mobile-nav-button__icon::after {
    border-top-color: #fff;
  }

  .header-nav {
    border-block-start-color: var(--df-primary);
  }

  .region--secondary-menu {
    flex-direction: column;
    width: 100%;
    margin: var(--sp2) 0 0;
    padding-top: var(--sp2);
    border-block-start: 1px solid #fff;
  }

  .region--secondary-menu > .menu--account,
  .region--secondary-menu > .menu--language-interface {
    width: 100%;
  }

  .region--secondary-menu > .menu--account .secondary-nav__menu {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: .5rem;
  }

  .region--secondary-menu > .menu--language-interface {
    margin-top: var(--sp);
  }

  .region--secondary-menu > .menu--language-interface ul.links {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .region--secondary-menu > .menu--language-interface ul.links li + li::before {
    margin-inline: .75rem;
    color: #fff;
    content: "|";
  }
}

/* Menú principal en la cabecera roja. */
.primary-nav__menu-link,
.primary-nav__button-toggle,
.mobile-buttons__button {
  color: #fff;
}

.primary-nav__menu-link:hover,
.primary-nav__menu-link:focus {
  color: #fff;
  text-decoration: underline;
}

/* ==========================================================================
   Enlaces y titulares
   ========================================================================== */
a {
  color: var(--df-red);
}

a:hover,
a:focus {
  color: var(--df-red-accent);
}

h1 {
  color: var(--df-red);
}

h3,
h4 {
  color: var(--df-red-accent);
  font-style: italic;
}

/* ==========================================================================
   Botones al estilo detrasdelafachada
   ========================================================================== */
.button,
.button--primary,
input[type="submit"],
input[type="button"].submit,
button.form-submit {
  background-color: var(--df-red);
  border-color: var(--df-red);
  color: #fff;
  letter-spacing: 1px;
  border-radius: 5px;
}

.button:hover,
.button--primary:hover,
input[type="submit"]:hover,
button.form-submit:hover {
  background-color: var(--df-red-accent);
  border-color: var(--df-red-accent);
  color: #fff;
}

/* ==========================================================================
   Formularios
   ========================================================================== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select {
  background: var(--df-gray-bg);
  border: 1px solid var(--df-gray-border);
  border-radius: 5px;
}

/* ==========================================================================
   Pie de página
   ========================================================================== */
.site-footer {
  background-color: var(--df-dark);
  color: #f8f3ed;
  border-top: 4px solid var(--df-primary);
}

.site-footer a {
  color: #f8f3ed;
}

.site-footer a:hover {
  color: #f4bd8b;
}

.site-footer__inner {
  padding-top: 3.5rem;
  padding-bottom: 1.25rem;
}

.df-footer__grid {
  display: grid;
  grid-template-columns: minmax(15rem, 1.6fr) repeat(3, minmax(8rem, 1fr));
  gap: 2rem;
}

.df-footer__brand h2,
.df-footer__nav h3 {
  margin: 0;
  color: #fffaf4;
}

.df-footer__brand h2 {
  max-width: 18rem;
  font-size: 1.55rem;
  line-height: 1.15;
}

.df-footer__brand p:last-child {
  max-width: 23rem;
  margin: 1rem 0 0;
  color: #d8cec5;
  line-height: 1.6;
}

.df-footer__eyebrow {
  margin: 0 0 .6rem;
  color: #f4bd8b;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.df-footer__nav h3 {
  margin-bottom: .9rem;
  font-size: 1rem;
}

.df-footer__nav ul {
  display: grid;
  gap: .55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.df-footer__nav a {
  color: #d8cec5;
  text-decoration: none;
}

.df-footer__nav a:hover,
.df-footer__nav a:focus-visible {
  color: #fffaf4;
  text-decoration: underline;
}

.df-footer__extra {
  margin-top: 2.5rem;
}

.df-footer__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid rgb(255 250 244 / 20%);
  color: #b9aea5;
  font-size: .82rem;
}

.df-footer__meta p {
  margin: 0;
}

.df-footer__system .block {
  margin: 0;
}

.df-footer__system a {
  color: #b9aea5;
}

@media (max-width: 48rem) {
  .site-footer__inner {
    padding-top: 2.5rem;
  }

  .df-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 1.25rem;
  }

  .df-footer__brand {
    grid-column: 1 / -1;
  }

  .df-footer__meta {
    align-items: flex-start;
    flex-direction: column;
  }
}

hr {
  border-color: var(--df-secondary);
}

/* ==========================================================================
   Ancho completo en escritorio (elimina el margen derecho de Olivero)
   ========================================================================== */
@media (min-width: 75rem) {
  :root {
    /* Olivero limita el lienzo y reserva una columna social vacía. */
    --max-width: calc(100vw - var(--scrollbar-width));
    --max-bg-color: calc(100vw - var(--scrollbar-width));
    --content-left: 0px;
  }

  /* La cuenta y el idioma siguen dentro del menú móvil, pero no hacen
   * que la navegación principal de escritorio se convierta en un botón. */
  .region--secondary-menu {
    display: none;
  }
}

/* La columna de contenido de Olivero se centra en las columnas 3-13;
   la ensanchamos a todo el ancho útil de la rejilla en escritorio. */
@media (min-width: 62.5rem) {
  .layout--content-medium,
  .layout--pass--content-medium > *,
  .layout--content-narrow,
  .layout--pass--content-narrow > * {
    grid-column: 2 / 14;
  }
}