/*
Theme Name: reurbe
Theme URI: https://github.com/JulianC606/reurbe-landing-2
Author: Reurbe
Author URI: https://reurbe.com
Description: Tema FSE personalizado de Reurbe con Tailwind CSS v4.
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.2
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: reurbe
Tags: full-site-editing, block-template-parts, block-patterns, custom-colors, wide-blocks
*/

@font-face {
	font-family:BentonSans;
	src:url(./assets/fonts/BentonSans%20Regular.otf)format("opentype");
	font-weight:400;
	font-style:normal;
	font-display:swap
}

@font-face {
	font-family:BentonSans;
	src:url(./assets/fonts/BentonSans%20Book.otf)format("opentype");
	font-weight:300;
	font-style:normal;
	font-display:swap
}

@font-face{
	font-family:BentonSans;
	src:url(./assets/fonts/BentonSans%20Medium.otf)format("opentype");
	font-weight:500;
	font-style:normal;
	font-display:swap
}
@font-face{
	font-family:BentonSans;
	src:url(./assets/fonts/BentonSans%20Bold.otf)format("opentype");
	font-weight:700;
	font-style:normal;
	font-display:swap
}
@font-face{
	font-family:BentonSans;
	src:url(./assets/fonts/BentonSans%20Black.otf)format("opentype");
	font-weight:900;
	font-style:normal;
	font-display:swap;
}

html body,html body * {
	font-family: BentonSans !important
}

/**
 * Top bar
 **/
#reurbe-topbar,
#reurbe-header {
  transition: all 0.3s;
}

#reurbe-topbar {
  z-index: 50;
  background: 0 0;
  padding: 1.25rem 2.5rem;
  top: 0;
  left: 0;
  right: 0;
  position: fixed !important;
}
.editor-styles-wrapper #reurbe-topbar,
.block-editor-iframe__body #reurbe-topbar {
  position: relative !important;
}
.reurbe-main-nav a,
.reurbe-main-nav button,
#reurbe-topbar .wp-block-site-title a {
  font-size: 1.125rem;
  font-weight: 500;
  color: #fff !important;
  text-decoration: none !important;
}
.reurbe-main-nav a:hover,
.reurbe-main-nav button:hover {
  opacity: 0.8;
}
#reurbe-topbar.scrolled {
  box-shadow: 0 4px 6px #0000001a;
  background-color: #fffffff2 !important;
}
#reurbe-topbar.scrolled .wp-block-site-title a,
#reurbe-topbar.scrolled #reurbe-header h1 a,
#reurbe-topbar.scrolled .reurbe-main-nav a,
#reurbe-topbar.scrolled .reurbe-main-nav button,
#reurbe-topbar.scrolled .reurbe-lang-btn {
  color: var(--wp--preset--color--black) !important;
}
#reurbe-topbar.scrolled .reurbe-lang-btn--active {
  color: var(--wp--preset--color--primary);
	border-bottom-color: var(--wp--preset--color--primary) !important;
}

.reurbe-lang-switcher {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	line-height: 1;
	color: inherit;
}
.reurbe-lang-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.25rem 0.4rem;
	color: rgba(255,255,255,0.7);
	text-decoration: none;
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	line-height: 1;
	border-bottom: 2px solid transparent;
	transition: color .2s ease, border-color .2s ease;
}
.reurbe-lang-sep {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	color: currentColor;
	opacity: 0.85;
	font-weight: 700;
	font-size: 0.85rem;
	line-height: 1;
}
.reurbe-lang-btn:hover {
	color: #fff;
}
.reurbe-lang-btn--active {
	color: #fff;
	border-bottom-color: var(--wp--preset--color--primary);
}
/* Ensure the separator matches header text when header becomes opaque */
#reurbe-topbar.scrolled .reurbe-lang-switcher {
	color: #111 !important;
}
#reurbe-topbar:not(.scrolled) .reurbe-lang-switcher {
	color: rgba(255,255,255,0.7) !important;
}

#reurbe-topbar .custom-logo {
	transition: all 0.3s;
}

#reurbe-topbar:not(.scrolled) .custom-logo {
	filter: brightness(0) invert(1);
}

/* ─── Project filter: tag button active states ───────────────── */
/* These are applied via JS (project-filter.js) so they can't live as  */
/* Tailwind utility classes — Tailwind doesn't scan JS files.          */
.tag-filter-active-0 {
	background-color: color-mix(in srgb, var(--wp--preset--color--secondary)   15%, transparent);
	border-color:     color-mix(in srgb, var(--wp--preset--color--secondary)   35%, transparent);
	color:            var(--wp--preset--color--secondary);
}
.tag-filter-active-1 {
	background-color: color-mix(in srgb, var(--wp--preset--color--primary)  15%, transparent);
	border-color:     color-mix(in srgb, var(--wp--preset--color--primary)  35%, transparent);
	color:            var(--wp--preset--color--primary);
}
.tag-filter-active-2 {
	background-color: color-mix(in srgb, var(--wp--preset--color--tertiary) 20%, transparent);
	border-color:     color-mix(in srgb, var(--wp--preset--color--tertiary) 35%, transparent);
	color:            var(--wp--preset--color--tertiary);
}

/* Hover: inactive tag buttons */
.tag-filter-btn:hover {
	background-color: #e2e8f0;
	border-color:     #94a3b8;
	color:            #334155;
}
/* Hover: active tag buttons — deepen the tint */
.tag-filter-active-0:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--secondary)   28%, transparent);
	border-color:     color-mix(in srgb, var(--wp--preset--color--secondary)   60%, transparent);
}
.tag-filter-active-1:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--primary)  28%, transparent);
	border-color:     color-mix(in srgb, var(--wp--preset--color--primary)  60%, transparent);
}
.tag-filter-active-2:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--tertiary) 35%, transparent);
	border-color:     color-mix(in srgb, var(--wp--preset--color--tertiary) 60%, transparent);
}



/* ==========================================================================
   reurbe-shortcodes.css
   Styles for the [reurbe-*] WordPress shortcodes.

   Requires CSS custom properties defined in the theme:
     --color-reurbe-blue
     --color-reurbe-green
     --color-reurbe-salmon

   ISOLATED: this file is self-contained for the four reurbe shortcodes.
   Do not depend on any theme or plugin CSS.

   Class prefix: .rsc-  (reurbe-shortcode)
   ========================================================================== */


/* --------------------------------------------------------------------------
   Filter bar  (.rsc-filter-*)
   Shared between [reurbe-project-archive] and [reurbe-taxonomy-servicio].
   -------------------------------------------------------------------------- */

.rsc-filter-bar {
    padding: 2.5rem 2rem 1rem;
    max-width: 1000px;
    margin: 0 auto;
}

/* Compact top-padding variant used in taxonomy-servicio tag bar */
.rsc-filter-bar--compact {
    padding-top: 0.5rem;
}

.rsc-filter-label {
    margin: 0 0 1rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #94a3b8; /* slate-400 */
}

/* Extra top margin for the Tags label that follows the Service filter row */
.rsc-filter-label--spaced {
    margin-top: 2.25rem;
}

.rsc-filter-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.rsc-filter-btn {
    border-radius: 2px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid #d1d5db; /* gray-300 */
    background: #ffffff;
    color: #4b5563; /* gray-600 */
    cursor: pointer;
    padding: 0.5rem 1.4rem;
    transition: all 0.15s ease;
}

/* Active (selected) service filter button */
.rsc-filter-btn--active {
    background: var(--wp--preset--color--primary);
    border-color: var(--wp--preset--color--primary);
    color: #ffffff;
}


/* --------------------------------------------------------------------------
   Tag filter bar  (.rsc-tag-*)
   -------------------------------------------------------------------------- */

.rsc-tag-scroll {
    overflow-x: auto;
    padding-bottom: 0.5rem;
    /* hide scrollbar cross-browser */
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.rsc-tag-scroll::-webkit-scrollbar {
    display: none;
}

.rsc-tag-buttons {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.75rem;
    min-width: max-content;
}

.rsc-tag-btn {
    border-radius: 2px;
    font-size: 0.75rem;
    font-weight: 700;
    border: 1px solid #cbd5e1; /* slate-300 */
    background: #f8fafc;       /* slate-50  */
    color: #64748b;            /* slate-500 */
    cursor: pointer;
    padding: 0.5rem 1.4rem;
    transition: all 0.15s ease;
}


/* --------------------------------------------------------------------------
   Project / Service grid  (.rsc-grid*)
   -------------------------------------------------------------------------- */

.rsc-grid {
    display: grid;
    max-width: 1000px;
    margin: 0 auto;
}

.rsc-grid--1col {
    grid-template-columns: 1fr;
}

.rsc-grid--2col {
    grid-template-columns: repeat(2, 1fr);
}

.rsc-grid--3col {
    grid-template-columns: repeat(3, 1fr);
}

.rsc-grid--4col {
    grid-template-columns: repeat(4, 1fr);
}

.rsc-grid--5col {
    grid-template-columns: repeat(5, 1fr);
}

.rsc-grid--6col {
    grid-template-columns: repeat(6, 1fr);
}

.rsc-grid--7col {
    grid-template-columns: repeat(7, 1fr);
}

.rsc-grid--8col {
    grid-template-columns: repeat(8, 1fr);
}

/* Responsive variant: single column mobile, two columns ≥768 px */
.rsc-grid--2col-responsive {
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .rsc-grid--2col-responsive {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* --------------------------------------------------------------------------
   Card  (.rsc-card*)
   Shared between project-archive, service-archive and taxonomy-servicio.
   -------------------------------------------------------------------------- */

.rsc-card {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background-color: #0d0d0d;
}

/* ---- image ---- */

.rsc-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 550ms ease-in-out;
}

.rsc-card:hover .rsc-card__img {
    transform: scale(1.07);
}

/* ---- placeholder (shown when no featured image) ---- */

.rsc-card__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background-color set inline — dynamic PHP $color variable */
}

/* ---- colour overlay ---- */

.rsc-card__overlay {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 400ms ease;
    /* background-color set inline — dynamic PHP $color variable */
}

.rsc-card:hover .rsc-card__overlay {
    opacity: 0.72;
}

/* ---- hover content (centred) — project-archive & taxonomy-servicio ---- */

.rsc-card__content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 2.5rem;
    text-align: center;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 350ms ease, transform 350ms ease;
    z-index: 2;
    pointer-events: none;
}

.rsc-card:hover .rsc-card__content {
    opacity: 1;
    transform: translateY(0);
}

/* ---- hover content (bottom-aligned) — service-archive ---- */

.rsc-card__content--bottom {
    /* override inset: 0 from base rule */
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 2rem 2.5rem 2.2rem;
    text-align: left;
}

/* ---- shared content elements ---- */

.rsc-card__title {
    color: #ffffff;
    font-size: 1.35rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.2;
    margin: 0 0 0.8rem;
}

.rsc-card__divider {
    width: 2rem;
    height: 3px;
    background: rgba(255, 255, 255, 0.75);
    margin-bottom: 0.75rem;
}

.rsc-card__subtitle {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0;
}

/* Full-card clickable link overlay */
.rsc-card__link {
    position: absolute;
    inset: 0;
    z-index: 3;
}


/* --------------------------------------------------------------------------
   Empty / no-results state  (.rsc-empty)
   -------------------------------------------------------------------------- */

.rsc-empty {
    grid-column: 1 / -1;
    padding: 4rem 0;
    text-align: center;
    color: #9ca3af; /* gray-400 */
}

.rsc-empty p {
    margin: 0;
}


/* --------------------------------------------------------------------------
   Single project layout  (.rsc-sp-*)
   Used by [reurbe-project-single].
   -------------------------------------------------------------------------- */

.rsc-sp-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 3.5rem 0 5rem;
    box-sizing: border-box;
}

.rsc-sp-back {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    text-decoration: none;
    color: var(--wp--preset--color--primary);
    margin-bottom: 2.5rem;
}

.rsc-sp-grid {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 4rem;
    align-items: start;
    width: 100%;
}

@media (max-width: 700px) {
    .rsc-sp-grid {
        grid-template-columns: 1fr;
    }
}

.rsc-sp-title {
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--wp--preset--color--primary);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    line-height: 1.15;
    margin: 0 0 2rem;
}

.rsc-sp-body {
    font-size: 0.95rem;
    line-height: 1.85;
    color: #374151;
}

.rsc-sp-ficha {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.88rem;
    line-height: 1.75;
    color: #374151;
}

.rsc-sp-ficha__row {
    margin: 0;
}

.rsc-sp-ficha__label {
    font-weight: 700;
    color: var(--wp--preset--color--secondary);
}


.rsc-sp-ficha__link {
    color: inherit;
    text-decoration: none;
    margin-right: 0.25rem;
}

.rsc-sp-grid-section {
    margin-top: 2.5rem;
}


/* --------------------------------------------------------------------------
   Taxonomy servicio — hero  (.rsc-hero*)
   Used by [reurbe-taxonomy-servicio].
   -------------------------------------------------------------------------- */

.rsc-hero {
    position: relative;
    background-color: #111827; /* gray-900 */
    color: #ffffff;
    overflow: hidden;
    height: 60vh;
    min-height: 380px;
}

.rsc-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.78;
}

.rsc-hero__gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, transparent 50%);
}


/* --------------------------------------------------------------------------
   Taxonomy servicio — service intro  (.rsc-service-intro*)
   -------------------------------------------------------------------------- */

.rsc-service-intro {
    max-width: 1000px;
    margin: 0 auto;
    padding: 3rem 0 1.25rem;
}

.rsc-service-intro__title {
    margin: 0 0 1rem;
    font-size: 1.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    line-height: 1.15;
    color: var(--wp--preset--color--primary);
}

.rsc-service-intro__desc {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.85;
    color: #374151;
    max-width: 760px;
}


/* --------------------------------------------------------------------------
   Taxonomy servicio — back link footer  (.rsc-back-link*)
   -------------------------------------------------------------------------- */

.rsc-back-link-wrap {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem 0 2.5rem;
}

.rsc-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--wp--preset--color--primary);
    transition: gap 0.15s ease;
}

.rsc-back-link:hover {
    gap: 0.75rem;
}

/* Left-aligned separator variant (used in all sections except the centered intro) */
.about-intro-line--left.wp-block-separator {
  margin-left: 0;
  margin-right: auto;
}

/* Value card — number label opacity */
.value-number { opacity: 0.6; }
.value-number--bright { opacity: 1; }

/* Value card — 24 px accent line */
.value-accent.wp-block-separator {
  width: 24px;
  max-width: 24px;
  height: 2px;
  border: none;
  margin-left: 0;
  margin-right: auto;
}

/* How We Work — icon lists */
.hw-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hw-list li {
  position: relative;
  padding-left: 30px;
  font-size: 14px;
  line-height: 1.6;
}
.hw-list--yes li { color: #141B26; }
.hw-list--no  li { color: #a0aab4; }

.hw-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.hw-list--yes li::before {
  content: "✓";
  background: #e6f4ee;
  color: #1D9E75;
}
.hw-list--no li::before {
  content: "✕";
  background: #2a3245;
  color: #e05252;
}

/* Team card — clip photo corners */
.team-card { overflow: hidden; }

/* Button hover */
.wp-block-button__link:hover {
  background-color: #157a5a !important;
}