/* Import the custom signature typeface used for calligraphic accents and buttons.
   This font is loaded from CDNFonts which hosts the “Sebastian Signature”
   webfont.  If the font fails to load the fallback chain will gracefully
   revert to the existing script or cursive stacks. */
@import url('https://fonts.cdnfonts.com/css/sebastian-signature');

/*
  Embed the Sebastian Signature font with swap behaviour.  This rule
  serves as a fallback in case the CDN import above fails to load. By
  specifying `font-display: swap` we ensure the browser displays text
  immediately using a fallback font and then swaps in the signature
  typeface when it’s ready.  Without this rule some devices may not
  show the script tagline at all until the remote font loads, leading
  to the issues reported by the client.
*/


:root{
  /*
    Color palette inspired by high‑end interior design websites like Decorilla.
    Soft off‑white backgrounds paired with warm golden accents create an elegant
    and sophisticated look. Muted greys are used for secondary text and
    supportive elements while an olive‑gold tone ties everything together.
  */
  --bg: #F8F7F4;        /* off‑white background */
  --card: #ffffff;       /* card backgrounds */
  --accent: #C2A56D;     /* primary accent – warm gold */
  --accent-2: #D8BA86;   /* secondary accent – light gold */
  --muted: #7A7A7A;      /* muted grey for secondary text */
  --olive: #8A734A;      /* olive‑gold accent used for titles */
  --radius: 14px;
  --container: 1100px;
  --gap: 1.25rem;
  /*
    Ajustes tipográficos personalizados.  Se solicita que la tipografía
    general sea Century Gothic por su legibilidad y por mantenerse en
    línea con otras presentaciones y documentos de la marca.  Se conserva
    Poppins como fallback y se agregan fuentes del sistema para mayor
    compatibilidad.  Además se define una fuente manuscrita para
    aplicaciones puntuales (por ejemplo, botones como "Escribínos"), que
    utiliza Dancing Script como primera opción y cursive como respaldo.
  */
  --ff: 'Century Gothic', 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Tipografía para títulos y subtítulos.  Para mantener coherencia con la
     solicitud de usar Century Gothic en todo el sitio, definimos la misma
     familia tipográfica para los encabezados.  Se incluyen fuentes de
     respaldo para asegurar una degradación elegante. */
  --ff-heading: 'Century Gothic', 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Fuente manuscrita para etiquetas especiales.  Se utiliza para simular
     escritura a mano alzada en textos como “Escribínos” y para los nuevos
     botones y subtítulos caligráficos.  Se utiliza “Sebastian Signature” como
     primera opción (cargada arriba vía @import), con Dancing Script y cursive
     como respaldos por si el recurso externo no estuviera disponible. */
}

*{box-sizing:border-box}
html,body{height:100%}
/* Enable smooth scrolling for in-page anchor links. This provides
   a pleasant scroll animation when navigating to sections via
   anchor links such as the "Contáctanos" button. */
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--ff);
  background:var(--bg);
  color:#222;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  font-size:16px;
  /* Reserve space for the fixed header so content doesn't slide
     underneath it. The header height is roughly 70px including
     padding and border. Adjust as needed for mobile via media query. */
  padding-top:76px;
}

/* Typography
   Use Playfair Display for all heading elements (h1, h2, h3) to establish a
   sophisticated hierarchy. Body copy remains set in Poppins. */
h1, h2, h3{
  font-family:var(--ff-heading);
  font-weight:600;
  line-height:1.2;
}

/* Card headings use Poppins to differentiate service titles from major
   section headings. */
.card h3{
  font-family:var(--ff);
  font-weight:600;
}

/* Container */
.container{
  width:95%;
  max-width:var(--container);
  margin:0 auto;
  padding:2rem 0;
}

/* Header */
.site-header{
  /*
    Fix the navigation to the top of the viewport on all screen sizes so
    it remains visible while scrolling. Previously this header was
    "sticky", which only kept it within its scroll container until
    scrolled out of view. Using a fixed position ensures the nav
    stays anchored to the top of the page. The width is set to 100% so
    the gradient background spans the full viewport.
  */
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:50;
  background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.75));
  backdrop-filter: blur(6px);
  border-bottom:1px solid rgba(0,0,0,0.04);
}
.header-inner{
  display:flex;
  align-items:center;
  gap:1rem;
  justify-content:space-between;
  padding:0.6rem 0;
}
.brand{
  font-weight:700;
  color:var(--accent);
  text-decoration:none;
  font-size:1.15rem;
  display:inline-flex;
  align-items:center;
}

/* Logo link overrides default brand styling */
.logo-link{
  color:inherit;
  font-size:0; /* hide any accidental text spacing */
  padding:0;
}
.logo-link img{
  height:48px;
  width:auto;
  display:block;
}
.site-nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:0.75rem;
  align-items:center;
}
.site-nav a{
  color:#222;
  text-decoration:none;
  padding:0.5rem 0.6rem;
  border-radius:10px;
  font-weight:500;
}
/*
  Base button styling. Include a transition so hover effects animate
  smoothly. Buttons are slightly raised and invite interaction.
*/
.btn{
  display:inline-block;
  text-decoration:none;
  padding:0.55rem 0.85rem;
  border-radius:10px;
  font-weight:600;
  transition:transform 0.3s ease, background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;

  /* Revert the button typography to the primary site font.  The
     manuscript style is reserved for taglines only per updated
     instructions. */
  /* Force the primary site font on all buttons to override any other
     declarations that might be applied in responsive styles. */
  font-family: var(--ff) !important;

  /* Adjust the button text size to an intermediate value.  This size is
     larger than the previous 0.8rem but smaller than the earlier
     oversized version, striking a comfortable balance between
     legibility and elegance across devices. */
  font-size: 0.95rem;
}
/* Solid button with warm gold fill. On hover it lifts slightly and the
   accent lightens to provide feedback. */
.btn-primary{
  background:var(--accent);
  color:#fff;
  border:1px solid transparent;
}
.btn-primary:hover{
  transform:translateY(-3px);
  background:var(--accent-2);
  box-shadow:0 8px 20px rgba(23,23,23,0.14);
}
/* Ghost button uses a subtle border. On hover it lifts and
   introduces a light background to stand out. */
.btn-ghost{
  border:1px solid rgba(0,0,0,0.08);
  background:transparent;
  color:#222;
}
.btn-ghost:hover{
  transform:translateY(-3px);
  background:rgba(0,0,0,0.05);
  box-shadow:0 6px 16px rgba(23,23,23,0.1);
}

/*
  Light button variant used in the hero for the secondary action.
  It uses white text and a subtle border so it stands out against
  darker backgrounds like the hero overlay. On hover it gains a soft
  white tint and lifts slightly to provide feedback.
*/
/*
  Light button variant used in the hero for the secondary action.
  Previously the button used a soft off‑white fill with gold text,
  but the client requested that the “Ver Proyectos” button appear
  predominantly white. To achieve this we switch the light button
  to a ghost‑style: the background is transparent and both the
  border and text are white. On hover a subtle white tint appears
  to improve contrast. This ensures the button stands out on the
  dark hero overlay while complementing the primary gold button.
*/
.btn-light {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.8) !important;
}

/* Ensure visited light buttons retain the same white color so
   they don't revert to browser default link styling after being
   clicked. Without this rule anchors with the .btn-light class
   could display the browser's default visited color (often purple
   or gold) and break the intended design. */
.btn-light:visited {
  color: #fff !important;
  border-color: rgba(255,255,255,0.8) !important;
}

/* Hover state for the light button. Maintain white text and border
   but introduce a gentle tint so the user perceives interactivity.
   The slight upward movement mirrors the animation on the primary
   button for a cohesive feel. */
.btn-light:hover {
  background: rgba(255,255,255,0.15) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.9) !important;
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(23,23,23,0.12);
}

/*
  White outline button for explicit usage. While the `.btn-light` class
  overrides default styles for secondary hero actions, certain browsers
  may ignore those rules on visited links. The `.btn-white` class
  defines a dedicated white outline button that ensures the text
  and border remain white regardless of link state. Use this class
  whenever a fully white button is needed on dark backgrounds.
*/
/*
  White outline button for explicit usage. This variant is used on
  dark backgrounds like the hero section. All link states
  (default, visited, hover, focus, active) maintain white text and
  border to prevent browsers from applying default link colors. A
  subtle background tint and lift on hover enhances interactivity.
*/
.btn-white,
.btn-white:visited,
.btn-white:link,
.btn-white:active,
.btn-white:focus {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.85);
}
.btn-white:hover {
  background: rgba(255,255,255,0.15);
  color: #fff;
  border-color: rgba(255,255,255,0.9);
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(23,23,23,0.12);
}

/*
  Alternate section backgrounds to create visual contrast between
  successive sections. Odd sections retain the default off‑white
  background, while even sections use a slightly warmer shade. This
  subtle alternation helps delineate content areas without resorting
  to harsh color changes.
*/
/*
  Base background for sections. We use a very light neutral tone by
  default. To subtly separate content areas we vary the tone on
  alternating sections. These colors are close in value so the
  contrast is elegant rather than jarring.
*/
main .section{
  background:#F8F7F4;
}
main .section:nth-of-type(even){
  /* Slightly darker tint for even sections to provide a more
     noticeable yet still refined contrast between content blocks.
     This helps users distinguish sections without introducing harsh
     color changes. */
  background:#F1ECE4;
}

/* Mobile nav toggle */
.nav-toggle{
  display:none;
  background:none;
  border:0;
  padding:0.4rem;
  cursor:pointer;
}
.nav-toggle span{
  width:22px;height:2px;background:#222;display:block;margin:4px 0;border-radius:2px;
}

/* HERO */
.hero{
  position:relative;
  /* Increase hero height and set a full‑bleed background image reminiscent of high‑end design sites */
  min-height:82vh;
  display:flex;
  align-items:center;
  color:#fff;
  overflow:hidden;
  background-image: url('../images/hero.webp');
  background-size: cover;
  background-position: center;
}
.hero-overlay{
  position:absolute;inset:0;
  /*
    Replace the original terracotta gradient with warm gold tones to match
    the new palette. The opacity levels ensure the background image remains
    visible while adding depth.
  */
  /*
    Use a semi‑transparent dark overlay to increase contrast between
    the background photo and the white hero text. The warm gold
    gradient looked beautiful on the previous image, but with the new
    lighter dining room photo the text became hard to read. A subtle
    dark overlay ensures legibility while still allowing the image to
    shine through.
  */
  background:rgba(0,0,0,0.35);
  mix-blend-mode:normal;
}
.hero-inner{
  position:relative;
  display:flex;
  align-items:center;
  /* Add generous vertical padding to offset the sticky header and center content */
  padding:6rem 0;
  /* Ensure the hero maintains a large height for vertical centering */
  min-height:82vh;
}
.hero-content h1{
  font-size:clamp(2.0rem,4vw,3.2rem);
  line-height:1.1;
  font-family:var(--ff-heading);
  /* Slightly reduce opacity so the heading doesn’t compete with the
     underlying photograph.  This subtle transparency was requested by
     the client to ensure the image remains prominent. */
  color: rgba(255, 255, 255, 0.895);
  /* Add a subtle shadow to improve legibility over the photographic
     background. */
}

/* ------------------------------------------------------------------
   Hero tagline styling

   The “Espacios que inspiran” tagline sits immediately below the hero
   heading on the front page.  Previous iterations suffered from poor
   contrast and inconsistent font loading, especially on mobile
   devices.  The rules below increase specificity to ensure our
   settings override generic `.hero-tagline` declarations elsewhere in
   the cascade.  We explicitly set the script font, enlarge the size
   slightly, and apply a strong text shadow to guarantee legibility
   against photographic backgrounds.  On mobile, a subtle translucent
   panel is added behind the text to further improve contrast.
*/
.hero .hero-content .hero-tagline {
  position: relative;
  /* Increase the stacking context so the tagline always sits above other hero elements */
  z-index: 10;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin: 0 0 1.2rem 0;
  /* Always use the signature font; fall back gracefully if it fails
     to load.  The `!important` flag ensures that this choice
     overrides any conflicting declarations that might inadvertently
     apply a different typeface to taglines. */
  /* Responsive sizing – slightly larger than the previous clamp to
     improve readability on desktop.  Mobile sizes reduce via the
     clamp function. */
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 1.15;
  /* Restore a pure white colour for the tagline.  A bright white
     provides maximum contrast on any hero background and makes the
     slogan feel more prominent.  Use !important to ensure this takes
     precedence over inherited colours. */
  color: rgba(255, 255, 255, 0.895);
  /* Surround the script with a translucent panel and subtle blur.  On
     some screens the white lettering blended into lighter areas of
     the hero image, causing it to disappear.  Adding a semi‑opaque
     backdrop ensures the golden letters remain legible without
     overpowering the photograph. */
  /* Remove the translucent panel and blur so only the script remains.
     The hero overlay provides sufficient contrast. */
  /* Central alignment so the tagline aligns with the heading above. */
  text-align: center;
  /* Maintain a strong shadow to separate the lettering from the background
     and increase contrast against complex imagery. */
  text-shadow: 0 3px 8px rgba(0,0,0,0.65), 0 6px 12px rgba(0,0,0,0.5);

  /* Increase the outline around the letters so that the white script
     remains crisp and legible on complex imagery.  This property
     only takes effect in WebKit-based browsers but gracefully degrades
     elsewhere. */
  /* Remove text stroke to avoid muddying the white script.  A strong
     shadow provides sufficient contrast without dark outlines. */
  -webkit-text-stroke: 0;

  /* Bump the font weight slightly to give the script more presence.
     Some script fonts ignore weight values, but browsers that respect
     it will render a slightly thicker stroke. */
  font-weight: 600;
}

/* Mobile: wrap the tagline in a translucent panel for additional
   readability.  By adding a darkened backdrop we ensure the script
   remains visible against lighter sections of the hero image.  The
   `backdrop-filter` softens the underlying photo without obscuring it
   entirely. */
@media (max-width: 760px) {
  .hero .hero-content .hero-tagline {
    /* Ensure the tagline remains white and legible on mobile too */
    color: #FFFFFF !important;
    /* Remove any panel or blur on mobile */
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0;
    border-radius: 0;
    margin-top: 0.6rem;
    /* Make sure the text is always visible */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 10;
  }

  /* Increase the hero's minimum height on small screens to ensure
     the slogan and heading fit comfortably. */
  .hero-inner {
    min-height: 70vh;
  }

  /* Allow the hero contents to overflow on small screens so the tagline
     doesn't get clipped.  Without this rule the parent `.hero` hides
     overflowing elements, causing the slogan to disappear on mobile. */
  .hero {
    overflow: visible;
  }
}
.hero-content p{margin:0 0 1.1rem 0;color:rgba(255,255,255,0.95)}
.hero-content p{
  /* Apply a lighter text shadow on the paragraph to help readability */
  text-shadow:0 2px 6px rgba(0,0,0,0.4);
}
.hero-actions .btn{margin-right:0.6rem}

/* Constrain hero text width so it doesn't span too wide on large screens */
.hero-content{
  max-width:520px;
}

/* hero image uses background image from images/hero.webp */
/* hero-image removed: hero uses a full‑bleed background now */

/* Sections */
.section{padding:3.2rem 0}
.section.light{background:transparent}
.section-title{
  margin:0 0 0.4rem 0;
  font-size:1.6rem;
  color:var(--olive);
  font-family:var(--ff-heading);
}
.section-sub{margin:0 0 1rem;color:var(--muted)}

/* Center the introduction text beneath the hero on all screen sizes.  On the
   original theme the subtitle was centered only on mobile; the client
   requested that it also be centered on desktop to maintain visual
   balance.  Use !important to override any competing rules. */
.intro-compact .section-sub{
  text-align: center !important;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Align the headings and descriptive copy in the “Antes y Después” section
   centrally.  This ensures the message “Descubrí lo que el diseño interno
   puede hacer por vos” reads as a centered call to action on both
   mobile and desktop.  Use !important to override default alignments. */
#antes-despues .section-title,
#antes-despues .section-sub{
  text-align: center !important;
}

/* Ensure the heading and subtitle of the “Antes y Después” section span
   the full container width and remain centered on desktop.  Without
   explicit block display the text may align left due to inherited
   flexbox properties from parent containers. */
#antes-despues .section-title,
#antes-despues .section-sub{
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Grid utilities */
.grid{display:grid;gap:1.2rem}
.grid-3{grid-template-columns:repeat(3,1fr)}

/* Cards */
.card{
  background:var(--card);
  border-radius:var(--radius);
  padding:1.25rem;
  box-shadow:0 6px 18px rgba(23,23,23,0.06);
  text-align:left;
}
.card-media{font-size:1.5rem;margin-bottom:0.6rem}

/* Gallery */
.gallery .proj{
  margin:0;
  overflow:hidden;
  border-radius:12px;
  background:#f5f3f1;
}
.proj img{width:100%;height:220px;object-fit:cover;display:block}
.proj figcaption{padding:0.75rem 0.9rem;font-size:0.95rem;color:#333}

/* About layout */
.about-inner{display:grid;grid-template-columns:1fr 360px;gap:2rem;align-items:start}
.bullets{padding-left:1rem;margin-top:0.6rem}
.stat{background:var(--card);padding:1rem;border-radius:10px;margin-bottom:0.8rem;box-shadow:0 6px 18px rgba(23,23,23,0.06)}
.stat h3{margin:0;color:var(--accent)}
.stat p{margin:0.35rem 0 0;color:var(--muted)}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 320px;gap:1.2rem}
.contact-form{display:flex;flex-direction:column;gap:0.6rem;background:var(--card);padding:1rem;border-radius:12px;box-shadow:0 6px 18px rgba(23,23,23,0.06)}
.contact-form label{font-size:0.9rem;color:var(--muted)}
.contact-form input, .contact-form textarea{width:100%;padding:0.65rem;border-radius:8px;border:1px solid rgba(0,0,0,0.06);font-family:var(--ff)}
/* Estilo para los select del formulario de contacto */
.contact-form select{
  width:100%;
  padding:0.65rem;
  border-radius:8px;
  border:1px solid rgba(0,0,0,0.06);
  font-family:var(--ff);
  background: #fff;
  color: #333;
}
.form-actions{display:flex;gap:0.6rem;margin-top:0.4rem}

/*
  Botón flotante de WhatsApp. Se muestra solo cuando la sección de contacto está en
  el viewport y permanece fijo en la esquina inferior derecha. En dispositivos
  móviles y de escritorio puede arrastrarse a cualquier lugar de la pantalla.
*/
.whatsapp-floating{
  touch-action: manipulation;
  position:fixed;
  bottom:80px;
  right:20px;
  width:56px;
  height:56px;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1000;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(23,23,23,0.2);
  transition:opacity 0.3s ease, transform 0.3s ease;
  opacity:0;
  pointer-events:none;
}
.whatsapp-floating svg{
  width:28px;
  height:28px;
}
.whatsapp-floating.show{
  opacity:1;
  pointer-events:auto;
}

/* Estilos para los enlaces de redes sociales en la sección de contacto */
/* Estilos para los enlaces de redes sociales — refinado para AMS */
.socials{
  display:flex;
  gap:0.55rem;
  align-items:center;
}
/* Botón redondo, borde dorado sutil y fondo transparente
   para alinearse con los .btn-ghost y la paleta del sitio */
.socials a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:50%;
  background:transparent;
  color:var(--accent);
  border:1px solid rgba(194,165,109,.55);
  text-decoration:none;
  box-shadow:none;
  transition:
    background-color .25s ease,
    color .25s ease,
    border-color .25s ease,
    transform .25s ease;
}
/* Íconos un poco más grandes y siempre heredando el color */
.socials a svg{
  width:18px;
  height:18px;
  fill:currentColor;
}
/* Hover/Focus: dorado sólido, ícono blanco, micro-lift */
.socials a:hover,
.socials a:focus-visible{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
  transform:translateY(-2px);
  outline:none;
}
/* Estado activo sin salto visual */
.socials a:active{
  transform:translateY(-1px);
}

/* Detalles de contacto en la sección de información */
.contact-details{
  list-style:none;
  padding:0;
  margin:0 0 0.8rem 0;
}
.contact-details li{
  display:flex;
  align-items:flex-start;
  gap:0.6rem;
  margin-bottom:0.6rem;
  font-size:0.9rem;
  color:var(--muted);
}
.contact-details li svg{
  width:20px;
  height:20px;
  flex-shrink:0;
  color:var(--accent);
}
.contact-details li strong{
  color:var(--accent);
  display:block;
}

/* Footer */
.site-footer{padding:1rem 0;border-top:1px solid rgba(0,0,0,0.04);text-align:center;background:transparent}

/* --- Sección Antes y Después (carrusel) --- */
.before-after-carousel {
  position: relative;
  margin-top: 1rem;
}
.before-after-carousel .ba-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: 1.2rem;
  padding-bottom: 0.5rem;
}
.before-after-carousel .ba-track::-webkit-scrollbar {
  height: 8px;
}
.before-after-carousel .ba-track::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.2);
  border-radius: 4px;
}
.before-after-carousel .ba-item {
  flex: 0 0 calc(33.333% - 0.8rem);
  scroll-snap-align: start;
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(23,23,23,0.06);
  display: flex;
  flex-direction: column;
}
.before-after-carousel .ba-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.before-after-carousel .ba-images div {
  position: relative;
}
.before-after-carousel .ba-images img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}
/* Para el modo "antes" aplicamos un filtro que reduce el brillo y la saturación
   sin convertir la imagen a blanco y negro. Esto conserva el color pero genera
   un contraste visible con el resultado final. */
.before-after-carousel .ba-images .ba-before img{
  /* Reducimos brillo y saturación para un aspecto apagado */
  /* Atenuamos aún más para crear un contraste notable con el "después" sin recurrir al blanco y negro */
  filter: brightness(90%) saturate(60%) contrast(80%);
}
.ba-label {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  /* Por defecto las etiquetas utilizan el color de acento para una mejor legibilidad */
  background: var(--accent);
  color: #fff;
  border-radius: 4px;
  text-transform: uppercase;
}

/* Diferencia visual entre las etiquetas 'Antes' y 'Después' */
/* Para ambas etiquetas (Antes y Después) se reutiliza el color de acento */
.ba-before .ba-label {
  background: var(--accent);
}
.ba-after .ba-label {
  background: var(--accent);
}
.ba-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0.9rem;
  font-size: 0.95rem;
  color: #333;
}
.ba-meta .ba-client {
  font-weight: 600;
}
.ba-meta .ba-more {
  font-size: 0.85rem;
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s;
}
.ba-meta .ba-more:hover {
  color: var(--olive);
}
.before-after-carousel .ba-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #fff;
  color: var(--accent);
  border: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(23,23,23,0.12);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  line-height: 1;
  transition: background 0.3s, transform 0.3s, color 0.3s;
  z-index: 10;
}
.before-after-carousel .ba-nav:hover {
  transform: translateY(-50%) scale(1.05);
  background: var(--accent);
  color: #fff;
}
.before-after-carousel .ba-prev {
  left: -20px;
}
.before-after-carousel .ba-next {
  right: -20px;
}
@media (max-width: 1000px) {
  .before-after-carousel .ba-item {
    flex: 0 0 calc(50% - 0.6rem);
  }
  .before-after-carousel .ba-nav {
    display: none;
  }
}
@media (max-width: 760px) {
  .before-after-carousel .ba-item {
    flex: 0 0 100%;
  }
}

/* Responsive */
@media (max-width:1000px){
  /* On medium screens the hero inner simply uses flexbox; no grid columns */
  .hero-inner{flex-direction:row}
  .grid-3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .header-inner{padding:0.6rem 0.6rem}
  .site-nav{display:none}
  .nav-toggle{display:block}
  .hero-inner{
    flex-direction:column;
    padding:4rem 0;
    min-height:60vh;
  }
  /* Arrange hero action buttons vertically on small screens
     for better tap targets and readability */
  .hero-actions{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
  }
  .hero-actions .btn{
    margin-right:0;
    margin-bottom:0.6rem;
  }
  .hero-actions .btn:last-child{
    margin-bottom:0;
  }
  /* Centrar la sección de información de contacto en pantallas pequeñas */
  .contact-info{
    text-align:center;
  }
  /* Cuando la pantalla es pequeña, mostrar la información de contacto apilada y centrada */
  .contact-details li{
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
  }
  /* Ajustar márgenes de los iconos para versión móvil */
  .contact-details li svg{
    margin-right:0;
    margin-bottom:0.4rem;
  }
  /* Centrar el contenedor de redes sociales en pantallas pequeñas */
  .socials{
    display:flex;
    justify-content:center;
  }
  /* Center hero content and stack elements on small screens */
  .hero-content{
    max-width:90%;
    text-align:center;
    align-items:center;
    margin:0 auto;
  }
  .hero-actions{
    display:flex;
    flex-direction:column;
    width:100%;
    align-items:center;
  }
  .hero-actions .btn{
    width:100%;
    margin:0 0 0.6rem 0;
  }
  /* Removed hero-image sizing; hero uses a full background now */
  .grid-3{grid-template-columns:1fr}
  .about-inner{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .site-header{position:fixed}
  /* On small screens the header height is slightly larger due to
     additional padding and nav toggle, so reduce the body offset a
     little so content aligns properly. */
  body{padding-top:68px;}
}

/* ---------------------------------------------------------
   Estilos para la página de proyectos (detalles de antes/después)
   Se utiliza un diseño flexible que mantiene dos columnas en
   escritorio y se adapta a una sola columna en pantallas móviles.
   Las imágenes reproducen el mismo efecto de escala de grises para
   el estado "Antes" y muestran una etiqueta "Después" reutilizando
   la clase .ba-label del carrusel. Las descripciones tienen un
   ancho máximo para mejorar la legibilidad.
   --------------------------------------------------------- */
.project-comparison{
  display:flex;
  flex-direction:column;
  gap:1.5rem;
  align-items:flex-start;
}
.project-images{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}
.project-images div{
  position:relative;
}
.project-images img{
  width:100%;
  height:300px;
  object-fit:cover;
  display:block;
  border-radius:var(--radius);
}
/* Efecto de escala de grises en la imagen "Antes" */
.project-images .project-before img{
  filter:grayscale(100%) brightness(80%);
}
.project-description{
  max-width:800px;
  font-size:1rem;
  color:var(--muted);
  line-height:1.6;
}
@media (max-width:760px){
  .project-images{
    grid-template-columns:1fr;
  }
  .project-images img{
    height:240px;
  }
  .project-comparison{
    gap:1rem;
  }
}

/* -----------------------------
   Animations
   Introduce subtle entrance animations inspired by modern interior design
   websites. Elements begin slightly offset with zero opacity and animate
   into place as they scroll into view. Staggered delays create a gentle
   cascading effect. Fade‑up moves elements upward while increasing
   opacity; fade‑in simply fades elements in without translation.
   ----------------------------- */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Base state for animated elements */
.anim-fade-up,
.anim-fade-in {
  opacity: 0;
}

/* Activate animations when element becomes visible */
.anim-fade-up.anim-visible {
  animation: fade-up 0.8s cubic-bezier(0.2, 0.6, 0.3, 1.0) forwards;
}

.anim-fade-in.anim-visible {
  animation: fade-in 1s ease forwards;
}

/* Stagger modifiers, applied only once anim-visible is added */
.anim-delay-1.anim-visible { animation-delay: 0.2s; }
.anim-delay-2.anim-visible { animation-delay: 0.4s; }
.anim-delay-3.anim-visible { animation-delay: 0.6s; }
.anim-delay-4.anim-visible { animation-delay: 0.8s; }

/* Hover effects for interactive elements */
.card, .proj {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 24px rgba(23,23,23,0.12);
}
.proj img {
  transition: transform 0.5s ease;
}
.proj:hover img {
  transform: scale(1.05);
}

/* Mobile nav open state (controlled by JS) */
.site-nav.open{display:block;position:absolute;left:0;right:0;top:64px;background:#fff;padding:1rem;border-radius:0 0 10px 10px;box-shadow:0 8px 30px rgba(0,0,0,0.08)}
.site-nav.open ul{flex-direction:column}

/* ----------------------------------------------------------------------------
   Custom additions for the Marcela Soto brand and testimonials
   These styles complement the existing palette and layouts while introducing
   new elements requested by the client.
   --------------------------------------------------------------------------*/

/* Brand container groups the logo and the designer’s name. The name uses a
   refined serif typeface and is hidden on smaller screens. */
.brand-container{
  display:flex;
  align-items:center;
  gap:0.5rem;
}
.brand-container .brand-name{
  font-family:'Cormorant Garamond', serif;
  font-weight:500;
  font-size:1.25rem;
  color:var(--olive);
  white-space:nowrap;
}
@media (max-width:760px){
  .brand-container .brand-name{
    display:none;
  }
}

/* Testimonials section styling */
.testimonials-section{
  text-align:center;
}
.testimonials-section .dragonfly{
  width:70px;
  height:auto;
  margin:0 auto 1rem;
}
.testimonials-tagline{
  max-width:700px;
  margin:0 auto 1.5rem;
  color:var(--muted);
  font-size:1rem;
  line-height:1.5;
}

/* Style for the hashtag appended to the testimonials heading. A subtle
   italics and accent colour evoke sophistication without overpowering
   the primary text. */
.hashtag{
  font-family: var(--ff);
  font-style: italic;
  font-weight: 500;
  color: var(--olive);
  margin-left: .5rem;
}

/* A card to frame the testimonial quotes.  It distinguishes the testimonials
   from surrounding text and gives them a subtle prominence.  The border
   uses the secondary accent colour for elegance and the background is
   white to contrast gently with the page’s off‑white backdrop. */
.testimonial-card{
  max-width:800px;
  margin:1rem auto;
  background:var(--card);
  border:1px solid var(--accent-2);
  border-radius:var(--radius);
  padding:1.5rem;
  box-shadow:0 4px 8px rgba(0,0,0,0.03);
}
@media (max-width:760px){
  .testimonial-card{
    width:90%;
    padding:1rem;
  }
}
.testimonials-list{
  display:grid;
  gap:1.5rem;
  max-width:800px;
  margin:0 auto;
}
.testimonial p{
  margin:0 0 0.5rem;
  font-style:italic;
  color:#333;
}
.testimonial strong{
  display:block;
  font-family:var(--ff);
  font-weight:600;
  color:var(--olive);
}

/* Single testimonial display used for the dynamic slider */
.testimonial-display{
  max-width:800px;
  margin:0 auto;
  /* Animate both opacity and position so quotes slide gently up when changing.
     Use an ease‑in‑out timing to feel more natural and lengthen the duration
     slightly for a smoother effect. */
  transition:opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
}
.testimonial-display.hidden{
  opacity:0;
  /* Shift the container down slightly when hidden so the next quote
     appears to slide upward into place. */
  transform:translateY(20px);
}
.testimonial-display p{
  margin:0 0 0.5rem;
  font-style:italic;
  color:#333;
}
.testimonial-display strong{
  font-family:var(--ff);
  font-weight:600;
  color:var(--olive);
}

/* Project carousel (similar to before/after but tailored for categories) */
.project-carousel{
  position:relative;
  margin-top:1rem;
}
.project-carousel .pc-track{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  gap:1.2rem;
  padding-bottom:0.5rem;
}
.project-carousel .pc-item{
  flex:0 0 calc(33.333% - 0.8rem);
  scroll-snap-align:start;
  background:var(--card);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 6px 18px rgba(23,23,23,0.06);
  display:flex;
  flex-direction:column;
}
.project-carousel .pc-track::-webkit-scrollbar{
  height:8px;
}
.project-carousel .pc-track::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,0.2);
  border-radius:4px;
}
.project-carousel .pc-item img{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
}
.project-carousel .pc-meta{
  padding:0.9rem;
}
.project-carousel .pc-meta h3{
  margin:0 0 0.4rem;
  font-family:var(--ff);
  font-weight:600;
  font-size:1.1rem;
  color:var(--olive);
}
.project-carousel .pc-meta p{
  margin:0;
  color:var(--muted);
  font-size:0.95rem;
}
.project-carousel .pc-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:#fff;
  color:var(--accent);
  border:none;
  width:38px;
  height:38px;
  border-radius:50%;
  box-shadow:0 4px 12px rgba(23,23,23,0.12);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.4rem;
  line-height:1;
  transition:background 0.3s, transform 0.3s, color 0.3s;
  z-index:10;
}
.project-carousel .pc-nav:hover{
  transform:translateY(-50%) scale(1.05);
  background:var(--accent);
  color:#fff;
}
.project-carousel .pc-prev{left:-20px;}
.project-carousel .pc-next{right:-20px;}

/*
  Modal de galería para proyectos
  Este modal aparece cuando el usuario hace clic en una tarjeta de proyecto
  que define un atributo data-images. Incluye botones para navegar
  entre las imágenes y cerrar el modal. El fondo oscuro cubre todo el
  viewport y centra la fotografía para una experiencia inmersiva.
*/
.modal{
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.85);
  align-items:center;
  justify-content:center;
  z-index:999;
  padding:1rem;
}
.modal.open{
  display:flex;
}
.modal img{
  max-width:85%;
  max-height:85%;
  border-radius:var(--radius);
  box-shadow:0 8px 24px rgba(0,0,0,0.3);
}
.modal button{
  position:absolute;
  background:rgba(0,0,0,0.5);
  color:#fff;
  border:none;
  padding:0.6rem 0.9rem;
  font-size:1.5rem;
  cursor:pointer;
  border-radius:50%;
  transition:background 0.3s;
}
.modal button:hover{
  background:rgba(0,0,0,0.7);
}
.modal-prev{
  left:2%;
  top:50%;
  transform:translateY(-50%);
}
.modal-next{
  right:2%;
  top:50%;
  transform:translateY(-50%);
}
.modal-close{
  top:3%;
  right:3%;
  transform:none;
  font-size:2rem;
}

/* Centrar botones de llamada a la acción en móviles y reducir su tamaño */
@media (max-width: 768px) {
  .cta-actions{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:0.8rem;
  }
  .cta-actions .btn{
    width:100%;
    max-width:320px;
    text-align:center;
  }
}
@media (max-width:1000px){
  .project-carousel .pc-item{
    flex:0 0 calc(50% - 0.6rem);
  }
  .project-carousel .pc-nav{
    display:none;
  }
}
@media (max-width:760px){
  .project-carousel .pc-item{
    flex:0 0 100%;
  }
}

/* ------------------------------------------------------------------
   Mobile optimisation for the services section
   On small screens, hide the original service grid and show a simplified
   accordion list. The details element provides built‑in toggle
   functionality without extra JavaScript. A plus/minus indicator is
   added via pseudo‑elements on the summary.
   ------------------------------------------------------------------ */

/* Hide the mobile list placeholder globally.  We will reuse the existing
   cards for the mobile view instead of this duplicate markup. */
.services-mobile {
  display: none !important;
}

/* Style the accordions when they are visible */
#servicios .services-mobile details {
  margin-bottom: 0.6rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
#servicios .services-mobile summary {
  list-style: none;
  font-family: var(--ff);
  font-weight: 600;
  cursor: pointer;
  position: relative;
  padding-right: 1.4rem;
}
/* Remove default markers across browsers */
#servicios .services-mobile summary::marker,
#servicios .services-mobile summary::-webkit-details-marker {
  display: none;
}
/* Add a plus sign after each summary */
#servicios .services-mobile summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 0;
  font-weight: 400;
}
/* Change to minus when open */
#servicios .services-mobile details[open] summary::after {
  content: "-"; 
}
#servicios .services-mobile p {
  margin: 0.3rem 0 0 0;
  color: var(--muted);
}

/* Responsive rules for services */
@media (max-width:760px) {
  /* On small screens, we collapse service descriptions and add toggles via JS */
  /* Hide descriptions by default */
  #servicios .card p {
    display: none;
  }
  /* Show description when card is open */
  #servicios .card.open p {
    display: block;
    margin-top: 0.4rem;
  }
  /* Add plus/minus indicator to service headings */
  #servicios .card h3 {
    position: relative;
    padding-right: 1.4rem;
    margin: 0;
  }
  #servicios .card h3::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 0;
    font-weight: 400;
  }
  #servicios .card.open h3::after {
    content: "-";
  }
}

/* Resize the footer logo so it doesn’t overpower the layout */
.site-footer img {
  height: 60px;
  width: auto;
}

.section-title .hashtag {
  margin-left: 6px;   /* ajusta el valor hasta que quede a tu gusto */
}

/* ----------------------------------------------------------------------
   Custom additions for the new pages and features
   ---------------------------------------------------------------------- */

/* Language toggle styling. A bespoke toggle replaces the default Google
   Translate dropdown. Active language is highlighted with the accent
   colour and a subtle underline. */
.lang-toggle{
  display:flex;
  align-items:center;
  gap:0.4rem;
  font-weight:500;
}
.lang-toggle span{
  opacity:0.5;
}
.lang-option{
  cursor:pointer;
  color:#222;
  text-decoration:none;
  padding:0.2rem 0.4rem;
  border-radius:4px;
  transition:color 0.3s ease;
}
.lang-option.active{
  color:var(--accent);
  border-bottom:2px solid var(--accent);
}

/* Hide the default Google Translate UI. Without these rules the
   injected banner and dropdown would appear at the top of the page. */
#google_translate_element,
.goog-te-banner-frame,
.goog-te-gadget{
  display:none !important;
}

/* Reset body top margin added by Google Translate (the service
   sometimes injects a 40px margin-top). */
body{
  top:0 !important;
}

/* About page styling */
.hero-about{
  padding:4rem 0 2rem;
  background:var(--bg);
  text-align:center;
}
.about-grid{
  display:flex;
  align-items:center;
  gap:2rem;
  flex-wrap:wrap;
}
.about-image{
  flex:1 1 40%;
}
.about-image img{
  width:100%;
  height:auto;
  border-radius:var(--radius);
  box-shadow:0 8px 20px rgba(0,0,0,0.08);
}
.about-text{
  flex:1 1 50%;
  font-size:1rem;
  line-height:1.6;
}
.about-text h2{
  margin-top:0;
  font-size:2rem;
}
@media(max-width:760px){
  .about-grid{
    flex-direction:column;
    text-align:center;
  }
  .about-text h2{
    margin-top:1rem;
  }
}

/* Categories grid on the projects overview page */
.categories-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
  gap:1.5rem;
  /* Asegura que todas las tarjetas ocupen la misma altura en la cuadrícula */
  grid-auto-rows:1fr;
}
.category-card{
  /* Asegura que todas las tarjetas de categorías tengan la misma altura y estructura flexible */
  display:flex;
  flex-direction:column;
  height:100%;
  /* Establece un color de fondo sólido para que toda la tarjeta (incluida la zona bajo el texto) sea visible
     incluso cuando el contenido interior no ocupa toda la altura disponible. De esta forma las tarjetas de
     “Espacios Comerciales” y “Residencial” no muestran trozos del color beige de la página detrás de ellas
     en pantallas de escritorio. */
  background-color: #ffffff;
}
.category-card img{
  width:100%;
  /* Unifica la altura de las imágenes de las tarjetas de categoría para que todas
     mantengan la misma proporción en la cuadrícula. 230 px se ajusta mejor al
     espacio disponible y evita que algunas tarjetas queden más altas o más
     bajas que otras. */
  height:230px;
  object-fit:cover;
  display:block;
}
.category-card .category-meta{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.category-card{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  box-shadow:0 8px 20px rgba(0,0,0,0.05);
  cursor:pointer;
  transition:transform 0.3s ease, box-shadow 0.3s ease;
}
.category-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 24px rgba(0,0,0,0.1);
}
.category-card img{
  width:100%;
  height:230px;
  object-fit:cover;
  display:block;
}
.category-card .category-meta{
  /* Flex properties ensure the metadata section stretches to fill the
     remaining vertical space in the card. Sin estos estilos, algunas
     tarjetas (como Residencial y Espacios Comerciales) quedaban de
     diferente altura y dejaban al descubierto el color de fondo de la página. */
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:1rem;
  background:var(--card);
}
.category-card h3{
  margin-top:0;
  margin-bottom:0.3rem;
  font-family:var(--ff-heading);
  font-size:1.5rem;
}
.category-card p{
  margin:0;
  color:var(--muted);
  font-size:0.9rem;
}

/* Image gallery styling on individual project pages */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:1rem;
}
.gallery-grid img{
  width:100%;
  height:200px;
  object-fit:cover;
  border-radius:var(--radius);
}

/* Blog listing styles */
.blog-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:2rem;
}
.blog-card{
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 8px 20px rgba(0,0,0,0.05);
  background:var(--card);
  transition:transform 0.3s ease, box-shadow 0.3s ease;
}
.blog-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 24px rgba(0,0,0,0.1);
}
.blog-card img{
  width:100%;
  height:200px;
  object-fit:cover;
}

/* Override default link styling within blog cards
   Anchor tags inside blog cards should inherit the card’s typography
   colours rather than the browser’s default blue/purple. The blog
   title should use the olive accent and the ‘Leer más’ link should use
   the primary accent colour. Visited states are explicitly styled to
   prevent unexpected purple.
*/
.blog-card a{
  text-decoration:none;
  color:inherit;
}
/* Blog post titles */
.blog-card .blog-meta h3 a{
  color:var(--olive);
}
.blog-card .blog-meta h3 a:visited{
  color:var(--olive);
}
/* Read‑more link at bottom of blog card */
/* Style read‑more links inside blog cards. Support both the legacy
   `.ba-more` class (used in the existing markup) and the
   `.read-more` class in case of future use. */
.blog-card .blog-meta a.ba-more,
.blog-card .blog-meta a.read-more{
  display:inline-block;
  margin-top:0.5rem;
  color:var(--accent);
  font-weight:600;
  text-decoration:none;
  transition:color 0.3s ease;
}
.blog-card .blog-meta a.ba-more:hover,
.blog-card .blog-meta a.read-more:hover{
  color:var(--accent-2);
  text-decoration:underline;
}

/* Remove default anchor colouring and underline from project category cards
   The entire card is a link; its internal heading and description
   should not inherit the browser’s link styles. Instead headings use
   the olive accent and descriptions use the muted colour. Visited
   states retain the same colours. */
.category-card{
  color:inherit;
  text-decoration:none;
}
.category-card h3{
  color:var(--olive);
}
.category-card h3:visited{
  color:var(--olive);
}
.category-card p{
  color:var(--muted);
}
.blog-card .blog-meta{
  padding:1rem;
}
.blog-card .blog-meta h3{
  margin-top:0;
  margin-bottom:0.5rem;
  font-family:var(--ff-heading);
}
.blog-card .blog-meta .date{
  font-size:0.85rem;
  color:var(--muted);
}
.blog-card .blog-meta p{
  font-size:0.9rem;
  color:#333;
}

/* Pagination styles for the blog listing */
.pagination{
  display:flex;
  /* Permite que los enlaces de paginación se envuelvan en múltiples filas en dispositivos pequeños.
     Esto evita el desbordamiento horizontal en el blog cuando hay muchas páginas. */
  flex-wrap: wrap;
  justify-content:center;
  gap:0.5rem;
  margin-top:2rem;
}
.pagination .page-link{
  display:inline-block;
  padding:0.4rem 0.8rem;
  border-radius:8px;
  background:var(--card);
  color:#222;
  text-decoration:none;
  font-weight:500;
  box-shadow:0 4px 10px rgba(0,0,0,0.05);
  transition:background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.pagination .page-link:hover{
  background:var(--accent);
  color:#fff;
  transform:translateY(-2px);
}
.pagination .page-link.active{
  background:var(--accent);
  color:#fff;
}

/* WordPress pagination compatibility
   --------------------------------------------------------------------------
   WordPress genera enlaces de paginación con la clase .page-numbers en lugar
   de .page-link que utilizamos para el sitio estático. Para que los números
   de página sigan el mismo look & feel dorado y minimalista, aplicamos
   estilos equivalentes a .page-numbers. También aseguramos que el contenedor
   generado por WordPress (.nav-links) se comporte como un flexbox, con
   envoltura y centrado, igual que la paginación estática. */
.pagination .nav-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:0.5rem;
}

.pagination .page-numbers{
  display:inline-block;
  padding:0.4rem 0.8rem;
  border-radius:8px;
  background:var(--card);
  color:#222;
  text-decoration:none;
  font-weight:500;
  box-shadow:0 4px 10px rgba(0,0,0,0.05);
  transition:background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

/* Hover state para los enlaces de paginación */
.pagination .page-numbers:hover{
  background:var(--accent);
  color:#fff;
  transform:translateY(-2px);
}

/* Estado activo/corriente de paginación */
.pagination .page-numbers.current{
  background:var(--accent);
  color:#fff;
}

/* Alinear título y fecha en plantillas sin <header>
   --------------------------------------------------------------------------
   Algunos artículos de WordPress pueden no envolver el título y la fecha
   dentro de un elemento <header>. Estas reglas aseguran que esos elementos
   se centren y conserven la apariencia definida por el diseño original. */
.blog-article > .container > h1,
.blog-article > .container > .date{
  text-align:center;
  display:block;
}

/* Blog article page styles */
.blog-article header{
  text-align:center;
  margin-bottom:2rem;
}
.blog-article header h1{
  font-size:2.2rem;
  margin:0.5rem 0;
}
.blog-article header .date,
.blog-article header .author{
  font-size:0.9rem;
  color:var(--muted);
}
.blog-article .article-content{
  max-width:800px;
  margin:0 auto;
  font-size:1rem;
  line-height:1.7;
}
.blog-article .article-content h2,
.blog-article .article-content h3{
  font-family:var(--ff-heading);
  margin-top:2rem;
}
.blog-article .article-content p{
  margin-bottom:1.2rem;
}

.project-carousel .pc-track,
.before-after-carousel .ba-track {
  overflow-x: auto;
  overflow-y: hidden;
  /* Evita salto visual al cargar */
  min-height: 0;
}

/* Animación para el botón "Ver más" */
@keyframes bounce-in {
  0% {
    opacity: 0;
    transform: scale(0.7) translateY(60px);
  }
  60% {
    opacity: 1;
    transform: scale(1.05) translateY(-10px);
  }
  80% {
    transform: scale(0.97) translateY(4px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.anim-bounce-in {
  animation: bounce-in 1s cubic-bezier(.68,-0.55,.27,1.55) both;
}

/* Mejoras responsive SOLO para la página Acerca de Nosotros */
body.sobre-mi-page .about-grid,
body.sobre-mi-page .about-image,
body.sobre-mi-page .about-text,
body.sobre-mi-page .hero-about .section-title,
body.sobre-mi-page .hero-about .section-sub,
body.sobre-mi-page .section.contact-cta .section-title,
body.sobre-mi-page .section.contact-cta .section-sub,
body.sobre-mi-page .cta-actions,
body.sobre-mi-page .cta-actions .btn,
body.sobre-mi-page .site-footer .container,
body.sobre-mi-page .site-footer img {
  /* Estas reglas se sobreescriben abajo en los media queries */
}

/* Mejoras responsive SOLO para la página Acerca de Nosotros */
@media (max-width: 700px) {
  body.sobre-mi-page .about-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
    text-align: center;
  }
  body.sobre-mi-page .about-image {
    width: 100%;
    max-width: 95vw;      /* Fotos más grandes en móvil */
    min-width: 0;
    margin: 0 auto 1.5rem auto;
  }
  body.sobre-mi-page .about-image img {
    width: 100%;
    height: auto;
    border-radius: 1.2rem;
    box-shadow: 0 4px 24px 0 rgba(0,0,0,0.08);
    object-fit: cover;
  }
  body.sobre-mi-page .about-text {
    width: 100%;
    max-width: 100%;
    padding: 0 1rem;
    text-align: center;
  }
  body.sobre-mi-page .about-text h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    text-align: center;
  }
  body.sobre-mi-page .about-text p {
    font-size: 1.08rem;
    line-height: 1.7;
    margin-bottom: 1.2rem;
    text-align: center;
  }
  body.sobre-mi-page .hero-about .section-title,
  body.sobre-mi-page .hero-about .section-sub {
    text-align: center;
    padding: 0 1rem;
  }
  body.sobre-mi-page .section.contact-cta .section-title,
  body.sobre-mi-page .section.contact-cta .section-sub {
    text-align: center;
    padding: 0 1rem;
  }
  body.sobre-mi-page .cta-actions {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
  }
  body.sobre-mi-page .cta-actions .btn {
    width: auto;          /* Botón no ocupa todo el ancho */
    min-width: 140px;
    max-width: 90vw;
    font-size: 1rem;
    padding: 0.8em 1.5em;
  }
  body.sobre-mi-page .site-footer .container {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
  }
  body.sobre-mi-page .site-footer img {
    max-width: 90px;
    margin: 0 auto;
  }
}

@media (max-width: 480px) {
  body.sobre-mi-page .about-image {
    max-width: 98vw;      /* Fotos aún más grandes en pantallas pequeñas */
  }
  body.sobre-mi-page .about-text h2 {
    font-size: 1.18rem;
  }
  body.sobre-mi-page .about-text p {
    font-size: 0.98rem;
  }
  body.sobre-mi-page .cta-actions .btn {
    font-size: 0.98rem;
    padding: 0.7em 1.2em;
    min-width: 120px;
  }
}

@media (max-width: 700px) {
  /* For Carlos's section specifically */
  body.sobre-mi-page section:nth-of-type(3) .about-grid {
    display: flex;
    flex-direction: column;
  }

  /* Change order of elements in Carlos's section */
  body.sobre-mi-page section:nth-of-type(3) .about-grid .about-image {
    order: -1; /* This moves the image to the beginning */
  }
}

/*
 * On the "Acerca de Nosotros" page the biographies of Marcela Soto and Carlos
 * Massey are inserted as two consecutive `.about-grid` containers. On
 * desktop the second grid (Carlos) displays his text first then his photo.
 * When viewed on small screens the grids stack vertically via the generic
 * `.about-grid` media query above, which keeps the DOM order. To ensure
 * Carlos's photo appears above his text on mobile we reorder the flex items
 * for the second grid on that page. We target the page by its body class
 * (`page-acerca-de-nosotros`) which WordPress generates from the slug.
 */
@media (max-width: 760px) {
  /*
   * Para las páginas de biografías (Acerca de Nosotros / Sobre Mí) en pantallas pequeñas,
   * apila los elementos verticalmente y asegura que las imágenes de las biografías
   * aparezcan siempre primero.  Se aplica a todas las instancias de `.about-grid`
   * dentro de las páginas con slug `acerca-de-nosotros` o `sobre-mi`, así como a
   * la clase personalizada `sobre-mi-page` empleada por el tema.  De este modo
   * se corrige el orden de Carlos Massey en móviles y se mantiene la coherencia
   * para otras biografías.
   */
  body.page-acerca-de-nosotros .about-grid,
  body.page-sobre-mi .about-grid,
  body.sobre-mi-page .about-grid {
    display: flex;
    flex-direction: column;
  }
  body.page-acerca-de-nosotros .about-grid .about-image,
  body.page-sobre-mi .about-grid .about-image,
  body.sobre-mi-page .about-grid .about-image {
    order: -1;
  }
}

/*
  Ajuste para centrar los botones de llamado a la acción en dispositivos móviles.
  Esto asegura que el CTA se vea equilibrado en pantallas pequeñas.
*/
@media (max-width: 600px) {
  .contact-cta .cta-actions {
    text-align: center;
  }
  .contact-cta .cta-actions .btn {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
  }
}

/* === Carrusel vertical de servicios ===
   Inspirado en los carruseles horizontales, este componente
   muestra las tarjetas de servicio en una lista vertical con
   botones de navegación arriba y abajo. Solo se activa en
   pantallas de escritorio; en móviles se mantiene la lista
   desplegable de detalles (.services-mobile). */
.services-carousel {
  position: relative;
  display: none; /* visible solo en desktop via media query */
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}

.services-carousel .sc-track {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  gap: 1rem;
  max-height: 600px;
  padding-right: 0.5rem;
}
.services-carousel .sc-track::-webkit-scrollbar {
  width: 8px;
}
.services-carousel .sc-track::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.2);
  border-radius: 4px;
}
.services-carousel .card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(23,23,23,0.06);
  padding: 1.2rem;
  scroll-snap-align: start;
}
.services-carousel .card h3 {
  margin-top: 0;
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}
.services-carousel .card p {
  margin-bottom: 0;
  font-size: 0.95rem;
  line-height: 1.4;
}
.services-carousel .sc-nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  color: var(--accent);
  border: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(23,23,23,0.12);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  line-height: 1;
  transition: background 0.3s, transform 0.3s, color 0.3s;
  z-index: 10;
}
.services-carousel .sc-nav:hover {
  background: var(--accent);
  color: #fff;
}
.services-carousel .sc-prev {
  top: -20px;
}
.services-carousel .sc-next {
  bottom: -20px;
}

/* Mostrar el carrusel vertical solo en pantallas mayores a 760px */
@media (min-width: 761px) {
  .services-carousel {
    display: flex;
  }
  /* Ocultar la lista desplegable en desktop */
  .services-mobile {
    display: none;
  }
}

/* Ocultar fragmentos de texto en el subtítulo de la sección "antes/después" en pantallas pequeñas */
.desktop-only {
  display: inline;
}
@media (max-width: 600px) {
  .desktop-only {
    display: none;
  }
}

/* Ajustar el estilo de los botones de navegación del carrusel de servicios para un aspecto neutro */
.services-carousel .sc-nav {
  /* Ocultamos las flechas en el carrusel de servicios para evitar la flecha dorada */
  display: none;
}

/* Mostrar el acordeón de servicios y ocultar el carrusel en pantallas pequeñas */
@media (max-width: 760px) {
  #servicios .services-mobile {
    display: block !important;
  }
  #servicios .services-carousel {
    display: none;
  }
}

/* Contenedor clicable de la marca (logo + texto) */
.brand-home{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  text-decoration:none;
  color:inherit;
}

/* Tamaños base de logos */
.brand-home .logo{
  display:block;
  height:48px;
  width:auto;
}

/* Por defecto: mostrar AMS, ocultar libélula */
.brand-home .logo-ams{ display:block; }
.brand-home .logo-dragonfly{ display:none; }

/* Asegura que el nombre no se oculte en móvil */
.brand-container .brand-name{
  font-family:'Cormorant Garamond', serif;
  font-weight:500;
  color:var(--olive);
  white-space:nowrap;
}

/* Vista móvil: ocultar AMS, mostrar libélula y ajustar tipografía */
@media (max-width:760px){
  .brand-home .logo-ams{ display:none; }
  .brand-home .logo-dragonfly{ display:block; height:32px; }

  /* Anula cualquier regla previa que esconda el brand-name en móvil */
  .brand-container .brand-name{
    display:inline !important;
    font-size:clamp(0.95rem, 4.2vw, 1.1rem);
  }
}

/* Quitar por completo la barra superior de Google y cualquier globo/tooltip */
.goog-te-banner-frame.skiptranslate,
.goog-te-banner-frame,
.goog-te-balloon-frame,
#goog-gt-tt,
.goog-tooltip,
.goog-tooltip:hover {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Google a veces sube el body con inline styles; lo forzamos a 0 */
body { top: 0 !important; }

/* Opcional: ocultar icono del gadget si aparece */
.goog-te-gadget-icon { display: none !important; }


/* --- Translate overlay (web + iOS/Android) --- */
.tr-modal[hidden]{display:none}
.tr-modal{position:fixed;inset:0;z-index:9999;font-family:inherit}
.tr-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.tr-sheet{
  position:relative;background:#fff;color:#222;max-width:560px;width:92%;
  margin:clamp(12px,6vh,32px) auto;border-radius:16px;padding:20px 18px;
  box-shadow:0 20px 60px rgba(0,0,0,.25)
}
.tr-close{
  position:absolute;top:10px;right:12px;border:0;background:transparent;
  font-size:20px;line-height:1;cursor:pointer;opacity:.7
}
.tr-close:hover{opacity:1}
#tr-title{margin:0 0 .25rem 0;font-size:1.25rem}
.tr-sub{margin:.1rem 0 1rem;color:#666}

.tr-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem}
.tr-btn{
  font-weight:600;border-radius:10px;border:1px solid rgba(0,0,0,.08);
  padding:.6rem .9rem;background:#fff;cursor:pointer
}
.tr-btn-primary{background:#C2A56D;color:#fff;border:1px solid transparent}
.tr-btn-primary:hover{filter:brightness(1.05)}

.tr-hr{height:1px;background:rgba(0,0,0,.08);margin:1rem 0}

.tr-accordion details{border-bottom:1px solid rgba(0,0,0,.08);padding:.45rem 0}
.tr-accordion summary{cursor:pointer;font-weight:600;list-style:none}
.tr-accordion summary::-webkit-details-marker{display:none}
.tr-accordion ol{margin:.5rem 0 .2rem 1.1rem;padding:0}
.tr-accordion li{margin:.25rem 0;color:#444}

/* Responsive */
@media (max-width:480px){
  .tr-sheet{padding:16px 14px;border-radius:14px}
  .tr-actions{flex-direction:column;align-items:stretch}
  .tr-btn,.tr-btn-primary{width:100%}
}

/*
 * Additional translation modal styles moved from the many inline
 * <style> blocks that previously existed in each HTML file.  Having
 * them here reduces duplication and centralises the presentation of
 * the instruction overlay.  These rules restore the margins,
 * paddings and backgrounds originally applied inline.
 */
.tr-group{
  margin:0 0 1rem;
}
.tr-group h3{
  margin:.2rem 0 .4rem;
  font-size:1.05rem;
}
.tr-note{
  margin-top:.8rem;
  font-size:.9rem;
  color:#555;
}
.tr-accordion details{
  border:1px solid rgba(0,0,0,.08);
  border-radius:10px;
  margin:.5rem 0;
  overflow:hidden;
}
.tr-accordion summary{
  cursor:pointer;
  font-weight:600;
  list-style:none;
  padding:.7rem .9rem;
  background:#fafafa;
}
.tr-accordion ol{
  margin:.4rem 0 .8rem 1.2rem;
  padding:0;
}
.tr-accordion li{
  margin:.25rem 0;
  color:#444;
  line-height:1.45;
}

/* Asegura que el estado activo gane a estilos de enlaces de la navbar */
.site-nav .lang-option.active{
  color: var(--accent);
  border-bottom: 2px solid var(--accent);
}

/* ----------------------------------------------------------------------
   Ocultar #vivirbonito en la sección "antes y después" en pantallas pequeñas
   ---------------------------------------------------------------------- */
@media (max-width: 600px) {
  /* En el subtítulo de la sección antes/después, oculta el hashtag
     #vivirbonito en dispositivos móviles.  Manténlo visible en
     pantallas más grandes para preservar el diseño original. */
  #antes-despues .section-sub .hashtag {
    display: none;
  }
}

/* ----------------------------------------------------------------------
   Ajustes adicionales de estilo para secciones de proyectos y biografías
   ---------------------------------------------------------------------- */

/*
 * Agrega mayor separación entre el título y la descripción en las
 * subpáginas de proyectos.  Estas reglas se aplican tanto a la página
 * principal de proyectos como a las páginas de cada tipo de proyecto,
 * así como a las plantillas específicas de proyectos.  Sin estos
 * márgenes adicionales el título y el texto quedaban demasiado
 * juntos, especialmente al utilizar el nuevo meta box.
 */
body.page-proyectos .section-title,
body.page-proyectos-oficinas .section-title,
body.page-proyectos-comerciales .section-title,
body.page-proyectos-gastronomicos .section-title,
body.page-proyectos-oficinas .section-title,
body.page-proyectos-residencial .section-title,
body.tax-project_type .section-title {
  margin-bottom: 0.75rem;
}

body.page-proyectos .section-sub,
body.page-proyectos-oficinas .section-sub,
body.page-proyectos-comerciales .section-sub,
body.page-proyectos-gastronomicos .section-sub,
body.page-proyectos-oficinas .section-sub,
body.page-proyectos-residencial .section-sub,
body.tax-project_type .section-sub {
  margin-top: 0.25rem;
  margin-bottom: 2rem;
}

/*
 * Ajuste global para biografías en dispositivos móviles: apila las
 * columnas verticalmente y coloca la imagen antes del texto.  Esto
 * complementa las reglas específicas aplicadas a las páginas de
 * “Acerca de Nosotros” y “Sobre Mí”, corrigiendo casos donde se usa
 * `.about-grid` en otros contextos del tema.  No afecta la vista en
 * escritorio.
 */
@media (max-width: 760px) {
  .about-grid {
    display: flex;
    flex-direction: column;
  }
  .about-grid .about-image {
    order: -1;
  }
}

/*
 * Ajustes personalizados para el sitio AMS Lite
 * 1) Oculta el subtítulo bajo "Proyectos" únicamente en la portada.  Aunque
 *    el PHP ya no imprime la descripción, este selector evita que un
 *    subtítulo residual de versiones anteriores aparezca.
 * 2) Añade mayor separación entre el título y la descripción en las
 *    subpáginas de proyectos (página principal y categorías).  Los
 *    márgenes son más generosos que los valores por defecto para que
 *    el contenido no quede pegado.
 * 3) Normaliza los enlaces de teléfono y correo en la sección de
 *    contacto: se ocultan enlaces duplicados y se elimina el color
 *    azul/subrayado para que se vean como texto normal pero sigan
 *    siendo clicables.
 */

/* 1) Home: asegura que cualquier <p class="section-sub"> en la sección
   #proyectos se oculte para evitar mostrar subtítulos no deseados */
body.home #proyectos .section-sub,
body.front-page #proyectos .section-sub,
body.page-template-front-page #proyectos .section-sub{
  display: none !important;
}

/* 2) Subpáginas de proyectos: espacio generoso debajo del título y la
   descripción para las plantillas de proyectos y las taxonomías
   `project_type`.  Ajustamos los márgenes inferiores para los
   elementos .section-title y .section-sub en todas las variantes de
   plantillas de proyectos. */
body.page-template-page-proyectos .section-title,
body.page-template-page-proyectos-oficinas .section-title,
body.page-template-page-proyectos-comerciales .section-title,
body.page-template-page-proyectos-gastronomicos .section-title,
body.page-template-page-proyectos-residencial .section-title,
body.page-proyectos .section-title,
body.page-proyectos-oficinas .section-title,
body.page-proyectos-comerciales .section-title,
body.page-proyectos-gastronomicos .section-title,
body.page-proyectos-residenciales .section-title,
body.tax-project_type .section-title{
  margin-bottom: 1.5rem !important;
}

body.page-template-page-proyectos .section-sub,
body.page-template-page-proyectos-oficinas .section-sub,
body.page-template-page-proyectos-comerciales .section-sub,
body.page-template-page-proyectos-gastronomicos .section-sub,
body.page-template-page-proyectos-residencial .section-sub,
body.page-proyectos .section-sub,
body.page-proyectos-oficinas .section-sub,
body.page-proyectos-comerciales .section-sub,
body.page-proyectos-gastronomicos .section-sub,
body.page-proyectos-residenciales .section-sub,
body.tax-project_type .section-sub{
  margin-bottom: 2.5rem !important;
}

/* 3) Contacto: mantén los enlaces de teléfono y correo sin color azul ni
   subrayado y oculta enlaces extra que puedan añadirse por plugins */
#contacto .contact-info a{
  color: inherit !important;
  text-decoration: none !important;
}
#contacto .contact-info a:hover{
  text-decoration: underline !important;
}
#contacto .contact-info .contact-item a[href^="tel"]:not(:first-of-type),
#contacto .contact-info .contact-item a[href^="mailto"]:not(:first-of-type),
#contacto .contact-info .contact-item .contact-link,
#contacto .contact-info .contact-item .contact-extra,
#contacto .contact-info .contact-item small,
#contacto .contact-info .contact-item > a + a{
  display: none !important;
}

/* --- AMS tweak: color para "Síguenos en redes" en contacto (match look & feel) --- */
.contact-info > p{
  margin: .6rem 0 .4rem;
  color: var(--olive);
  font-weight: 600;
}
/* --- fin tweak --- */



/* --- AMS fix v2: "Síguenos en redes" dentro de #contacto ---
   En esta plantilla el texto es un <p> suelto antes de .socials,
   fuera de .contact-info. Usamos el id del section para precisión. */
#contacto p{
  color: var(--olive) !important;
  font-weight: 600;
  margin: .6rem 0 .4rem;
}
/* --- fin fix v2 --- */


/* --- AMS fix v3 (mobile): Forzar color dorado en móviles --- */
@media (max-width: 760px){
  #contacto .contact-grid > p,
  #contacto .contact-info > p,
  #contacto .socials ~ p,
  #contacto p{
    color: var(--accent) !important;
    font-weight: 600 !important;
    letter-spacing: .1px;
  }
}
/* --- fin fix v3 --- */

/* === AMS: Sept 10, 2025 adjustments per PDF === */

/* Hide hero subtext and hero actions on small screens */
@media (max-width: 768px) {
  .hero .hero-content > p {
    display: none !important;
  }
  .hero .hero-actions {
    display: none !important;
  }
}

/* Remove duplicate Projects button globally in hero */
.hero .hero-actions .btn.btn-white {
  display: none !important;
}

/* Intro compact section inserted below hero */

/*
 * Define the compact introduction section that follows the hero.  The goal of
 * this block is to reduce the vertical gap after the hero while still
 * providing breathing room above.  We intentionally set a smaller bottom
 * padding than the default `.section` so the next section sits closer,
 * creating a subtle transition.  By inheriting the background from the parent
 * section we maintain the alternating colour rhythm across the homepage,
 * rather than always forcing a transparent backdrop.
 */
.section.intro-compact {
  /* Inherit the alternating background from parent sections to preserve contrast */
  background: inherit !important;
  /* Reduce the top and bottom padding compared to the default 3.2rem */
  padding: 1.5rem 0 0.5rem;
  margin-bottom: 0 !important;
}

/*
 * Hide empty containers that could introduce unwanted blank space.  If a
 * section’s `.container` ends up empty (no content), it is removed from
 * layout entirely to avoid unexpected gaps.
 */
.section > .container:empty {
  display: none;
  margin: 0;
  padding: 0;
}

/* Solo en la sección Servicios */
#servicios .section-title + .section-sub{
  margin-top: 1rem;     /* espacio pequeño debajo del título */
}

/* ----------------------------------------------------------------------
   Ajustes personalizados según solicitud del cliente
   ---------------------------------------------------------------------- */
/* 1. Centrar el subtítulo de la portada (intro compact) para alinear con el título.
   Esto se aplica únicamente a la sección de introducción que sigue al héroe.  Se
   utiliza !important para sobreescribir cualquier alineación definida a
   través del editor de WordPress. */
.section.intro-compact .section-sub {
  text-align: center !important;
}

/* 2. Reducir el tamaño del hashtag en la sección de testimonios (Clientes Felices).
   #vivirbonito debe lucir más discreto junto al título principal. */
.testimonials-section .section-title .hashtag {
  font-size: 0.85em;
}

/* 3. Centrar el texto de las biografías en móviles en la página Acerca de Nosotros.
   En algunas vistas móviles el texto de Marcela quedaba alineado a la izquierda; este
   ajuste asegura que tanto su biografía como la de Carlos se muestren centradas. */
@media (max-width: 760px) {
  body.page-acerca-de-nosotros .about-grid .about-text,
  body.page-acerca-de-nosotros .about-grid .about-text p {
    text-align: center !important;
  }
}

/* 4. Aplica la fuente manuscrita a los botones de las secciones de contacto.  Esto
   otorga un aspecto de "mano alzada" a textos como “Escribínos” sin afectar
   otros botones del sitio. */
.contact-cta .cta-actions .btn {
  font-family: var(--ff-script);
}

/* 5. Ajustes de tipografía para los botones
   Después de recibir comentarios de que la escritura manuscrita y el tamaño
   grande dificultaban la lectura, se restablece la fuente primaria del sitio
   (Century Gothic/Poppins) y se reduce el tamaño para que los botones se
   perciban más finos y elegantes.  Se mantiene un ligero espaciado entre
   caracteres para evitar que el texto parezca comprimido. */
.btn {
  /* Utiliza la familia tipográfica principal para mayor legibilidad */
  font-family: var(--ff) !important;
  /* Ajusta el tamaño a un valor intermedio.  Este tamaño es mayor
     que el 0.8rem anterior, pero sigue siendo más pequeño que la
     versión de 1.2rem, proporcionando equilibrio entre presencia y
     sobriedad. */
  font-size: 0.95rem !important;
  /* Restaura el peso seminegrita clásico de los botones */
  font-weight: 600 !important;
  /* Ligero espaciado para una lectura más agradable */
  letter-spacing: 0.02em;
}

/* Tagline con la tipografía del título y tamaño ligeramente menor */
.hero .hero-content .hero-tagline{
  font-family: var(--ff-heading) !important; /* igual que el H1 */
  font-weight: 600;
  font-size: clamp(1.15rem, 3.2vw, 1.6rem);  /* más pequeño que el H1 */
  line-height: 1.25;
  letter-spacing: .02em;
  color: #FFFFFF !important;                 /* mantiene contraste en el hero */
  text-align: center;
  text-shadow: 0 2px 6px rgba(0,0,0,.45);     /* legible sobre la foto */
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin: 0 0 1.1rem 0;
}
@media (max-width: 760px){
  .hero .hero-content .hero-tagline{
    font-size: clamp(1.05rem, 5vw, 1.35rem); /* ajuste fino para móvil */
    margin-top: .6rem;
  }
}


/* Título y subtítulo del hero más opacos/tenues */
.hero .hero-content h1,
.hero .hero-content .hero-tagline{
  color: rgba(255, 255, 255, 0.78) !important; /* baja la intensidad */
  text-shadow: 0 2px 6px rgba(0,0,0,.30);       /* sombra suave para legibilidad */
}

/* En móvil, un pelín más visibles para no “lavarse” */
@media (max-width: 760px){
  .hero .hero-content h1,
  .hero .hero-content .hero-tagline{
    color: rgba(255, 255, 255, 0.85) !important;
  }
}

/* ——— HERO: forzar visibilidad y opacidad en título y subtítulo ——— */
.hero .hero-content h1,
.hero .hero-content .hero-tagline,
.hero .hero-content > p.hero-tagline{
  color: rgba(255, 255, 255, 0.78) !important;  /* más tenue */
  text-shadow: 0 2px 6px rgba(0,0,0,.30) !important;
}

/* Forzar que el subtítulo NO se oculte en móvil ni en ningún breakpoint */
.hero .hero-content .hero-tagline,
.hero .hero-content > p.hero-tagline{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin: 0 0 1rem 0 !important;
  font-family: var(--ff-heading) !important;   /* misma fuente que el título */
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: .02em !important;
  text-align: center !important;
}

/* Subir el texto por encima de overlays/filtros del hero si los hay */
.hero .hero-content{ position: relative !important; z-index: 3 !important; }
.hero::before, .hero::after{ z-index: 1 !important; }

/* Ajuste fino en pantallas pequeñas: un poquito más visible para legibilidad */
@media (max-width: 760px){
  .hero .hero-content h1,
  .hero .hero-content .hero-tagline,
  .hero .hero-content > p.hero-tagline{
    color: rgba(255, 255, 255, 0.85) !important;
  }
}