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

   PIZZERÍA RÚSTICA — STYLE.CSS FINAL

   Compatible con el HTML actual y rustica-assets-final.zip

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



:root {

  --green: #283618;

  --green-dark: #18240f;

  --green-deep: #101a0b;



  --cream: #f7f0dd;

  --paper: #f6efdc;



  --orange: #bc6c25;

  --orange-light: #dda15e;



  --ink: #1e2119;

  --muted: #676b5b;

  --white: #fffdf5;



  --page: 4.5%;

  --content: 1180px;



  --shadow: 0 5px 15px rgba(31, 38, 22, 0.10);

}





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

   RESET

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



*,

*::before,

*::after {

  box-sizing: border-box;

}



html {

  scroll-behavior: smooth;

  scroll-padding-top: 76px;

}



body,

h1,

h2,

h3,

p {

  margin: 0;

}



body {

  min-width: 320px;

  overflow-x: hidden;



  background: var(--paper);

  color: var(--ink);



  font-family: "DM Sans", Arial, sans-serif;

  font-size: 14px;

  line-height: 1.45;

}



img {

  display: block;

  max-width: 100%;

}



a {

  color: inherit;

  text-decoration: none;

}



button,

input,

textarea,

select {

  font: inherit;

}



button {

  padding: 0;

  border: 0;

  background: transparent;

  cursor: pointer;

}



address {

  font-style: normal;

}



::selection {

  background: var(--orange);

  color: #fff;

}





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

   TIPOGRAFÍA

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



h1,

h2,

h3 {

  font-family: "Playfair Display", Georgia, serif;

}



.script {

  font-family: "Yellowtail", cursive;

  font-weight: 400;

}



.olive {

  color: var(--green);

}



.cream {

  color: var(--cream);

}





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

   PAPEL / TEXTURA

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



.paper,

.pizzas,

.local,

.contact {

  position: relative;



  background-color: var(--paper);

  background-image:

    url("assets/paper-texture.jpg");



  background-repeat: repeat;

  background-position: center;

  background-size: 512px 512px;

}





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

   BOTONES

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



.brush-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;



  padding: 0;



  color: #fff;



  font-size: 9px;

  font-weight: 700;

  line-height: 1;

  letter-spacing: 0.45px;

  text-transform: uppercase;



  background-repeat: no-repeat;

  background-position: center;

  background-size: contain;



  transition:

    transform 0.2s ease,

    filter 0.2s ease;

}



.brush-btn:hover {

  transform: translateY(-1px);

  filter: brightness(1.05);

}



.outline-btn,

.outline-dark,

.outline-light {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;



  min-height: 34px;

  padding: 0 18px;



  border: 1px solid currentColor;

  border-radius: 999px;



  font-size: 9px;

  font-weight: 700;

  letter-spacing: 0.35px;

  text-transform: uppercase;



  transition:

    background 0.2s ease,

    color 0.2s ease,

    border-color 0.2s ease;

}



.outline-btn,

.outline-light {

  color: #fff;

}



.outline-dark {

  color: var(--orange);

}



.outline-btn:hover,

.outline-light:hover {

  background: rgba(255,255,255,.08);

}



.outline-dark:hover {

  background: var(--orange);

  border-color: var(--orange);

  color: #fff;

}





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

   HEADER

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



.topbar {

  position: sticky;

  top: 0;

  z-index: 100;



  height: 76px;

  padding: 0 7%;



  display: flex;

  align-items: center;

  gap: 28px;



  background:

    linear-gradient(

      rgba(24,36,15,.97),

      rgba(24,36,15,.97)

    ),

    url("assets/green-texture.jpg") center / 512px 512px repeat;



  color: var(--cream);



  border-bottom: 1px solid rgba(254,250,224,.13);

}



.brand,

.brand-logo {

  flex: 0 0 auto;



  display: flex;

  align-items: center;

}



.logo {

  width: 66px;

  height: 66px;



  object-fit: contain;

}



.hamb {

  display: none;



  margin-left: auto;



  color: #fff;

  font-size: 24px;

}



.main-nav,

.topbar nav {

  height: 100%;

  margin: 0 auto;



  display: flex;

  align-items: center;

  justify-content: center;

  gap: 29px;

}



.main-nav a,

.topbar nav a {

  position: relative;



  height: 100%;



  display: inline-flex;

  align-items: center;



  color: var(--cream);



  font-family: "Playfair Display", Georgia, serif;

  font-size: 13px;

  font-weight: 600;

}



.main-nav a:hover,

.topbar nav a:hover {

  color: #fff;

}



.main-nav a.active::after,

.topbar nav a.active::after {

  content: "";



  position: absolute;

  left: 50%;

  bottom: 11px;



  width: 41px;

  height: 4px;



  background: var(--orange);

  border-radius: 50%;



  transform:

    translateX(-50%)

    rotate(-2deg);

}





/* botón naranja de cabecera:

   el asset YA lleva icono + texto */



.header-location,

.hero-location-btn {

  flex: 0 0 auto;



  width: 148px;

  height: 40px;



  overflow: hidden;



  background:

    url("assets/brush-orange-location.png")

    center / contain

    no-repeat;



  color: transparent !important;

  font-size: 0 !important;

  text-shadow: none !important;

}



.header-location *,

.hero-location-btn * {

  visibility: hidden;

}





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

   HERO

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



.hero {

  position: relative;



  min-height: 468px;

  overflow: hidden;



  padding-inline:

    max(

      var(--page),

      calc((100vw - var(--content)) / 2)

    );



  background:

    linear-gradient(

      90deg,

      rgba(22,35,12,.96) 0%,

      rgba(26,42,14,.94) 35%,

      rgba(28,42,15,.52) 47%,

      rgba(28,42,15,.12) 57%,

      rgba(28,42,15,0) 63%

    ),

    url("assets/hero-pizza.jpg")

    right center / 60.2% 100%

    no-repeat,

    url("assets/green-texture.jpg")

    center / 512px 512px

    repeat;



  color: var(--cream);



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

}



.hero-content {

  position: relative;

  z-index: 4;



  width: 44%;

  min-height: 468px;



  display: flex;

  flex-direction: column;

  align-items: flex-start;

  justify-content: center;



  padding: 58px 0;

}





/* hojas hero */



.hero-leaf,

.hero-leaf-left {

  position: absolute;

  z-index: 3;



  left: -14px;

  top: 6px;



  width: 116px;



  opacity: .34;



  pointer-events: none;

}



.hero::before {

  content: "";



  position: absolute;

  z-index: 3;



  left: -12px;

  bottom: -8px;



  width: 105px;

  height: 90px;



  background:

    url("assets/leaf-hero-bottom-left.png")

    left bottom / contain

    no-repeat;



  opacity: .34;



  pointer-events: none;

}





/* títulos hero */



.kicker,

.hero-kicker {

  margin-bottom: 6px;



  color: var(--orange);



  font-size: 16px;

  font-weight: 800;

  letter-spacing: 7px;



  text-transform: uppercase;

}



.hero h1 {

  color: var(--cream);



  font-size:

    clamp(

      68px,

      6.4vw,

      82px

    );



  font-weight: 800;

  line-height: .85;

  letter-spacing: -3px;

}



.hero h2 {

  margin-top: 8px;



  color: var(--cream);



  font-size: 18px;

  line-height: 1;

  letter-spacing: 1.1px;

}





/* franja italiana */



.italy-line {

  width: 195px;

  height: 13px;



  margin: 13px 0 16px;



  background:

    url("assets/italy-brush.png")

    left center / contain

    no-repeat;

}



.italy-line i,

.italy-line b,

.italy-line em {

  display: none;

}





/* frase */



.hero-script,

.hero .script {

  margin-bottom: 24px;



  color: #fff;



  font-family: "Yellowtail", cursive;

  font-size: 27px;

  line-height: 1.08;

}





/* botones hero */



.hero-buttons,

.hero-actions {

  display: flex;

  align-items: center;



  gap: 16px;



  flex-wrap: wrap;

}



.hero-buttons .brush-btn,

.hero-cta {

  width: 224px;

  height: 52px;



  min-width: 224px;



  background:

    url("assets/brush-orange-hero.png")

    center / contain

    no-repeat;



  font-size: 10px;

}



.hero-cta strong {

  font-size: 17px;

  line-height: 1;

}



.hero-map-btn,

.outline-btn {

  min-width: 158px;

  height: 44px;



  padding: 0 22px;



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



  color: #fff;



  font-size: 10px;

}





/* hero-pizza.jpg ya contiene el sello del diseño */



.hero-badge {

  display: none !important;

}





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

   PIZZAS

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



.pizzas {

  overflow: hidden;



  padding:

    27px

    max(

      var(--page),

      calc((100vw - var(--content)) / 2)

    )

    28px;



  background-image:

    url("assets/paper-stroke.png"),

    url("assets/paper-stroke.png"),

    url("assets/paper-texture.jpg");



  background-repeat:

    no-repeat,

    no-repeat,

    repeat;



  background-position:

    left 4.5% top 10px,

    right 8% top 12px,

    center;



  background-size:

    43% 46px,

    31% 38px,

    512px 512px;

}





/* hojas */



.pizzas::before {

  content: "";



  position: absolute;

  z-index: 1;



  right: -5px;

  top: 2px;



  width: 112px;

  height: 104px;



  background:

    url("assets/leaf-cream-top-right.png")

    right top / contain

    no-repeat;



  opacity: .76;



  pointer-events: none;

}



.pizzas::after {

  content: "";



  position: absolute;

  z-index: 1;



  left: -6px;

  bottom: -3px;



  width: 94px;

  height: 72px;



  background:

    url("assets/leaf-cream-bottom-left.png")

    left bottom / contain

    no-repeat;



  opacity: .76;



  pointer-events: none;

}





/* cabecera pizzas */



.section-head {

  position: relative;

  z-index: 2;



  display: flex;

  align-items: flex-end;

  justify-content: space-between;



  gap: 22px;



  margin-bottom: 18px;

}



.section-title {

  display: flex;

  align-items: flex-end;



  gap: 12px;



  white-space: nowrap;

}



.section-title .script {

  display: inline-block;



  color: #233215;



  font-family: "Yellowtail", cursive;

  font-size: 40px;

  line-height: .82;



  transform:

    rotate(-2.6deg)

    translateY(2px);

}



.section-head h2 {

  color: var(--green);



  font-size: 46px;

  font-weight: 800;

  line-height: .88;

  letter-spacing: -1.2px;

}





/* filtros */



.tabs {

  position: relative;

  z-index: 2;



  display: flex;

  align-items: center;

  justify-content: flex-end;



  gap: 0;



  flex-wrap: wrap;



  padding-bottom: 4px;

}



.tabs button {

  position: relative;



  min-height: 31px;



  padding: 6px 17px;



  color: #39432f;



  font-family: "Playfair Display", Georgia, serif;

  font-size: 10px;

  font-weight: 500;

  line-height: 1;

}



.tabs button + button::before {

  content: "";



  position: absolute;



  left: 0;

  top: 50%;



  width: 1px;

  height: 16px;



  transform: translateY(-50%);



  background: rgba(188,108,37,.33);

}



.tabs .selected {

  width: 102px;

  height: 38px;



  padding: 0;



  background:

    url("assets/brush-orange-tab.png")

    center / contain

    no-repeat;



  color: #fff;



  font-family: "DM Sans", Arial, sans-serif;

  font-size: 9px;

  font-weight: 700;

}



.tabs .selected + button::before {

  display: none;

}





/* grid */



.pizza-grid {

  position: relative;

  z-index: 2;



  display: grid;



  grid-template-columns:

    repeat(

      5,

      minmax(0,1fr)

    );



  gap: 12px;

}



.pizza-grid::after {

  content: "";



  position: absolute;



  right: -20px;

  bottom: -58px;



  width: 78px;

  height: 92px;



  background:

    url("assets/leaf-cream-bottom-right.png")

    right bottom / contain

    no-repeat;



  opacity: .72;



  pointer-events: none;

}





/* tarjeta */



.pizza-card {

  min-width: 0;

  overflow: hidden;



  background: rgba(248,242,223,.91);



  border: 1px solid rgba(40,54,24,.05);

  border-radius: 5px;



  box-shadow: var(--shadow);

}



.pizza-card > img {

  width: 100%;

  height: 126px;



  object-fit: cover;

}



.pizza-card-body,

.pizza-card > div {

  padding: 10px 12px 11px;

}



.pizza-card h3 {

  color: var(--green);



  font-size: 12px;

  line-height: 1.15;

}



.pizza-card p {

  min-height: 39px;



  margin-top: 5px;



  color: var(--muted);



  font-size: 9px;

  line-height: 1.35;

}



.pizza-price,

.pizza-card strong {

  display: block;



  margin-top: 8px;



  color: var(--ink);



  font-family: "Playfair Display", Georgia, serif;

  font-size: 15px;

  line-height: 1;

}





/* alérgenos */



.allergens {

  display: flex;

  align-items: center;



  gap: 5px;



  margin-top: 8px;

}



.allergens > span:not(.card-arrow) {

  width: 17px;

  height: 17px;



  display: inline-flex;

  align-items: center;

  justify-content: center;



  border: 1px solid rgba(40,54,24,.50);

  border-radius: 50%;



  background: transparent;

  color: var(--green);



  font-size: 8px;

  line-height: 1;

}


/* botón ver todas */



.center-btn {

  position: relative;

  z-index: 2;



  width: 192px;

  height: 38px;



  margin: 20px auto 0;



  background:

    url("assets/brush-orange-wide.png")

    center / contain

    no-repeat;



  font-size: 8px;

}





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

   PASIÓN / MASA

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



.passion {

  position: relative;



  display: grid;



  grid-template-columns:

    45.5%

    54.5%;



  min-height: 248px;



  overflow: hidden;



  background: var(--green);

}



.passion-copy {

  padding: 30px 5.5%;



  color: var(--cream);



  background:

    linear-gradient(

      rgba(32,49,18,.96),

      rgba(32,49,18,.96)

    ),

    url("assets/green-texture.jpg")

    center / 512px 512px

    repeat;

}



.passion-copy .script {

  display: block;



  margin-bottom: -5px;



  color: var(--cream);



  font-family: "Yellowtail", cursive;

  font-size: 31px;

  line-height: 1;

}



.passion h2 {

  color: var(--cream);



  font-size: 29px;

  line-height: 1;

}



.passion p {

  max-width: 430px;



  margin-top: 11px;



  color: #dedbcc;



  font-size: 10px;

  line-height: 1.45;

}





/* tres características:

   si el HTML todavía conserva “Horno de leña”, se oculta */



.traits {

  display: grid;

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



  max-width: 390px;



  margin: 18px 0;

}



.trait:nth-child(n+4) {

  display: none;

}



.trait {

  position: relative;



  min-height: 38px;



  display: flex;

  align-items: center;

  justify-content: center;



  gap: 7px;



  padding: 0 8px;



  color: #eee8d6;



  font-size: 8px;

  line-height: 1.2;

  text-align: center;

}



.trait:not(:last-child)::after {

  content: "";



  position: absolute;



  right: 0;

  top: 3px;



  width: 1px;

  height: 31px;



  background: rgba(255,255,255,.30);

}



.trait b {

  width: 26px;

  height: 26px;



  display: flex;

  align-items: center;

  justify-content: center;



  color: #fff;



  font-size: 18px;

  font-weight: 400;

}



.passion .brush-btn {

  width: 132px;

  height: 34px;



  background:

    url("assets/brush-orange-small.png")

    center / contain

    no-repeat;



  font-size: 8px;

}





/* masa */



.dough {

  position: relative;



  min-height: 248px;



  background:

    url("assets/masa-dough.jpg")

    center / cover

    no-repeat;

}



.dough-quote {

  display: none;

}





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

   LOCAL

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



.local {

  overflow: hidden;



  display: grid;



  grid-template-columns:

    57%

    43%;



  align-items: center;



  gap: 28px;



  min-height: 176px;



  padding: 13px var(--page);



  background-image:

    url("assets/paper-stroke.png"),

    url("assets/paper-texture.jpg");



  background-repeat:

    no-repeat,

    repeat;



  background-position:

    right 7% top 7px,

    center;



  background-size:

    34% 30px,

    512px 512px;

}



.local::after {

  content: "";



  position: absolute;



  right: -2px;

  bottom: -6px;



  width: 104px;

  height: 112px;



  background:

    url("assets/pizza-leaf-gold.png")

    right bottom / contain

    no-repeat;



  opacity: .82;



  pointer-events: none;

}



.local-photos {

  position: relative;

  z-index: 1;



  display: grid;



  grid-template-columns:

    repeat(3,1fr);



  gap: 5px;

}



.local-photos img {

  width: 100%;

  height: 150px;



  object-fit: cover;

}



.local-copy {

  position: relative;

  z-index: 2;



  padding-right: 80px;

}



.local-copy h2 {

  color: var(--green);



  font-size: 24px;

  line-height: 1;

}



.local-copy p {

  max-width: 440px;



  margin-top: 10px;



  color: var(--muted);



  font-size: 10px;

  line-height: 1.45;

}



.local-copy .outline-dark {

  min-width: 112px;

  height: 32px;



  margin-top: 15px;

}





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

   RESEÑAS

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



.reviews {

  position: relative;



  display: grid;



  grid-template-columns:

    1.15fr

    repeat(3,1fr);



  gap: 18px;



  min-height: 154px;



  padding: 25px 5.5%;



  color: #fff;



  background:

    linear-gradient(

      rgba(31,49,17,.96),

      rgba(31,49,17,.96)

    ),

    url("assets/green-texture.jpg")

    center / 512px 512px

    repeat;

}



.reviews::after {

  content: "";



  position: absolute;



  right: -4px;

  bottom: -2px;



  width: 70px;

  height: 82px;



  background:

    url("assets/leaf-cream-bottom-right.png")

    right bottom / contain

    no-repeat;



  opacity: .18;



  pointer-events: none;

}



.reviews-brand {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  justify-content: center;

}



.reviews h2 {

  color: var(--cream);



  font-family: Georgia, "Times New Roman", serif;

  font-size: 21px;

  font-weight: 400;

  line-height: 1;

}



.google-rating {

  display: flex;

  align-items: center;



  gap: 8px;



  margin-top: 7px;

}



.google {

  font-size: 21px;

  font-weight: 700;



  background:

    linear-gradient(

      90deg,

      #4285f4,

      #ea4335,

      #fbbc05,

      #34a853

    );



  -webkit-background-clip: text;

  background-clip: text;



  color: transparent;

}



.stars {

  color: #f0a62c;



  font-size: 10px;

  letter-spacing: 1px;

}



.reviews-brand .outline-light {

  min-width: 176px;

  height: 32px;



  margin-top: 13px;

}



.review-card {

  min-height: 105px;



  padding: 13px 14px 10px;



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



  background: rgba(255,255,255,.018);

}



.review-card .quote {

  display: block;



  color: var(--orange-light);



  font-family: Georgia, serif;

  font-size: 27px;

  line-height: .8;

}



.review-card p {

  margin-top: 5px;



  color: #e8e4d7;



  font-family: "Playfair Display", Georgia, serif;

  font-size: 9px;

  line-height: 1.4;

}



.review-card small {

  display: block;



  margin-top: 8px;



  color: #adb2a1;



  font-size: 8px;

}





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

   CONTACTO

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



.contact {

  min-height: 132px;



  overflow: hidden;



  display: grid;



  grid-template-columns:

    1.05fr

    1.05fr

    1fr;



  gap: 34px;



  align-items: start;



  padding:

    18px

    calc(5.5% + 205px)

    18px

    5.5%;



  background-image:

    url("assets/paper-stroke.png"),

    url("assets/paper-texture.jpg");



  background-repeat:

    no-repeat,

    repeat;



  background-position:

    left 7% top 10px,

    center;



  background-size:

    35% 28px,

    512px 512px;

}





/* hoja superior derecha */



.contact::before {

  content: "";



  position: absolute;



  right: -4px;

  top: -3px;



  width: 95px;

  height: 88px;



  background:

    url("assets/leaf-cream-top-right.png")

    right top / contain

    no-repeat;



  opacity: .68;



  pointer-events: none;

}





/* “Pide tu pizza favorita” */



.contact::after {

  content: "Pide tu pizza\A favorita";



  white-space: pre-line;



  position: absolute;

  right: 23px;

  top: 16px;

  z-index: 2;



  width: 180px;

  height: 102px;



  padding:

    21px

    39px

    0

    15px;



  color: #fff;



  font-family: "Yellowtail", cursive;

  font-size: 21px;

  line-height: .95;

  text-align: center;



  background-image:

    url("assets/pizza-leaf-gold.png"),

    url("assets/brush-green-cta.png");



  background-repeat:

    no-repeat,

    no-repeat;



  background-position:

    right 2px bottom 2px,

    left 4px top 4px;



  background-size:

    55px auto,

    154px 72px;



  pointer-events: none;

}





/* columnas contacto */



.contact-block {

  position: relative;

  z-index: 2;



  display: grid;



  grid-template-columns:

    30px

    1fr;



  grid-template-rows:

    auto

    auto;



  column-gap: 10px;



  align-items: start;

}



.contact-block:not(:last-child)::after {

  content: "";



  position: absolute;



  right: -17px;

  top: 0;



  width: 1px;

  height: 93px;



  background: rgba(40,54,24,.14);

}



.contact-block .icon,

.icon {

  grid-column: 1;

  grid-row: 1 / 6;



  margin: 0;



  color: var(--orange);



  font-size: 25px;

  line-height: 1;

}



.contact h3 {

  grid-column: 2;



  margin: 0 0 5px;



  color: var(--green);



  font-size: 11px;

  line-height: 1.1;

}



.contact address {

  grid-column: 2;



  color: var(--muted);



  font-size: 9px;

  line-height: 1.45;

}



.contact p {

  grid-column: 2;



  margin: 0;



  color: var(--muted);



  font-size: 9px;

  line-height: 1.5;

}



.contact .outline-dark {

  grid-column: 2;



  width: max-content;



  min-width: 112px;

  height: 30px;



  margin-top: 9px;



  font-size: 8px;

}



.schedule {

  grid-column: 2;



  width: 100%;

  max-width: 220px;

}



.schedule div {

  display: flex;

  justify-content: space-between;



  gap: 14px;



  color: var(--muted);



  font-size: 8px;

  line-height: 1.35;

}



.schedule strong {

  color: var(--ink);

  font-weight: 500;

}



.contact-whatsapp {

  grid-column: 2;



  width: max-content;



  margin-top: 5px;



  color: var(--orange);



  font-size: 8px;

  font-weight: 600;

  text-transform: none;

}





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

   FOOTER

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



.site-footer,

footer {

  position: relative;



  min-height: 88px;



  overflow: hidden;



  display: grid;



  grid-template-columns:

    100px

    1fr

    190px;



  align-items: center;



  gap: 22px;



  padding:

    10px

    7%

    16px;



  color: #dadccd;



  background:

    linear-gradient(

      rgba(16,26,11,.98),

      rgba(16,26,11,.98)

    ),

    url("assets/green-texture.jpg")

    center / 512px 512px

    repeat;

}



.site-footer::before,

footer::before {

  content: "";



  position: absolute;



  left: -14px;

  bottom: -13px;



  width: 92px;

  height: 104px;



  background:

    url("assets/leaf-footer-left.png")

    left bottom / contain

    no-repeat;



  opacity: .38;



  pointer-events: none;

}



.footer-brand {

  position: relative;

  z-index: 2;



  display: flex;

  justify-content: flex-start;

}



.footer-brand img {

  width: 62px;

  height: 62px;



  object-fit: contain;

}



.footer-nav,

footer nav {

  position: relative;

  z-index: 2;



  display: flex;

  align-items: center;

  justify-content: center;



  gap: 18px;

}



.footer-nav a,

footer nav a {

  color: #d1d4c6;



  font-size: 7.5px;



  transition: color .2s ease;

}



.footer-nav a:hover,

footer nav a:hover {

  color: #fff;

}



.footer-right {

  position: relative;

  z-index: 2;



  width: 190px;



  justify-self: end;

  align-self: center;

}



.footer-social {

  display: flex;

  align-items: center;

  justify-content: flex-start;



  gap: 10px;

}



.social-icon {

  display: inline-flex;

  align-items: center;

  justify-content: center;



  width: 16px;

  height: 16px;



  color: #fff;



  font-family: Arial, sans-serif;

  font-size: 14px;

  font-weight: 700;

  line-height: 1;

}



.instagram {

  font-size: 17px;

}



.facebook {

  font-size: 16px;

}



.google-icon {

  font-size: 16px;

}



.footer-italy {

  width: 44px;

  height: 7px;



  margin-left: 5px;



  background:

    url("assets/italy-brush.png")

    center / contain

    no-repeat;

}



.footer-links {

  margin-top: 10px;



  display: flex;

  align-items: center;

  justify-content: flex-start;



  gap: 7px;



  color: #818873;



  font-size: 7px;

}



.footer-links i {

  color: #5e6655;

  font-style: normal;

}



.site-footer > small,

footer > small {

  position: absolute;



  left: 50%;

  bottom: 5px;



  transform: translateX(-50%);



  color: #77806c;



  font-size: 6.5px;



  white-space: nowrap;

}





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

   FILTRO PIZZAS

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



.pizza-card.is-hidden {

  display: none;

}



.pizza-card.is-visible {

  animation: cardIn .25s ease both;

}



@keyframes cardIn {

  from {

    opacity: 0;

    transform: translateY(5px);

  }



  to {

    opacity: 1;

    transform: none;

  }

}





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

   TABLET

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



@media (max-width: 1100px) {



  .topbar {

    padding-inline: 5%;

  }



  .main-nav,

  .topbar nav {

    gap: 18px;

  }



  .main-nav a,

  .topbar nav a {

    font-size: 11px;

  }



  .hero {

    padding-inline: 6%;



    background:

      linear-gradient(

        90deg,

        rgba(22,35,12,.97) 0%,

        rgba(26,42,14,.94) 40%,

        rgba(28,42,15,.45) 56%,

        rgba(28,42,15,.07) 68%

      ),

      url("assets/hero-pizza.jpg")

      right center / 64% 100%

      no-repeat,

      url("assets/green-texture.jpg")

      center / 512px 512px

      repeat;

  }



  .hero-content {

    width: 50%;

  }



  .pizza-card > img {

    height: 115px;

  }



  .local {

    grid-template-columns:

      55%

      45%;

  }



  .contact {

    padding-right: calc(5.5% + 190px);

  }

}





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

   MOBILE

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



@media (max-width: 800px) {



  html {

    scroll-padding-top: 68px;

  }





  /* header */



  .topbar {

    height: 68px;

    padding-inline: 6%;

  }



  .logo {

    width: 58px;

    height: 58px;

  }



  .header-location,

  .hero-location-btn {

    display: none;

  }



  .hamb {

    display: block;

  }



  .main-nav,

  .topbar nav {

    position: absolute;



    top: 68px;

    left: 0;

    right: 0;



    height: auto;



    margin: 0;



    padding:

      10px

      7%;



    display: none;



    flex-direction: column;

    align-items: stretch;



    gap: 0;



    background: rgba(16,26,11,.985);

  }



  .main-nav.is-open,

  .topbar nav.is-open {

    display: flex;

  }



  .main-nav a,

  .topbar nav a {

    height: auto;



    padding: 12px 0;



    font-size: 12px;

  }





  /* hero */



  .hero {

    min-height: 610px;



    padding-inline: 7%;



    background:

      linear-gradient(

        180deg,

        rgba(25,37,16,.94) 0%,

        rgba(25,37,16,.82) 38%,

        rgba(25,37,16,.35) 100%

      ),

      url("assets/hero-pizza.jpg")

      center / cover

      no-repeat;

  }



  .hero-content {

    width: 100%;

    min-height: 610px;



    padding: 76px 0 40px;



    justify-content: flex-start;

    align-items: center;



    text-align: center;

  }



  .italy-line {

    margin-inline: auto;

  }



  .hero-buttons,

  .hero-actions {

    justify-content: center;

  }



  .hero-leaf,

  .hero-leaf-left {

    width: 88px;

    opacity: .26;

  }





  /* pizzas */



  .pizzas {

    padding: 25px 5% 30px;



    background-position:

      left -8% top 8px,

      right -15% top 13px,

      center;



    background-size:

      72% 42px,

      58% 35px,

      512px 512px;

  }



  .section-head {

    flex-direction: column;

    align-items: flex-start;



    gap: 14px;

  }



  .tabs {

    width: 100%;



    justify-content: flex-start;



    overflow-x: auto;

    flex-wrap: nowrap;

  }



  .tabs button {

    flex: 0 0 auto;

  }



  .pizza-grid {

    grid-template-columns:

      repeat(

        2,

        minmax(0,1fr)

      );



    gap: 10px;

  }





  /* pasión */



  .passion {

    grid-template-columns: 1fr;

  }



  .passion-copy {

    padding: 30px 8%;

  }



  .traits {

    grid-template-columns:

      repeat(3,1fr);



    max-width: 100%;



    row-gap: 12px;

  }



  .dough {

    min-height: 270px;

  }





  /* local */



  .local {

    grid-template-columns: 1fr;



    gap: 18px;



    padding: 22px 6%;

  }



  .local-copy {

    order: 1;



    padding-right: 80px;

  }



  .local-photos {

    order: 2;

  }



  .local-photos img {

    height: 125px;

  }





  /* reseñas */



  .reviews {

    grid-template-columns:

      1fr

      1fr;



    padding: 27px 6%;

  }



  .reviews-brand {

    grid-column: 1 / -1;

  }





  /* contacto */



  .contact {

    grid-template-columns:

      1fr

      1fr;



    padding: 28px 7%;

  }



  .contact::after {

    display: none;

  }



  .contact-block:not(:last-child)::after {

    display: none;

  }





  /* footer */



  .site-footer,

  footer {

    grid-template-columns: 1fr;



    justify-items: center;



    gap: 12px;



    padding: 20px 7%;



    text-align: center;

  }



  .footer-brand {

    justify-content: center;

  }



  .footer-nav,

  footer nav {

    flex-wrap: wrap;



    gap:

      10px

      17px;

  }



  .footer-right {

    width: auto;



    justify-self: center;

  }



  .footer-social,

  .footer-links {

    justify-content: center;

  }



  .site-footer > small,

  footer > small {

    position: static;



    transform: none;



    margin-top: 3px;

  }

}





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

   MÓVIL PEQUEÑO

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



@media (max-width: 520px) {



  .hero {

    min-height: 585px;

  }



  .hero-content {

    min-height: 585px;



    padding-top: 76px;

  }



  .hero h1 {

    font-size: 52px;

    letter-spacing: -2px;

  }



  .hero h2 {

    font-size: 14px;

  }



  .hero-script,

  .hero .script {

    font-size: 23px;

  }



  .hero-buttons,

  .hero-actions {

    width: 100%;



    flex-direction: column;

  }



  .hero-buttons .brush-btn,

  .hero-cta,

  .hero-map-btn {

    width: 220px;

    min-width: 220px;

  }





  /* pizzas */



  .section-title {

    gap: 8px;

  }



  .section-title .script {

    font-size: 34px;

  }



  .section-head h2 {

    font-size: 35px;

  }



  .pizza-grid {

    grid-template-columns: 1fr;

  }



  .pizza-card {

    display: grid;



    grid-template-columns:

      43%

      57%;

  }



  .pizza-card > img {

    height: 100%;

    min-height: 128px;

  }



  .pizza-card p {

    min-height: auto;

  }





  /* pasión */



  .traits {

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

  }





  /* local */



  .local-photos {

    grid-template-columns: 1fr;

  }



  .local-photos img {

    height: 145px;

  }





  /* reseñas */



  .reviews {

    grid-template-columns: 1fr;

  }



  .reviews-brand {

    grid-column: auto;

  }





  /* contacto */



  .contact {

    grid-template-columns: 1fr;

  }





  /* footer */



  footer nav {

    gap: 12px;

  }



  .footer-social {

    flex-wrap: wrap;

  }

}





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

   ACCESIBILIDAD

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



@media (prefers-reduced-motion: reduce) {



  html {

    scroll-behavior: auto;

  }



  *,

  *::before,

  *::after {

    animation-duration: .01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: .01ms !important;

  }

}





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

   JSON / ALÉRGENOS / PLACEHOLDERS

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



.menu-loading,

.menu-load-error {

  grid-column: 1 / -1;



  width: 100%;



  padding: 22px 10px;



  color: var(--muted);



  font-family: "Playfair Display", Georgia, serif;

  font-size: 12px;



  text-align: center;

}



.menu-load-error {

  color: var(--orange);

}



.allergens .allergen-icon {

  width: 34px;

  height: 34px;



  display: inline-flex;

  align-items: center;

  justify-content: center;



  padding: 3px;



  border: 1px solid rgba(40,54,24,.45);

  border-radius: 50%;



  overflow: hidden;

}



.allergens .allergen-icon img {

  width: 24px;

  height: 24px;



  object-fit: contain;

}



.pizza-card > .pizza-placeholder {

  width: 100%;

  height: 126px;



  display: flex;

  align-items: center;

  justify-content: center;



  background:

    linear-gradient(

      rgba(31,49,17,.94),

      rgba(31,49,17,.94)

    ),

    url("assets/green-texture.jpg")

    center / 512px 512px

    repeat;

}



.pizza-card > .pizza-placeholder img {

  width: 62px;

  height: 62px;



  object-fit: contain;



  opacity: .92;

}





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

   CARTA COMPLETA

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



.carta-page {

  background: var(--paper);

}



.carta-hero {

  position: relative;



  min-height: 250px;



  display: flex;

  align-items: center;



  overflow: hidden;



  padding:

    42px

    max(

      var(--page),

      calc((100vw - var(--content)) / 2)

    );



  color: var(--cream);



  background:

    linear-gradient(

      90deg,

      rgba(24,36,15,.98),

      rgba(31,49,17,.93)

    ),

    url("assets/green-texture.jpg")

    center / 512px 512px

    repeat;

}



.carta-hero::before {

  content: "";



  position: absolute;



  right: -8px;

  top: -12px;



  width: 150px;

  height: 170px;



  background:

    url("assets/leaf-hero-top-left.png")

    center / contain

    no-repeat;



  opacity: .28;



  transform: scaleX(-1);



  pointer-events: none;

}



.carta-hero::after {

  content: "";



  position: absolute;



  left: -10px;

  bottom: -12px;



  width: 120px;

  height: 105px;



  background:

    url("assets/leaf-hero-bottom-left.png")

    left bottom / contain

    no-repeat;



  opacity: .30;



  pointer-events: none;

}



.carta-hero-inner {

  position: relative;

  z-index: 2;

}



.carta-hero .script {

  display: block;



  margin-bottom: -8px;



  font-size: 39px;

  line-height: 1;

}



.carta-hero h1 {

  color: var(--cream);



  font-size:

    clamp(

      56px,

      7vw,

      82px

    );



  line-height: .9;

  letter-spacing: -2px;

}



.carta-hero .italy-line {

  margin:

    14px

    0

    14px;

}



.carta-hero p {

  color: #dedbcc;



  font-size: 11px;

}



.carta-pizzas {

  padding-top: 34px;

  padding-bottom: 38px;

}



.carta-pizza-grid {

  row-gap: 18px;

}



.carta-pizza-grid .pizza-card {

  height: 100%;

}



.carta-pizza-grid .pizza-card p {

  min-height: 48px;

}



.carta-pizza-grid .allergens {

  min-height: 20px;

}



.carta-extras {

  display: grid;



  grid-template-columns:

    1fr

    1fr;



  gap: 24px;



  padding:

    34px

    max(

      var(--page),

      calc((100vw - var(--content)) / 2)

    )

    42px;



  background-image:

    url("assets/paper-stroke.png"),

    url("assets/paper-texture.jpg");



  background-repeat:

    no-repeat,

    repeat;



  background-position:

    right 9% top 15px,

    center;



  background-size:

    34% 34px,

    512px 512px;

}



.carta-list-card {

  position: relative;



  padding:

    24px

    26px;



  background:

    rgba(255,253,245,.48);



  border:

    1px solid

    rgba(40,54,24,.08);



  box-shadow:

    0 5px 15px

    rgba(31,38,22,.06);

}



.carta-list-heading {

  display: flex;

  align-items: flex-end;



  gap: 10px;



  margin-bottom: 18px;

}



.carta-list-heading .script {

  color: var(--green);



  font-size: 31px;

  line-height: .85;



  transform:

    rotate(-2deg);

}



.carta-list-heading h2 {

  color: var(--green);



  font-size: 29px;

  line-height: .9;

}



.carta-list-card > h3 {

  margin:

    15px

    0

    8px;



  color: var(--orange);



  font-size: 10px;

  letter-spacing: 1.2px;

}



.menu-list {

  display: grid;



  gap: 0;

}



.menu-row {

  min-height: 34px;



  display: flex;

  align-items: center;

  justify-content: space-between;



  gap: 16px;



  padding:

    7px

    0;



  border-bottom:

    1px dashed

    rgba(40,54,24,.15);



  color: var(--muted);



  font-size: 10px;

}



.menu-row:last-child {

  border-bottom: 0;

}



.menu-row strong {

  flex: 0 0 auto;



  color: var(--green);



  font-family:

    "Playfair Display",

    Georgia,

    serif;



  font-size: 12px;

}



.menu-subheading {

  margin-top: 22px !important;

}



.allergen-info {

  display: grid;



  grid-template-columns:

    .85fr

    1.15fr;



  gap: 38px;



  align-items: center;



  padding:

    30px

    max(

      var(--page),

      calc((100vw - var(--content)) / 2)

    );



  border-top:

    1px solid

    rgba(40,54,24,.08);

}



.allergen-info-copy .script {

  display: block;



  margin-bottom: -6px;



  font-size: 30px;

}



.allergen-info-copy h2 {

  color: var(--green);



  font-size: 28px;

  line-height: 1;

}



.allergen-info-copy p {

  max-width: 420px;



  margin-top: 10px;



  color: var(--muted);



  font-size: 9px;

  line-height: 1.5;

}



.allergen-legend {

  display: flex;

  align-items: center;



  gap:

    10px

    16px;



  flex-wrap: wrap;

}



.allergen-legend-item {

  display: inline-flex;

  align-items: center;



  gap: 9px;



  color: var(--muted);



  font-size: 11px;

}



.allergen-legend-item .allergen-icon {

  width: 38px;

  height: 38px;



  display: inline-flex;

  align-items: center;

  justify-content: center;



  padding: 3px;



  border:

    1px solid

    rgba(40,54,24,.35);



  border-radius: 50%;

}



.allergen-legend-item img {

  width: 14px;

  height: 14px;



  object-fit: contain;

}



.carta-order-cta {

  min-height: 120px;



  display: flex;

  align-items: center;

  justify-content: center;



  gap: 55px;



  padding:

    25px

    6%;



  color: var(--cream);



  background:

    linear-gradient(

      rgba(31,49,17,.97),

      rgba(31,49,17,.97)

    ),

    url("assets/green-texture.jpg")

    center / 512px 512px

    repeat;

}



.carta-order-cta .script {

  display: block;



  margin-bottom: -4px;



  font-size: 28px;

  line-height: 1;

}



.carta-order-cta h2 {

  color: var(--cream);



  font-size: 26px;

  line-height: 1;

}



.carta-whatsapp-btn {

  width: 210px;

  height: 46px;



  background:

    url("assets/brush-orange-hero.png")

    center / contain

    no-repeat;



  font-size: 9px;

}





/* links del footer */



.footer-links a {

  color: inherit;



  transition:

    color .2s ease;

}



.footer-links a:hover {

  color: #fff;

}





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

   CARTA — TABLET / MOBILE

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



@media (max-width: 1100px) {



  .pizza-card > .pizza-placeholder {

    height: 115px;

  }



  .carta-pizza-grid {

    grid-template-columns:

      repeat(

        4,

        minmax(0,1fr)

      );

  }

}





@media (max-width: 800px) {



  .carta-hero {

    min-height: 220px;



    padding:

      38px

      7%;

  }



  .carta-pizza-grid {

    grid-template-columns:

      repeat(

        2,

        minmax(0,1fr)

      );

  }



  .carta-extras {

    grid-template-columns: 1fr;



    padding:

      28px

      6%;

  }



  .allergen-info {

    grid-template-columns: 1fr;



    gap: 20px;



    padding:

      28px

      7%;

  }



  .carta-order-cta {

    flex-direction: column;



    gap: 18px;



    text-align: center;

  }

}





@media (max-width: 520px) {



  .pizza-card > .pizza-placeholder {

    height: 100%;

    min-height: 128px;

  }



  .carta-pizza-grid {

    grid-template-columns: 1fr;

  }



  .carta-pizza-grid .pizza-card {

    display: grid;



    grid-template-columns:

      43%

      57%;

  }



  .carta-list-card {

    padding:

      20px

      18px;

  }



  .carta-hero .script {

    font-size: 34px;

  }



  .carta-hero h1 {

    font-size: 56px;

  }

}





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

   CARTA — ANIMACIONES

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



.reveal-on-scroll {

  opacity: 0;

  transform: translateY(24px);



  transition:

    opacity .65s ease,

    transform .65s ease;

}



.reveal-on-scroll.is-revealed {

  opacity: 1;

  transform: none;

}





/* Hero algo más vivo al entrar */



.carta-hero.is-revealed .carta-hero-inner {

  animation:

    cartaHeroIn

    .75s

    cubic-bezier(.2,.75,.25,1)

    both;

}



@keyframes cartaHeroIn {

  from {

    opacity: 0;

    transform: translateY(18px);

  }



  to {

    opacity: 1;

    transform: none;

  }

}





/* Tarjetas */



.carta-card-animate {

  opacity: 0;

  transform: translateY(18px) scale(.985);



  transition:

    opacity .45s ease var(--card-delay, 0ms),

    transform .45s ease var(--card-delay, 0ms),

    box-shadow .25s ease,

    border-color .25s ease;

}



.carta-card-animate.is-visible {

  opacity: 1;

  transform: none;

}



.carta-pizza-grid {

  transition:

    opacity .15s ease,

    transform .15s ease;

}



.carta-pizza-grid.is-filtering {

  opacity: .15;

  transform: translateY(6px);

}



.carta-pizza-grid .pizza-card {

  transition:

    transform .25s ease,

    box-shadow .25s ease,

    border-color .25s ease,

    opacity .45s ease var(--card-delay, 0ms);

}



.carta-pizza-grid .pizza-card:hover {

  transform: translateY(-5px);



  border-color:

    rgba(188,108,37,.18);



  box-shadow:

    0 13px 28px

    rgba(31,38,22,.15);

}



.carta-pizza-grid .pizza-card > img,

.carta-pizza-grid .pizza-placeholder {

  transition:

    transform .45s ease,

    filter .45s ease;

}



.carta-pizza-grid .pizza-card:hover > img {

  transform: scale(1.035);

}



.carta-pizza-grid .pizza-card:hover .pizza-placeholder {

  filter: brightness(1.06);

}





/* Filtros */



.carta-pizzas .tabs button {

  transition:

    transform .2s ease,

    color .2s ease,

    opacity .2s ease;

}



.carta-pizzas .tabs button:hover {

  transform: translateY(-1px);

}



.carta-pizzas .tabs .selected {

  animation:

    selectedTabIn

    .28s

    ease

    both;

}



@keyframes selectedTabIn {

  from {

    opacity: .55;

    transform: scale(.96);

  }



  to {

    opacity: 1;

    transform: none;

  }

}





/* Bebidas y postres */



.menu-row-animate {

  opacity: 0;

  transform: translateX(-10px);



  transition:

    opacity .4s ease var(--row-delay, 0ms),

    transform .4s ease var(--row-delay, 0ms),

    padding-left .2s ease,

    color .2s ease;

}



.menu-row-animate.is-visible {

  opacity: 1;

  transform: none;

}



.menu-row:hover {

  padding-left: 6px;

}



.menu-row:hover span {

  color: var(--green);

}





/* Alérgenos */



.allergen-animate {

  opacity: 0;

  transform: translateY(8px);



  transition:

    opacity .35s ease var(--allergen-delay, 0ms),

    transform .35s ease var(--allergen-delay, 0ms);

}



.allergen-animate.is-visible {

  opacity: 1;

  transform: none;

}



.allergen-legend-item .allergen-icon {

  transition:

    transform .2s ease,

    border-color .2s ease;

}



.allergen-legend-item:hover .allergen-icon {

  transform: translateY(-2px) rotate(-3deg);



  border-color:

    rgba(188,108,37,.55);

}





/* Botón de volver a la home */



.carta-back-home {

  display: inline-flex;

  align-items: center;

  gap: 7px;



  margin-top: 16px;



  color: var(--cream);



  font-size: 9px;

  font-weight: 700;

  letter-spacing: .4px;



  text-transform: uppercase;



  opacity: .85;



  transition:

    opacity .2s ease,

    transform .2s ease;

}



.carta-back-home:hover {

  opacity: 1;

  transform: translateX(-3px);

}





/* Motion accesible */



@media (prefers-reduced-motion: reduce) {



  .reveal-on-scroll,

  .carta-card-animate,

  .menu-row-animate,

  .allergen-animate {

    opacity: 1 !important;

    transform: none !important;

  }



  .carta-hero.is-revealed .carta-hero-inner,

  .carta-pizzas .tabs .selected {

    animation: none !important;

  }



  .carta-pizza-grid {

    transition: none !important;

  }

}



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

   UI ICONS — V4

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



.ui-icon {

  width: 1em;

  height: 1em;

  display: block;

  flex: 0 0 auto;

  overflow: visible;

  fill: none;

  stroke: currentColor;

}



.btn-icon {

  width: 15px;

  height: 15px;

}



.menu-icon {

  width: 25px;

  height: 25px;

}



.hamb {

  width: 38px;

  height: 38px;

  align-items: center;

  justify-content: center;

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

  border-radius: 50%;

  transition: border-color .2s ease, background .2s ease, transform .2s ease;

}



.hamb:hover {

  background: rgba(255,255,255,.06);

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

}



.hamb:active {

  transform: scale(.96);

}



@media (max-width: 800px) {

  .hamb {

    display: inline-flex;

  }

}



.outline-btn .ui-icon,

.outline-dark .ui-icon,

.outline-light .ui-icon,

.brush-btn .ui-icon {

  transition: transform .2s ease;

}



.brush-btn:hover .btn-icon {

  transform: translateX(2px);

}



.hero-map-btn:hover .btn-icon,

.contact .outline-dark:hover .btn-icon {

  transform: translateY(-1px) scale(1.05);

}



.trait-icon {

  width: 28px;

  height: 28px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  flex: 0 0 auto;

  color: #fff;

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

  border-radius: 50%;

  transition: border-color .2s ease, color .2s ease, transform .2s ease;

}



.trait-icon .ui-icon {

  width: 16px;

  height: 16px;

}



.trait:hover .trait-icon {

  border-color: rgba(221,161,94,.65);

  color: var(--orange-light);

  transform: translateY(-1px);

}



.contact-block .icon,

.icon {

  width: 28px;

  height: 28px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  color: var(--orange);

}



.contact-block .icon .ui-icon,

.icon .ui-icon {

  width: 24px;

  height: 24px;

}



.contact-whatsapp {

  display: inline-flex;

  align-items: center;

  gap: 6px;

}



.contact-whatsapp .ui-icon {

  width: 14px;

  height: 14px;

}



.social-icon {

  width: 30px;

  height: 30px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  color: rgba(255,255,255,.90);

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

  border-radius: 50%;

  background: rgba(255,255,255,.025);

  font-size: inherit;

  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;

}



.social-icon .ui-icon {

  width: 15px;

  height: 15px;

}



.social-icon.instagram .ui-icon {

  width: 16px;

  height: 16px;

}



.social-icon.facebook .ui-icon,

.social-icon.tiktok .ui-icon {

  stroke: none;

  fill: currentColor;

}



.social-icon.facebook .ui-icon {

  width: 14px;

  height: 14px;

}



.social-icon.tiktok .ui-icon {

  width: 15px;

  height: 15px;

}



.social-icon.maps-icon .ui-icon {

  width: 15px;

  height: 15px;

}



.social-icon:hover {

  color: #fff;

  border-color: rgba(221,161,94,.58);

  background: rgba(221,161,94,.10);

  transform: translateY(-2px);

}



.instagram,

.facebook,

.google-icon {

  font-size: inherit;

}







.carta-back-home {

  display: inline-flex;

  align-items: center;

  gap: 7px;

}



.carta-back-home .ui-icon {

  width: 14px;

  height: 14px;

}



.footer-links a {

  color: inherit;

  transition: color .2s ease;

}



.footer-links a:hover {

  color: #fff;

}



.social-icon:focus-visible,

.contact-whatsapp:focus-visible,

.hamb:focus-visible {

  outline: 2px solid var(--orange-light);

  outline-offset: 3px;

}



.carta-section-icon {

  width: 34px;

  height: 34px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  flex: 0 0 auto;

  color: var(--orange);

  border: 1px solid rgba(188,108,37,.22);

  border-radius: 50%;

  background: rgba(188,108,37,.05);

}



.carta-section-icon .ui-icon {

  width: 18px;

  height: 18px;

}



/* Ajuste de ancho para 4 redes + bandera */

@media (min-width: 801px) {

  .site-footer,

  footer {

    grid-template-columns: 100px 1fr 220px;

  }



  .footer-right {

    width: 220px;

  }

}


/* =========================================================
   RÚSTICA — VISUAL POLISH V5
   Ajustes finales de jerarquía, espaciado, tarjetas,
   iconos, responsive y página de carta.
   ========================================================= */

:root {
  --green: #29391b;
  --green-dark: #1d2b13;
  --green-deep: #111a0d;

  --cream: #f8f1de;
  --paper: #f7f0df;

  --orange: #bd6a24;
  --orange-light: #dda15e;

  --ink: #1e241a;
  --muted: #656b5c;
  --white: #fffdf7;

  --content: 1180px;
  --page: clamp(22px, 5vw, 76px);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

  --shadow:
    0 7px 22px rgba(29, 43, 19, .09);

  --shadow-hover:
    0 16px 40px rgba(22, 34, 14, .16);

  --line:
    rgba(40, 54, 24, .10);
}


/* =========================================================
   BASE
   ========================================================= */

html {
  scroll-padding-top: 82px;
}

body {
  background:
    var(--paper);

  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

img {
  height: auto;
}

main {
  overflow: clip;
}

::selection {
  background: var(--orange);
  color: #fff;
}


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

.topbar {
  height: 78px;

  padding-inline:
    max(
      var(--page),
      calc((100vw - 1280px) / 2)
    );

  gap: 26px;

  background:
    linear-gradient(
      rgba(17, 26, 13, .965),
      rgba(17, 26, 13, .965)
    ),
    url("assets/green-texture.jpg")
    center / 512px 512px
    repeat;

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

  box-shadow:
    0 7px 25px
    rgba(9, 14, 7, .15);

  backdrop-filter: blur(8px);
}

.logo {
  width: 68px;
  height: 68px;

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

.brand:hover .logo {
  transform:
    rotate(-2deg)
    scale(1.025);

  filter:
    brightness(1.05);
}

.main-nav,
.topbar nav {
  gap: clamp(18px, 2.25vw, 34px);
}

.main-nav a,
.topbar nav a {
  font-size: 12px;
  letter-spacing: .15px;

  opacity: .88;

  transition:
    color .2s ease,
    opacity .2s ease;
}

.main-nav a:hover,
.topbar nav a:hover,
.main-nav a.active,
.topbar nav a.active {
  opacity: 1;
}

.main-nav a.active::after,
.topbar nav a.active::after {
  bottom: 12px;

  width: 38px;
  height: 3px;

  background:
    linear-gradient(
      90deg,
      rgba(188,108,37,.15),
      var(--orange),
      rgba(188,108,37,.15)
    );

  box-shadow:
    0 0 9px
    rgba(188,108,37,.26);
}

.header-location,
.hero-location-btn {
  width: 152px;
  height: 42px;

  filter:
    drop-shadow(
      0 5px 8px
      rgba(0,0,0,.14)
    );

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

.header-location:hover,
.hero-location-btn:hover {
  transform:
    translateY(-1px)
    rotate(-.35deg);

  filter:
    brightness(1.05)
    drop-shadow(
      0 7px 11px
      rgba(0,0,0,.18)
    );
}


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

.hero {
  min-height: 510px;

  background:
    linear-gradient(
      90deg,
      rgba(16,28,10,.985) 0%,
      rgba(24,39,14,.955) 31%,
      rgba(27,42,16,.74) 43%,
      rgba(27,42,16,.20) 58%,
      rgba(27,42,16,0) 68%
    ),
    url("assets/hero-pizza.jpg")
    right center / 62% 100%
    no-repeat,
    url("assets/green-texture.jpg")
    center / 512px 512px
    repeat;

  box-shadow:
    inset 0 -1px
    rgba(255,255,255,.035);
}

.hero::after {
  content: "";

  position: absolute;
  inset: 0;

  z-index: 1;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 73% 48%,
      rgba(255,255,255,.06),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      transparent 70%,
      rgba(8,14,5,.12)
    );
}

.hero-content {
  width: 45%;
  min-height: 510px;

  padding:
    62px
    0
    58px;
}

.hero-kicker,
.kicker {
  margin-bottom: 8px;

  font-size: 14px;
  letter-spacing: 7.5px;
}

.hero h1 {
  font-size:
    clamp(
      66px,
      6.5vw,
      88px
    );

  line-height: .87;
  letter-spacing: -3.4px;

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

.hero h2 {
  margin-top: 11px;

  font-size: 17px;
  letter-spacing: 1.35px;
}

.italy-line {
  width: 205px;
  height: 14px;

  margin:
    14px
    0
    17px;
}

.hero-script,
.hero .script {
  max-width: 410px;

  margin-bottom: 26px;

  font-size: 28px;
  line-height: 1.05;

  text-shadow:
    0 2px 12px
    rgba(0,0,0,.16);
}

.hero-buttons,
.hero-actions {
  gap: 13px;
}

.hero-buttons .brush-btn,
.hero-cta {
  width: 225px;
  min-width: 225px;
  height: 52px;

  filter:
    drop-shadow(
      0 7px 10px
      rgba(0,0,0,.14)
    );
}

.hero-map-btn,
.outline-btn {
  min-width: 156px;
  height: 42px;

  background:
    rgba(255,255,255,.025);

  backdrop-filter:
    blur(3px);
}


/* =========================================================
   TÍTULOS DE SECCIÓN
   ========================================================= */

.section-head {
  gap: 28px;

  margin-bottom: 22px;
}

.section-title {
  gap: 10px;
}

.section-title .script {
  font-size:
    clamp(
      34px,
      3.4vw,
      43px
    );
}

.section-head h2 {
  font-size:
    clamp(
      38px,
      4vw,
      49px
    );

  letter-spacing: -1.6px;
}


/* =========================================================
   PIZZAS HOME
   ========================================================= */

.pizzas {
  padding-top: 34px;
  padding-bottom: 36px;

  background-position:
    left 4.5% top 12px,
    right 9% top 13px,
    center;

  background-size:
    44% 48px,
    31% 38px,
    512px 512px;
}

.tabs {
  gap: 2px;

  padding:
    3px
    2px
    5px;
}

.tabs button {
  min-height: 34px;

  padding:
    7px
    15px;

  border-radius: 999px;

  font-size: 10px;

  transition:
    color .2s ease,
    background .2s ease,
    transform .2s ease;
}

.tabs button:not(.selected):hover {
  color: var(--green);

  background:
    rgba(40,54,24,.055);

  transform:
    translateY(-1px);
}

.tabs button + button::before {
  opacity: .72;
}

.tabs .selected {
  width: 106px;
  height: 39px;

  filter:
    drop-shadow(
      0 4px 6px
      rgba(188,108,37,.16)
    );
}

.pizza-grid {
  gap: 15px;
}

.pizza-card {
  position: relative;

  border:
    1px solid
    rgba(40,54,24,.075);

  border-radius: var(--radius-sm);

  background:
    rgba(255,253,245,.72);

  box-shadow:
    0 7px 18px
    rgba(31,38,22,.075);

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

.pizza-card:hover {
  transform:
    translateY(-5px);

  border-color:
    rgba(188,108,37,.20);

  box-shadow:
    var(--shadow-hover);
}

.pizza-card > img,
.pizza-card > .pizza-placeholder {
  height: 142px;
}

.pizza-card > img {
  transition:
    transform .42s ease,
    filter .42s ease;
}

.pizza-card:hover > img {
  transform:
    scale(1.025);

  filter:
    saturate(1.04)
    contrast(1.015);
}

.pizza-card-body,
.pizza-card > div {
  padding:
    13px
    14px
    13px;
}

.pizza-card h3 {
  min-height: 30px;

  display: flex;
  align-items: flex-start;

  color: var(--green);

  font-size: 12.5px;
  line-height: 1.16;
}

.pizza-card p {
  min-height: 45px;

  margin-top: 6px;

  font-size: 9.25px;
  line-height: 1.42;
}

.pizza-price,
.pizza-card strong {
  margin-top: 12px;

  color: var(--green-deep);
  font-weight: 700;

  font-size: 17px;
}

.allergens {
  min-height: 23px;

  gap: 8px;

  margin-top: 12px;
}

.allergens .allergen-icon {
  width: 20px;
  height: 20px;

  padding: 2.5px;

  background:
    rgba(255,255,255,.46);

  border-color:
    rgba(40,54,24,.28);

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

.allergens .allergen-icon:hover {
  transform:
    translateY(-1px);

  border-color:
    rgba(188,108,37,.44);
/* =========================================================

/* =========================================================
   RÚSTICA — V6 DECOR PATCH
   Más hojas y mármol en zonas crema.
   ========================================================= */
/* ----- Más "mármol" / pinceladas crema ----- */
.pizzas {
  background-image:
    url("assets/paper-stroke.png"),
    url("assets/paper-stroke.png"),
    url("assets/paper-stroke.png"),
    url("assets/paper-texture.jpg");
  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat,
    repeat;
  background-position:
    left 4.5% top 10px,
    right 8% top 12px,
    center top 22px,
    center;
  background-size:
    43% 46px,
    31% 38px,
    26% 24px,
    512px 512px;
}

.local {
  background-image:
    url("assets/paper-stroke.png"),
    url("assets/paper-stroke.png"),
    url("assets/paper-texture.jpg");
  background-repeat:
    no-repeat,
    no-repeat,
    repeat;
  background-position:
    right 7% top 7px,
    left 6% top 16px,
    center;
  background-size:
    34% 30px,
    22% 22px,
    512px 512px;
}

.contact {
  background-image:
    url("assets/paper-stroke.png"),
    url("assets/paper-stroke.png"),
    url("assets/paper-stroke.png"),
    url("assets/paper-texture.jpg");
  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat,
    repeat;
  background-position:
    left 7% top 10px,
    center top 16px,
    right 14% bottom 20px,
    center;
  background-size:
    35% 28px,
    20% 18px,
    16% 14px,
    512px 512px;
}

/* ----- Más hojas decorativas ----- */
.pizzas::before {
  right: -3px;
  top: 0;
  width: 124px;
  height: 114px;
  opacity: .84;
}

.pizzas::after {
  left: -8px;
  bottom: -4px;
  width: 106px;
  height: 82px;
  opacity: .84;
}

.pizza-grid::before {
  content: "";
  position: absolute;
  left: 17%;
  bottom: -30px;
  width: 78px;
  height: 64px;
  background:
    url("assets/leaf-cream-bottom-left.png")
    left bottom / contain no-repeat;
  opacity: .32;
  transform: rotate(-8deg);
  pointer-events: none;
}

.pizza-grid::after {
  right: -12px;
  bottom: -55px;
  width: 86px;
  height: 98px;
  opacity: .78;
}

.local::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 20px;
  width: 86px;
  height: 80px;
  background:
    url("assets/leaf-cream-bottom-left.png")
    left top / contain no-repeat;
  opacity: .24;
  transform: rotate(-80deg);
  pointer-events: none;
}

.local::after {
  right: -2px;
  bottom: -6px;
  width: 108px;
  height: 116px;
  opacity: .86;
}

.local-copy {
  position: relative;
}

.local-copy::before {
  content: "";
  position: absolute;
  right: 18px;
  top: -8px;
  width: 92px;
  height: 86px;
  background:
    url("assets/leaf-cream-top-right.png")
    right top / contain no-repeat;
  opacity: .18;
  pointer-events: none;
}

.contact::before {
  right: -5px;
  top: -4px;
  width: 108px;
  height: 100px;
  opacity: .82;
}

.contact > .contact-block:first-child::before {
  content: "";
  position: absolute;
  left: -46px;
  bottom: -24px;
  width: 82px;
  height: 70px;
  background:
    url("assets/leaf-cream-bottom-left.png")
    left bottom / contain no-repeat;
  opacity: .26;
  pointer-events: none;
}

.site-footer::before,
footer::before {
  opacity: .52;
}

/* ----- Ajustes responsive decorativos ----- */
@media (max-width: 800px) {
  .pizzas {
    background-size:
      56% 38px,
      34% 28px,
      30% 18px,
      512px 512px;
    background-position:
      left 4% top 10px,
      right 7% top 12px,
      center top 18px,
      center;
  }

  .local {
    background-size:
      48% 24px,
      28% 16px,
      512px 512px;
  }

  .contact {
    background-size:
      48% 22px,
      24% 14px,
      20% 12px,
      512px 512px;
  }

  .pizza-grid::before,
  .local::before,
  .local-copy::before,
  .contact > .contact-block:first-child::before {
    display: none;
  }
}

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

/* =========================================================
   RÚSTICA — V7 LEGIBILITY & DETAIL POLISH
   Legibilidad, footer y refinamientos finales.
   ========================================================= */
/* ---------- Alérgenos en tarjetas ---------- */
.allergens {
  min-height: 31px;
  gap: 8px;
  margin-top: 12px;
}

.allergens .allergen-icon,
.allergens > span:not(.card-arrow) {
  width: 28px;
  height: 28px;
  padding: 4px;

  flex: 0 0 28px;

  border: 1px solid rgba(40,54,24,.30);
  border-radius: 50%;

  background: rgba(255,253,245,.74);

  box-shadow:
    inset 0 1px rgba(255,255,255,.55),
    0 2px 5px rgba(40,54,24,.05);

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

.allergens .allergen-icon img {
  width: 18px;
  height: 18px;

  object-fit: contain;

  opacity: .94;
}

.allergens .allergen-icon:hover {
  transform: translateY(-2px) scale(1.04);

  border-color: rgba(188,108,37,.55);
  background: rgba(255,248,231,.96);

  box-shadow:
    0 4px 10px rgba(40,54,24,.10);
}



/* En la carta completa, un poco más de aire para los iconos */
.carta-pizza-grid .allergens {
  min-height: 32px;
}


/* ---------- Leyenda de alérgenos ---------- */
.allergen-legend {
  gap: 14px 20px;
}

.allergen-legend-item {
  gap: 9px;

  color: #505848;

  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.2;
}

.allergen-legend-item .allergen-icon {
  width: 32px;
  height: 32px;
  padding: 5px;

  flex: 0 0 32px;

  border-color: rgba(40,54,24,.30);
  background: rgba(255,253,245,.78);

  box-shadow:
    inset 0 1px rgba(255,255,255,.55),
    0 3px 8px rgba(40,54,24,.06);
}

.allergen-legend-item .allergen-icon img {
  width: 27px;
  height: 27px;
}

.allergen-info-copy p {
  font-size: 10.5px;
  line-height: 1.65;
}


/* ---------- Tarjetas: lectura ligeramente mejor ---------- */
.pizza-card h3 {
  font-size: 13px;
  line-height: 1.2;
}

.pizza-card p,
.carta-pizza-grid .pizza-card p {
  color: #5b6253;

  font-size: 10.2px;
  line-height: 1.48;
}

.pizza-price,
.pizza-card strong {
  font-size: 17px;
}

.tabs button {
  font-size: 10.5px;
}

.tabs .selected {
  font-size: 9.5px;
}


/* ---------- Secciones secundarias ---------- */
.passion p,
.local-copy p {
  font-size: 10.8px;
  line-height: 1.62;
}

.trait {
  font-size: 9px;
  line-height: 1.3;
}

.review-card p {
  font-size: 10.3px;
  line-height: 1.58;
}

.review-card small {
  font-size: 8.8px;
  line-height: 1.35;
}

.reviews-brand .outline-light {
  font-size: 8.8px;
}


/* ---------- Contacto ---------- */
.contact h3 {
  font-size: 12px;
}

.contact address,
.contact p {
  color: #596150;

  font-size: 10.2px;
  line-height: 1.55;
}

.schedule {
  max-width: 235px;
}

.schedule div {
  min-height: 18px;

  font-size: 9.2px;
  line-height: 1.45;
}

.schedule strong {
  font-weight: 600;
}

.contact .outline-dark {
  min-height: 34px;

  font-size: 8.8px;
}

.contact-whatsapp {
  margin-top: 9px;

  font-size: 9.4px;
}


/* ---------- Bebidas / postres carta ---------- */
.menu-row {
  min-height: 41px;

  font-size: 10.8px;
  line-height: 1.4;
}

.menu-row strong {
  font-size: 13px;
}

.carta-list-card > h3 {
  font-size: 10.8px;
}


/* ---------- Footer: tipografía realmente legible ---------- */
.site-footer,
footer {
  min-height: 122px;

  padding-bottom: 28px;
}

.footer-nav,
footer nav {
  gap: clamp(16px, 1.8vw, 26px);
}

.footer-nav a,
footer nav a {
  color: rgba(247,240,221,.84);

  font-size: 10px;
  font-weight: 500;
  line-height: 1.2;

  letter-spacing: .1px;
}

.footer-nav a:hover,
footer nav a:hover {
  color: #fff;
}

.footer-right {
  width: 245px;
}

.footer-social {
  gap: 10px;
}

.social-icon {
  width: 34px;
  height: 34px;
}

.social-icon .ui-icon {
  width: 17px;
  height: 17px;
}

.social-icon.instagram .ui-icon {
  width: 18px;
  height: 18px;
}

.footer-italy {
  width: 48px;
  height: 8px;

  margin-left: 7px;
}

.footer-links {
  gap: 8px;

  margin-top: 12px;

  color: rgba(218,220,205,.68);

  font-size: 9px;
  line-height: 1.3;
}

.footer-links a {
  color: rgba(218,220,205,.78);
}

.footer-links a:hover {
  color: #fff;
}

.footer-links i {
  color: rgba(218,220,205,.28);
}

.site-footer > small,
footer > small {
  bottom: 8px;

  color: rgba(218,220,205,.52);

  font-size: 8px;
  line-height: 1.2;
  letter-spacing: .05px;
}


/* ---------- Pequeños refinamientos generales ---------- */
.outline-btn,
.outline-dark,
.outline-light {
  font-size: 9.3px;
}

.brush-btn {
  text-shadow: 0 1px 1px rgba(0,0,0,.08);
}

.local-copy h2,
.reviews h2,
.contact h3,
.carta-list-heading h2,
.allergen-info-copy h2 {
  text-wrap: balance;
}

/* Mejor foco para teclado */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--orange-light);
  outline-offset: 3px;
}


/* =========================================================
   TABLET
   ========================================================= */
@media (max-width: 1100px) {
  .footer-right {
    width: 230px;
  }

  .footer-nav a,
  footer nav a {
    font-size: 9.5px;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 800px) {
  .allergens {
    gap: 7px;
  }

  .allergens .allergen-icon,
  .allergens > span:not(.card-arrow),
  .allergens .card-arrow {
    width: 27px;
    height: 27px;
    flex-basis: 27px;
  }

  .allergens .allergen-icon img {
    width: 17px;
    height: 17px;
  }

  .contact address,
  .contact p {
    font-size: 10.5px;
  }

  .schedule div {
    font-size: 9.5px;
  }

  .site-footer,
  footer {
    min-height: 0;

    padding-top: 26px;
    padding-bottom: 22px;
  }

  .footer-nav a,
  footer nav a {
    font-size: 10.5px;
  }

  .footer-links {
    font-size: 9.5px;
  }

  .site-footer > small,
  footer > small {
    font-size: 8.5px;
  }
}


/* =========================================================
   MOBILE PEQUEÑO
   ========================================================= */
@media (max-width: 520px) {
  .pizza-card h3 {
    font-size: 12.5px;
  }

  .pizza-card p,
  .carta-pizza-grid .pizza-card p {
    font-size: 9.8px;
    line-height: 1.45;
  }

  .allergens {
    margin-top: 9px;
  }

  .allergens .allergen-icon,
  .allergens > span:not(.card-arrow),
  .allergens .card-arrow {
    width: 25px;
    height: 25px;
    flex-basis: 25px;
  }

  .allergens .allergen-icon img {
    width: 16px;
    height: 16px;
  }

  .allergen-legend-item {
    font-size: 11px;
    gap: 9px;
  }

  .allergen-legend-item .allergen-icon {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }

  .footer-nav,
  footer nav {
    gap: 12px 18px;
  }

  .footer-nav a,
  footer nav a {
    font-size: 10.5px;
  }

  .footer-links {
    gap: 7px;
    font-size: 9.5px;
  }

  .site-footer > small,
  footer > small {
    max-width: 290px;

    font-size: 8.5px;
    line-height: 1.45;

    white-space: normal;
    text-align: center;
  }
}

  background:
    rgba(188,108,37,.06);
}

.allergens .allergen-icon img {
  width: 12.5px;
  height: 12.5px;
}


.pizza-card:hover .card-arrow {
  transform:
    translateX(2px);

  background:
    #cc772e;
}

.center-btn {
  width: 205px;
  height: 42px;

  margin-top: 25px;

  filter:
    drop-shadow(
      0 5px 8px
      rgba(188,108,37,.14)
    );
}


/* =========================================================
   PASIÓN / MASA
   ========================================================= */

.passion {
  min-height: 305px;

  grid-template-columns:
    44%
    56%;
}

.passion-copy {
  position: relative;

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

  padding:
    38px
    max(
      5.5%,
      calc((100vw - var(--content)) / 2)
    );
}

.passion-copy::after {
  content: "";

  position: absolute;
  right: -55px;
  top: 0;
  bottom: 0;

  width: 110px;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(31,49,17,.96),
      rgba(31,49,17,0)
    );
}

.passion-copy .script {
  font-size: 34px;
}

.passion h2 {
  font-size: 32px;
  letter-spacing: -.7px;
}

.passion p {
  max-width: 455px;

  margin-top: 13px;

  font-size: 10px;
  line-height: 1.6;
}

.traits {
  max-width: 430px;

  margin:
    22px
    0
    20px;
}

.trait {
  min-height: 47px;

  gap: 9px;

  font-size: 8.5px;
}

.trait-icon {
  width: 31px;
  height: 31px;

  background:
    rgba(255,255,255,.025);
}

.dough {
  min-height: 305px;

  background-position:
    center 48%;
}


/* =========================================================
   LOCAL
   ========================================================= */

.local {
  min-height: 230px;

  gap: 36px;

  padding:
    28px
    max(
      var(--page),
      calc((100vw - var(--content)) / 2)
    );
}

.local-photos {
  gap: 8px;
}

.local-photos img {
  height: 175px;

  border-radius: 6px;

  box-shadow:
    0 7px 18px
    rgba(30,38,21,.08);

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

.local-photos img:hover {
  transform:
    translateY(-4px);

  box-shadow:
    0 15px 28px
    rgba(30,38,21,.15);

  filter:
    saturate(1.04);
}

.local-copy {
  padding-right: 96px;
}

.local-copy h2 {
  font-size: 27px;
  letter-spacing: -.6px;
}

.local-copy p {
  max-width: 410px;

  margin-top: 12px;

  font-size: 10px;
  line-height: 1.6;
}

.local-copy .outline-dark {
  height: 34px;

  margin-top: 17px;
}


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

.reviews {
  min-height: 190px;

  gap: 16px;

  padding:
    31px
    max(
      var(--page),
      calc((100vw - var(--content)) / 2)
    );

  background:
    radial-gradient(
      circle at 10% 50%,
      rgba(221,161,94,.055),
      transparent 30%
    ),
    linear-gradient(
      rgba(28,44,16,.985),
      rgba(28,44,16,.985)
    ),
    url("assets/green-texture.jpg")
    center / 512px 512px
    repeat;
}

.reviews h2 {
  font-size: 23px;
}

.google-rating {
  margin-top: 10px;
}

.stars {
  font-size: 11px;
}

.review-card {
  min-height: 125px;

  padding:
    16px
    16px
    14px;

  border-radius: 8px;

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

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.035),
      rgba(255,255,255,.012)
    );

  box-shadow:
    inset 0 1px
    rgba(255,255,255,.03);

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

.review-card:hover {
  transform:
    translateY(-3px);

  border-color:
    rgba(221,161,94,.25);

  background:
    rgba(255,255,255,.045);
}

.review-card p {
  margin-top: 0;

  font-size: 9.2px;
  line-height: 1.55;
}

.review-card small {
  margin-top: 11px;
}


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

.contact {
  min-height: 155px;

  align-items: center;

  gap: 32px;

  padding:
    24px
    calc(
      max(
        var(--page),
        calc((100vw - var(--content)) / 2)
      ) + 205px
    )
    24px
    max(
      var(--page),
      calc((100vw - var(--content)) / 2)
    );
}

.contact-block {
  min-height: 94px;

  align-content: start;

  padding-top: 2px;
}

.contact-block .icon,
.icon {
  width: 32px;
  height: 32px;

  color: var(--orange);

  border-radius: 50%;

  background:
    rgba(188,108,37,.055);
}

.contact-block .icon .ui-icon,
.icon .ui-icon {
  width: 20px;
  height: 20px;
}

.contact h3 {
  margin-bottom: 7px;

  font-size: 11.5px;
}

.contact address,
.contact p {
  font-size: 9px;
  line-height: 1.55;
}

.schedule div {
  min-height: 16px;

  font-size: 8px;
}

.contact .outline-dark {
  height: 32px;

  margin-top: 11px;
}

.contact-whatsapp {
  margin-top: 8px;

  font-size: 8.5px;
}

.contact::after {
  right: 20px;
  top: 25px;

  width: 185px;
  height: 108px;

  padding:
    23px
    39px
    0
    14px;

  font-size: 22px;

  background-position:
    right 3px bottom 1px,
    left 3px top 6px;

  background-size:
    59px auto,
    160px 74px;
}


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

.site-footer,
footer {
  min-height: 112px;

  grid-template-columns:
    100px
    1fr
    235px;

  padding:
    14px
    max(
      var(--page),
      calc((100vw - 1280px) / 2)
    )
    24px;

  background:
    radial-gradient(
      circle at 85% 20%,
      rgba(221,161,94,.035),
      transparent 26%
    ),
    linear-gradient(
      rgba(13,21,9,.99),
      rgba(13,21,9,.99)
    ),
    url("assets/green-texture.jpg")
    center / 512px 512px
    repeat;
}

.footer-brand img {
  width: 68px;
  height: 68px;
}

.footer-nav,
footer nav {
  gap:
    clamp(
      14px,
      1.7vw,
      24px
    );
}

.footer-nav a,
footer nav a {
  font-size: 8px;
}

.footer-right {
  width: 235px;
}

.footer-social {
  gap: 9px;
}

.social-icon {
  width: 31px;
  height: 31px;

  background:
    rgba(255,255,255,.02);

  border-color:
    rgba(255,255,255,.11);
}

.footer-links {
  margin-top: 12px;

  font-size: 7.3px;
}

.site-footer > small,
footer > small {
  bottom: 7px;

  font-size: 6.5px;
}


/* =========================================================
   CARTA COMPLETA
   ========================================================= */

.carta-hero {
  min-height: 285px;

  padding:
    52px
    max(
      var(--page),
      calc((100vw - var(--content)) / 2)
    );

  background:
    radial-gradient(
      circle at 75% 40%,
      rgba(221,161,94,.065),
      transparent 29%
    ),
    linear-gradient(
      90deg,
      rgba(18,28,12,.99),
      rgba(31,49,17,.96)
    ),
    url("assets/green-texture.jpg")
    center / 512px 512px
    repeat;
}

.carta-hero .script {
  font-size: 42px;
}

.carta-hero h1 {
  font-size:
    clamp(
      62px,
      7.5vw,
      90px
    );
}

.carta-hero p {
  max-width: 510px;

  font-size: 11px;
  line-height: 1.5;
}

.carta-back-home {
  margin-top: 19px;

  padding:
    8px
    12px;

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

  border-radius: 999px;

  background:
    rgba(255,255,255,.025);
}

.carta-pizzas {
  padding-top: 42px;
  padding-bottom: 46px;
}

.carta-pizza-grid {
  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    );

  gap: 18px;
}

.carta-pizza-grid .pizza-card > img,
.carta-pizza-grid .pizza-card > .pizza-placeholder {
  height: 172px;
}

.carta-pizza-grid .pizza-card h3 {
  min-height: 32px;
}

.carta-pizza-grid .pizza-card p {
  min-height: 50px;
}

.carta-extras {
  gap: 28px;

  padding-top: 42px;
  padding-bottom: 48px;
}

.carta-list-card {
  padding:
    29px
    30px;

  border-radius: 10px;

  background:
    rgba(255,253,245,.58);

  border-color:
    rgba(40,54,24,.08);

  box-shadow:
    0 9px 24px
    rgba(31,38,22,.07);
}

.carta-list-heading {
  margin-bottom: 22px;
}

.carta-list-heading .script {
  font-size: 34px;
}

.carta-list-heading h2 {
  font-size: 31px;
}

.menu-row {
  min-height: 38px;

  padding:
    8px
    1px;

  font-size: 10px;
}

.menu-row strong {
  font-size: 12.5px;
}

.allergen-info {
  gap: 46px;

  padding-top: 38px;
  padding-bottom: 38px;
}

.allergen-info-copy h2 {
  font-size: 30px;
}

.allergen-info-copy p {
  font-size: 9.4px;
  line-height: 1.6;
}

.allergen-legend {
  gap:
    12px
    18px;
}

.allergen-legend-item {
  font-size: 9.3px;
}


/* =========================================================
   SCROLL / ANIMACIONES SUTILES
   ========================================================= */

@media (prefers-reduced-motion: no-preference) {

  .pizza-card,
  .local-photos img,
  .review-card,
  .social-icon {
    will-change:
      transform;
  }

  .hero-content {
    animation:
      heroIntro
      .7s
      cubic-bezier(.2,.72,.2,1)
      both;
  }

  @keyframes heroIntro {
    from {
      opacity: 0;
      transform:
        translateY(13px);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

  .topbar {
    padding-inline: 5%;
  }

  .hero {
    min-height: 490px;

    background:
      linear-gradient(
        90deg,
        rgba(17,29,10,.985) 0%,
        rgba(24,39,14,.96) 38%,
        rgba(27,42,16,.56) 57%,
        rgba(27,42,16,.06) 72%
      ),
      url("assets/hero-pizza.jpg")
      right center / 66% 100%
      no-repeat,
      url("assets/green-texture.jpg")
      center / 512px 512px
      repeat;
  }

  .hero-content {
    width: 51%;
    min-height: 490px;
  }

  .pizza-card > img,
  .pizza-card > .pizza-placeholder {
    height: 128px;
  }

  .carta-pizza-grid {
    grid-template-columns:
      repeat(
        3,
        minmax(0,1fr)
      );
  }

  .carta-pizza-grid .pizza-card > img,
  .carta-pizza-grid .pizza-card > .pizza-placeholder {
    height: 160px;
  }

  .contact {
    padding-right: 205px;
  }

  .site-footer,
  footer {
    grid-template-columns:
      90px
      1fr
      220px;
  }

  .footer-right {
    width: 220px;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 800px) {

  html {
    scroll-padding-top: 70px;
  }

  .topbar {
    height: 70px;

    padding-inline: 5.5%;
  }

  .logo {
    width: 60px;
    height: 60px;
  }

  .main-nav,
  .topbar nav {
    top: 70px;

    padding:
      8px
      6%
      14px;

    background:
      linear-gradient(
        rgba(15,24,10,.99),
        rgba(15,24,10,.99)
      ),
      url("assets/green-texture.jpg")
      center / 512px 512px
      repeat;

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

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

  .main-nav a,
  .topbar nav a {
    padding:
      13px
      0;

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

    font-size: 12px;
  }

  .main-nav a:last-child,
  .topbar nav a:last-child {
    border-bottom: 0;
  }

  .main-nav a.active::after,
  .topbar nav a.active::after {
    display: none;
  }

  .hero {
    min-height: 620px;

    background:
      linear-gradient(
        180deg,
        rgba(16,26,11,.97) 0%,
        rgba(22,35,13,.88) 38%,
        rgba(20,31,12,.43) 68%,
        rgba(13,21,8,.54) 100%
      ),
      url("assets/hero-pizza.jpg")
      center / cover
      no-repeat;
  }

  .hero-content {
    min-height: 620px;

    padding:
      70px
      0
      44px;

    justify-content: flex-start;
  }

  .hero h1 {
    font-size:
      clamp(
        58px,
        15vw,
        76px
      );
  }

  .hero-script,
  .hero .script {
    max-width: 330px;

    font-size: 25px;
  }

  .hero-actions,
  .hero-buttons {
    width: min(100%, 390px);

    gap: 11px;
  }

  .pizzas {
    padding:
      31px
      5%
      36px;
  }

  .section-head {
    gap: 16px;
  }

  .section-title .script {
    font-size: 36px;
  }

  .section-head h2 {
    font-size: 39px;
  }

  .tabs {
    width: calc(100vw - 10%);

    margin-inline: 0;

    padding-bottom: 8px;

    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  .pizza-grid {
    gap: 12px;
  }

  .pizza-card > img,
  .pizza-card > .pizza-placeholder {
    height: 150px;
  }

  .passion {
    min-height: 0;
  }

  .passion-copy {
    padding:
      38px
      8%
      36px;
  }

  .dough {
    min-height: 315px;
  }

  .local {
    gap: 21px;

    padding:
      30px
      6%;
  }

  .local-copy {
    padding-right: 82px;
  }

  .local-photos {
    gap: 7px;
  }

  .local-photos img {
    height: 150px;
  }

  .reviews {
    gap: 12px;

    padding:
      31px
      6%;
  }

  .review-card {
    min-height: 130px;
  }

  .contact {
    gap:
      25px
      34px;

    padding:
      31px
      7%;
  }

  .contact-block {
    min-height: 90px;
  }

  .site-footer,
  footer {
    gap: 15px;

    padding:
      24px
      7%;
  }

  .footer-right {
    width: auto;
  }

  .carta-hero {
    min-height: 245px;

    padding:
      42px
      7%;
  }

  .carta-pizza-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );

    gap: 14px;
  }

  .carta-pizza-grid .pizza-card > img,
  .carta-pizza-grid .pizza-card > .pizza-placeholder {
    height: 148px;
  }

  .carta-extras {
    gap: 18px;

    padding:
      34px
      6%;
  }

  .carta-list-card {
    padding:
      25px
      22px;
  }
}


/* =========================================================
   MOBILE PEQUEÑO
   ========================================================= */

@media (max-width: 520px) {

  .hero {
    min-height: 600px;
  }

  .hero-content {
    min-height: 600px;

    padding-top: 62px;
  }

  .hero h1 {
    font-size:
      clamp(
        50px,
        15vw,
        61px
      );

    letter-spacing: -2.6px;
  }

  .hero h2 {
    font-size: 13px;
    letter-spacing: .85px;
  }

  .hero-script,
  .hero .script {
    font-size: 23px;
  }

  .hero-buttons,
  .hero-actions {
    width: 100%;

    gap: 9px;
  }

  .hero-buttons .brush-btn,
  .hero-cta,
  .hero-map-btn {
    width: 218px;
    min-width: 218px;
  }

  .section-title {
    align-items: baseline;

    white-space: normal;
  }

  .section-title .script {
    font-size: 33px;
  }

  .section-head h2 {
    font-size: 34px;
  }

  .pizza-grid,
  .carta-pizza-grid {
    grid-template-columns: 1fr;

    gap: 12px;
  }

  .pizza-card,
  .carta-pizza-grid .pizza-card {
    grid-template-columns:
      42%
      58%;

    min-height: 155px;

    border-radius: 9px;
  }

  .pizza-card > img,
  .pizza-card > .pizza-placeholder,
  .carta-pizza-grid .pizza-card > img,
  .carta-pizza-grid .pizza-card > .pizza-placeholder {
    height: 100%;
    min-height: 155px;
  }

  .pizza-card-body,
  .pizza-card > div {
    padding:
      14px
      13px;
  }

  .pizza-card h3 {
    min-height: auto;

    font-size: 12px;
  }

  .pizza-card p,
  .carta-pizza-grid .pizza-card p {
    min-height: auto;

    font-size: 9px;
  }

  .pizza-price,
  .pizza-card strong {
    font-size: 15px;
  }

  .traits {
    gap: 0;
  }

  .trait {
    padding:
      0
      4px;

    font-size: 7.8px;
  }

  .trait-icon {
    width: 28px;
    height: 28px;
  }

  .local-copy {
    padding-right: 67px;
  }

  .local-photos {
    gap: 8px;
  }

  .local-photos img {
    height: 165px;
  }

  .review-card {
    min-height: 0;

    padding:
      16px;
  }

  .contact {
    gap: 21px;
  }

  .contact-block {
    min-height: 0;

    padding:
      4px
      0
      12px;
  }

  .contact-block:not(:last-child) {
    border-bottom:
      1px solid
      rgba(40,54,24,.09);
  }

  .footer-nav,
  footer nav {
    max-width: 360px;
  }

  .carta-hero .script {
    font-size: 34px;
  }

  .carta-hero h1 {
    font-size: 58px;
  }

  .carta-list-heading {
    flex-wrap: wrap;
  }

  .allergen-legend {
    gap:
      10px
      14px;
  }
}

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

/* =========================================================
   RÚSTICA — V10 ALÉRGENOS FINALES
   Los SVG ya incluyen su propio círculo y no necesitan
   otro borde/fondo exterior.
   ========================================================= */

.pizza-card .allergens {
  min-height: 40px !important;
  gap: 8px !important;
  margin-top: 11px !important;

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

.pizza-card .allergens > .allergen-icon {
  width: 36px !important;
  height: 36px !important;

  min-width: 36px !important;
  min-height: 36px !important;

  flex: 0 0 36px !important;

  padding: 0 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;
  box-shadow: none !important;

  overflow: visible !important;
}

.pizza-card .allergens > .allergen-icon > img {
  width: 36px !important;
  height: 36px !important;

  min-width: 36px !important;
  min-height: 36px !important;

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

  display: block !important;

  object-fit: contain !important;

  transform: none !important;

  opacity: 1 !important;
}

.pizza-card .allergens > .allergen-icon:hover {
  transform: translateY(-2px) scale(1.04) !important;

  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}


/* Carta completa */

.carta-pizza-grid .pizza-card .allergens {
  min-height: 44px !important;
}

.carta-pizza-grid .pizza-card .allergens > .allergen-icon {
  width: 40px !important;
  height: 40px !important;

  min-width: 40px !important;
  min-height: 40px !important;

  flex-basis: 40px !important;
}

.carta-pizza-grid .pizza-card .allergens > .allergen-icon > img {
  width: 40px !important;
  height: 40px !important;

  min-width: 40px !important;
  min-height: 40px !important;
}


/* Leyenda de alérgenos */

.allergen-legend {
  gap: 14px 22px !important;
}

.allergen-legend-item {
  gap: 10px !important;

  color: #505848 !important;

  font-size: 11.5px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
}

.allergen-legend-item > .allergen-icon {
  width: 42px !important;
  height: 42px !important;

  min-width: 42px !important;
  min-height: 42px !important;

  flex: 0 0 42px !important;

  padding: 0 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;
  box-shadow: none !important;

  overflow: visible !important;
}

.allergen-legend-item > .allergen-icon > img {
  width: 42px !important;
  height: 42px !important;

  min-width: 42px !important;
  min-height: 42px !important;

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

  display: block !important;

  object-fit: contain !important;

  transform: none !important;
}


/* Precio con algo más de aire respecto a los iconos */

.pizza-price,
.pizza-card strong {
  margin-top: 12px;
}


/* Ya no usamos la flecha naranja de las pizzas */

.allergens .card-arrow {
  display: none !important;
}


/* Tablet */

@media (max-width: 800px) {
  .pizza-card .allergens {
    min-height: 38px !important;
    gap: 7px !important;
  }

  .pizza-card .allergens > .allergen-icon {
    width: 34px !important;
    height: 34px !important;

    min-width: 34px !important;
    min-height: 34px !important;

    flex-basis: 34px !important;
  }

  .pizza-card .allergens > .allergen-icon > img {
    width: 34px !important;
    height: 34px !important;

    min-width: 34px !important;
    min-height: 34px !important;
  }

  .allergen-legend-item > .allergen-icon {
    width: 39px !important;
    height: 39px !important;

    min-width: 39px !important;
    min-height: 39px !important;

    flex-basis: 39px !important;
  }

  .allergen-legend-item > .allergen-icon > img {
    width: 39px !important;
    height: 39px !important;
  }
}


/* Móvil pequeño */

@media (max-width: 520px) {
  .pizza-card .allergens {
    min-height: 36px !important;
    margin-top: 9px !important;
  }

  .pizza-card .allergens > .allergen-icon {
    width: 32px !important;
    height: 32px !important;

    min-width: 32px !important;
    min-height: 32px !important;

    flex-basis: 32px !important;
  }

  .pizza-card .allergens > .allergen-icon > img {
    width: 32px !important;
    height: 32px !important;

    min-width: 32px !important;
    min-height: 32px !important;
  }

  .allergen-legend-item {
    font-size: 11px !important;
  }
}


/* =========================================================
   RÚSTICA — V11 CONTACTO + FOOTER + RESPONSIVE FINAL
   ========================================================= */


/* =========================================================
   CONTACTO — MÁS LEGIBLE
   ========================================================= */

.contact {
  min-height: 178px;

  gap: 40px;

  align-items: center;

  padding-top: 30px;
  padding-bottom: 30px;
}

.contact-block {
  min-height: 108px;

  grid-template-columns:
    38px
    minmax(0, 1fr);

  column-gap: 13px;

  align-content: start;
}

.contact-block .icon,
.contact .icon {
  width: 36px;
  height: 36px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: rgba(188,108,37,.07);
}

.contact-block .icon .ui-icon,
.contact .icon .ui-icon {
  width: 22px;
  height: 22px;
}

.contact h3 {
  margin-bottom: 9px;

  font-size: 14px;
  line-height: 1.18;

  letter-spacing: -.1px;
}

.contact address,
.contact p {
  max-width: 290px;

  color: #525b4b;

  font-size: 12.5px;
  line-height: 1.62;
}

.schedule {
  width: 100%;
  max-width: 285px;
}

.schedule div {
  min-height: 23px;

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

  gap: 18px;

  font-size: 11.5px;
  line-height: 1.5;
}

.schedule span {
  color: #68705f;
}

.schedule strong {
  color: var(--ink);

  font-weight: 650;

  white-space: nowrap;
}

.contact .outline-dark {
  min-height: 38px;

  padding-inline: 17px;

  margin-top: 13px;

  font-size: 10.5px;
}

.contact-whatsapp {
  margin-top: 11px;

  gap: 7px;

  font-size: 11.5px;
  font-weight: 650;
}

.contact-whatsapp .ui-icon {
  width: 16px;
  height: 16px;
}

.contact-block:not(:last-child)::after {
  top: 2px;

  height: 106px;

  background: rgba(40,54,24,.12);
}


/* =========================================================
   FOOTER — TRES ENLACES BIEN CENTRADOS
   ========================================================= */

.site-footer,
footer {
  min-height: 142px;

  grid-template-columns:
    110px
    minmax(0, 1fr)
    270px;

  align-items: center;

  gap: 28px;

  padding:
    19px
    max(
      var(--page),
      calc((100vw - 1280px) / 2)
    )
    34px;
}

.footer-brand {
  align-self: center;
}

.footer-brand img {
  width: 74px;
  height: 74px;
}


/* El menú tiene ahora solo Inicio / Pizzas / Contacto */

.footer-nav,
footer nav {
  width: 100%;
  max-width: 500px;

  justify-self: center;

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

  gap: clamp(32px, 4.2vw, 72px);

  flex-wrap: nowrap;
}

.footer-nav a,
footer nav a {
  position: relative;

  padding:
    8px
    2px;

  color: rgba(247,240,221,.88);

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;

  white-space: nowrap;

  transition:
    color .2s ease,
    transform .2s ease;
}

.footer-nav a::after,
footer nav a::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: 2px;

  width: 0;
  height: 2px;

  background: var(--orange);

  border-radius: 999px;

  transform: translateX(-50%);

  transition:
    width .2s ease;
}

.footer-nav a:hover,
footer nav a:hover {
  color: #fff;

  transform: translateY(-1px);
}

.footer-nav a:hover::after,
footer nav a:hover::after {
  width: 28px;
}


.footer-right {
  width: 270px;

  justify-self: end;
}

.footer-social {
  gap: 11px;

  flex-wrap: wrap;
}

.social-icon {
  width: 36px;
  height: 36px;
}

.social-icon .ui-icon {
  width: 18px;
  height: 18px;
}

.social-icon.instagram .ui-icon {
  width: 19px;
  height: 19px;
}

.footer-italy {
  width: 52px;
  height: 9px;

  margin-left: 8px;
}

.footer-links {
  margin-top: 13px;

  gap: 9px;

  flex-wrap: wrap;

  color: rgba(218,220,205,.72);

  font-size: 10.5px;
  line-height: 1.35;
}

.footer-links a {
  color: rgba(234,233,221,.82);
}

.footer-links i {
  color: rgba(218,220,205,.30);
}

.site-footer > small,
footer > small {
  bottom: 9px;

  max-width: 90%;

  color: rgba(218,220,205,.57);

  font-size: 9.5px;
  line-height: 1.35;

  letter-spacing: .08px;
}


/* =========================================================
   RESPONSIVE — PORTÁTIL / TABLET GRANDE
   ========================================================= */

@media (max-width: 1100px) {

  .contact {
    gap: 26px;

    padding-right:
      max(
        5%,
        calc((100vw - var(--content)) / 2)
      );
  }

  /* En tablet ocultamos el adorno lateral para dar aire al texto */
  .contact::after {
    display: none;
  }

  .contact address,
  .contact p {
    font-size: 12px;
  }

  .schedule div {
    font-size: 11px;
  }


  .site-footer,
  footer {
    grid-template-columns:
      90px
      minmax(0, 1fr)
      220px;

    gap: 20px;

    padding-inline: 5%;
  }

  .footer-brand img {
    width: 68px;
    height: 68px;
  }

  .footer-nav,
  footer nav {
    max-width: 430px;

    gap: clamp(22px, 3vw, 44px);
  }

  .footer-nav a,
  footer nav a {
    font-size: 11.5px;
  }

  .footer-right {
    width: 220px;
  }

  .footer-links {
    font-size: 10px;
  }
}


/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 800px) {

  .contact {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap:
      30px
      38px;

    align-items: start;

    padding:
      34px
      7%;
  }

  .contact-block {
    min-height: 0;

    padding-bottom: 5px;
  }

  .contact-block:not(:last-child)::after {
    display: none;
  }

  .contact h3 {
    font-size: 14px;
  }

  .contact address,
  .contact p {
    max-width: none;

    font-size: 12.5px;
  }

  .schedule {
    max-width: none;
  }

  .schedule div {
    font-size: 11.5px;
  }

  .contact .outline-dark {
    font-size: 10.5px;
  }

  .contact-whatsapp {
    font-size: 11.5px;
  }


  .site-footer,
  footer {
    min-height: 0;

    grid-template-columns: 1fr;

    justify-items: center;

    gap: 17px;

    padding:
      28px
      7%
      24px;

    text-align: center;
  }

  .footer-brand {
    justify-content: center;
  }

  .footer-brand img {
    width: 72px;
    height: 72px;
  }

  .footer-nav,
  footer nav {
    width: 100%;
    max-width: 470px;

    justify-content: center;

    gap:
      18px
      clamp(28px, 8vw, 58px);

    flex-wrap: wrap;
  }

  .footer-nav a,
  footer nav a {
    font-size: 12px;
  }

  .footer-right {
    width: auto;

    justify-self: center;
  }

  .footer-social,
  .footer-links {
    justify-content: center;
  }

  .footer-links {
    font-size: 10.5px;
  }

  .site-footer > small,
  footer > small {
    position: static;

    max-width: 440px;

    margin-top: 2px;

    transform: none;

    font-size: 9.5px;

    white-space: normal;

    text-align: center;
  }
}


/* =========================================================
   RESPONSIVE — MÓVIL
   ========================================================= */

@media (max-width: 620px) {

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

    gap: 0;

    padding:
      32px
      8%;
  }

  .contact-block {
    grid-template-columns:
      38px
      minmax(0, 1fr);

    padding:
      15px
      0;
  }

  .contact-block:first-child {
    padding-top: 0;
  }

  .contact-block:last-child {
    padding-bottom: 0;
  }

  .contact-block:not(:last-child) {
    border-bottom:
      1px solid
      rgba(40,54,24,.10);
  }

  .contact h3 {
    font-size: 14px;
  }

  .contact address,
  .contact p {
    font-size: 12.5px;
    line-height: 1.58;
  }

  .schedule div {
    min-height: 25px;

    font-size: 11.5px;
  }


  .site-footer,
  footer {
    gap: 18px;

    padding:
      27px
      8%
      23px;
  }

  .footer-nav,
  footer nav {
    gap:
      12px
      30px;
  }

  .footer-nav a,
  footer nav a {
    font-size: 12px;
  }

  .footer-social {
    gap: 10px;
  }

  .social-icon {
    width: 38px;
    height: 38px;
  }

  .footer-links {
    gap: 8px;

    font-size: 10.5px;
  }

  .site-footer > small,
  footer > small {
    max-width: 320px;

    font-size: 9.5px;
    line-height: 1.5;
  }
}


/* =========================================================
   RESPONSIVE — MÓVIL PEQUEÑO
   ========================================================= */

@media (max-width: 420px) {

  .contact {
    padding-inline: 7%;
  }

  .contact-block {
    grid-template-columns:
      35px
      minmax(0, 1fr);

    column-gap: 11px;
  }

  .contact-block .icon,
  .contact .icon {
    width: 34px;
    height: 34px;
  }

  .contact h3 {
    font-size: 13.5px;
  }

  .contact address,
  .contact p {
    font-size: 12px;
  }

  .schedule div {
    gap: 10px;

    font-size: 11px;
  }


  .footer-nav,
  footer nav {
    max-width: 330px;

    gap:
      10px
      24px;
  }

  .footer-nav a,
  footer nav a {
    font-size: 11.5px;
  }

  .footer-links {
    justify-content: center;

    font-size: 10px;
  }

  .site-footer > small,
  footer > small {
    max-width: 285px;

    font-size: 9px;
  }
}

/* =========================================================
   RÚSTICA V2.1 — MEJORAS PUNTUALES, DISEÑO ORIGINAL INTACTO
   ========================================================= */
.header-call { gap: 8px; white-space: nowrap; }
.header-call .ui-icon { width: 15px; height: 15px; }
.hero-cta .btn-icon, .carta-call-primary .btn-icon { width: 16px; height: 16px; }
.contact-call { grid-column: 2; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 160px; min-height: 44px; padding: 0 14px; font-size: 10px; margin: 12px 0 3px; background: url("assets/brush-orange-hero.png") center/100% 100% no-repeat; color: #fff; }
.contact-call .ui-icon, .allergen-contact .ui-icon { width: 15px; height: 15px; }
.contact .contact-whatsapp { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; margin-top: 8px; }
.carta-call-primary { margin: 20px auto 6px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 205px; height: 50px; background: url("assets/brush-orange-hero.png") center/100% 100% no-repeat; color: white; font-size: 10px; }
.allergen-contact { display: flex; align-items: center; justify-content: center; }
.allergen-contact .brush-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 14px 20px; color: white; background: url("assets/brush-orange-wide.png") center/100% 100% no-repeat; font-size: 10px; min-height: 46px; }
.review-information { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.review-information small a { text-decoration: underline; text-underline-offset: 3px; }
.mobile-phone-cta { display: none; }
@media (max-width: 800px) {
  .mobile-phone-cta { position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 999; min-height: 48px; padding: 10px 15px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 9px; color: #fff; background: var(--orange); box-shadow: 0 5px 16px rgba(0,0,0,.26); font-size: 11px; font-weight: 700; letter-spacing: .03em; }
  .mobile-phone-cta .ui-icon { width: 18px; height: 18px; }
  body { padding-bottom: 72px; }
}
@media (prefers-reduced-motion: reduce) { .mobile-phone-cta { transition: none; } }