@font-face {
   font-family: "ABC";
   src: url("ABCFavoritExpandedVariable-Trial.ttf") format("truetype");
   font-weight: 400;
   font-style: normal;
}
@font-face {
    font-family: 'Camino';
    src: url('Camino-Regular.woff2') format('woff2'),
        url('Camino-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
:root {
   --text-color: #ea5c1c;
   --background-color: #312515;
   --blue: #9ed2bc;
   --accent-color: #bacf18;
   --font: "ABC", sans-serif;
   --font-title: "Camino", sans-serif;
}

* {
   font-style: var(--font);
   box-sizing: border-box;
}

body {
   background-color: var(--text-color);
   color: var(--background-color);
   font-size: 1rem;
   /* cambio global */
   font-family: var(--font);
   padding: 0;
   margin: 0;
}
html, body {
   width: 100%;
   max-width: 100%;
   overflow-x: hidden;
}
body#nosotras-body {
   background-color: var(--background-color);
   color: var(--text-color);
}
body#nosotras-body #home-link {
   color: var(--text-color);
}

/* Paragraph layout for Nosotras page: keep text left-aligned but add side gutters */
body#nosotras-body main p {
   text-align: left;
}

/* Ensure third paragraph keeps inherited color (remove previous blue) */
body#nosotras-body main p:nth-of-type(3) {
   color: inherit;
}

/* Fourth paragraph on Nosotras: centered, bold, and project blue color; keep side margins */
body#nosotras-body main p:nth-of-type(4) {
   text-align: center;
   font-weight: 700;
   color: var(--blue);
   width: 80%;
   margin: 3em auto;
   text-wrap-style: balance;
}

/* Color only the first word "Amigas" in the first paragraph on the Nosotras page */
body#nosotras-body main p:first-of-type .nos-first {
   color: var(--accent-color);
}
body#consejos-body {
   background-color: var(--background-color);
   color: var(--text-color);
}
body#consejos-body #home-link {
   color: var(--text-color);
}
header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 1em;
   width: 100%;
}
#header-home {
   background-color: var(--text-color);
   width: 100%;
   color: var(--background-color);
   margin: 0;
   padding: 1em;
}
#header-home p {
   margin: 0;
   margin-top: 1rem;
   font-size: 1rem;
   line-height: 1.1;
   width: 100%;
   max-width: none;
   text-align: center;
   white-space: nowrap;
   overflow: visible;
}

h1, h2, h3 {
   font-family: var(--font-title);
   font-weight: 100;
   text-transform: uppercase;
   /* font-variant-ligatures: discretionary-ligatures; */
}

h1 {
   text-align: center;
   color: var(--background-color);
   position: relative;
   margin: -3rem 0 0 0;
   font-size: 24vw;
}

h2 {
   font-size: 15vw;
   margin-bottom: 0;
   text-align: center;
   margin-top: 0;
}

nav {
   display: flex;
   justify-content: center;
   margin-top: 1em;
   float: right;
}
nav#nav-home {
   margin-top: -0.2rem;
   width: 100%;
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   gap: 2rem;
}

/* Home menu link colors: base #312515, hover #bacf18 with typographic variant */
nav#nav-home a {
   color: var(--background-color);
}
nav#nav-home a:hover {
   color: var(--accent-color);
   font-variant-ligatures: discretionary-ligatures;
}

a {
   color: var(--accent-color);
   text-decoration: none;
   font-size: 2em;
   margin: 0 10px;
   text-transform: uppercase;
   font-family: 'Camino';
   align-items: center;
}
nav#nav-home a {
   text-decoration: none;
   font-size: 3rem;
   margin: 0 10px;
   text-transform: uppercase;
   font-family: var(--font-title);
   display: inline-block;
   font-variant-ligatures: none;
}
/* top-nav links use the `.top-nav-link` class in HTML; ID selectors removed as unused */
a#home-link {
   color: var(--background-color);
   font-size: 2rem;
   font-family: var(--font-title);
   text-transform: uppercase;
   transition: all 0.3s ease;
}
a#home-link:hover {
   color: var(--accent-color);
}
/* Reusable hover class: same effect as footer menu links */
.accent-hover {
   color: var(--background-color);
   transition: color 0.25s ease;
}
.accent-hover:hover {
   color: var(--accent-color);
   font-variant-ligatures: discretionary-ligatures;
}

/* Type-only hover: only applies typographic variation, no color change */
.type-hover {
   color: inherit;
   transition: font-variation-settings 0.25s ease, font-variant-ligatures 0.25s ease;
}
.type-hover:hover {
   font-variant-ligatures: discretionary-ligatures;
   color: inherit;
}

/* Subtitle in header (Home) */
.site-subtitle {
   font-size: 1.2rem;
   line-height: 1.05;
   margin: 0 0 0.25rem 0;
   text-align: center;
   white-space: nowrap;
   display: block;
}

/* Stronger selector for Home subtitle to override #header-home p specificity */
#header-home .home-subtitle {
   font-size: clamp(0.95rem, 1.8vw, 1.1rem);
   line-height: 1.05;
   margin: 3.5rem 0 0.12rem 0;
   text-align: center;
   white-space: nowrap;
   display: block;
}

/* Highlight specific words in the Home subtitle */
#header-home .home-subtitle .home-highlight {
   color: #bacf18;
   transition: color 0.3s ease;
   cursor: pointer;
}

#header-home .home-subtitle .home-highlight:hover {
   color: #312515;
}

/* Center main title on consejos page */
body#consejos-body main {
   margin-top: 0;
   padding-top: 0;
}

body#consejos-body h2 {
   text-align: center;
   margin: 0 auto 1rem auto;
   display: block;
}

/* Spacing for the intro paragraphs and form on the consejos page */
body#consejos-body .consejos-intro {
   margin-bottom: 5px;
}
body#consejos-body .consejos-subtext {
   margin-top: 0;
   margin-bottom: 60px;
}
body#consejos-body .consejos-box {
   margin-top: 0;
   margin-bottom: 3rem;
   width: 100%;
   max-width: 820px;
   margin-left: auto;
   margin-right: auto;
   box-sizing: border-box;
   overflow-x: hidden;
   overflow-y: visible;
   overflow: visible !important;
   height: auto !important;
   max-height: none !important;
}

body#consejos-body .consejos-box fieldset {
   margin: 0;
   padding: 0;
   border: none;
}

body#consejos-body .consejos-box fieldset:first-of-type {
   padding: 1.2rem 0 0;
}

body#consejos-body .consejos-box {
   border: none !important;
   padding: 0;
}

body#consejos-body .consejos-box textarea,
body#consejos-body .consejos-box #consejo {
   margin: 0;
   display: block;
}

body#consejos-body .consejos-box .form-actions-row {
   width: 100%;
   margin: 0;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 1rem;
   box-sizing: border-box;
   background-color: #ea5c1c;
   color: #312515;
   padding: 1rem 1rem;
   border-radius: 0;
}

/* Make the textarea in consejos bigger and more comfortable to write in */
body#consejos-body .consejos-box textarea,
body#consejos-body .consejos-box #consejo {
   width: 100%;
   max-width: 100%;
   min-height: 260px;
   padding: 24px 20px;
   box-sizing: border-box;
   resize: vertical;
}

/* Typography and color inside the consejos textarea only */
body#consejos-body .consejos-box textarea,
body#consejos-body .consejos-box #consejo {
   font-family: "ABC", sans-serif;
   color: var(--text-color);
   font-size: 1rem;
   line-height: 1.3;
}

body#consejos-body .consejos-box label {
   display: block;
   font-size: 1.2rem;
   color: #312515;
   margin-bottom: 0.75rem;
}

/* Placeholder styling (keep same font and color) */
body#consejos-body .consejos-box textarea::placeholder,
body#consejos-body .consejos-box #consejo::placeholder {
   font-family: "ABC", sans-serif;
   color: var(--text-color);
   font-size: 1rem;
   opacity: 1;
}

/* Vendor prefixes for placeholder for broader browser support */
body#consejos-body .consejos-box textarea::-webkit-input-placeholder,
body#consejos-body .consejos-box #consejo::-webkit-input-placeholder {
   font-family: "ABC", sans-serif;
   color: var(--text-color);
   opacity: 1;
}
body#consejos-body .consejos-box textarea:-ms-input-placeholder,
body#consejos-body .consejos-box #consejo:-ms-input-placeholder {
   font-family: "ABC", sans-serif;
   color: var(--text-color);
   opacity: 1;
}

/* 'Consejos de otras amigas' section: center title and options; options use café color */
body#consejos-body .consejos-otras-title {
   text-align: center;
   margin: 0 0 0.75rem 0;
}
body#consejos-body .consejos-otras-options {
   /* centered horizontal bar just under the title */
   display: inline-flex;
   justify-content: center;
   align-items: center;
   gap: 2rem;
   text-align: center;
   margin: 0;
   background-color: #bacf18;
   padding: 0.6rem 1.2rem;
   border-radius: 0; /* use sharp corners as requested */
}

/* Shared internal nav style for consejos and rutas pages */
.consejos-filter-wrapper {
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   margin-bottom: 8px;
}

.consejos-filter-bar {
   width: max-content;
}

.consejos-otras-options {
   display: inline-flex;
   justify-content: center;
   align-items: center;
   gap: 2rem;
   text-align: center;
   margin: 0;
   background-color: #bacf18;
   padding: 0.6rem 1.2rem;
   border-radius: 0;
}

.consejos-otras-options a {
   color: #312515;
   text-decoration: none;
   display: inline-block;
   font-size: 2.8rem;
   line-height: 1;
}

.consejos-otras-options a:hover {
   color: var(--text-color);
   font-variant-ligatures: discretionary-ligatures;
}

.consejos-otras-options a.active {
   color: var(--text-color) !important;
   text-decoration: underline;
   font-weight: 400 !important;
   font-variant-ligatures: discretionary-ligatures;
}

.tab-panel {
   display: none;
}

.tab-panel.active {
   display: block;
}

/* Wrapper to ensure the filter bar is perfectly centered in the page */
body#consejos-body .consejos-filter-wrapper {
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   margin-bottom: 8px;
}

/* Explicit bar class: keep width to fit-content so wrapper centers it */
body#consejos-body .consejos-filter-bar {
   width: max-content;
}

/* Responsive tweaks for the consejos options bar */
@media (max-width: 700px) {
   body#consejos-body .consejos-otras-options,
   .consejos-otras-options {
      padding: 0.4rem 0.8rem;
      gap: 1rem;
   }
   body#consejos-body .consejos-otras-options a,
   .consejos-otras-options a {
      font-size: 1.6rem;
   }
}

@media (max-width: 420px) {
   body#consejos-body .consejos-otras-options,
   .consejos-otras-options {
      padding: 0.3rem 0.6rem;
      gap: 0.6rem;
   }
   body#consejos-body .consejos-otras-options a,
   .consejos-otras-options a {
      font-size: 1.4rem;
   }
}

/* Remove blue backgrounds from other section containers on the consejos page so
   only the options bar shows the blue rectangle */
body#consejos-body section {
   background: none !important;
   border-radius: 0 !important;
}
body#consejos-body .consejos-otras-options a {
   color: #312515;
   text-decoration: none;
   display: inline-block;
}
/* Hover for the options: change to project orange */
body#consejos-body .consejos-otras-options a:hover {
   color: var(--text-color);
   font-variant-ligatures: discretionary-ligatures;
}

/* Slightly increase font size for the consejos filter links (only on consejos page) */
body#consejos-body .consejos-otras-options a {
   font-size: 2.8rem;
   line-height: 1;
}

/* visual state for active filter */
body#consejos-body .consejos-otras-options a.active {
   text-decoration: underline;
   font-weight: 400 !important;
   font-variant-ligatures: discretionary-ligatures;
   color: var(--text-color) !important;
}

/* Ensure the title's hover only applies typographic variation (no color change) */
body#consejos-body .consejos-otras-title.type-hover:hover {
   color: inherit;
}

/* Reduce vertical gap between filters and messages in consejos page */
body#consejos-body section#consejos {
   padding-top: 1rem !important;
   margin-top: 1.5rem !important;
   /* remove the global blue background for this section only */
   background: none !important;
}

body#consejos-body .consejos-otras-options {
   margin-bottom: 8px !important;
}

body#consejos-body #consejos-list {
   margin-top: 8px;
   padding-top: 0;
}

/* Remove focus outline for the mensajes textarea only on consejos page */
body#consejos-body .consejos-box textarea:focus,
body#consejos-body .consejos-box #consejo:focus,
body#consejos-body .consejos-box textarea:focus-visible,
body#consejos-body .consejos-box #consejo:focus-visible {
   outline: none !important;
   box-shadow: none !important;
}

/* Form actions row: category left, submit button right */
body#consejos-body .consejos-box {
   position: relative;
   overflow-x: hidden;
}

body#consejos-body .consejos-box .form-actions-row {
   width: 100%;
   margin: 0;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 1rem;
   box-sizing: border-box;
   background-color: #ea5c1c;
   color: #312515;
   padding: 1rem 1rem;
   border-radius: 0;
}

body#consejos-body .consejos-box .categoria-left {
   display: flex;
   align-items: center;
   gap: 0.75rem;
}

body#consejos-body .consejos-box .categoria-left label {
   margin: 0;
   color: #312515;
}

body#consejos-body .consejos-box .submit-right {
   display: flex;
   align-items: center;
}

/* Ensure the submit button hugs the right edge of the form box */
body#consejos-body .consejos-box .submit-right button[type="submit"] {
   margin-left: 0;
}

@media (max-width: 520px) {
   body#consejos-body .consejos-box .form-actions-row {
      flex-direction: column;
      align-items: stretch;
      gap: 0.6rem;
   }
   body#consejos-body .consejos-box .submit-right {
      align-self: flex-end;
   }
}

/* Style only the submit button inside the consejos form */
body#consejos-body .consejos-box button[type="submit"] {
   background-color: #312515;
   color: #ea5c1c;
   border: none;
   outline: none;
   padding: 10px 18px;
   font-family: "ABC", sans-serif;
   cursor: pointer;
   transition: background-color 0.22s ease, color 0.22s ease;
}

body#consejos-body .consejos-box button[type="submit"]:hover,
body#consejos-body .consejos-box button[type="submit"]:focus-visible {
   background-color: #ea5c1c;
   color: #312515;
}

/* Top-right nav links: base + page-specific hover colors */
/* Top-right nav links - global class used in header nav */
.top-nav-link {
   color: var(--accent-color);
   text-decoration: none;
   transition: color 0.18s ease, font-variant-ligatures 0.18s ease;
   font-family: var(--font-title);
   font-variant-ligatures: none;
}
.top-nav-link:hover {
   font-variant-ligatures: discretionary-ligatures;
}

/* Hover color for top-right nav links: orange on hover on all internal pages */
body#nosotras-body header nav a.top-nav-link:hover,
body#consejos-body header nav a.top-nav-link:hover,
body#rutas-body header nav a.top-nav-link:hover {
   color: var(--text-color);
}

/* Ensure the top-left home link (id=home-link) uses green on hover even if body rules set color */
/* routes page palette: cafe background, orange text */
body#rutas-body {
   background-color: var(--background-color);
   color: var(--text-color);
}
body#rutas-body #home-link {
   color: var(--text-color);
}

/* top-left home link hover: green in nosotras/consejos, keep orange (no color change) in rutas */
body#nosotras-body #home-link.accent-hover:hover,
body#consejos-body #home-link.accent-hover:hover {
   color: var(--accent-color);
   font-variant-ligatures: discretionary-ligatures;
}
body#rutas-body #home-link.accent-hover:hover {
   color: #bacf18;
   font-variant-ligatures: discretionary-ligatures;
}
body#rutas-body section,
body#rutas-body .consejos-otras-options,
body#rutas-body .consejos-filter-wrapper,
body#rutas-body #site-footer,
body#rutas-body .footer-content,
body#rutas-body .footer-menu,
body#rutas-body .footer-home-link,
body#rutas-body .footer-menu-link,
body#rutas-body .footer-instagram {
   border-radius: 0 !important;
}
section {
   padding: 3em;
   margin: 3em;
   background-color: var(--blue);
   border-radius: 10px;
}

body#rutas-body section {
   border-radius: 0 !important;
}

article
{
   margin-bottom: 20px;
   background-color: var(--accent-color);
   padding: 1rem;
}

p {
   max-width: 60ch;
   font-family: var(--font);
   font-size: 1.5rem;
}


.text-container {
   width: 80%;
   max-width: 790px;
   margin: 0 auto;
   min-width: 290px;
}

#nosotras {
   background-color: transparent;
   padding: 0;
   margin: 0;
}


/* Footer styling for internal pages */
#site-footer {
   background-color: #ea5c1c;
   width: 100%;
   margin-top: 2rem;
   padding: 0.6rem 1rem; /* compact vertical padding */
   box-sizing: border-box;
   min-height: 3.2rem; /* ensure enough room to separate top and bottom items */
}

#site-footer .footer-content {
   display: flex;
   align-items: center; /* center children vertically */
   gap: 3rem;
   width: 100%;
   box-sizing: border-box;
}

#site-footer .footer-home-link {
   color: var(--background-color);
   font-size: 5rem;
   font-family: var(--font-title);
   text-transform: uppercase;
   text-decoration: none;
   transition: color 0.18s ease;
   margin-left: 20px;
   white-space: nowrap;
   flex-shrink: 0;
   line-height: 1; /* ensure baseline doesn't push content */
   display: inline-flex;
   align-items: center;
}

#site-footer .footer-home-link:hover {
   color: var(--accent-color);
   font-variant-ligatures: discretionary-ligatures;
}

#site-footer .footer-menu {
   display: flex;
   flex-direction: column;
   gap: 0.2rem;
   justify-content: center; /* center menu items vertically */
}

#site-footer .footer-menu-link {
   color: #312515;
   font-size: 2.2rem;
   text-decoration: none;
   font-family: var(--font-title);
   text-transform: uppercase;
   transition: color 0.18s ease;
   line-height: 1;
   margin: 0;
}

#site-footer .footer-menu-link:hover {
   color: #bacf18;
   font-variant-ligatures: discretionary-ligatures;
}

#site-footer .footer-instagram {
   color: var(--background-color);
   font-size: 1.2rem;
   text-decoration: none;
   font-family: var(--font);
   transition: color 0.18s ease;
   margin-left: 0.25rem;
   align-self: flex-end; /* always align Instagram to bottom of footer */
   margin-bottom: 0.15rem; /* small offset so it doesn't touch the edge */
}

/* Footer social block: credit above Instagram link */
.footer-social {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   justify-content: space-between;
   margin-left: auto; /* push block to the far right */
   gap: 0.25rem;
   align-self: stretch; /* let it fill footer height */
   height: 100%;
   box-sizing: border-box;
   padding-top: 0;
   padding-bottom: 0;
}

.footer-credit {
   font-weight: 700;
   color: var(--background-color);
   font-family: var(--font);
   font-size: 1rem;
   line-height: 1;
}

.footer-credit {
   margin-top: 20px;
}

#site-footer .footer-instagram:hover {
   color: var(--accent-color);
}

.footer-instagram {
   margin-top: auto;
   margin-bottom: 20px;
   align-self: flex-end;
}

/* Rutas-specific: reduce large gap before footer */
body#rutas-body main {
   min-height: auto !important;
   margin-bottom: 0 !important;
   padding-bottom: 0 !important;
}

body#rutas-body #site-footer {
   margin-top: 0 !important;
   padding-top: 0.4rem !important;
   padding-bottom: 0.4rem !important;
}

/* Consistent spacing between page content and footer for internal pages */
body#consejos-body main,
body#rutas-body main,
body#nosotras-body main {
   padding-bottom: 4.5rem; /* comfortable gap before footer */
   box-sizing: border-box;
}

/* Map container: ensure visible size on Rutas page */
/* Rutas section & menu layout */
.rutas-section {
   width: 100%;
   max-width: 100%;
   overflow-x: hidden;
   margin: 0;
   padding-left: 0;
   padding-right: 0;
   box-sizing: border-box;
   background-color: #312515;
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 0 0 80px 0;
}

.rutas-menu {
   width: 86%;
   max-width: 1500px;
   margin: 0 auto;
   padding: 35px 60px;
   box-sizing: border-box;
   background-color: #9ed2bc;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 40px;
   overflow: visible;
}

.rutas-menu a {
   font-size: clamp(28px, 3vw, 52px);
   line-height: 1;
   white-space: nowrap;
   color: #312515;
   text-decoration: none;
}

.rutas-menu a:hover {
   color: var(--text-color);
   font-variant-ligatures: discretionary-ligatures;
}

.rutas-menu a.active {
   color: var(--text-color);
   text-decoration: underline;
   font-variant-ligatures: discretionary-ligatures;
}

#lista-lugares ul li:hover {
   background: rgba(0,0,0,0.03);
}

#mapa {
   width: 90%;
   max-width: 1100px;
   height: 500px;
   margin: 40px auto 0 auto;
   display: block;
   position: relative;
}

/* Intro text for the Rutas page: visually aligned with the map container */
.rutas-intro {
   width: 90%;
   max-width: 1100px;
   margin: 60px auto 90px auto;
   color: #ea5c1c;
   text-align: center;
   font-size: clamp(20px, 1.5vw, 26px);
   line-height: 1.5;
}

.rutas-intro span.highlight {
   color: #9ed2bc;
}

.intro-pregunta {
  display: block;
  margin-bottom: 28px;
}


/* Lista de lugares: wrapper, título y columnas */
#lista-lugares-wrapper {
   width: 90%;
   max-width: 1100px;
   margin: 32px auto 80px auto;
   display: none;
}

#lista-titulo {
   background-color: #9ed2bc;
   color: #ea5c1c;
   border-radius: 0;
   padding: 18px 28px;
   margin-bottom: 18px;
   font-size: clamp(28px, 3vw, 48px);
   line-height: 1;
}

#lista-lugares {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 18px;
}

.lista-columna {
   background-color: #9ed2bc;
   border-radius: 0;
   padding: 22px;
   min-height: 160px;
}

.lugar-item {
   display: block;
   cursor: pointer;
   color: #312515;
   font-size: 18px;
   line-height: 1.2;
   margin-bottom: 14px;
   text-decoration: none;
   background: transparent;
   border: none;
   text-align: left;
   padding: 0;
   font-family: var(--font);
}

.lugar-item:hover {
   color: #ea5c1c;
   text-decoration: underline;
}