:root{
  --text-color:#474747;
}
*{
  box-sizing:border-box;
}
body{
  font-family:system-ui;
  background-color:black;
}
.wraper{
  max-width:1200px;
  margin:auto;
}
.header{
  
  align-items:center;
  line-height:1.5;
  background-color:#F7F2EF;
  border-radius:0.5rem;
  display:flex;
  justify-content:space-between;
  padding: 1rem 1.3rem;
}
.navbar,.menu{
  display:flex;
  align-items:center;
}
.navbar{
  gap:1rem;
}
.menu{
  font-weight:500;
  display:none;
  gap:0.5rem;
  font-size:15px;
}

.contact-btn{
  background-color:#FFED4F;
  padding:0.2rem 1rem;
  border-radius:1rem;
  border:1px solid black;
  box-shadow: 2px 2px 0px 0px black;
  font-weight:500;
  transition: transform 0.25s;
  &:hover{
   transform:scale(1.1);
    cursor:pointer;
  }
}



.font-w-500{
  font-weight:500;
}
.logo{
  font-weight:500;
  display:flex;
  align-items:center;
  gap:0.2rem;
}

section{
  margin-top:0.5rem;
}
.icon-burger{
  display:block;
}
.section-img{
  position:relative;
  overflow:hidden;
  column-gap:2rem;
  border-radius:0.5rem;
  background-color:#f5f4f3;
  padding:clamp(1rem,3vw,3rem) clamp(2rem,5vw,5rem);
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr));
}

img{
  
  height:auto;
  width:100%;
  object-fit:cover;
  clip-path: polygon(0 44%, 15% 15%, 37% 34%, 61% 9%, 89% 11%, 100% 31%, 100% 85%, 80% 89%, 63% 98%, 38% 84%, 7% 95%, 0% 85%);
}

.image{
  filter:drop-shadow(6px 12px 0px black) drop-shadow(-1px -1px 0px black)  drop-shadow(1px 2px 0px black);
  DISPLAY:grid;
  place-items:center;
  position:relative;
  
}

h1{
  font-size:clamp(20px,5vw + 10px,50px);
  line-height: 1;
  margin-bottom:0.5rem;
}
p{
  color: var(--text-color);
}

.texto{
  display:grid;
  align-items:center;
  JUSTIFY-ITEMS:START;
  GAP:1REM;
}


svg{
  height:20px;
  width:20px;
}

.icon-card{
  height:30px;
  width:30px;
}
.title-card{
  font-weight:600;
  font-size:20px;
}
.p-card{
  font-size:15px;
  color:var(--text-color);
}
.reset-section{
  grid-template-columns:auto;
  gap:1rem;
}
.yellow{
  background-color:#FFED4F;
}
.green{
  background-color:#0DFFA8;
}
.violet{
  background-color:#FFD9FE;
}

.section-img > * {
  z-index: 3;
}
.section-img::after{
  /*content:'';
  height:10rem;
  width:10rem;
  background-color:#c099ff;
  border-radius:50%;
  filter:blur(80px);
  position:absolute;
  left:70%;
  top:40%;
  z-index:0; */
}

.section-img::before{
  
  content:'';
  height:10rem;
  width:10rem;
  background-color:#f6cd6d;
  border-radius:50%;
  filter:blur(80px);
  position:absolute;
  right:3%;
  top:50%;
  z-index:0;
}

.card{
 
  border-radius:0.5rem;
  padding:1rem 1rem;
  display:grid;
  gap:1rem;
  justify-items:start;
}
.section-tres-columnas{
  gap:0.5rem;
  display:grid;
  grid-template-columns:repeat(1,1fr);
}

.btn-card{
  display:flex;
  align-items:center;
  gap: 1rem;
  padding: 0.2rem 0.5rem;
  border-radius:1rem;
  background-color:black;
  color:white;
  border:none;
  transition:filter 0.2s;
  cursor:pointer;
  padding: 0.3rem 1rem;
}
.btn-card:hover{
  filter:drop-shadow(2px 2px 0px lightgrey);
}

.btn-card svg{
  fill:white;
}

.clip-path-square{
 clip-path: polygon(0 45%, 40% 0, 82% 6%, 100% 25%, 100% 57%, 89% 68%, 100% 85%, 100% 97%, 85% 100%, 27% 100%, 12% 89%, 0% 85%);
}

.brutal-btn{
  COLOR:BLACK;
  FONT-WEIGHT:700;
  PADDING:0.5REM 2REM;
  BORDER-RADIUS:2REM;
  BACKGROUND-COLOR:TRANSPARENT;
  BORDER:1PX SOLID BLACK;
  BOX-SHADOW:2PX 4PX 0PX 0PX BLACK;
  transition: transform 0.25s;
  &:hover{
   transform:scale(1.1);
    cursor:pointer;
  }
}
.centrado{
  place-items:Center;
}

.blanco{
  background-color:white;
}
.menu>div:hover{
      text-decoration: underline;
    text-underline-offset: 0.3rem;
  cursor:pointer;
      text-decoration-thickness: 0.2rem;
}


.borde-negro{
  border-radius:1rem;
  border:3px solid black;
  clip-path:none;
}
@media (min-width: 750px){
  .menu{
    display:flex;
  }
  .section-tres-columnas{
     grid-template-columns:repeat(3,1fr);
  }
  .icon-burger{
    display:none;
  }
}



/* ===============================
   MOBILE MENU SYSTEM
================================ */

.icon-burger {
  cursor: pointer;
  z-index: 1001;
}

/* Menu base */
.menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 75%;
  max-width: 320px;
  height: 100vh;
  background: #fff;
  padding: 100px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transition: right 0.35s cubic-bezier(.23,1,.32,1);
  z-index: 1000;
}

/* Menu open */
.menu.menu-open {
  right: 0;
}

/* Menu items */
.menu > div {
  font-size: 1.2rem;
  font-weight: 600;
  cursor: pointer;
}

/* Overlay */
.menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  z-index: 999;
}

.menu-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* Burger → X animation */
.icon-burger.open {
  transform: rotate(90deg);
}

/* Lock scroll */
body.menu-lock {
  overflow: hidden;
}

/* Desktop safety */
@media (min-width: 1024px) {
  .menu {
    position: static;
    height: auto;
    flex-direction: row;
    background: transparent;
    padding: 0;
    right: 0;
  }

  .menu-overlay,
  .icon-burger {
    display: none;
  }
}

/* ===============================
   FIX HAMBURGER CLICK ISSUE
================================ */

.icon-burger {
  width: 32px;
  height: 32px;
  cursor: pointer;

  /* CRITICAL */
  pointer-events: auto;
  z-index: 1002;
  position: relative;

  /* iOS tap fix */
  touch-action: manipulation;
}

.icon-burger * {
  pointer-events: none;
}

/* Ensure header doesn't block it */
.header {
  position: relative;
  z-index: 1000;
}

/* =================================================
   HAMBURGER CLICK + MOBILE MENU (FIXED)
================================================= */

/* Ensure header stacking */
.header {
  position: relative;
  z-index: 1000;
}

/* NAVBAR positioning */
.navbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* HAMBURGER ICON */
.icon-burger {
  width: 32px;
  height: 32px;
  cursor: pointer;

  position: relative;
  z-index: 1002;

  pointer-events: auto;
  touch-action: manipulation;
}

/* IMPORTANT: let SVG receive the click, not the path */
.icon-burger path {
  pointer-events: none;
}

/* =========================
   MOBILE MENU PANEL
========================= */
.menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 80%;
  max-width: 320px;
  height: 100vh;

  background: #fff;
  padding: 96px 24px 24px;

  display: flex;
  flex-direction: column;
  gap: 24px;

  transition: right 0.35s cubic-bezier(.23,1,.32,1);
  z-index: 1001;
}

.menu.menu-open {
  right: 0;
}

.menu > div {
  font-size: 1.25rem;
  font-weight: 600;
  cursor: pointer;
}

/* =========================
   OVERLAY
========================= */
.menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;

  z-index: 1000;
}

.menu-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* =========================
   SCROLL LOCK
========================= */
body.menu-lock {
  overflow: hidden;
}

/* =========================
   DESKTOP RESET
========================= */
@media (min-width: 1024px) {
  .icon-burger {
    display: none;
  }

  .menu {
    position: static;
    height: auto;
    flex-direction: row;
    background: transparent;
    padding: 0;
    right: 0;
  }

  .menu-overlay {
    display: none;
  }
}

/* =========================================
   FINAL MOBILE MENU OVERRIDE (AUTHORITATIVE)
========================================= */

/* BASE: menu exists but is off-canvas */
.menu {
  display: flex !important;          /* KILLS display:none */
  position: fixed;
  top: 0;
  right: -100%;
  width: 80%;
  max-width: 320px;
  height: 100vh;

  background: #fff;
  padding: 96px 24px 24px;

  flex-direction: column;
  gap: 24px;

  z-index: 1001;
  transition: right 0.35s cubic-bezier(.23,1,.32,1);
}

/* OPEN STATE */
.menu.menu-open {
  right: 0;
}

/* MOBILE ONLY */
@media (max-width: 749px) {
  .icon-burger {
    display: block;
  }
}

/* DESKTOP RESET */
@media (min-width: 750px) {
  .menu {
    position: static;
    height: auto;
    width: auto;
    padding: 0;
    background: transparent;
    flex-direction: row;
    right: 0;
  }

  .icon-burger {
    display: none;
  }
}

/* =========================
   BURGER BUTTON
========================= */
.burger-btn {
  width: 32px;
  height: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1002;
}

.burger-btn span {
  height: 3px;
  width: 100%;
  background: black;
  display: block;
  transition: transform .25s ease, opacity .25s ease;
}

/* X state */
.burger-btn.active span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}
.burger-btn.active span:nth-child(2) {
  opacity: 0;
}
.burger-btn.active span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* =========================
   MOBILE MENU
========================= */
.menu {
  position: fixed;
  top: 0;
  right: -100%;
  height: 100vh;
  width: 80%;
  max-width: 320px;
  background: #fff;
  padding: 96px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transition: right .35s cubic-bezier(.23,1,.32,1);
  z-index: 1001;
}

.menu.menu-open {
  right: 0;
}

/* =========================
   OVERLAY
========================= */
.menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  z-index: 1000;
}

.menu-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

body.menu-lock {
  overflow: hidden;
}

/* =========================
   DESKTOP RESET
========================= */
@media (min-width: 750px) {
  .burger-btn {
    display: none;
  }

  .menu {
    position: static;
    height: auto;
    width: auto;
    flex-direction: row;
    background: transparent;
    padding: 0;
    right: 0;
  }
}

/* =========================================
   GLOBAL VERTICAL RHYTHM (BREATHING SPACE)
   Subtle, brutal, controlled
========================================= */

/* Space between major sections */
section {
  margin-top: clamp(1.25rem, 3vw, 2.25rem);
}

/* Inner section spacing */
.section-img {
  row-gap: clamp(1rem, 2.5vw, 2rem);
}

/* Text blocks */
.texto {
  gap: clamp(0.75rem, 2vw, 1.25rem);
}

/* Headings spacing */
.texto h1 {
  margin-bottom: 0.25em;
}

/* Paragraph readability */
.texto p,
.p-card {
  line-height: 1.55;
  max-width: 60ch;
}

/* =========================================
   FEATURE CARDS SPACING
========================================= */

.section-tres-columnas {
  gap: clamp(0.75rem, 2vw, 1.5rem);
}

.card {
  padding: clamp(1rem, 2.5vw, 1.5rem);
  gap: 0.75rem;
}

.card .title-card {
  margin-top: 0.25rem;
}

.card .btn-card {
  margin-top: 0.5rem;
}

/* =========================================
   IMAGE SECTIONS (PREVENT CROWDING)
========================================= */

.section-img .image {
  margin-top: clamp(0.5rem, 2vw, 1rem);
}

/* Prevent stacked sections touching visually */
.section-img + .section-img {
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

/* =========================================
   APPLY / DISCLOSURE SECTION
========================================= */

.section-img.reset-section {
  gap: clamp(0.75rem, 2vw, 1.25rem);
}

.section-img.reset-section details {
  margin-top: 0.25rem;
}

.section-img.reset-section details summary {
  padding: 0.25rem 0;
}

.section-img.reset-section details[open] {
  margin-bottom: 0.5rem;
}

/* =========================================
   BUTTON BREATHING
========================================= */

.brutal-btn,
.contact-btn {
  margin-top: clamp(0.5rem, 2vw, 1rem);
}

/* =========================================
   MOBILE SAFETY (NO OVER-SPACING)
========================================= */

@media (max-width: 480px) {
  .texto p,
  .p-card {
    max-width: 100%;
  }

  section {
    margin-top: 1.25rem;
  }
}


/* =====================================================
   GLOBAL BUTTON RESPONSIVENESS
   ===================================================== */

button,
.btn-card,
.brutal-btn,
.contact-btn,
.menu div {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Minimum touch target (WCAG / mobile-safe) */
button,
.btn-card,
.brutal-btn,
.contact-btn {
  min-height: 44px;
  min-width: 44px;
}

/* Fluid typography + spacing */
.btn-card,
.brutal-btn,
.contact-btn {
  padding: clamp(12px, 2.5vw, 16px) clamp(16px, 4vw, 24px);
  font-size: clamp(14px, 2.5vw, 16px);
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  cursor: pointer;
}

/* Icon scaling inside buttons */
.btn-card svg,
.brutal-btn svg {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

/* Mobile full-width behavior */
@media (max-width: 768px) {
  .btn-card,
  .brutal-btn,
  .contact-btn {
    width: 100%;
    justify-content: space-between;
  }

  .menu div {
    padding: 14px 0;
    font-size: 18px;
  }
}

/* Desktop hover feedback (non-janky) */
@media (hover: hover) {
  button:hover {
    transform: translateY(-1px);
  }
}

/* Keyboard accessibility */
button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* =========================================
   PPS — ICEBERG FONT OVERRIDE (ABOUT PAGE)
   ========================================= */

body,
.wraper,
.header,
.navbar,
.section-img,
.section-tres-columnas,
.card,
.title-card,
.p-card,
.btn-card,
h1, h2, h3, h4, h5, h6,
p,
span,
a {
  font-family: "Iceberg", system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
}