/* Teknés: the look of the old WordPress theme, lightly modernized. */

@font-face { font-family: "Oswald"; font-style: normal; font-weight: 200 700; font-display: swap; src: url("fonts/oswald.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("fonts/open-sans.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: italic; font-weight: 300 800; font-display: swap; src: url("fonts/open-sans-italic.woff2") format("woff2"); }

:root {
  --verde: #a6c282;          /* brand green: titles on dark backgrounds, rules */
  --verde-titulo: #6c8b4a;   /* same hue, dark enough for large titles on white */
  --verde-vivo: #71c837;     /* the logo wave: mask line, hamburger, focus */
  --naranja: #ff812a;        /* links on dark backgrounds */
  --naranja-texto: #a1480d;  /* links on light backgrounds (WCAG AA) */
  --texto: #464646;
  --gris: #5b5b5b;
  --lavanda: #e2e1ef;        /* page titles over photos */
  --oliva: rgb(74 88 63 / 85%);
  --pie: #e2e2e2;
  --subpie: #767676;
  --fondo-pagina: #fff;
  --oswald: "Oswald", "Arial Narrow", sans-serif;
  --sans: "Open Sans", Arial, sans-serif;
  --gutter: clamp(16px, 3vw, 30px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 6rem; }
body { display: flex; flex-direction: column; min-height: 100dvh; margin: 0; font: 400 1.0625rem/1.6 var(--sans); color: var(--texto); background: var(--fondo-pagina); }
main { flex: 1; }
h1, h2, h3, h4, p, ul, ol, blockquote, figure { margin: 0; }
img, video, iframe { max-width: 100%; }
img { height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--verde-vivo); outline-offset: 2px; }

.wrap { width: 100%; max-width: 1330px; margin-inline: auto; padding-inline: var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 200; padding: .5rem 1rem; background: #fff; color: #000; }
.skip:focus { top: 1rem; }

/* ------------------------------------------------------------ header */

.site-header { position: fixed; inset: 0 0 auto; z-index: 100; transition: background-color .4s; }
.site-header.scrolled { background: var(--oliva); backdrop-filter: blur(8px); }
.header-wrap { max-width: 1800px; display: flex; align-items: flex-start; gap: 2rem; padding-block: 10px 7px; }
.logo { flex: none; line-height: 0; }
.logo img { width: clamp(50px, 6vw, 91px); transition: width .3s; }
.scrolled .logo img { width: 50px; }

.menu { margin-inline: auto; }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu > ul { display: flex; flex-wrap: wrap; column-gap: clamp(1.25rem, 2.6vw, 2.5rem); }
.menu > ul > li { position: relative; }
.menu a { display: block; color: #fff; text-decoration: none; }
.menu > ul > li > a { padding: 12px 5px 8px; font: 700 1rem/1.2 var(--oswald); letter-spacing: .01em; border-bottom: 2px solid transparent; }
.menu > ul > li > a:hover, .menu > ul > li.actual > a { border-color: #fd842b; }
.sub { display: none; position: absolute; top: 100%; left: 0; min-width: 17rem; padding: .5rem .75rem; background: var(--oliva); backdrop-filter: blur(8px); }
.has-sub:hover > .sub, .has-sub:focus-within > .sub { display: block; }
.sub a { padding: 6px 0; font: 400 .95rem/1.3 var(--oswald); border-bottom: 2px solid transparent; width: fit-content; }
.sub a:hover, .sub a[aria-current] { border-color: #fd842b; }
.menu-toggle { display: none; }

@media (max-width: 1050px) {
  .header-wrap { align-items: center; }
  .menu-toggle { display: block; position: relative; margin-left: auto; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
  .menu-toggle::before, .menu-toggle::after { content: ""; position: absolute; left: 11px; width: 22px; height: 2px; background: var(--verde-vivo); transition: transform .2s; }
  .menu-toggle::before { top: 15px; box-shadow: 0 6px 0 var(--verde-vivo); }
  .menu-toggle::after { top: 27px; }
  .menu-toggle[aria-expanded="true"]::before { top: 21px; transform: rotate(45deg); box-shadow: none; }
  .menu-toggle[aria-expanded="true"]::after { top: 21px; transform: rotate(-45deg); }
  .menu { display: none; position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100dvh - 80px); overflow-y: auto; background: #444; text-align: center; }
  .menu.open { display: block; }
  .site-header:has(.menu.open) { background: #444; }
  .menu > ul { flex-direction: column; }
  .menu > ul > li { border-bottom: 1px solid #343f3f; }
  .menu > ul > li > a { display: inline-block; padding: 15px; font-size: 1.25rem; }
  .sub { display: block; position: static; min-width: 0; padding: 0 0 .75rem; background: none; backdrop-filter: none; }
  .sub a { display: inline-block; font-size: 1.05rem; }
}

/* ------------------------------------------------------------ page headers */

.mask { position: absolute; left: 0; bottom: -1px; z-index: 2; width: 100%; height: auto; aspect-ratio: 1600 / 397; pointer-events: none; }
.mask-fill { fill: var(--fondo-pagina); }
.mask-line { fill: none; stroke: var(--verde-vivo); stroke-width: 4; vector-effect: non-scaling-stroke; }
.mask-flip { top: -1px; bottom: auto; transform: scaleY(-1); }
.mask-flip .mask-line { display: none; }

h1 { font: 400 clamp(1.9rem, 3.2vw, 2.4rem)/1.2 var(--oswald); color: var(--lavanda); }
.subtitle { margin-top: .3rem; font: 300 clamp(1.05rem, 1.7vw, 1.375rem)/1.3 var(--sans); color: var(--lavanda); }

/* Heights via max()/clamp(), not aspect-ratio + min-height: that pair transfers a min-width and overflows on phones. */
.band { position: relative; overflow: hidden; height: max(340px, 27.5vw); background: #333; }
.band-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(rgb(0 0 0 / 45%), rgb(0 0 0 / 15%) 70%); }
.band-text { position: relative; z-index: 2; padding-top: clamp(96px, 8.5vw, 125px); text-align: center; }

.plain { padding-top: clamp(100px, 8.5vw, 125px); padding-bottom: clamp(1.5rem, 4vw, 3rem); text-align: center; }

.hero { position: relative; overflow: hidden; background: #333; }
.hero-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; list-style: none; margin: 0; padding: 0; }
.hero-track::-webkit-scrollbar { display: none; }
.hero-slide { position: relative; flex: 0 0 100%; height: clamp(440px, 56.25vw, 92vh); scroll-snap-align: start; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgb(0 0 0 / 50%), rgb(0 0 0 / 10%) 60%); }
.hero-text { position: relative; z-index: 1; padding-top: clamp(110px, 10vw, 150px); text-align: center; color: #fff; }
.hero-title { max-width: 20ch; margin-inline: auto; font: 400 clamp(2rem, 4.4vw, 3.625rem)/1.1 var(--oswald); text-transform: uppercase; text-wrap: balance; }
.hero-subtitle { margin-top: .5rem; font: 300 clamp(1rem, 1.6vw, 1.375rem)/1.3 var(--sans); }
.hero-nav {
  position: absolute; top: 38%; z-index: 3; width: 46px; height: 64px; border: 0; cursor: pointer; opacity: .85;
  background: rgb(0 0 0 / 25%) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center / 26px no-repeat;
  transition: opacity .2s, background-color .2s;
}
.hero-nav:hover { opacity: 1; background-color: var(--naranja); }
.hero-nav.prev { left: 16px; transform: scaleX(-1); }
.hero-nav.next { right: 16px; }
@media (max-width: 650px) { .hero-nav { display: none; } }

/* Full-page fixed photo with white text. A fixed pseudo-element instead of background-attachment, which iOS ignores. */
body.fondo { --fondo-pagina: #444; color: #fff; }
body.fondo::before { content: ""; position: fixed; inset: 0; z-index: -1; background: linear-gradient(rgb(0 0 0 / 40%), rgb(0 0 0 / 40%)), var(--fondo) center / cover no-repeat, #444; }

/* ------------------------------------------------------------ content */

.content { padding-block: clamp(2rem, 5vw, 3.5rem); }
.content.narrow { max-width: 1050px; }
.home .content { padding-top: 0; }

.prose > * + * { margin-top: 1em; }
.prose h2 { margin-top: 1.6em; font: 700 1.55rem/1.25 var(--sans); }
.prose h3 { margin-top: 1.5em; font: 700 1.3rem/1.25 var(--sans); }
.prose h4 { margin-top: 1.4em; font: italic 400 1.0625rem/1.3 var(--sans); }
.prose ul, .prose ol, .box ul, .box ol { padding-left: 1.25em; }
.prose li + li, .box li + li { margin-top: .4em; }
.prose li::marker, .box li::marker { color: var(--verde); }
.prose blockquote { padding-left: 1rem; border-left: 3px solid var(--verde); }
.prose img, .prose video, .prose audio { display: block; }
.prose img { border-radius: 2px; }
.prose video, .prose audio { width: 100%; }
.prose iframe, .box iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; }
.prose table { width: 100%; border-collapse: collapse; }
.prose th, .prose td { padding: .4rem .6rem; border-bottom: 1px solid #d6d6d6; text-align: left; }
.prose a, .box a:not(h2 a) { color: var(--naranja-texto); font-weight: 700; text-underline-offset: .15em; text-decoration-thickness: 1px; }
.fondo .prose a, .fondo .box a:not(h2 a) { color: var(--naranja); }
.prose a:hover, .box a:not(h2 a):hover { color: var(--verde-vivo); }

.galeria { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.galeria img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; }
@media (max-width: 600px) { .galeria { grid-template-columns: 1fr; } }

.aviso { display: block; padding: .75rem 1rem; border-left: 4px solid var(--naranja); background: #fff3cd; color: #5c4400; font-size: .95rem; }

/* Access pages (`accesos: sí`): each list item "[Nombre](url) descripción" is a big row with an arrow. */
.accesos ul { max-width: 680px; margin-inline: auto; padding: 0; list-style: none; }
.accesos li {
  position: relative; padding: clamp(1.4rem, 3.2vw, 2.4rem) 68px clamp(1.4rem, 3.2vw, 2.4rem) 0;
  font-size: clamp(.88rem, 1.4vw, .98rem); line-height: 1.5; color: var(--gris); transition: padding-left .25s;
}
.accesos li + li { margin-top: 0; border-top: 1px solid #e3e4e6; }
.accesos li > a, .accesos li > a:hover { display: block; margin-bottom: .3rem; font: 400 clamp(1.42rem, 3vw, 2.05rem)/1.1 var(--oswald); color: var(--texto); text-transform: uppercase; text-decoration: none; }
.accesos li > a::after { content: ""; position: absolute; inset: 0; }  /* the whole row is the link */
.accesos li > a:focus-visible { outline: none; }
.accesos li:has(> a:focus-visible) { outline: 3px solid var(--verde-vivo); outline-offset: 4px; }
.accesos li::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 3px; background: var(--verde-vivo); transform: scaleY(0); transform-origin: top; transition: transform .25s; }
.accesos li::after {
  content: ""; position: absolute; top: 50%; right: 0; width: 48px; height: 48px; margin-top: -24px; border: 1px solid #d5d7da; border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d6368' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center / 18px no-repeat;
  transition: background-color .25s, border-color .25s;
}
.accesos li:hover, .accesos li:has(> a:focus-visible) { padding-left: 18px; }
.accesos li:hover::before, .accesos li:has(> a:focus-visible)::before { transform: scaleY(1); }
.accesos li:hover::after, .accesos li:has(> a:focus-visible)::after {
  border-color: var(--verde-vivo); background-color: var(--verde-vivo);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E");
}
.fondo .accesos li { color: #ddd; }
.fondo .accesos li + li { border-color: rgb(255 255 255 / 25%); }
.fondo .accesos li > a { color: #fff; }
@media (max-width: 700px) {
  .accesos li { padding-right: 56px; }
  .accesos li::after { width: 40px; height: 40px; margin-top: -20px; background-size: 16px; }
}

.lead { margin-bottom: clamp(2rem, 4vw, 3rem); font: 400 clamp(1.35rem, 2.4vw, 1.75rem)/1.2 var(--sans); color: var(--gris); text-align: center; }
.lead p { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.75rem); }
.lead p::before, .lead p::after { content: ""; flex: 1; min-width: 1.5rem; border-top: 1px solid #999; }
@media (max-width: 650px) { .lead p::before, .lead p::after { display: none; } }

.boxes { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.75rem) clamp(1.5rem, 4vw, 3.75rem); }
.cols-2 { --cols: 2; }
.cols-3 { --cols: 3; }
.cols-4 { --cols: 4; }
.box { display: flex; flex-direction: column; gap: 1rem; }
.box > h2 + p:has(> img:only-child) { order: -1; }  /* an image right under the title is shown above it */
.box h2 { padding-bottom: .6rem; border-bottom: 1px solid var(--verde); font: 400 clamp(1.6rem, 2.3vw, 1.875rem)/1.1 var(--oswald); color: var(--verde-titulo); }
.fondo .box h2 { color: var(--verde); }
.box h2 a { color: inherit; text-decoration: none; }
.box h2 a:hover { color: var(--naranja-texto); }
.box blockquote { font: 700 clamp(1.4rem, 2.1vw, 1.5625rem)/1.2 var(--oswald); color: var(--verde-titulo); text-align: center; }
.box blockquote strong { display: block; font-size: 2.2em; line-height: 1.05; word-break: break-word; }
.fondo .box strong { color: var(--verde); }
.box img { align-self: flex-start; }
.box:has(> blockquote) { text-align: center; }  /* a box with a highlight is a centred feature box */
.box:has(> blockquote) img { align-self: center; }
.home .box h2 { border: 0; padding-bottom: 0; color: var(--gris); }
@media (max-width: 1100px) { .cols-3, .cols-4 { --cols: 2; } }
@media (max-width: 650px) { .boxes { --cols: 1; } }

.cita { max-width: 1050px; padding-block: 0 clamp(2rem, 5vw, 3.5rem); font: 400 clamp(1.4rem, 2.6vw, 2.25rem)/1.2 var(--sans); color: var(--gris); text-align: center; text-wrap: balance; }
.cita::before { content: "“"; }
.cita::after { content: "”"; }
.final { position: relative; line-height: 0; }
.final-img { width: 100%; height: max(200px, 33.75vw); object-fit: cover; }

/* ------------------------------------------------------------ listings and articles */

.intro { max-width: 1050px; margin: 0 auto 2.5rem; text-align: center; }
.empty { text-align: center; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3rem) clamp(1rem, 2.2vw, 1.875rem); }
@media (max-width: 1100px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 650px) { .cards { grid-template-columns: 1fr; } }
.card { position: relative; display: flex; flex-direction: column; }
.card-media { position: relative; overflow: hidden; border-radius: 2px; background: #ddd; }
.card-img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s; }
.card-media::after {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .3s;
  background: rgb(0 0 0 / 50%) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 46' fill='none' stroke='%23fff' stroke-width='2'%3E%3Ccircle cx='23' cy='23' r='21'/%3E%3Cpath d='M23 14v18M14 23h18'/%3E%3C/svg%3E") center / 46px no-repeat;
}
.card:hover .card-media::after, .card:focus-within .card-media::after { opacity: 1; }
.card:hover .card-img { transform: scale(1.04); }
.card-title { padding: .8rem 0 .5rem; border-bottom: 1px solid #d6d6d6; font: 700 clamp(1.3rem, 1.9vw, 1.5rem)/1.15 var(--oswald); color: var(--verde-titulo); }
.fondo .card-title { border-color: var(--verde); color: var(--verde); }
.card-title a { color: inherit; text-decoration: none; }
.card-title a::after { content: ""; position: absolute; inset: 0; }  /* the whole card is the link */
.card-title a:focus-visible { outline: none; }
.card:has(a:focus-visible) { outline: 3px solid var(--verde-vivo); outline-offset: 4px; }
.card-date { margin-top: .6rem; font-size: .8rem; color: #666; }
.fondo .card-date { color: #ddd; }
.card-summary { margin-top: .4rem; font-size: 1rem; }

.article .cover { display: block; width: 100%; margin-bottom: 2rem; border-radius: 2px; }
.back { margin-top: 2.5rem; }
.back a { color: var(--naranja); text-decoration: none; }
.back a:hover { color: #fff; }

/* ------------------------------------------------------------ footer */

.site-footer { background: var(--pie); color: #595959; }
.footer-wrap { max-width: 1800px; display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 1.5rem 2rem; align-items: start; padding-block: 20px; }
.footer-logo { width: 91px; }
.site-footer address { font-style: normal; font-size: .875rem; line-height: 1.55; }
.site-footer address strong { display: inline-block; margin-bottom: .6rem; }
.site-footer address a { color: var(--naranja-texto); }
.footer-links { list-style: none; margin: 0; padding: 1rem 1.25rem; border-left: 1px solid #6b6b6b; font-size: .85rem; line-height: 2; }
.footer-links a { color: #595959; text-decoration: none; }
.footer-links a:hover { color: #000; }
.subfooter { padding-block: 10px; background: var(--subpie); color: #fff; font-size: .8rem; }
@media (max-width: 650px) {
  .footer-wrap { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .footer-links { padding: 0; border: 0; }
  .subfooter { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}