:root {
  font-family: Arial, Helvetica, sans-serif;
  color: #111111;
  background: #ffffff;
}

* {
  box-sizing: border-box;
}

/* Con width/height en el HTML (los añade scripts/image-dimensions.mjs), mantiene
   la proporción cuando el CSS de la página solo fija el ancho. */
img {
  height: auto;
}

html,
body {
  min-height: 100%;
  margin: 0;
  background: #ffffff;
}

.site-header {
  display: flex;
  align-items: center;
  gap: 32px;
  width: 100%;
  height: 96px;
  min-height: 96px;
  padding: 6px clamp(22px, 2.2vw, 42px);
  border-bottom: 1px solid #202020;
  background: #080808;
  color: #ffffff;
}

.brand {
  position: relative;
  display: block;
  flex: 0 0 238px;
  width: 238px;
  height: 84px;
  overflow: visible;
  border-radius: 8px;
  background: transparent;
  perspective: 700px;
}

.brand img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.9))
    drop-shadow(0 3px 0 rgba(22, 25, 31, 0.15))
    drop-shadow(0 8px 10px rgba(17, 19, 24, 0.16));
  transform: rotateX(1deg) translateZ(0);
  transform-origin: center;
  transition: filter 220ms ease, transform 220ms ease;
}

.brand::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.34;
  background: linear-gradient(115deg, transparent 24%, rgba(255, 255, 255, 0.96) 43%, rgba(168, 184, 197, 0.72) 50%, transparent 67%);
  background-position: 100% center;
  background-size: 220% 100%;
  -webkit-mask: url("/assets/tarraco-print-logo-3d.webp") center / contain no-repeat;
  mask: url("/assets/tarraco-print-logo-3d.webp") center / contain no-repeat;
  mix-blend-mode: screen;
  pointer-events: none;
  transition: background-position 420ms ease, opacity 220ms ease;
}

.brand:hover img,
.brand:focus-visible img {
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.95))
    drop-shadow(0 4px 0 rgba(22, 25, 31, 0.16))
    drop-shadow(0 11px 13px rgba(17, 19, 24, 0.2));
  transform: rotateX(0deg) translateY(-1px);
}

.brand:hover::after,
.brand:focus-visible::after {
  opacity: 0.5;
  background-position: 0 center;
}

.site-nav {
  margin-left: auto;
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2vw, 34px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  position: relative;
  display: inline-block;
  padding: 8px 0;
  color: #f7f7f7;
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.015em;
  text-decoration: none;
  white-space: nowrap;
  transition: color 180ms ease;
}

.site-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 0;
  height: 3px;
  border-radius: 3px;
  background: #e5007d;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 220ms ease;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: #00a7d9;
  outline: none;
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after,
.site-nav a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.site-nav a[aria-current="page"] {
  color: #ffffff;
}

main {
  min-height: calc(100vh - 96px);
}

@media (max-width: 900px) {
  .site-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    height: auto;
    min-height: 0;
    padding: 6px 18px 8px;
  }

  .brand {
    flex-basis: 74px;
    width: 205px;
    height: 74px;
    border-radius: 8px;
  }

  .brand img {
    width: 100%;
    height: 100%;
  }

  .site-nav {
    width: 100%;
    margin-left: 0;
    overflow-x: auto;
  }

  .site-nav ul {
    width: max-content;
    gap: 22px;
    padding-bottom: 3px;
  }

  .site-nav a {
    font-size: 14px;
  }

  main {
    min-height: calc(100vh - 128px);
  }
}
/* Footer corporativo compartido */
tarraco-site-footer { display: block; }
.site-footer {
  padding: 48px max(24px, calc((100vw - 1380px) / 2)) 20px;
  border-top: 4px solid #00a7d9;
  color: #f7f7f7;
  background: #080808;
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
}
.site-footer__inner { display: grid; grid-template-columns: 1.35fr 1fr .9fr .65fr; gap: clamp(32px, 5vw, 78px); padding-bottom: 38px; }
.site-footer strong { display: block; margin-bottom: 14px; color: #fff; font-size: 12px; font-style: normal; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.site-footer__brand > a { position: relative; display: block; width: 190px; height: 68px; overflow: hidden; border-radius: 8px; background: transparent; }
.site-footer__brand img { position: absolute; top: -26px; left: 0; width: 183px; height: 107px; max-width: none; }
.site-footer__brand p, .site-footer__contact, .site-footer__nav, .site-footer__social { margin: 0; color: #aeb4bc; font-size: 13px; font-style: normal; line-height: 1.65; }
.site-footer__brand p { max-width: 310px; margin-top: 17px; }
.site-footer__company { color: #fff; font-weight: 700; }
.site-footer__contact, .site-footer__nav { display: flex; align-items: flex-start; flex-direction: column; }
.site-footer a { color: inherit; text-decoration: none; transition: color 180ms ease; }
.site-footer a:hover, .site-footer a:focus-visible { color: #00a7d9; outline: none; }
.site-footer__social > div { display: flex; gap: 10px; }
.site-footer__social a { display: grid; width: 40px; height: 40px; border: 1px solid #40434a; border-radius: 50%; place-items: center; transition: border-color 180ms ease, background 180ms ease, transform 180ms ease; }
.site-footer__social a:hover, .site-footer__social a:focus-visible { border-color: #e5007d; background: #e5007d; transform: translateY(-2px); }
.site-footer__social img { width: 18px; height: 18px; filter: brightness(0) invert(1); }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 18px; border-top: 1px solid #303238; color: #777d86; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 900px) { .site-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .site-footer { padding: 38px 18px 18px; } .site-footer__inner { grid-template-columns: 1fr; gap: 30px; } .site-footer__bottom { gap: 8px; align-items: flex-start; flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { .site-footer a { transition: none; } }
/* Componentes globales compartidos: cabecera blanca y pie azul */
tarraco-site-header { display: block; }
.site-header {
  border-bottom-color: #e1e5e8;
  color: #111318;
  background: #ffffff;
  box-shadow: 0 5px 22px rgba(17, 19, 24, 0.07);
}
.brand { border: 0; background: transparent; }
.site-nav a { color: #15181d; }
.site-nav a:hover,
.site-nav a:focus-visible { color: #008fbd; }
.site-nav a[aria-current="page"] { color: #111318; }

.site-footer {
  border-top-color: #007aa3;
  color: #ffffff;
  background: #008fbd;
}
.site-footer__brand p,
.site-footer__contact,
.site-footer__nav,
.site-footer__social { color: rgba(255, 255, 255, 0.88); }
.site-footer strong { color: #ffffff; }
.site-footer a:hover,
.site-footer a:focus-visible { color: #ffe100; }
.site-footer__social a { border-color: rgba(255, 255, 255, 0.58); }
.site-footer__social a:hover,
.site-footer__social a:focus-visible { border-color: #e5007d; color: #ffffff; background: #e5007d; }
.site-footer__bottom { border-top-color: rgba(255, 255, 255, 0.28); color: rgba(255, 255, 255, 0.72); }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.form-spam-trap { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* Aviso de privacidad (primera capa) junto a los formularios */
.form-privacy-note { grid-column: 1 / -1; margin: 18px 0 0; color: #626a75; font-size: 0.74rem; font-weight: 500; line-height: 1.55; letter-spacing: 0; text-transform: none; text-align: left; }
.form-privacy-note a { color: inherit; font-weight: 700; text-decoration: underline; }
.form-privacy-note a:hover,
.form-privacy-note a:focus-visible { color: #111318; }
/* Selector de idioma compartido */
.site-header__tools {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
  min-width: 0;
  margin-left: auto;
}
.site-header__tools .site-nav { margin-left: 0; }
.language-switcher {
  display: flex;
  flex: none;
  gap: 7px;
  align-items: center;
}
.language-switcher button {
  display: grid;
  width: 40px;
  height: 32px;
  padding: 5px;
  border: 1px solid #d4d9de;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 3px 10px rgba(17, 19, 24, 0.08);
  cursor: pointer;
  place-items: center;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.language-switcher button:hover,
.language-switcher button:focus-visible {
  border-color: #00a7d9;
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 167, 217, 0.16);
  transform: translateY(-1px);
}
.language-switcher button[aria-pressed="true"] {
  border-color: #e5007d;
  box-shadow: 0 0 0 2px rgba(229, 0, 125, 0.16);
}
.language-flag {
  display: block;
  width: 26px;
  height: 18px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 2px;
}
.language-flag--es { background: linear-gradient(to bottom, #aa151b 0 25%, #f1bf00 25% 75%, #aa151b 75% 100%); }
.language-flag--ca { background: repeating-linear-gradient(to bottom, #f4d03f 0 2px, #c8102e 2px 4px); }
@media (max-width: 900px) {
  .site-header__tools { width: 100%; margin-left: 0; }
  .site-header__tools .site-nav { flex: 1 1 auto; width: auto; }
  .language-switcher { align-self: center; }
}

/* Marcas sociales originales y con mayor presencia */
.site-footer__social > strong { margin-bottom:18px; font-size:15px; letter-spacing:.12em; }
.site-footer__social > div { gap:14px; }
.site-footer__social a {
  width:56px;
  height:56px;
  border-color:rgba(255,255,255,.8);
  background:rgba(255,255,255,.96);
}
.site-footer__social img { width:34px; height:34px; filter:none; }
.site-footer__social a:hover,
.site-footer__social a:focus-visible { border-color:#fff; color:inherit; background:#fff; box-shadow:0 10px 28px rgba(0,0,0,.22); transform:translateY(-3px) scale(1.04); }
@media (max-width:560px) {
  .site-footer__social > strong { font-size:14px; }
  .site-footer__social a { width:52px; height:52px; }
  .site-footer__social img { width:31px; height:31px; }
}

/* Iconos sociales: misma altura real (formas oficiales, no forzadas a cuadrado), separación uniforme */
.site-footer__social a {
  display:inline-flex;
  width:auto;
  height:auto;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
}
.site-footer__social img { width:auto; height:42px; filter:drop-shadow(0 8px 16px rgba(0,0,0,.32)); transition:transform 180ms ease, filter 180ms ease; }
.site-footer__social a:hover,
.site-footer__social a:focus-visible { border:0; color:inherit; background:transparent; box-shadow:none; transform:translateY(-3px) scale(1.06); }
.site-footer__social a:hover img,
.site-footer__social a:focus-visible img { filter:drop-shadow(0 10px 20px rgba(0,0,0,.4)); }
@media (max-width:560px) { .site-footer__social img { height:38px; } }
@media (max-width: 560px) {
  .language-switcher { gap: 5px; }
  .language-switcher button { width: 36px; height: 29px; padding: 4px; }
  .language-flag { width: 24px; height: 16px; }
}
/* Confirmación al copiar direcciones de correo */
a[href^="mailto:"], a[href^="tel:"] { cursor:copy; }
.email-copy-toast {
  position:fixed;
  z-index:1000;
  left:50%;
  bottom:28px;
  padding:13px 20px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px;
  color:#fff;
  background:#101319;
  box-shadow:0 16px 42px rgba(0,0,0,.28);
  font-size:.82rem;
  font-weight:900;
  letter-spacing:.04em;
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,18px);
  transition:opacity 180ms ease,transform 180ms ease;
}
.email-copy-toast.is-visible { opacity:1; transform:translate(-50%,0); }
.email-copy-toast.is-error { background:#b00054; }
@media (max-width:560px) { .email-copy-toast { right:18px; bottom:18px; left:18px; text-align:center; transform:translateY(18px); } .email-copy-toast.is-visible { transform:translateY(0); } }
@media (prefers-reduced-motion:reduce) { .email-copy-toast { transition:none; } }