/* ============================================================

   SARNICOLA & ASOCIADOS — style.css

   ============================================================ */



@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap');


.bot-der {
    text-align: right;
    margin-top: 20px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { width: 100%; overflow-x: clip; }

body { font-family: 'Geist-Regular'; background: #fff; animation: pageFadeIn 0.7s ease both; }

@keyframes pageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Scroll fade-in ── */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}




/* Botón flotante WhatsApp */
.wa-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9999;
  width: 80px;
  height: 80px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
transition: transform 0.5s ease;
  animation: waEntrada 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards;
}

.wa-float svg { width: 50px; height: 50px; }

.wa-float:hover {
  transform: scale(1.2)!important;

}

@keyframes waEntrada {
  from { opacity: 0; transform: scale(0.5) translateY(20px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}

@media (max-width: 768px) {
  .wa-float { bottom: 18px; right: 18px; width: 70px; height: 70px; }
  .wa-float svg { width: 35px; height: 35px; }
}


@font-face {

  font-family: "Geist-Black";

  src: url("fonts/Geist-Black.ttf") format("truetype");

  font-style: normal;

}



@font-face {

  font-family: "Geist-BlackItalic";

  src: url("fonts/Geist-BlackItalic.ttf") format("truetype");

  font-style: italic;

}



/* EXTRA BOLD */

@font-face {

  font-family: "Geist-ExtraBold";

  src: url("fonts/Geist-ExtraBold.ttf") format("truetype");

  font-style: normal;

}



@font-face {

  font-family: "Geist-ExtraBoldItalic";

  src: url("fonts/Geist-ExtraBoldItalic.ttf") format("truetype");

  font-style: italic;

}



/* BOLD */

@font-face {

  font-family: "Geist-Bold";

  src: url("fonts/Geist-Bold.ttf") format("truetype");

  font-style: normal;

}



@font-face {

  font-family: "Geist-BoldItalic";

  src: url("fonts/Geist-BoldItalic.ttf") format("truetype");

  font-style: italic;

}



/* SEMI BOLD */

@font-face {

  font-family: "Geist-SemiBold";

  src: url("fonts/Geist-SemiBold.ttf") format("truetype");

  font-style: normal;

}



@font-face {

  font-family: "Geist-SemiBoldItalic";

  src: url("fonts/Geist-SemiBoldItalic.ttf") format("truetype");

  font-style: italic;

}



/* MEDIUM */

@font-face {

  font-family: "Geist-Medium";

  src: url("fonts/Geist-Medium.ttf") format("truetype");

  font-style: normal;

}



@font-face {

  font-family: "Geist-MediumItalic";

  src: url("fonts/Geist-MediumItalic.ttf") format("truetype");

  font-style: italic;

}



/* REGULAR */

@font-face {

  font-family: "Geist-Regular";

  src: url("fonts/Geist-Regular.ttf") format("truetype");

  font-style: normal;

}



@font-face {

  font-family: "Geist-Italic";

  src: url("fonts/Geist-Italic.ttf") format("truetype");

  font-style: italic;

}



/* LIGHT */

@font-face {

  font-family: "Geist-Light";

  src: url("fonts/Geist-Light.ttf") format("truetype");

  font-style: normal;

}



@font-face {

  font-family: "Geist-LightItalic";

  src: url("fonts/Geist-LightItalic.ttf") format("truetype");

  font-style: italic;

}



/* EXTRA LIGHT */

@font-face {

  font-family: "Geist-ExtraLight";

  src: url("fonts/Geist-ExtraLight.ttf") format("truetype");

  font-style: normal;

}



@font-face {

  font-family: "Geist-ExtraLightItalic";

  src: url("fonts/Geist-ExtraLightItalic.ttf") format("truetype");

  font-style: italic;

}



/* THIN */

@font-face {

  font-family: "Geist-Thin";

  src: url("fonts/Geist-Thin.ttf") format("truetype");

  font-style: normal;

}



@font-face {

  font-family: "Geist-ThinItalic";

  src: url("fonts/Geist-ThinItalic.ttf") format("truetype");

  font-style: italic;

}

h1.hero__title {

    font-family: 'Geist-Light';

}



:root {

  --rojo: #971921;

  --nav-h: 95px;

}



/* ============================================================

   NAVBAR

   ============================================================ */

.navbar {

  position: fixed;

  top: 0; left: 0; right: 0;

  z-index: 1000;

  height: var(--nav-h);

  background: #fff;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 0 50px;

}



.navbar__logo {
  display: flex;
  align-items: center;
  height: 100%;
  flex-shrink: 0;
}
.navbar__logo img {
  height: 70px;
  width: auto;
  object-fit: contain;
  display: block;
}
.navbar__logo img.navbar__logo-estudio {
  height: 60px;
  width: auto;
}

@media (max-width: 1024px) {
  .navbar__logo img.navbar__logo-estudio {
    width: 100px;
    height: auto;
  }
}


.navbar__links {

  display: flex;

  list-style: none;

  gap: 4px;

}

.navbar__links a {

      font-family: 'Geist-Regular';

  display: inline-block;

  padding: 6px 14px;

  font-size: 20px;



  color: #000;

  text-decoration: none;

  border-radius: 6px;

  transition: transform 0.25s ease, color 0.25s ease;

}

.navbar__links a:hover {

  transform: scale(1.1);

  color: var(--rojo);

}



.navbar__cta {

  display: inline-flex;

  align-items: center;

  gap: 8px;

padding: 5px 5px 5px 20px;

  background: var(--rojo);

  color: #fff;

  font-size: 020px;

font-family: 'Geist-Light';

  text-decoration: none;

  border-radius: 50px;

  transition: transform 0.25s ease, box-shadow 0.25s ease;

}

.navbar__cta:hover {

  transform: scale(1.07);

  box-shadow: 0 6px 20px rgba(139,32,32,0.35);

}

.navbar__cta svg { width: 15px; height: 15px; }



.navbar__burger {

  display: none;

  flex-direction: column;

  gap: 5px;

  background: none;

  border: none;

  cursor: pointer;

  padding: 4px;

}

.navbar__burger span {

  display: block;

  width: 24px;

  height: 2px;

  background: #222;

  border-radius: 2px;

  transition: transform 0.3s ease, opacity 0.3s ease;

}

.navbar__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }

.navbar__burger.is-open span:nth-child(2) { opacity: 0; }

.navbar__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }



.navbar__mobile {

  display: none;

  position: fixed;

  top: var(--nav-h); left: 0; right: 0; bottom: 0;

  background: #fff;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 8px;

  list-style: none;

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.3s ease;

  z-index: 999;

}

.navbar__mobile.is-open { opacity: 1; pointer-events: all; }

.navbar__mobile a {

  font-size: 1.5rem;

  font-weight: 600;

  color: #222;

  text-decoration: none;

  padding: 10px 24px;

  transition: color 0.2s ease;

}

.navbar__mobile a:hover { color: var(--rojo); }

.navbar__mobile .navbar__cta { font-size: 1rem; margin-top: 20px; }



/* ============================================================

   HERO — card con bordes redondeados y márgenes

   ============================================================ */

.hero-wrap {

  padding: 80px 50px 0px 50px;

}



.hero {

      background: black;

  position: relative;

  width: 100%;

  height: calc(100vh - var(--nav-h) - 32px);

  min-height: 460px;

  border-radius: 30px;

  overflow: hidden;

  display: flex;

  align-items: center; /* texto centrado verticalmente como en la imagen */

}



.hero__bg {

  position: absolute;

  inset: 0;

  background: url('assets/portada.png') center center / cover no-repeat;

  opacity: 0;

  animation: heroFade 1.2s ease forwards 0.2s;

}



@keyframes heroFade {

  to { opacity: 1; }

}



.hero__overlay {

  position: absolute;

  inset: 0;

  background: linear-gradient(to right, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.10) 60%, transparent 100%);

}



.hero__content {

  position: relative;

  z-index: 2;

  padding: 0 52px;

}



.hero__title {

  font-size: clamp(2.4rem, 5.5vw, 4.8rem);

  font-weight: 300;

  color: #fff;

  line-height: 1.1;

}

.hero__title strong {

    font-family: 'Geist-Medium';

  display: block;

}



.hero__title .line-1 {

  opacity: 0;

  transform: translateX(-40px);

  animation: slideIn 0.7s ease forwards 1s;

}

.hero__title .line-2 {

  opacity: 0;

  transform: translateX(-40px);

  animation: slideIn 0.7s ease forwards 1.2s;

}

.hero__title .line-3 {

  opacity: 0;

  transform: translateX(-40px);

  animation: slideIn 0.7s ease forwards 1.4s;

}



@keyframes slideIn {

  to { opacity: 1; transform: translateX(0); }

}



/* ============================================================

   RESPONSIVE

   ============================================================ */

@media (max-width: 768px) {

  .navbar { padding: 0 20px; }

  .navbar__links,

  .navbar__cta  { display: none; }

  .navbar__burger { display: flex; }

  .navbar__mobile { display: flex; }



  .hero-wrap {

    padding: 70px 5px 0px 5px;

}
.hero {
    height: calc(70vh - var(--nav-h) - 106px);
}
.navbar__logo img {
    width: 50px;
    height: 45px;
    object-fit: contain;
}
  .hero { border-radius: 30px; }

  .hero__content { padding: 0 28px; }

  .hero__title { font-size: clamp(3rem, 8vw, 2.8rem); }

}



/* ============================================================

   FOOTER

   ============================================================ */



.ft {

  background: #f0f0f0;

  font-family: 'Outfit', sans-serif;

}



.ft__top {

  padding: 48px 60px 40px;


}



/* Logo izquierda, columnas centradas juntas */

.ft__top-inner {

  max-width: 100%;

  margin: 0 auto;

  display: grid;

  grid-template-columns: 1fr 1fr 1fr 1fr;

  align-items: start;

  gap: 0;

}



.ft__logo {

  grid-column: 1;

}

.ft__logo img {

  width: 190px;

  object-fit: contain;

}



.ft__col {

  padding: 0 32px;

}

.ft__col:first-of-type {

  border-right: 1px solid #ddd;

}



.ft__col-title {

    font-size: 17px;

    letter-spacing: 1px;

    text-transform: uppercase;

    color: #971921;

    margin: 0 0 14px;

    font-family: 'Geist-Light';

}



.ft__col-list {

  list-style: none;

  padding: 0;

  margin: 0;

  display: flex;

  flex-direction: column;

  gap: 9px;

}



.ft__col-list li {

display: flex;

    align-items: flex-start;

    gap: 7px;

    font-size: 15px;

    color: #a9a9a9;

    line-height: 1.5;

    font-family: 'Geist-Light';

}



.ft__col-list svg {

  width: 14px;

  height: 14px;

  flex-shrink: 0;

  margin-top: 2px;

  color: #971921;

}



.ft__map-link {

  display: flex;

  align-items: flex-start;

  gap: 7px;

  color: inherit;

  text-decoration: none;

  transition: color 0.2s ease;

}

.ft__map-link:hover { color: #8B2020; }



.ft__col-list--links li { display: block; }

.ft__col-list--links a {

    text-decoration: none;

    transition: color 0.2s ease;

    font-size: 15px;

    color: #a9a9a9;

    font-family: 'Geist-Light';

}

.ft__col-list--links a:hover { color: #8B2020; }



/* ---------- Franja inferior ---------- */

.ft__bottom {

  padding: 20px 60px 0;

  border-bottom: 1px solid #ddd;

}



.ft__bottom-inner {

  max-width: 1100px;

  margin: 0 auto;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 32px;

  padding-bottom: 20px;

}



.ft__unsub {

  align-items: center;

  gap: 20px;

}



.ft__unsub-labels {

    font-size: 20px;

    color: #000000;

    line-height: 1.3;

    text-transform: uppercase;

    font-family: 'Geist-Regular';

    margin: 0;

}



.ft__unsub-form {

  display: flex;

  align-items: center;

  gap: 10px;

      margin-top: 15px;

}



.ft__unsub-input {

  background: transparent;

  border: none;

  border-bottom: 1px solid #bbb;

  outline: none;

  font-family: 'Outfit', sans-serif;

  font-size: 0.82rem;

  color: #444;

  padding: 4px 0;

  width: 180px;

  transition: border-color 0.2s ease;

      font-family: 'Geist-Light';

}

.ft__unsub-input::placeholder { color: #bbb; }

.ft__unsub-input:focus { border-color: #8B2020; }



.ft__unsub-btn {

    background: #971921;

    color: #fff;

    border: none;

    border-radius: 20px;

    font-family: 'Geist-Regular';

    font-size: 15px;

    padding: 5px 50px;

    cursor: pointer;

    transition: background 0.25s ease, transform 0.2s ease;

}
p.ft__brand.ft--visible {
    padding-top: 75px;
}
.ft__unsub-btn:hover { background: #971921; transform: scale(1.04); }



.ft__brand {

font-size: 15px;

    color: #888;

    margin: 0;

    white-space: nowrap;

    font-family: 'Geist-Light';

}



.ft__copy {

  text-align: center;

  padding: 14px 0;
      border-top: 1px solid #ddd;

}

.ft__copy p {

    margin: 0;

    font-size: 15px;

    color: #888;

    margin: 0;

    white-space: nowrap;

    font-family: 'Geist-Light';

}



/* ---------- Fade-in ---------- */

.ft__logo,

.ft__col,

.ft__unsub,

.ft__brand {

  opacity: 0;

  transform: translateY(20px);

  transition: opacity 0.6s ease, transform 0.6s ease;

}

.ft__logo.ft--visible             {     text-align: center; opacity: 1; transform: translateY(0); transition-delay: 0s;    }

.ft__col.ft--visible              { opacity: 1; transform: translateY(0); }

.ft__col:nth-child(2).ft--visible { transition-delay: 0.15s; }

.ft__col:nth-child(3).ft--visible { transition-delay: 0.3s;  }

.ft__unsub.ft--visible            { opacity: 1; transform: translateY(0); transition-delay: 0.1s;  }

.ft__brand.ft--visible            { opacity: 1; transform: translateY(0); transition-delay: 0.25s; }



/* ---------- Responsive ---------- */

@media (max-width: 768px) {

  .ft__top { padding: 36px 20px 28px; }

  .ft__top-inner { grid-template-columns: 1fr; gap: 28px; }

  .ft__col { padding: 0; border: none !important; }

  .ft__bottom { padding: 20px 20px 0; }

  .ft__bottom-inner { flex-direction: column; align-items: flex-start; gap: 20px; }

  .ft__unsub { flex-direction: column; align-items: flex-start; gap: 12px; }

  .ft__unsub-form { flex-wrap: wrap; }

  .ft__unsub-input { width: 130px; }

  .ft__brand { white-space: normal; }

}