:root {
  --bg: #09090b;
  --bg-soft: #111116;
  --card: #15151a;

  --paper: #ece7dc;
  --paper-dark: #d6ccbc;

  --text: #f3f0ea;
  --muted: #b7b1ba;

  --purple: #8f3fc0;
  --purple-2: #b25ad7;

  --line: rgba(255, 255, 255, 0.1);

  --shadow:
    0 18px 55px rgba(0, 0, 0, 0.46);

  --radius: 14px;
  --container: 1200px;
}


/* ======================================================
   RESET
====================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(circle at 30% 10%, rgba(143, 63, 192, 0.08), transparent 24%),
    #09090b;

  color: var(--text);

  font-family: "Inter", sans-serif;

  line-height: 1.6;

  overflow-x: hidden;
}

body::before {
  content: "";

  position: fixed;
  inset: 0;

  z-index: 9999;

  pointer-events: none;

  opacity: 0.09;

  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

img {
  display: block;
  width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

.container {
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
}

.section {
  position: relative;
  padding: 6rem 0;
}


/* ======================================================
   PAPEL RASGADO
====================================================== */

/*
  Este patrón crea el borde roto sin necesitar imágenes externas.
  Funciona con una pseudo-capa clara con muchos "dientes".
*/

.torn-top,
.torn-bottom {
  position: relative;
}

.torn-top::before,
.torn-bottom::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 54px;
  z-index: 15;
  pointer-events: none;
  background-repeat: repeat-x;
  background-size: 1200px 54px;
  filter: drop-shadow(0 3px 3px rgba(0,0,0,.35));
}

.torn-top::before {
  top: -26px;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='54' viewBox='0 0 1200 54'>\
<path d='M0,26 C28,14 52,46 80,34 C103,24 131,8 160,24 C191,41 213,49 243,36 C275,23 291,12 322,25 C349,37 372,48 404,34 C431,22 453,8 484,22 C514,36 536,47 570,34 C603,21 627,10 661,25 C691,38 714,49 746,35 C777,22 802,8 834,22 C864,36 886,49 917,37 C949,24 976,9 1006,21 C1036,33 1062,50 1094,38 C1122,28 1148,12 1174,22 C1188,27 1195,30 1200,31 L1200,54 L0,54 Z' fill='%23ece7dc'/>\
</svg>");
}

.torn-bottom::after {
  bottom: -26px;
  transform: rotate(180deg);
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='54' viewBox='0 0 1200 54'>\
<path d='M0,26 C28,14 52,46 80,34 C103,24 131,8 160,24 C191,41 213,49 243,36 C275,23 291,12 322,25 C349,37 372,48 404,34 C431,22 453,8 484,22 C514,36 536,47 570,34 C603,21 627,10 661,25 C691,38 714,49 746,35 C777,22 802,8 834,22 C864,36 886,49 917,37 C949,24 976,9 1006,21 C1036,33 1062,50 1094,38 C1122,28 1148,12 1174,22 C1188,27 1195,30 1200,31 L1200,54 L0,54 Z' fill='%23ece7dc'/>\
</svg>");
}


/* ======================================================
   TIPOGRAFÍA
====================================================== */

.section-label {
  color: var(--purple-2);

  font-size: 0.78rem;
  font-weight: 800;

  letter-spacing: 0.16em;
  text-transform: uppercase;

  margin-bottom: 0.45rem;
}

.section-title {
  font-family: "Bebas Neue", "Oswald", sans-serif;

  font-size: clamp(2.5rem, 5vw, 4.15rem);

  font-weight: 400;

  letter-spacing: 0.015em;
  line-height: 0.92;

  text-transform: uppercase;
}


/* ======================================================
   BOTONES
====================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 0.5rem;

  padding: 0.95rem 1.35rem;

  border: 1px solid transparent;
  border-radius: 8px;

  font-weight: 800;

  transition:
    transform 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease;
}

.btn:hover {
  transform: translateY(-3px);
}

.btn-primary {
  background: var(--purple);
  color: white;

  box-shadow:
    0 12px 35px rgba(143, 63, 192, 0.25);
}

.btn-primary:hover {
  background: var(--purple-2);
}

.btn-secondary {
  background: rgba(10, 10, 12, 0.45);

  color: white;

  border-color: rgba(255,255,255,.25);

  backdrop-filter: blur(8px);
}

.btn-secondary:hover {
  border-color: var(--purple-2);
  color: var(--purple-2);
}


/* ======================================================
   HEADER
====================================================== */

.header {
  position: fixed;
  top: 0;
  left: 0;

  width: 100%;

  z-index: 1000;

  background:
    rgba(8, 8, 10, 0.88);

  backdrop-filter:
    blur(14px);

  border-bottom:
    1px solid rgba(255,255,255,.06);
}

.nav {
  min-height: 86px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 1.5rem;
}


/* MARCA */

.brand {
  display: flex;
  align-items: center;

  gap: 0.7rem;

  flex-shrink: 0;
}

.brand-mark {
  width: 52px;
  height: 52px;

  overflow: hidden;

  border-radius: 50%;

  border:
    1px solid rgba(255,255,255,.25);

  background: #0b0b0c;
}

.brand-mark img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transform: scale(1.06);
}

.brand-copy {
  display: flex;
  flex-direction: column;

  line-height: 1;
}

.brand-copy span {
  font-family: "Oswald", sans-serif;

  font-size: 1.22rem;
  font-weight: 700;

  letter-spacing: 0.04em;

  color: white;
}

.brand-copy small {
  margin-top: 0.23rem;

  font-size: 0.57rem;
  font-weight: 800;

  letter-spacing: 0.26em;

  color: var(--muted);
}


/* MENU */

.menu {
  display: flex;
  align-items: center;

  gap: 2rem;
}

.menu a {
  position: relative;

  color: #e6e1e3;

  font-size: 0.91rem;
  font-weight: 600;

  padding: 0.4rem 0;
}

.menu a::after {
  content: "";

  position: absolute;
  left: 0;
  bottom: -0.1rem;

  width: 0;
  height: 3px;

  background: var(--purple);

  transition: width .22s ease;
}

.menu a:hover::after,
.menu a.active::after {
  width: 100%;
}

.menu-toggle {
  display: none;

  border: 0;
  background: transparent;

  cursor: pointer;
}

.menu-toggle span {
  width: 28px;
  height: 2px;

  display: block;

  margin: 5px 0;

  background: white;
}


/* ======================================================
   HERO
====================================================== */

.hero {
  position: relative;

  min-height: 100vh;

  display: flex;
  align-items: center;

  padding-top: 86px;

  overflow: hidden;

  background:
    url("../assets/img/hero.jpg")
    center / cover
    no-repeat;
}

.hero-overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(5,5,7,.96) 0%,
      rgba(6,6,8,.84) 31%,
      rgba(6,6,8,.45) 63%,
      rgba(6,6,8,.12) 100%
    );
}

.hero-grain {
  position: absolute;
  inset: 0;

  opacity: .15;

  pointer-events: none;

  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.025) 0,
      rgba(255,255,255,.025) 1px,
      transparent 1px,
      transparent 3px
    );
}

.hero-content {
  position: relative;
  z-index: 2;
}

.hero-text {
  position: relative;

  max-width: 640px;
}

.eyebrow {
  color: var(--purple-2);

  font-size: .76rem;
  font-weight: 800;

  letter-spacing: .18em;

  text-transform: uppercase;

  margin-bottom: 1rem;
}

.hero h1 {
  font-family: "Bebas Neue", "Oswald", sans-serif;

  font-size:
    clamp(4rem, 8vw, 7.4rem);

  font-weight: 400;

  line-height: .82;

  letter-spacing: .005em;

  text-transform: uppercase;

  text-shadow:
    0 3px 0 rgba(0,0,0,.35);
}

.hero h1 span {
  display: block;
}

.hero h2 {
  margin-top: .9rem;

  font-family: "Caveat", cursive;

  font-size:
    clamp(2.2rem, 4vw, 3.7rem);

  line-height: 1;

  color: var(--purple-2);

  transform: rotate(-2deg);
}

.hero-description {
  max-width: 500px;

  margin-top: 1rem;

  color: #e7e0e6;

  font-size: 1.02rem;
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;

  gap: .9rem;

  margin-top: 1.75rem;
}

.paper-note::after {
  content: "";

  position: absolute;
  left: -28px;
  right: -25px;
  bottom: -31px;

  height: 13px;

  opacity: .55;

  background:
    radial-gradient(
      circle at 10px -2px,
      transparent 11px,
      rgba(239,234,224,.6) 12px,
      rgba(239,234,224,.6) 13px,
      transparent 14px
    )
    0 0 / 25px 14px repeat-x;

  filter:
    blur(.1px);
}

.scroll-indicator {
  position: absolute;

  z-index: 3;

  left: 50%;
  bottom: 40px;

  transform: translateX(-50%);

  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  border:
    1px solid rgba(255,255,255,.35);

  border-radius: 50%;

  background:
    rgba(0,0,0,.2);

  backdrop-filter:
    blur(7px);

  animation:
    floatDown 1.8s infinite ease-in-out;
}

@keyframes floatDown {
  0%,
  100% {
    transform:
      translate(-50%, 0);
  }

  50% {
    transform:
      translate(-50%, 7px);
  }
}


/* ======================================================
   ABOUT
====================================================== */

.about {
  background:
    linear-gradient(180deg, #101014, #0b0b0e);

  padding-top: 7rem;
  padding-bottom: 7rem;
}

.about-grid {
  display: grid;

  grid-template-columns:
    1.03fr
    1.25fr
    .95fr;

  align-items: center;

  gap: 2.1rem;
}

.collage-card {
  position: relative;
  padding: 12px;
  background: #efe7d8;
  box-shadow:
    0 18px 45px rgba(0,0,0,.38),
    0 2px 0 rgba(255,255,255,.08) inset;
  border: 1px solid rgba(0,0,0,.18);
}

.collage-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background-image:
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter>\
<rect width='180' height='180' filter='url(%23n)' opacity='.35'/>\
</svg>");
}

.collage-card img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  display: block;
  border: 1px solid rgba(0,0,0,.08);
}

.collage-card img {
  height: 520px;

  object-fit: cover;

  filter:
    saturate(.85)
    contrast(1.08);
}

.rotate-left {
  transform:
    rotate(-1.6deg);
}

.rotate-right {
  transform:
    rotate(1.4deg);
}

.about-text {
  position: relative;
  padding: 1.6rem 1.4rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)),
    rgba(10,10,13,.75);
  border-left: 1px solid rgba(255,255,255,.08);
  border-right: 1px solid rgba(255,255,255,.04);
}

.about-text::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -18px;
  width: 18px;
  background:
    radial-gradient(circle at 18px 12px, transparent 16px, rgba(236,231,220,.85) 17px, rgba(236,231,220,.85) 18px, transparent 19px) 0 0 / 18px 28px repeat-y;
  opacity: .35;
}
.signature-link {
  display: inline-block;

  margin-top:
    .8rem;

  font-family:
    "Caveat",
    cursive;

  font-size:
    2.3rem;

  color:
    var(--purple-2);

  transform:
    rotate(-3deg);
}


/* SELLO */

.stamp {
  position: absolute;

  z-index: 5;

  width: 105px;
  height: 105px;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  border:
    2px solid rgba(255,255,255,.72);

  border-radius: 50%;

  background:
    rgba(11,11,14,.72);

  backdrop-filter:
    blur(6px);

  color:
    white;

  text-align:
    center;

  font-size:
    .55rem;

  letter-spacing:
    .13em;

  text-transform:
    uppercase;

  box-shadow:
    0 12px 30px rgba(0,0,0,.25);
}

.stamp strong {
  font-size:
    1.2rem;

  margin:
    .15rem 0;
}

.stamp-left {
  left:
    -22px;

  top:
    45px;

  transform:
    rotate(-14deg);
}


/* ======================================================
   SERVICIOS
====================================================== */

.services {
  background:
    #09090b;

  padding-top:
    6.4rem;
}

.torn-heading {
  position:
    relative;

  display:
    inline-block;

  margin-bottom:
    2.4rem;
}

.torn-heading::after {
  content:
    "";

  position:
    absolute;

  left:
    -7px;

  right:
    -24px;

  bottom:
    -9px;

  height:
    7px;

  background:
    linear-gradient(
      90deg,
      transparent 0 2%,
      rgba(236,231,220,.36) 2% 11%,
      transparent 11% 13%,
      rgba(236,231,220,.28) 13% 36%,
      transparent 36% 39%,
      rgba(236,231,220,.35) 39% 83%,
      transparent 83%
    );

  transform:
    rotate(-1deg);
}

.services-grid {
  display:
    grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap:
    1.25rem;
}

.service-card {
  position:
    relative;

  overflow:
    hidden;

  background:
    var(--card);

  border:
    1px solid rgba(255,255,255,.12);

  box-shadow:
    0 10px 30px rgba(0,0,0,.2);

  transition:
    transform .28s ease,
    border-color .28s ease,
    box-shadow .28s ease;
}

.service-card:nth-child(1) {
  transform:
    rotate(-.4deg);
}

.service-card:nth-child(2) {
  transform:
    rotate(.4deg);
}

.service-card:nth-child(3) {
  transform:
    rotate(-.3deg);
}

.service-card:nth-child(4) {
  transform:
    rotate(.35deg);
}

.service-card:hover {
  transform:
    translateY(-7px)
    rotate(0);

  border-color:
    rgba(178,90,215,.55);

  box-shadow:
    0 22px 50px rgba(0,0,0,.38);
}

.service-image {
  height:
    270px;

  overflow:
    hidden;
}

.service-image img {
  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  transition:
    transform .35s ease;

  filter:
    contrast(1.06)
    saturate(.93);
}

.service-card:hover .service-image img {
  transform:
    scale(1.035);
}

.service-content {
  position:
    relative;

  padding:
    1.45rem 1.15rem 1.4rem;
}

.service-content::before {
  content:
    "";

  position:
    absolute;

  left:
    0;

  top:
    -13px;

  width:
    100%;

  height:
    18px;

  background:
    radial-gradient(
      circle at 12px 17px,
      transparent 11px,
      var(--card) 12px
    )
    0 0 / 24px 18px repeat-x;
}

.service-icon {
  width:
    45px;

  height:
    45px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid var(--purple-2);

  border-radius:
    50%;

  color:
    var(--purple-2);

  font-size:
    1.25rem;

  margin-bottom:
    .75rem;
}

.service-content h3 {
  font-family:
    "Bebas Neue",
    "Oswald",
    sans-serif;

  font-size:
    1.75rem;

  font-weight:
    400;

  line-height:
    1;

  letter-spacing:
    .015em;

  text-transform:
    uppercase;

  margin-bottom:
    .65rem;
}

.service-content p {
  color:
    #c9c2ca;

  font-size:
    .94rem;
}


/* ======================================================
   TRABAJOS
====================================================== */

.works {
  background:
    #121216;

  padding-top:
    7rem;
  padding-bottom:
    7rem;
}

.section-heading-flex {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    2rem;

  margin-bottom:
    2rem;
}

.insta-link {
  color:
    var(--purple-2);

  font-weight:
    800;

  font-size:
    .93rem;
}

.works-grid {
  display:
    grid;

  grid-template-columns:
    repeat(6, 1fr);

  gap:
    .55rem;
}

.work-photo {
  overflow:
    hidden;

  background:
    #efe9dc;

  padding:
    5px;

  box-shadow:
    0 12px 35px rgba(0,0,0,.34);
}

.work-photo img {
  width:
    100%;
  height:
    265px;

  object-fit:
    cover;

  filter:
    contrast(1.08)
    saturate(.9);

  transition:
    transform .25s ease,
    filter .25s ease;
}

.work-photo:hover img {
  transform:
    scale(1.04);

  filter:
    contrast(1.12)
    saturate(1.05);
}

.work-photo-a {
  transform:
    rotate(-1deg);
}

.work-photo-b {
  transform:
    rotate(.55deg);
}

.work-photo-c {
  transform:
    rotate(-.4deg);
}

.work-photo-d {
  transform:
    rotate(.8deg);
}

.work-photo-e {
  transform:
    rotate(-.6deg);
}

.work-photo-f {
  transform:
    rotate(.45deg);
}

.works-bottom {
  display:
    flex;

  justify-content:
    flex-end;

  margin-top:
    1.4rem;
}


/* ======================================================
   RESEÑAS
====================================================== */

.reviews {
  background:
    #09090b;

  padding-top:
    6rem;
}

.reviews-grid {
  display:
    grid;

  grid-template-columns:
    .75fr
    repeat(3, 1fr);

  gap:
    1rem;
}

.rating-box,
.review-card {
  position:
    relative;

  background:
    #111116;

  border:
    1px solid rgba(255,255,255,.08);

  padding:
    1.5rem;

  clip-path:
    polygon(
      0 2%,
      98% 0,
      100% 7%,
      99% 96%,
      95% 100%,
      3% 98%
    );
}

.rating-stars {
  color:
    var(--purple-2);

  letter-spacing:
    .1em;
}

.rating-box h2 {
  font-family:
    "Bebas Neue",
    sans-serif;

  font-size:
    4rem;

  font-weight:
    400;

  line-height:
    1;
}

.rating-box h2 span {
  font-size:
    1.45rem;

  color:
    var(--muted);
}

.rating-box p:last-child {
  color:
    var(--purple-2);

  font-weight:
    800;
}

.quote-mark {
  position:
    absolute;

  top:
    .3rem;
  left:
    1rem;

  color:
    var(--purple);

  font-family:
    Georgia,
    serif;

  font-size:
    4.8rem;

  line-height:
    1;

  opacity:
    .7;
}

.review-card p {
  position:
    relative;

  z-index:
    2;

  padding-top:
    1.6rem;

  color:
    #e8e3e6;
}

.review-author {
  display:
    block;

  margin-top:
    1rem;

  color:
    var(--purple-2);

  font-weight:
    800;
}


/* ======================================================
   CONTACTO
====================================================== */

.contact {
  background:
    #111115;

  padding-top:
    7.2rem;
}

.contact-grid {
  display:
    grid;

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

  gap:
    2rem;

  align-items:
    stretch;
}

.contact-info {
  position:
    relative;

  padding:
    2rem;

  background:
    #15151a;

  border:
    1px solid rgba(255,255,255,.1);

  box-shadow:
    var(--shadow);

  clip-path:
    polygon(
      1% 1%,
      96% 0,
      100% 4%,
      99% 96%,
      96% 100%,
      2% 98%,
      0 94%
    );
}

.contact-info ul {
  list-style:
    none;

  margin:
    1.7rem 0 2rem;
}

.contact-info li {
  color:
    var(--muted);

  margin-bottom:
    .85rem;
}

.contact-info strong {
  color:
    white;
}

.contact-buttons {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    .8rem;
}


/* MAPA */

.contact-map {
  position:
    relative;

  min-height:
    460px;

  overflow:
    hidden;

  border:
    8px solid var(--paper);

  box-shadow:
    var(--shadow);

  transform:
    rotate(.65deg);

  clip-path:
    polygon(
      1% 0,
      98% 1%,
      100% 4%,
      99% 96%,
      96% 100%,
      2% 98%,
      0 94%
    );
}

.contact-map iframe {
  position:
    absolute;

  inset:
    0;

  width:
    100%;
  height:
    100%;

  border:
    0;

  filter:
    grayscale(86%)
    contrast(1.12)
    brightness(.73);
}

.map-overlay {
  position:
    absolute;

  left:
    22px;
  bottom:
    22px;

  max-width:
    330px;

  padding:
    1.35rem;

  background:
    rgba(8,8,11,.9);

  border:
    1px solid rgba(178,90,215,.35);

  backdrop-filter:
    blur(12px);

  box-shadow:
    0 15px 35px rgba(0,0,0,.45);
}

.map-overlay span {
  display:
    block;

  color:
    var(--purple-2);

  font-size:
    .73rem;

  font-weight:
    900;

  letter-spacing:
    .13em;

  text-transform:
    uppercase;

  margin-bottom:
    .2rem;
}

.map-overlay strong {
  display:
    block;

  font-family:
    "Oswald",
    sans-serif;

  font-size:
    1.25rem;

  line-height:
    1.2;

  text-transform:
    uppercase;

  margin-bottom:
    1rem;
}


/* ======================================================
   FOOTER
====================================================== */

.footer {
  position:
    relative;

  background:
    #070709;

  border-top:
    1px solid rgba(255,255,255,.07);

  padding:
    3rem 0 7rem;
}

.footer-grid {
  display:
    grid;

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

  gap:
    2rem;
}

.footer-grid strong {
  display:
    block;

  color:
    var(--purple-2);

  font-family:
    "Oswald",
    sans-serif;

  letter-spacing:
    .06em;

  margin-bottom:
    .7rem;
}

.footer-grid p {
  color:
    #aaa4ad;

  font-size:
    .9rem;
}

.footer-bottom {
  width:
    min(100% - 2rem, var(--container));

  margin:
    2rem auto 0;

  padding-top:
    1.3rem;

  border-top:
    1px solid rgba(255,255,255,.07);

  color:
    #77717b;

  font-size:
    .72rem;

  letter-spacing:
    .08em;

  text-transform:
    uppercase;
}


/* ======================================================
   CTA MÓVIL
====================================================== */

.mobile-cta {
  position:
    fixed;

  left:
    50%;
  bottom:
    1rem;

  transform:
    translateX(-50%);

  z-index:
    1000;

  display:
    none;

  width:
    calc(100% - 2rem);

  max-width:
    420px;

  overflow:
    hidden;

  box-shadow:
    0 18px 45px rgba(0,0,0,.5);
}

.mobile-cta a {
  flex:
    1;

  text-align:
    center;

  padding:
    1rem;

  font-weight:
    900;
}

.mobile-cta a:first-child {
  background:
    #1a1a20;
}

.mobile-cta a:last-child {
  background:
    var(--purple);
}


/* ======================================================
   RESPONSIVE
====================================================== */

@media (max-width: 1120px) {

  .brand-copy {
    display:
      none;
  }

  .about-grid {
    grid-template-columns:
      1fr 1fr;
  }

  .about-text {
    grid-column:
      span 2;
  }

  .services-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .works-grid {
    grid-template-columns:
      repeat(3, 1fr);
  }

  .reviews-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .contact-grid {
    grid-template-columns:
      1fr;
  }

}


@media (max-width: 820px) {

  .desktop-btn {
    display:
      none;
  }

  .menu-toggle {
    display:
      block;
  }

  .menu {
    position:
      absolute;

    top:
      86px;
    right:
      1rem;

    display:
      none;

    min-width:
      230px;

    padding:
      1.2rem;

    background:
      #111116;

    border:
      1px solid rgba(255,255,255,.1);

    box-shadow:
      var(--shadow);

    flex-direction:
      column;

    align-items:
      flex-start;
  }

  .menu.active {
    display:
      flex;
  }

  .hero {
    min-height:
      92vh;

    background-position:
      58% center;
  }

  .hero-overlay {
    background:
      linear-gradient(
        90deg,
        rgba(5,5,7,.97),
        rgba(5,5,7,.82),
        rgba(5,5,7,.55)
      );
  }

  .hero h1 {
    font-size:
      clamp(3.8rem, 17vw, 5.6rem);
  }

  .hero h2 {
    font-size:
      2.35rem;
  }

  .scroll-indicator {
    display:
      none;
  }

  .about-grid {
    grid-template-columns:
      1fr;
  }

  .about-text {
    grid-column:
      auto;
  }

  .about-image,
  .about-side-image {
    transform:
      none;
  }

  .collage-card img {
    height:
      420px;
  }

  .services-grid,
  .reviews-grid {
    grid-template-columns:
      1fr;
  }

  .works-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .section-heading-flex {
    flex-direction:
      column;

    align-items:
      flex-start;
  }

  .contact-map {
    min-height:
      430px;

    transform:
      none;
  }

  .footer-grid {
    grid-template-columns:
      1fr;
  }

  .mobile-cta {
    display:
      flex;
  }

}


@media (max-width: 520px) {

  .section {
    padding:
      4.6rem 0;
  }

  .nav {
    min-height:
      76px;
  }

  .brand-mark {
    width:
      49px;
    height:
      49px;
  }

  .menu {
    top:
      76px;
  }

  .hero {
    padding-top:
      76px;
  }

  .hero-description {
    font-size:
      .94rem;
  }

  .hero-buttons {
    flex-direction:
      column;

    align-items:
      stretch;

    max-width:
      290px;
  }

  .services-grid {
    gap:
      1rem;
  }

  .service-image {
    height:
      320px;
  }

  .works-grid {
    grid-template-columns:
      1fr;
  }

  .work-photo img {
    height:
      350px;
  }

  .map-overlay {
    left:
      14px;
    right:
      14px;
    bottom:
      14px;

    max-width:
      none;
  }

}


/* ==========================================================
   V6 — MOCKUP EDITORIAL / PAPEL RASGADO REAL
   ----------------------------------------------------------
   IMPORTANTE:
   Esta versión deja de "dibujar" el rasgado con ondas/CSS.
   Usa PNGs transparentes con fibras e irregularidades reales.
   Los archivos deben estar en:
   ../assets/decor/tear-seam-1.png
   ../assets/decor/tear-seam-2.png
   ../assets/decor/tear-seam-3.png
   ../assets/decor/service-rip.png
   ========================================================== */


/* ---------- SEPARADORES: rasgado fino, irregular y con fibra ---------- */

.torn-top::before,
.torn-bottom::after {
  content: "";
  position: absolute;
  left: -1.5%;
  width: 103%;
  height: 92px;
  z-index: 30;
  pointer-events: none;

  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 100% 100% !important;

  filter: drop-shadow(0 4px 4px rgba(0,0,0,.55));
}

.torn-top::before {
  top: -46px;
  background-image: url("../assets/decor/tear-seam-1.png") !important;
}

.torn-bottom::after {
  bottom: -46px;
  transform: none !important;
  background-image: url("../assets/decor/tear-seam-2.png") !important;
}

/* Evitamos repetir exactamente el mismo rasgado en todas las secciones */

.works.torn-top::before {
  background-image: url("../assets/decor/tear-seam-3.png") !important;
}

.works.torn-bottom::after {
  background-image: url("../assets/decor/tear-seam-1.png") !important;
}

.contact.torn-top::before {
  background-image: url("../assets/decor/tear-seam-2.png") !important;
}


/* ---------- RITMO VERTICAL MÁS PARECIDO AL MOCKUP ---------- */

.about {
  padding-top: 4.8rem !important;
  padding-bottom: 4.8rem !important;
  background:
    radial-gradient(circle at 73% 30%, rgba(255,255,255,.018), transparent 25%),
    linear-gradient(180deg, #0d0d10 0%, #09090b 100%) !important;
}

.services {
  padding-top: 4.9rem !important;
  padding-bottom: 4.5rem !important;
}

.works {
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}

.reviews {
  padding-top: 4rem !important;
  padding-bottom: 4.2rem !important;
}

.contact {
  padding-top: 5.2rem !important;
}


/* ---------- BLOQUE "NO ES SOLO UN CORTE": collage compacto ---------- */

.about-grid {
  grid-template-columns: .96fr 1.28fr .96fr !important;
  gap: .25rem !important;
  align-items: center !important;
}

.collage-card {
  padding: 8px !important;
  background:
    linear-gradient(145deg, #e9e2d5, #d9d0bf) !important;
  border: 0 !important;
  box-shadow:
    0 17px 34px rgba(0,0,0,.40),
    0 1px 0 rgba(255,255,255,.45) inset !important;

  clip-path: polygon(
    1.2% 1.1%,
    8% 0.5%,
    16% 1.3%,
    24% .3%,
    34% 1.1%,
    45% .4%,
    56% 1.3%,
    67% .5%,
    76% 1.2%,
    87% .3%,
    98.5% 1.2%,
    99.2% 8%,
    98.6% 18%,
    99.4% 28%,
    98.7% 40%,
    99.5% 51%,
    98.6% 64%,
    99.3% 76%,
    98.5% 88%,
    99% 98.4%,
    89% 99.3%,
    78% 98.6%,
    67% 99.5%,
    56% 98.7%,
    45% 99.4%,
    34% 98.5%,
    23% 99.3%,
    12% 98.7%,
    1.3% 99.2%,
    .6% 89%,
    1.4% 78%,
    .5% 66%,
    1.3% 54%,
    .6% 43%,
    1.5% 31%,
    .5% 19%,
    1.2% 8%
  ) !important;
}

.collage-card::before {
  opacity: .14 !important;
}

.collage-card img {
  height: 440px !important;
  border: 0 !important;
}

.about-image {
  z-index: 3;
  margin-right: -11px;
}

.about-side-image {
  z-index: 3;
  margin-left: -11px;
}

.about-text {
  z-index: 2;
  padding: 2.25rem 2.2rem !important;

  background:
    radial-gradient(circle at 100% 0%, rgba(178,90,215,.035), transparent 34%),
    #0b0b0e !important;

  border-left: 0 !important;
  border-right: 0 !important;

  box-shadow:
    inset 18px 0 30px rgba(0,0,0,.12),
    inset -18px 0 30px rgba(0,0,0,.12);
}

/* Quitamos el "troquel de libreta" antiguo del texto */
.about-text::before {
  display: none !important;
}

.about-text h2 {
  font-size: clamp(2.8rem, 4vw, 4rem) !important;
}


/* ---------- SERVICIOS: foto realmente rota contra la tarjeta ---------- */

.service-card {
  overflow: hidden !important;
  border-radius: 4px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: #15151a !important;
}

.service-image {
  position: relative !important;
  height: 275px !important;
  overflow: hidden !important;
}

.service-image::after {
  content: "";
  position: absolute;
  left: -3%;
  right: -3%;
  bottom: -1px;
  height: 56px;
  z-index: 4;
  pointer-events: none;

  background:
    url("../assets/decor/service-rip.png")
    center bottom / 100% 100%
    no-repeat;
}

/* anulamos los viejos dientes circulares */
.service-content::before {
  display: none !important;
}

.service-content {
  padding-top: 1.05rem !important;
}


/* ---------- TITULARES MÁS EDITORIALES ---------- */

.section-title,
.about-text h2,
.service-content h3 {
  text-shadow: 0 2px 0 rgba(0,0,0,.18);
}

.torn-heading::after {
  height: 4px !important;
  bottom: -11px !important;
  opacity: .62;
  background:
    linear-gradient(
      90deg,
      rgba(236,231,220,.65) 0 8%,
      transparent 8% 10%,
      rgba(236,231,220,.46) 10% 24%,
      transparent 24% 27%,
      rgba(236,231,220,.62) 27% 57%,
      transparent 57% 60%,
      rgba(236,231,220,.42) 60% 82%,
      transparent 82%
    ) !important;
}


/* ---------- GALERÍA: recortes más cercanos al mockup ---------- */

.works-grid {
  gap: .32rem !important;
}

.work-photo {
  padding: 3px !important;
  background: #dcd3c5 !important;
  box-shadow: 0 10px 25px rgba(0,0,0,.32) !important;

  clip-path: polygon(
    0.5% 2%,
    10% .8%,
    21% 1.7%,
    34% .6%,
    48% 1.4%,
    61% .5%,
    74% 1.5%,
    88% .6%,
    99.3% 1.5%,
    98.8% 98%,
    88% 99.1%,
    76% 98.4%,
    63% 99.4%,
    49% 98.5%,
    35% 99.3%,
    22% 98.4%,
    9% 99.2%,
    .7% 98%
  );
}


/* ---------- RESEÑAS: menos "tarjeta SaaS", más banda editorial ---------- */

.rating-box,
.review-card {
  background: transparent !important;
  border-top: 1px solid rgba(236,231,220,.16) !important;
  border-bottom: 1px solid rgba(236,231,220,.11) !important;
  border-left: 0 !important;
  border-right: 0 !important;
  clip-path: none !important;
}

.review-card + .review-card {
  border-left: 1px solid rgba(236,231,220,.11) !important;
}


/* ---------- MAPA: pieza de periódico / collage ---------- */

.contact-map {
  border-width: 6px !important;
  border-color: #ddd4c4 !important;
  clip-path: polygon(
    .5% 1%,
    12% .2%,
    24% 1.2%,
    37% .4%,
    49% 1.1%,
    63% .3%,
    77% 1.4%,
    90% .5%,
    99.4% 1.3%,
    98.8% 98.7%,
    86% 99.3%,
    73% 98.5%,
    59% 99.4%,
    44% 98.6%,
    30% 99.2%,
    15% 98.4%,
    .6% 99%
  ) !important;
}


/* ---------- HERO: conexión con el collage ---------- */

.hero {
  min-height: 92vh !important;
}

.hero-text {
  max-width: 610px !important;
}

.hero h1 {
  text-shadow:
    0 3px 0 rgba(0,0,0,.35),
    0 9px 26px rgba(0,0,0,.52) !important;
}

.paper-note::after {
  display: none !important;
}


/* ---------- RESPONSIVE DEL NUEVO COLLAGE ---------- */

@media (max-width: 1120px) {
  .about-grid {
    gap: 1rem !important;
  }

  .about-image,
  .about-side-image {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 820px) {
  .torn-top::before,
  .torn-bottom::after {
    height: 66px;
  }

  .torn-top::before {
    top: -33px;
  }

  .torn-bottom::after {
    bottom: -33px;
  }

  .about-grid {
    gap: 1.5rem !important;
  }

  .collage-card img {
    height: 420px !important;
  }

  .about-text {
    padding: 1.4rem .5rem !important;
    box-shadow: none !important;
  }
}

@media (max-width: 520px) {
  .service-image {
    height: 325px !important;
  }

  .service-image::after {
    height: 48px;
  }

  .torn-top::before,
  .torn-bottom::after {
    left: -4%;
    width: 108%;
  }
}



/* ==========================================================
   V7.2 — GÓTICO / CUT-OUT
   ----------------------------------------------------------
   IMPORTANTE:
   Este bloque se añade SOBRE el CSS que el usuario ha
   proporcionado como versión correcta.

   NO modifica:
   - .torn-heading
   - .torn-heading::after
   - los separadores PNG del V6
   ========================================================== */

:root {
  --ink-black: #08080b;
  --bone: #efe8d9;
  --bone-2: #ddd3c4;
  --wine: #5a1935;
}

/* ATMÓSFERA GENERAL */
body {
  background:
    radial-gradient(circle at 78% 14%, rgba(143, 63, 192, 0.11), transparent 18%),
    radial-gradient(circle at 17% 84%, rgba(178, 90, 215, 0.065), transparent 18%),
    #08080b;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .045;

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='760' viewBox='0 0 760 760'%3E%3Cg fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M50 718c64-35 91-92 84-145-4-32-21-61-58-76 63-5 105-43 119-89 10-36 6-76-20-102 53 12 96-9 125-40 35-38 51-88 46-141 37 43 83 60 124 57 37-3 76-21 97-56 14 49 48 88 92 107 27 12 58 16 85 1'/%3E%3Cpath d='M129 98c29 18 43 42 45 71m20-55c19 20 28 43 24 68m385 3c-22 13-39 31-50 55m75-39c-17 18-26 39-27 63'/%3E%3C/g%3E%3C/svg%3E");

  background-size: 950px 950px;
  mix-blend-mode: screen;
}

.header,
.hero-content,
.section,
.footer,
.mobile-cta {
  position: relative;
  z-index: 2;
}


/* ==========================================================
   HERO — MÁS TEATRAL / EXPRESIONISTA
========================================================== */

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;

  background:
    radial-gradient(circle at 82% 16%, rgba(178,90,215,.10), transparent 12%),
    linear-gradient(180deg, transparent 0 82%, rgba(0,0,0,.22) 100%);
}

.hero h1 {
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  letter-spacing: .015em;
  line-height: .84;

  text-shadow:
    -2px 0 0 rgba(255,255,255,.04),
    3px 3px 0 rgba(0,0,0,.52),
    8px 10px 26px rgba(0,0,0,.52) !important;
}

.hero h2 {
  letter-spacing: .02em;
  text-shadow: 0 4px 14px rgba(0,0,0,.38);
}

.hero-buttons .btn {
  clip-path:
    polygon(
      2% 0,
      98% 0,
      100% 17%,
      97% 100%,
      6% 100%,
      0 83%
    );
}


/* ==========================================================
   TIPOGRAFÍA RECORTADA

   OJO:
   .section-title NO recibe ::after.
   Así no interferimos con las líneas originales que pertenecen
   a .torn-heading::after.
========================================================== */

.section-title,
.about-text h2,
.service-content h3,
.rating-box h2 {
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  letter-spacing: .02em;
}

.section-title {
  color: #fff;
  text-shadow:
    3px 3px 0 rgba(0,0,0,.42);
}


/* "ES QUIÉN ERES" COMO RECORTE DE PAPEL */
.about-text h2 span {
  display: inline-block;

  margin-top: .10em;
  padding:
    .04em .18em .08em;

  color:
    #0e0d11 !important;

  background:
    linear-gradient(
      180deg,
      #f0eadd,
      #ddd3c5
    );

  clip-path:
    polygon(
      1% 15%,
      7% 4%,
      20% 9%,
      34% 1%,
      49% 7%,
      61% 2%,
      77% 8%,
      97% 4%,
      100% 25%,
      97% 85%,
      90% 100%,
      74% 94%,
      58% 100%,
      41% 95%,
      25% 100%,
      6% 93%,
      0 78%
    );

  transform:
    rotate(-1.2deg);

  box-shadow:
    0 9px 20px rgba(0,0,0,.28);
}


/* TÍTULOS DE SERVICIO COMO TROZOS CORTADOS CON TIJERA */
.service-content h3 {
  display:
    inline-block;

  position:
    relative;

  color:
    #101014;

  background:
    linear-gradient(
      180deg,
      var(--bone),
      var(--bone-2)
    );

  padding:
    .28rem .56rem .29rem;

  margin-bottom:
    .82rem;

  line-height:
    .96;

  box-shadow:
    0 10px 21px rgba(0,0,0,.24);

  clip-path:
    polygon(
      1% 17%,
      7% 3%,
      22% 8%,
      34% 0,
      50% 7%,
      65% 2%,
      80% 8%,
      98% 4%,
      100% 23%,
      97% 81%,
      90% 98%,
      72% 92%,
      54% 100%,
      36% 93%,
      19% 100%,
      6% 92%,
      0 82%
    );
}

.service-card:nth-child(1) .service-content h3 {
  transform:
    rotate(-1.2deg);
}

.service-card:nth-child(2) .service-content h3 {
  transform:
    rotate(.8deg);
}

.service-card:nth-child(3) .service-content h3 {
  transform:
    rotate(-.65deg);
}

.service-card:nth-child(4) .service-content h3 {
  transform:
    rotate(1.1deg);
}


/* RATING COMO PEQUEÑO RECORTE */
.rating-box h2 {
  display:
    inline-block;

  color:
    #101014;

  background:
    linear-gradient(
      180deg,
      var(--bone),
      var(--bone-2)
    );

  padding:
    .1rem .42rem .06rem;

  clip-path:
    polygon(
      0 20%,
      10% 4%,
      27% 10%,
      51% 0,
      72% 7%,
      100% 12%,
      97% 87%,
      84% 100%,
      60% 94%,
      29% 100%,
      8% 91%,
      0 76%
    );

  transform:
    rotate(-1.2deg);

  box-shadow:
    0 12px 24px rgba(0,0,0,.18);
}


/* ==========================================================
   COLLAGE / FOTOS MÁS FÍSICAS
========================================================== */

.collage-card {
  background:
    linear-gradient(
      180deg,
      #f3eedf,
      #e5dbcc
    ) !important;

  box-shadow:
    0 20px 45px rgba(0,0,0,.39),
    0 2px 0 rgba(255,255,255,.26) inset,
    0 -14px 22px rgba(0,0,0,.07) inset !important;
}

.collage-card img {
  filter:
    saturate(.88)
    contrast(1.055)
    brightness(.985) !important;
}

.rotate-left {
  transform:
    rotate(-2.1deg) !important;
}

.rotate-right {
  transform:
    rotate(1.7deg) !important;
}


/* ==========================================================
   ABOUT — ILUSTRACIÓN TIPO TINTA MUY SUTIL
========================================================== */

.about-text {
  position:
    relative;
}

.about-text::after {
  content:
    "";

  position:
    absolute;

  top:
    16px;
  right:
    -15px;

  width:
    125px;
  height:
    235px;

  opacity:
    .09;

  pointer-events:
    none;

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='125' height='235' viewBox='0 0 125 235'%3E%3Cg fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M29 227c28-20 40-48 38-74-2-31-19-48-47-49 20-2 34-13 38-27 9-23 1-42-14-58 21 5 36-4 45-17 13-18 14-38 7-59'/%3E%3Cpath d='M64 232c21-22 31-46 29-71-4-35-29-47-52-45 25-7 38-21 42-35 7-23-2-46-17-61 18 3 32-4 43-17'/%3E%3C/g%3E%3C/svg%3E");

  background-size:
    contain;

  background-repeat:
    no-repeat;
}

.signature-link {
  font-size:
    2.55rem;

  text-shadow:
    0 4px 10px rgba(0,0,0,.4);
}


/* ==========================================================
   SERVICIOS — LIGERAMENTE MÁS OSCUROS
   El rasgado entre imagen/texto del V6 queda intacto.
========================================================== */

.service-card {
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.015),
      transparent 40%
    ),
    #111116 !important;

  border-color:
    rgba(255,255,255,.085) !important;

  box-shadow:
    0 14px 36px rgba(0,0,0,.27) !important;
}

.service-icon {
  border-width:
    1.5px;

  box-shadow:
    0 0 0 4px rgba(143,63,192,.055);
}


/* ==========================================================
   GALERÍA — RECORTES / CINTA
========================================================== */

.work-photo {
  position:
    relative;

  background:
    #e9e0d2 !important;
}

.work-photo::before {
  content:
    "";

  position:
    absolute;

  top:
    -7px;
  left:
    18px;

  width:
    40px;
  height:
    14px;

  z-index:
    4;

  background:
    rgba(239,231,216,.38);

  border:
    1px solid rgba(255,255,255,.07);

  transform:
    rotate(-6deg);

  opacity:
    .52;
}


/* ==========================================================
   RESEÑAS — LIGERAS ROTACIONES
========================================================== */

.review-card:nth-child(2) {
  transform:
    rotate(-.55deg);
}

.review-card:nth-child(3) {
  transform:
    rotate(.45deg);
}

.review-card:nth-child(4) {
  transform:
    rotate(-.3deg);
}


/* ==========================================================
   BOTONES — PEQUEÑO TROZO DE CINTA
========================================================== */

.btn-primary,
.btn-secondary {
  position:
    relative;
}

.btn-primary::before,
.btn-secondary::before {
  content:
    "";

  position:
    absolute;

  top:
    -6px;
  left:
    14px;

  width:
    23px;
  height:
    7px;

  background:
    rgba(239,232,217,.20);

  border:
    1px solid rgba(255,255,255,.06);

  transform:
    rotate(-8deg);

  opacity:
    .5;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 820px) {

  .about-text::after {
    display:
      none;
  }

  .service-card,
  .review-card,
  .rating-box {
    transform:
      none !important;
  }

}

@media (max-width: 520px) {

  .about-text h2 span,
  .service-content h3,
  .rating-box h2 {
    transform:
      none;
  }

}


/* ==========================================================
   V7.3 — RASGADO NATURALIZADO / INTEGRADO
   ========================================================== */

/*
   Ya no usamos la grieta blanca como protagonista.
   Estas tres imágenes son bandas reales de fibra de papel:
   ../assets/decor/tear-natural-1.png
   ../assets/decor/tear-natural-2.png
   ../assets/decor/tear-natural-3.png
*/

.torn-top::before,
.torn-bottom::after {
  left: -1% !important;
  width: 102% !important;
  height: 76px !important;

  opacity: .72 !important;

  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 100% 100% !important;

  /*
    Sombra corta: da profundidad sin convertirlo
    en una línea blanca flotante.
  */
  filter:
    sepia(.10)
    saturate(.65)
    brightness(.86)
    drop-shadow(0 2px 2px rgba(0,0,0,.32)) !important;

  mix-blend-mode: normal !important;
}

.torn-top::before {
  top: -38px !important;
  background-image: url("../assets/decor/tear-natural-1.png") !important;
}

.torn-bottom::after {
  bottom: -38px !important;
  transform: none !important;
  background-image: url("../assets/decor/tear-natural-2.png") !important;
}

/* Variamos los bordes entre zonas para que no cante la repetición */
.works.torn-top::before {
  background-image: url("../assets/decor/tear-natural-3.png") !important;
}

.works.torn-bottom::after {
  background-image: url("../assets/decor/tear-natural-1.png") !important;
}

.contact.torn-top::before {
  background-image: url("../assets/decor/tear-natural-2.png") !important;
}


/* ----------------------------------------------------------
   EL RASGADO FORMA PARTE DE LA SECCIÓN, NO FLOTA ENTRE ELLAS
---------------------------------------------------------- */

.about {
  padding-bottom: 3.65rem !important;
}

.services {
  padding-top: 3.95rem !important;
  padding-bottom: 3.55rem !important;
}

.works {
  padding-top: 4.35rem !important;
  padding-bottom: 3.15rem !important;
}

.reviews {
  /*
     La acercamos al rasgado. Antes había una gran bolsa de aire
     que hacía que la línea pareciese un adorno independiente.
  */
  padding-top: 3.15rem !important;
  padding-bottom: 3.6rem !important;
}


/* Sombreado muy difuso justo alrededor del borde de papel */
.torn-bottom {
  isolation: isolate;
}

.torn-bottom > .container {
  position: relative;
  z-index: 2;
}

.works.torn-bottom {
  background:
    linear-gradient(
      180deg,
      #121216 0%,
      #101014 88%,
      #0b0b0e 100%
    ) !important;
}


/* ----------------------------------------------------------
   LÍNEAS BAJO LOS TÍTULOS: INTEGRADAS, COMO TINTA DESGASTADA
   Conservamos su estructura, pero bajamos el efecto "barra".
---------------------------------------------------------- */

.torn-heading::after {
  height: 3px !important;
  bottom: -10px !important;

  opacity: .42 !important;

  background:
    linear-gradient(
      90deg,
      rgba(221,214,201,.52) 0 7%,
      transparent 7% 10%,
      rgba(221,214,201,.30) 10% 22%,
      transparent 22% 26%,
      rgba(221,214,201,.48) 26% 54%,
      transparent 54% 59%,
      rgba(221,214,201,.28) 59% 76%,
      transparent 76%
    ) !important;

  filter:
    blur(.18px);

  transform:
    rotate(-.65deg) !important;
}


/* Segunda huella casi invisible: da aspecto de tinta/papel */
.torn-heading {
  position: relative;
}

.torn-heading::before {
  content: "";
  position: absolute;

  left: 4px;
  bottom: -14px;

  width: 47%;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(214,205,191,.24) 12%,
      rgba(214,205,191,.11) 70%,
      transparent
    );

  transform: rotate(.35deg);
}


/* ----------------------------------------------------------
   RESEÑAS: QUITAMOS LAS RECTAS "DE INTERFAZ"
---------------------------------------------------------- */

.rating-box,
.review-card {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

/*
  En lugar de bordes rectos, usamos pequeñas marcas de tinta
  que comienzan y terminan suavemente.
*/
.rating-box::after,
.review-card::after {
  content: "";
  position: absolute;

  left: 7%;
  right: 7%;
  bottom: 0;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(222,214,201,.12) 10%,
      rgba(222,214,201,.22) 28%,
      rgba(222,214,201,.13) 69%,
      transparent 100%
    );
}

.review-card + .review-card {
  border-left: 0 !important;
}

/* Separación vertical muy tenue, sin línea completa */
.review-card + .review-card::before {
  content: "";
  position: absolute;

  left: -8px;
  top: 17%;
  bottom: 17%;

  width: 1px;

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(220,212,198,.15) 22%,
      rgba(220,212,198,.08) 72%,
      transparent
    );
}


/* ----------------------------------------------------------
   GALERÍA: ACERCAMOS EL BOTÓN Y EVITAMOS EL VACÍO
---------------------------------------------------------- */

.works-bottom {
  margin-top: .85rem !important;
}

.work-photo {
  box-shadow:
    0 8px 22px rgba(0,0,0,.26) !important;
}


/* ----------------------------------------------------------
   RESPONSIVE
---------------------------------------------------------- */

@media (max-width: 820px) {

  .torn-top::before,
  .torn-bottom::after {
    height: 60px !important;
  }

  .torn-top::before {
    top: -30px !important;
  }

  .torn-bottom::after {
    bottom: -30px !important;
  }

  .works {
    padding-bottom: 2.8rem !important;
  }

}

@media (max-width: 520px) {

  .torn-top::before,
  .torn-bottom::after {
    left: -3% !important;
    width: 106% !important;
    opacity: .64 !important;
  }

}


/* ==========================================================
   V7.4 — MOBILE REAL / RESPONSIVE
   ----------------------------------------------------------
   Este bloque SOLO corrige tablet/móvil.
   Escritorio conserva el diseño V7.3.
   ========================================================== */

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

/* Evita que elementos decorativos provoquen overflow lateral */
img,
iframe,
svg {
  max-width: 100%;
}


/* ==========================================================
   TABLET / MÓVIL
========================================================== */

@media (max-width: 820px) {

  :root {
    --mobile-gutter: 18px;
  }

  .container {
    width: calc(100% - (var(--mobile-gutter) * 2)) !important;
    max-width: none !important;
  }


  /* ---------------- HEADER ---------------- */

  .header {
    background: rgba(7, 7, 10, .94) !important;
    backdrop-filter: blur(16px);
  }

  .nav {
    min-height: 72px !important;
    gap: .8rem !important;
  }

  .brand {
    gap: .45rem !important;
  }

  .brand-mark {
    width: 46px !important;
    height: 46px !important;
  }

  .brand-copy {
    display: none !important;
  }

  .menu-toggle {
    width: 46px;
    height: 46px;
    display: grid !important;
    place-content: center;
    padding: 0;
  }

  .menu-toggle span {
    width: 28px !important;
    height: 2px !important;
    margin: 4px 0 !important;
  }

  .menu {
    top: 72px !important;
    left: 12px !important;
    right: 12px !important;

    width: auto !important;
    min-width: 0 !important;

    padding: 1rem 1.1rem !important;

    border-radius: 10px;

    background:
      linear-gradient(
        180deg,
        rgba(20,20,26,.98),
        rgba(10,10,14,.98)
      ) !important;

    box-shadow:
      0 20px 45px rgba(0,0,0,.55) !important;
  }

  .menu a {
    width: 100%;
    padding: .82rem .2rem !important;
    font-size: 1rem !important;
  }


  /* ---------------- HERO ---------------- */

  .hero {
    min-height: 100svh !important;

    padding-top: 72px !important;
    padding-bottom: 46px !important;

    display: flex !important;
    align-items: center !important;

    background-position: 61% center !important;
  }

  .hero-overlay {
    background:
      linear-gradient(
        90deg,
        rgba(5,5,8,.95) 0%,
        rgba(5,5,8,.86) 48%,
        rgba(5,5,8,.52) 78%,
        rgba(5,5,8,.34) 100%
      ) !important;
  }

  .hero-content {
    width: 100% !important;
  }

  .hero-text {
    width: 100% !important;
    max-width: 100% !important;

    padding: 0 !important;
  }

  .eyebrow {
    max-width: 100%;

    font-size: .70rem !important;
    line-height: 1.45 !important;

    letter-spacing: .14em !important;

    margin-bottom: .8rem !important;
  }

  /*
    Clave: UNDERGROUND ya cabe en una sola línea incluso
    en móviles estrechos.
  */
  .hero h1 {
    width: 100% !important;
    max-width: 100% !important;

    font-size:
      clamp(2.9rem, 13.2vw, 4rem) !important;

    line-height: .88 !important;

    letter-spacing: -.02em !important;

    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .hero h1 span {
    display: block !important;
  }

  .hero h2 {
    font-size:
      clamp(2rem, 9vw, 2.8rem) !important;

    line-height: .95 !important;

    margin-top: .85rem !important;
  }

  .hero-description {
    width: 100% !important;
    max-width: 31rem !important;

    margin-top: 1rem !important;

    font-size: .98rem !important;
    line-height: 1.55 !important;
  }

  .hero-buttons {
    width: 100% !important;
    max-width: 100% !important;

    display: grid !important;
    grid-template-columns: 1fr !important;

    gap: .72rem !important;

    margin-top: 1.5rem !important;
  }

  .hero-buttons .btn {
    width: 100% !important;
    min-height: 54px !important;

    padding: .9rem 1rem !important;

    font-size: 1rem !important;
  }


  /* ---------------- SECCIONES ---------------- */

  .section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .section-label {
    font-size: .72rem !important;
    letter-spacing: .14em !important;
  }

  .section-title {
    max-width: 100% !important;

    font-size:
      clamp(2.55rem, 11.5vw, 3.5rem) !important;

    line-height: .92 !important;
  }

  .torn-heading {
    max-width: 100% !important;
  }


  /* ---------------- ABOUT ---------------- */

  .about {
    padding-top: 4.25rem !important;
    padding-bottom: 3.8rem !important;
  }

  .about-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;

    gap: 1.25rem !important;
  }

  .about-image,
  .about-side-image {
    width: 100% !important;

    margin: 0 !important;

    transform: none !important;
  }

  .collage-card {
    width: 100% !important;

    padding: 7px !important;
  }

  .collage-card img {
    width: 100% !important;

    height: clamp(330px, 110vw, 460px) !important;

    object-fit: cover !important;
  }

  .about-text {
    width: 100% !important;

    padding: 1.4rem .15rem !important;

    box-shadow: none !important;
  }

  .about-text h2 {
    max-width: 100% !important;

    font-size:
      clamp(2.45rem, 11vw, 3.35rem) !important;

    line-height: .95 !important;
  }

  .about-text p {
    font-size: .96rem !important;
    line-height: 1.65 !important;
  }

  .signature-link {
    font-size: 2.15rem !important;
  }


  /* ---------------- SERVICIOS ---------------- */

  .services {
    padding-top: 4rem !important;
    padding-bottom: 3.6rem !important;
  }

  .services-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;

    gap: 1.1rem !important;
  }

  .service-card {
    width: 100% !important;

    transform: none !important;
  }

  .service-image {
    height: clamp(280px, 83vw, 390px) !important;
  }

  .service-content {
    padding:
      1.15rem 1rem 1.3rem !important;
  }

  .service-content h3 {
    max-width: 100% !important;

    font-size: 1.55rem !important;

    white-space: normal !important;
  }

  .service-content p {
    max-width: none !important;

    font-size: .95rem !important;
    line-height: 1.55 !important;
  }


  /* ---------------- TRABAJOS ---------------- */

  .works {
    padding-top: 4rem !important;
    padding-bottom: 3rem !important;
  }

  .section-heading-flex {
    display: block !important;

    margin-bottom: 1.35rem !important;
  }

  .insta-link {
    display: inline-block;

    margin-top: .75rem;

    font-size: .83rem !important;
  }

  /*
    En móvil la galería funciona mejor como carrusel horizontal.
    Conserva el look collage y evita seis fotos gigantes apiladas.
  */
  .works-grid {
    display: flex !important;

    gap: .75rem !important;

    width: calc(100% + var(--mobile-gutter)) !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    padding:
      .45rem var(--mobile-gutter) 1rem 0 !important;

    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;

    scrollbar-width: none;
  }

  .works-grid::-webkit-scrollbar {
    display: none;
  }

  .work-photo {
    flex:
      0 0 min(78vw, 330px) !important;

    width:
      min(78vw, 330px) !important;

    transform: none !important;

    scroll-snap-align: start;
  }

  .work-photo img {
    height:
      clamp(300px, 92vw, 420px) !important;
  }

  .works-bottom {
    justify-content: stretch !important;

    margin-top: .3rem !important;
  }

  .works-bottom .btn {
    width: 100% !important;
  }


  /* ---------------- RESEÑAS ---------------- */

  .reviews {
    padding-top: 3.25rem !important;
    padding-bottom: 3.4rem !important;
  }

  .reviews-grid {
    grid-template-columns: 1fr !important;

    gap: .75rem !important;
  }

  .rating-box,
  .review-card {
    width: 100% !important;

    padding: 1.2rem .85rem !important;

    transform: none !important;
  }

  .rating-box h2 {
    font-size: 3.4rem !important;
  }

  .review-card p {
    font-size: .94rem !important;
    line-height: 1.55 !important;
  }

  .review-card + .review-card::before {
    display: none !important;
  }


  /* ---------------- CONTACTO ---------------- */

  .contact {
    padding-top: 4.3rem !important;
  }

  .contact-grid {
    grid-template-columns: 1fr !important;

    gap: 1.25rem !important;
  }

  .contact-info {
    width: 100% !important;

    padding: 1.4rem 1.1rem !important;

    clip-path: none !important;
  }

  .contact-info li {
    font-size: .93rem !important;
    line-height: 1.55 !important;
  }

  .contact-buttons {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .contact-buttons .btn {
    width: 100% !important;
  }

  .contact-map {
    width: 100% !important;

    min-height: 380px !important;

    border-width: 4px !important;

    transform: none !important;
  }

  .map-overlay {
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;

    width: auto !important;
    max-width: none !important;

    padding: 1rem !important;
  }

  .map-overlay strong {
    font-size: 1.05rem !important;
  }


  /* ---------------- FOOTER ---------------- */

  .footer {
    padding:
      2.5rem 0
      calc(6rem + env(safe-area-inset-bottom))
      !important;
  }

  .footer-grid {
    grid-template-columns: 1fr !important;

    gap: 1.5rem !important;
  }

  .footer-grid p {
    font-size: .88rem !important;
  }

  .footer-bottom {
    font-size: .65rem !important;
    line-height: 1.6 !important;
  }


  /* ---------------- CTA MÓVIL ---------------- */

  .mobile-cta {
    left: 10px !important;
    right: 10px !important;
    bottom:
      max(10px, env(safe-area-inset-bottom)) !important;

    width: auto !important;
    max-width: none !important;

    transform: none !important;

    border:
      1px solid rgba(255,255,255,.10);

    border-radius: 10px;
  }

  .mobile-cta a {
    padding: .9rem .6rem !important;

    font-size: .92rem !important;
  }


  /* ---------------- RASGADOS ---------------- */

  .torn-top::before,
  .torn-bottom::after {
    left: -7% !important;
    width: 114% !important;

    height: 58px !important;

    opacity: .54 !important;

    background-size:
      145% 100% !important;
  }

  .torn-top::before {
    top: -29px !important;
  }

  .torn-bottom::after {
    bottom: -29px !important;
  }

}


/* ==========================================================
   TELÉFONOS ESTRECHOS
========================================================== */

@media (max-width: 520px) {

  :root {
    --mobile-gutter: 16px;
  }

  .hero {
    /*
      Mejor comportamiento con la barra dinámica de Chrome/Safari.
    */
    min-height: 100svh !important;
  }

  .hero h1 {
    font-size:
      clamp(2.75rem, 13.1vw, 3.55rem) !important;

    letter-spacing: -.025em !important;
  }

  .hero h2 {
    font-size:
      clamp(2rem, 9.4vw, 2.45rem) !important;
  }

  .eyebrow {
    font-size: .66rem !important;

    letter-spacing: .12em !important;
  }

  .hero-description {
    font-size: .94rem !important;
  }

  .section-title {
    font-size:
      clamp(2.35rem, 11.5vw, 3.05rem) !important;
  }

  .about-text h2 {
    font-size:
      clamp(2.25rem, 10.8vw, 3rem) !important;
  }

  .collage-card img {
    height:
      clamp(310px, 108vw, 410px) !important;
  }

  .service-image {
    height:
      clamp(270px, 82vw, 350px) !important;
  }

  .work-photo {
    flex-basis:
      82vw !important;

    width:
      82vw !important;
  }

  .work-photo img {
    height:
      105vw !important;

    max-height:
      410px !important;
  }

}


/* ==========================================================
   MÓVILES MUY ESTRECHOS (320–380px)
========================================================== */

@media (max-width: 380px) {

  :root {
    --mobile-gutter: 14px;
  }

  .hero h1 {
    font-size:
      clamp(2.55rem, 12.8vw, 3.15rem) !important;
  }

  .hero h2 {
    font-size:
      clamp(1.85rem, 9vw, 2.2rem) !important;
  }

  .hero-description {
    font-size: .91rem !important;
  }

  .hero-buttons .btn {
    min-height: 50px !important;

    font-size: .94rem !important;
  }

  .section-title {
    font-size:
      clamp(2.15rem, 11vw, 2.75rem) !important;
  }

}


/* ==========================================================
   V7.4.1 — FIX MENÚ MÓVIL POR ENCIMA DEL HERO
   ========================================================== */

/*
  En versiones anteriores un override posterior volvió a bajar
  el z-index del header. Lo forzamos aquí al nivel correcto.
*/

.header {
  z-index: 10000 !important;
  isolation: isolate;
}

.header .nav {
  position: relative;
  z-index: 10001;
}

.menu-toggle {
  position: relative;
  z-index: 10003 !important;
}

.menu {
  z-index: 10002 !important;
}

/*
  El contenido de la página debe quedar siempre por debajo
  del header y su menú desplegable.
*/
.hero,
.hero-content,
.section,
.footer {
  z-index: 1 !important;
}


/* ==========================================================
   MÓVIL
========================================================== */

@media (max-width: 820px) {

  .header {
    z-index: 10000 !important;
  }

  .menu {
    position: absolute !important;

    top: 72px !important;
    left: 12px !important;
    right: 12px !important;

    z-index: 10002 !important;

    /*
      Fondo casi opaco para que nunca se mezcle visualmente
      con el hero.
    */
    background:
      linear-gradient(
        180deg,
        rgba(18, 18, 24, .995),
        rgba(8, 8, 12, .995)
      ) !important;

    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;

    box-shadow:
      0 24px 60px rgba(0, 0, 0, .72),
      0 0 0 1px rgba(255, 255, 255, .08) inset !important;
  }

  .menu.active {
    display: flex !important;
  }

  /*
    Mientras el menú está abierto, evitamos cualquier conflicto
    visual con el hero.
  */
  .hero-content {
    z-index: 1 !important;
  }

}