@import "tailwindcss";
/* @import "tailwindcss/preflight"; */
@tailwind utilities;

/* Preline UI */
@source "../node_modules/preline/dist/*.js";
@import "../node_modules/preline/variants.css";

/* Plugins */
@plugin "@tailwindcss/forms";

@custom-variant dark (&:where(.dark, .dark *));

@layer base {
  /* INTER */
  @font-face {
    font-family: "Inter";
    src: url("/fonts/inter/Inter-Thin.ttf") format("truetype");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Inter";
    src: url("/fonts/inter/Inter-ExtraLight.ttf") format("truetype");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Inter";
    src: url("/fonts/inter/Inter-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Inter";
    src: url("/fonts/inter/Inter-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Inter";
    src: url("/fonts/inter/Inter-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Inter";
    src: url("/fonts/inter/Inter-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Inter";
    src: url("/fonts/inter/Inter-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Inter";
    src: url("/fonts/inter/Inter-ExtraBold.ttf") format("truetype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Inter";
    src: url("/fonts/inter/Inter-Black.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
  }

  /* AMOR SANS PRO */
  @font-face {
    font-family: "Amor Sans Pro";
    src: url("/fonts/amor/AmorSansPro.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Amor Sans Pro";
    src: url("/fonts/amor/AmorSansProItalic.otf") format("opentype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }
  @font-face {
    font-family: "Amor Sans Pro";
    src: url("/fonts/amor/AmorSansProBold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Amor Sans Pro";
    src: url("/fonts/amor/AmorSansProBoldItalic.otf") format("opentype");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
  }

  /* AMOR SANS TEXT PRO */
  @font-face {
    font-family: "Amor Sans Text Pro";
    src: url("/fonts/amor/AmorSansTextPro.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Amor Sans Text Pro";
    src: url("/fonts/amor/AmorSansTextProItalic.otf") format("opentype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }
  @font-face {
    font-family: "Amor Sans Text Pro";
    src: url("/fonts/amor/AmorSansTextProBold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Amor Sans Text Pro";
    src: url("/fonts/amor/AmorSansTextProBoldItalic.otf") format("opentype");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
  }

  /* AMOR SERIF PRO */
  @font-face {
    font-family: "Amor Serif Pro";
    src: url("/fonts/amor/AmorSerifPro.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Amor Serif Pro";
    src: url("/fonts/amor/AmorSerifProItalic.otf") format("opentype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }
  @font-face {
    font-family: "Amor Serif Pro";
    src: url("/fonts/amor/AmorSerifProBold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Amor Serif Pro";
    src: url("/fonts/amor/AmorSerifProBoldItalic.otf") format("opentype");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
  }

  /* BREE */
  @font-face {
    font-family: "Bree";
    src: url("/fonts/bree/BreeThin.otf") format("opentype");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Bree";
    src: url("/fonts/bree/BreeOblique_Thin.otf") format("opentype");
    font-weight: 100;
    font-style: italic;
    font-display: swap;
  }
  @font-face {
    font-family: "Bree";
    src: url("/fonts/bree/BreeLight.otf") format("opentype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Bree";
    src: url("/fonts/bree/BreeOblique_Light.otf") format("opentype");
    font-weight: 300;
    font-style: italic;
    font-display: swap;
  }
  @font-face {
    font-family: "Bree";
    src: url("/fonts/bree/BreeRegular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Bree";
    src: url("/fonts/bree/BreeOblique_Reg.otf") format("opentype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }
  @font-face {
    font-family: "Bree";
    src: url("/fonts/bree/BreeBold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Bree";
    src: url("/fonts/bree/BreeOblique_Bold.otf") format("opentype");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
  }
  @font-face {
    font-family: "Bree";
    src: url("/fonts/bree/BreeExtrabold.otf") format("opentype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Bree";
    src: url("/fonts/bree/BreeOblique_Extrabold.otf") format("opentype");
    font-weight: 800;
    font-style: italic;
    font-display: swap;
  }
}

/* =========================
   SAFE ZONES por resolución
   ========================= */

:root {
  /* Base: <= 1440px → 1280px */
  --safe-width: 335px;
}

/* <= 1360px → 1180px */
@media (width >= 674px) and (width <= 1359px) {
  :root {
    --safe-width: 1180px;
  }
}

@media (width > 1359px) {
  :root {
    --safe-width: 1280px;
  }
}

/* > 1440px → 1400px */
@media (width > 1530px) {
  :root {
    --safe-width: 1400px;
  }
}

/* ==========================================================
   VARIABLES DE COLOR (Variables Principales)
   ========================================================== */
:root {
  /* Neutrals */
  --neutral-white: #ffffff;
  --neutral-lightest: #f2f2f2;
  --neutral-lighter: #d9d8d9;
  --neutral-light: #b4b2b3;
  --neutral: #837f81;
  --neutral-dark: #524c4f;
  --neutral-darker: #20191d;
  --neutral-darkest: #080004;

  /* CB-Magenta (Razzmatazz) */
  --razzmatazz-lightest: #fae5ee;
  --razzmatazz-lighter: #f6ccdd;
  --razzmatazz-light: #e14c89;
  --razzmatazz: #d50057;
  --razzmatazz-dark: #aa0045;
  --razzmatazz-darker: #550022;
  --razzmatazz-darkest: #3f001a;

  /* White variants */
  --white-lightest: #ffffff;
  --white-lighter: #ffffff;
  --white-light: #ffffff;
  --white: #ffffff;
  --white-dark: #cccccc;
  --white-darker: #666666;
  --white-darkest: #4c4c4c;

  /* CB-Vino (Fresh Eggplant) */
  --fresh-eggplant-lightest: #f4e5ec;
  --fresh-eggplant-lighter: #eaccda;
  --fresh-eggplant-light: #b54c7e;
  --fresh-eggplant: #960048;
  --fresh-eggplant-dark: #780039;
  --fresh-eggplant-darker: #3c001c;
  --fresh-eggplant-darkest: #2d0015;

  /* Shortcuts de marca */
  --brand: var(--razzmatazz);
  --brand-hover: var(--razzmatazz-dark);
  --brand-foreground: var(--white);
}

/* ==========================================================
   THEME TOKENS (Tailwind v4) — Fonts y Colors a partir de variables
   ========================================================== */
@theme {
  /* Fonts */
  --font-bree: "Bree", ui-sans-serif, system-ui;
  --font-inter: "Inter", ui-sans-serif, system-ui;
  --font-sans: var(--font-bree);

  /* Colors  */
  --color-brand: var(--razzmatazz);
  --color-brand-hover: var(--razzmatazz-dark);
  --color-brand-foreground: var(--white);

  --color-neutral-white: var(--neutral-white);
  --color-neutral-lightest: var(--neutral-lightest);
  --color-neutral-lighter: var(--neutral-lighter);
  --color-neutral-light: var(--neutral-light);
  --color-neutral: var(--neutral);
  --color-neutral-dark: var(--neutral-dark);
  --color-neutral-darker: var(--neutral-darker);
  --color-neutral-darkest: var(--neutral-darkest);

  --color-razzmatazz-lightest: var(--razzmatazz-lightest);
  --color-razzmatazz-lighter: var(--razzmatazz-lighter);
  --color-razzmatazz-light: var(--razzmatazz-light);
  --color-razzmatazz: var(--razzmatazz);
  --color-razzmatazz-dark: var(--razzmatazz-dark);
  --color-razzmatazz-darker: var(--razzmatazz-darker);
  --color-razzmatazz-darkest: var(--razzmatazz-darkest);

  --color-eggplant: var(--fresh-eggplant);
  --color-eggplant-dark: var(--fresh-eggplant-dark);
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1530px;

  --shadow-custom: 0 24px 48px -12px rgba(85, 0, 34, 0.1);
  --shadow-card: 0 12px 16px -4px rgba(85, 0, 34, 0.08),
    0 4px 6px -2px rgba(85, 0, 34, 0.03);

  /** custom size para cards 2 columns desktop */
  --container-card: 600px;

  --leading-main: 1.1;
  --text-22: 22px;
  --text-28: 28px;
  --text-32: 32px;
  --text-44: 44px;
  --text-52: 52px;
}

/* ==========================================================
   TIPOGRAFÍA GLOBAL (auto en h1–h6 y p) — FIX COMPLETO
   ========================================================== */
@layer utilities {
  .font-bree {
    font-family: var(--font-bree);
  }
  .font-inter {
    font-family: var(--font-inter);
  }
}

@layer base {
  /* Cuerpo: Inter */
  html {
    font-family: var(--font-inter);
  }
  p {
    @apply text-[1rem] leading-[1.5] text-neutral-darkest;
    font-family: var(--font-inter);
    font-weight: 400;
  }

  /* Headings: Bree + brand + BOLD */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply text-brand;
    font-family: var(--font-bree);
    font-weight: 700;
  }

  h2,
  h3,
  h4,
  h5,
  h6 {
    letter-spacing: -0.01em;
  }

  /* MÓVIL (< 64rem) */
  h1 {
    @apply text-[2.5rem];
  } /* 44px  | lh 120% */
  h2 {
    @apply text-[2.25rem];
  } /* 40px  | lh 120% */
  h3 {
    @apply text-[2rem];
  } /* 32px  | lh 120% */
  h4 {
    @apply text-[1.5rem];
  } /* 24px  | lh 130% */
  h5 {
    @apply text-[1.25rem];
  } /* 20px  | lh 140% */
  h6 {
    @apply text-[1.125rem];
  } /* 18px  | lh 140% */

  h1,
  h2,
  h3 {
    line-height: 1.1;
  }
  h4 {
    line-height: 1.3;
  }
  h5,
  h6 {
    line-height: 1.4;
  }

  /* ===== DESKTOP (≥ 64rem / 1024px) — según guía */
  @media (width >= 64rem) {
    h1 {
      @apply text-[4.5rem];
    } /* 72px  | lh 120% */
    h2 {
      @apply text-[3.25rem];
    } /* 52px  | lh 120% */
    h3 {
      @apply text-[2.75rem];
    } /* 44px  | lh 120% */
    h4 {
      @apply text-[2.25rem];
    } /* 36px  | lh 130% */
    h5 {
      @apply text-[1.75rem];
    } /* 28px  | lh 140% */
    h6 {
      @apply text-[1.375rem];
    } /* 22px  | lh 140% */

    h1,
    h2,
    h3 {
      line-height: 1;
    }
    h4 {
      line-height: 1;
    }
    h5,
    h6 {
      line-height: 1;
    }

    p {
      @apply text-[1.125rem]    leading-[1.5];
    }
  }

  .tagline {
    @apply text-brand;
    font-family: var(--font-bree);
    font-weight: 700;
    font-size: 1.375rem;
    line-height: 1.5;
  }

  /* Escalas */
  .text-large {
    @apply text-[1.375rem] leading-[1.5];
  } /* 22px */
  .text-medium {
    @apply text-[1.125rem]    leading-[1.5];
  } /* 18/px */
  .text-regular {
    @apply text-[1rem] leading-[1.5];
  } /* 16px */
  .text-small {
    @apply text-[0.875rem]  leading-[1.5];
  } /* 14px */
  .text-tiny {
    @apply text-[0.875rem]  leading-[1.5];
  } /* 14px */

  img {
    @apply rounded-[14px] overflow-hidden;
  }

  picture {
    @apply rounded-[14px] overflow-hidden;
    display: block;
  }
}

/* Helpers */
@layer components {
  .heading-1 {
    @apply font-bree text-brand leading-[1.2] text-[2.75rem];
  }
  .heading-2 {
    @apply font-bree text-brand leading-[1.2] text-[2.5rem];
  }
  .heading-3 {
    @apply font-bree text-brand leading-[1.3] text-[2rem];
  }
  .heading-4 {
    @apply font-bree text-brand leading-[1.3] text-[1.5rem];
  }
  .heading-5 {
    @apply font-bree text-brand leading-[1.4] text-[1.25rem];
  }
  .heading-6 {
    @apply font-bree text-brand leading-[1.5] text-[1.125rem];
  }

  @media (width >= 64rem) {
    .heading-1 {
      @apply text-[3.25rem];
    } /* 52 */
    .heading-2 {
      @apply text-[2.75rem];
    } /* 44 */
    .heading-3 {
      @apply text-[2.25rem];
    } /* 36 */
    .heading-4 {
      @apply text-[1.75rem];
    } /* 28 */
    .heading-5 {
      @apply text-[1.375rem];
    } /* 22 */
    .heading-6 {
      @apply text-[1rem];
    } /* 16 */
  }

  .body-large {
    @apply font-inter text-[1.125rem] leading-[1.5];
  }
  .body-medium {
    @apply font-inter text-[1rem]    leading-[1.5];
  }
  .body-small {
    @apply font-inter text-[0.875rem] leading-[1.5];
  }
  .body-tiny {
    @apply font-inter text-[0.75rem] leading-[1.5];
  }

  .button-rounded {
    @apply w-[250px] text-[1rem] leading-[1.5] font-semibold  rounded-full  py-3 px-6 gap-x-2 text-sm  border border-brand text-brand hover:border-brand-hover hover:text-brand-hover font-inter cursor-pointer;
  }
}

@layer utilities {
  .full-bleed {
    @apply relative w-screen left-1/2 right-1/2 -mx-[50vw];
  }
}

@layer utilities {
  .banner-linear-gradient {
    @apply relative isolate;
  }

  .banner-linear-gradient::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      135deg,
      #ffffff 0%,
      #ffe7f1 35%,
      #fef0e6 70%,
      #ffffff 100%
    );
    border-radius: inherit;
    z-index: -1;
    pointer-events: none;
    width: 100vw;
    left: calc(50% - 50vw);
  }
}

:root {
  --brand: 342 82% 52%;
  --brand-foreground: 0 0% 100%;
}
html:focus-within {
  scroll-behavior: smooth;
}

body {
  @apply mx-auto min-h-screen bg-white w-screen overflow-x-hidden max-w-full;
}

html {
  @apply overflow-x-hidden;
}

/*** Header ***/
.navigation-links a {
  @apply text-brand underline font-bold;
}

/*** Footer ***/
.brands {
  @apply flex justify-between sm:justify-evenly py-9;
}

.footer button {
  @apply hs-accordion-active:text-gray-600;
}

.card-image-desktop {
  @apply w-full aspect-auto object-contain;
}

.info-card-desktop {
  @apply flex flex-col w-full gap-5  m-auto;
}

/* Fix Styles */
.button-rounded-banner {
  @apply w-[250px] text-[1rem] leading-[1.5] font-semibold mx-auto sm:mx-0  text-center rounded-full border-2 border-white/80
                      px-6 py-3  text-white focus:outline-none font-inter;
}

.sehero-banner {
  @apply flex flex-col flex-wrap items-center sm:pl-5 md:pl-10 lg:pl-15 xl:pl-20 sm:flex-row  sm:items-start sm:gap-5 gap-y-5 md:pt-10 lg:pt-25 xl:pt-30 2xl:pt-40;
}

.container-sections {
  max-width: var(--safe-width);
  width: 100%;
  margin-inline: auto;
}

.content-img-first-section-desktop {
  @apply hidden pt-[112px] pb-[66px] bg-white rounded-2xl sm:flex gap-20;
}

.content-img-section-desktop {
  @apply hidden pt-[66px] pb-[66px] bg-white rounded-2xl sm:flex gap-20;
}

.content-img-section-gradient-desktop {
  @apply hidden  bg-transparent rounded-2xl sm:flex gap-20;
}

.content-img-section-before-banner-desktop {
  @apply hidden pt-[112px] pb-[112px] bg-white rounded-2xl sm:flex gap-20;
}

.content-img-title-desktop {
  @apply text-4xl md:text-3xl lg:text-4xl  text-brand font-normal w-3/4;
}

.container-gradient-banner {
  @apply flex flex-col text-balance py-16 sm:py-28;
}

.card-carousel-container {
  @apply flex;
}

.title-description-carousel {
  @apply pb-15 pt-5 sm:max-w-[620px] sm:mx-auto;
}