:root {
  --paper:#fcf8f1;
  --ink:#481b18;
  --rose:#eed2ca;
  --blue:#d9e4ea;
  --line:#e4d9cd
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:24px
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
  font-size:16px;
  line-height:1.6
}

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

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

a:focus-visible,select:focus-visible {
  outline:3px solid #af5534;
  outline-offset:5px
}

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

.header {
  max-width:1440px;
  margin:auto;
  padding:20px 5%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px
}

.brand {
  display:flex;
  align-items:center;
  gap:14px
}

.brand img {
  width:76px;
  height:76px;
  border-radius:50%
}

.brand>span {
  font-family:Georgia,serif;
  font-size:25px;
  font-weight:bold;
  line-height:1.2
}

.brand small {
  display:block;
  font-family:Arial,sans-serif;
  font-size:12px;
  letter-spacing:.26em;
  margin-top:7px;
  font-weight:400
}

nav {
  display:flex;
  align-items:center;
  gap:36px;
  font-size:14px
}

.nav-order {
  border-bottom:1px solid;
  padding:9px 0
}

.nav-order span {
  margin-left:15px
}

.hero {
  max-width:1376px;
  margin:0 auto;
  position:relative;
  min-height:610px;
  overflow:hidden;
  background:#ece1d2
}

.hero-photo {
  position:absolute;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 52%
}

.hero:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#fcf8f1 0%,#fcf8f1f0 26%,#fcf8f18c 45%,transparent 66%)
}

.hero-content {
  position:relative;
  z-index:1;
  padding:72px 5%;
  max-width:700px
}

.eyebrow {
  font-size:12px;
  letter-spacing:.2em;
  font-weight:600;
  margin:0 0 22px
}

h1,h2,h3 {
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
  line-height:1.08
}

h1 {
  font-size:clamp(48px,5.6vw,82px);
  letter-spacing:-.045em;
  margin:0 0 24px
}

h1 em {
  color:#a54838;
  font-weight:400
}

.intro {
  font-size:20px;
  line-height:1.6;
  margin:0 0 28px
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:30px;
  background:var(--ink);
  color:white;
  padding:15px 24px;
  border-radius:3px;
  min-height:52px;
  font-size:15px;
  transition:background .2s,transform .2s
}

.button:hover {
  background:#6c3029;
  transform:translateY(-2px)
}

.hero-note {
  position:absolute;
  right:5%;
  bottom:38px;
  z-index:1;
  color:white;
  text-shadow:0 1px 10px #000;
  font:italic 27px/1.3 Georgia,serif;
  text-align:right
}

.catalog {
  max-width:1280px;
  margin:auto;
  padding:85px 32px 70px
}

.section-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:25px;
  margin-bottom:35px
}

.section-heading .eyebrow {
  margin-bottom:13px
}

h2 {
  font-size:48px;
  letter-spacing:-.035em;
  margin:0
}

.section-heading>p {
  font-size:15px;
  margin:0;
  color:#775a50
}

.products {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:25px
}

.product {
  overflow:hidden;
  border-radius:10px;
  background:#fffaf5;
  border:1px solid var(--line)
}

.photo-wrap {
  position:relative;
  overflow:hidden;
  aspect-ratio:1.13
}

.photo-wrap>img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .45s
}

.pink .photo-wrap>img {
  object-position:32% center
}

.product:hover .photo-wrap>img {
  transform:scale(1.035)
}

.photo-label {
  position:absolute;
  left:16px;
  bottom:16px;
  background:#fcf8f1eb;
  padding:5px 11px;
  font-size:12px;
  letter-spacing:.04em;
  border-radius:2px
}

.product-body {
  padding:25px 24px 22px
}

.pink .product-body {
  background:#f6e7e2
}

.blue .product-body {
  background:#e8eff1
}

.cream .product-body {
  background:#f1ebde
}

h3 {
  font-size:32px;
  letter-spacing:-.025em;
  margin:0 0 14px
}

.product-body > p {
  color: #654b43;
  margin: 0 0 23px;
  min-height: 78px;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

.product label {
  display:block;
  font-size:13px;
  margin-bottom:6px
}

select {
  width:100%;
  padding:12px 10px;
  border:1px solid #bda99d;
  border-radius:3px;
  font:inherit;
  color:var(--ink);
  background:#fffaf7;
  min-height:48px
}

.product-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:23px;
  font-size:14px
}

.order-link {
  font-weight:600;
  border-bottom:1px solid;
  padding:9px 0;
  white-space:nowrap
}

.order-link span {
  margin-left:8px
}

.availability {
  text-align:center;
  color:#755e53;
  font-size:14px;
  margin:30px 0 0
}

.contact {
  background:var(--ink);
  color:#fff7eb;
  text-align:center;
  padding:65px 24px
}

.contact h2 {
  font-size:54px
}

.contact>p:not(.eyebrow) {
  margin:20px 0 25px
}

.contact .eyebrow {
  color:#e1bca9
}

.light {
  background:#f3dfd3;
  color:var(--ink)
}

.light:hover {
  background:white
}

footer {
  max-width:1280px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:36px 32px;
  font-size:14px;
  color:#74574e
}

.footer-brand {
  font:600 23px Georgia,serif;
  color:var(--ink)
}

.footer-brand small {
  display:block;
  font:10px Arial,sans-serif;
  letter-spacing:.3em;
  margin-top:8px
}

footer>p {
  font:italic 18px Georgia,serif
}

@media(min-width:1440px) {
  .hero {
    border-radius:12px
  }
}

@media(max-width:900px) {
  .header {
    padding:16px 24px
  }
  .brand>span {
    font-size:22px
  }
  nav {
    gap:22px
  }
  .hero {
    min-height:550px
  }
  .hero-content {
    padding-top:70px
  }
  .hero:after {
    background:linear-gradient(90deg,#fcf8f1f5,#fcf8f1bb 40%,transparent 85%)
  }
  .catalog {
    padding:60px 24px
  }
  .products {
    gap:14px
  }
  .product-body {
    padding:20px 16px
  }
  h3 {
    font-size:27px
  }
  .product-body>p {
    min-height:130px
  }
  .product-bottom {
    flex-wrap:wrap
  }
}

@media(max-width:650px) {
  .header {
    gap:10px;
    padding:13px 18px
  }
  .brand {
    gap:9px
  }
  .brand img {
    width:54px;
    height:54px
  }
  .brand>span {
    font-size:19px
  }
  .brand small {
    font-size:10px
  }
  nav>a:first-child {
    display:none
  }
  nav {
    font-size:13px
  }
  .nav-order span {
    margin-left:3px
  }
  .hero {
    min-height:670px;
    display:flex;
    align-items:flex-start
  }
  .hero-photo {
    height:100%;
    object-position:57% center
  }
  .hero:after {
    background:linear-gradient(180deg,#fcf8f1 0%,#fcf8f1ee 27%,#fcf8f138 60%,transparent 85%)
  }
  .hero-content {
    padding:32px 24px
  }
  .hero .eyebrow {
    font-size:10px;
    margin-bottom:15px
  }
  .hero h1 {
    font-size:53px
  }
  .intro {
    font-size:18px;
    margin-bottom:21px
  }
  .hero-note {
    font-size:22px;
    bottom:24px;
    right:24px
  }
  .catalog {
    padding:48px 20px
  }
  .section-heading {
    display:block;
    margin-bottom:28px
  }
  .section-heading h2 {
    font-size:40px
  }
  .section-heading>p {
    margin-top:15px
  }
  .section-heading>p br {
    display:none
  }
  .eyebrow {
    font-size:10px;
    letter-spacing:.14em
  }
  .products {
    grid-template-columns:1fr;
    gap:28px
  }
  .photo-wrap {
    aspect-ratio:1.2
  }
  .product-body {
    padding:23px
  }
  .product-body>p {
    min-height:0;
    margin-bottom:20px
  }
  h3 {
    font-size:34px
  }
  .product-bottom {
    flex-wrap:nowrap
  }
  .contact {
    padding:50px 22px
  }
  .contact h2 {
    font-size:42px
  }
  footer {
    padding:32px 24px;
    flex-direction:column;
    text-align:center;
    gap:18px
  }
  footer>p {
    margin:0
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  * {
    transition:none!important
  }
}

/* Fuente Bedross únicamente para los nombres de los productos */
@font-face {
  font-family: "Bedross";
  src: url("assets/fonts/bedross-regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.product h3 {
  font-family: "Bedross", Georgia, "Times New Roman", serif;
  font-size: 29px;
  line-height: 1.1;
  font-weight: normal;
}

/* Pay de queso: encuadre a la izquierda, donde está el postre. */
.product.butter .product-body {
  background:#f3ead0
}

.product.butter .photo-wrap>img {
  object-position:28% center
}

/* Logo horizontal: conserva sus proporciones y se muestra completo. */
.header .brand img {
  width:220px;
  height:auto;
  border-radius:0
}

@media(max-width:650px) {
  .header .brand img {
    width:150px;
    height:auto
  }
}


/* PALETA CÁLIDA — cambia estos colores para ajustar el fondo */
:root {
  --paper: #fbf4e6;
  --cream-light: #fbf2df;
  --cream-deep: #e8d3af;
}
body {
  background-color: var(--paper);
  background-image:
    radial-gradient(ellipse at 0% 12%, #eac2b34d 0%, transparent 38%),
    radial-gradient(ellipse at 100% 55%, #c4d6da66 0%, transparent 35%);
}
.header {
  border-bottom: 1px solid #9d694224;
}
.hero {
  background: var(--paper);
}
.hero::after {
  background: linear-gradient(90deg, #f5e8cf 0%, #f5e8cff2 26%, #f5e8cf94 45%, transparent 68%);
}

/* DETALLES DE FONDO — círculos finos y manchas de color discretas */
.catalog {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 0% 12%, #efd0bf66, transparent 45%),
    radial-gradient(ellipse at 100% 86%, #c9dbdf66, transparent 40%);
}
.catalog::before,
.catalog::after {
  content: "";
  position: absolute;
  width: 270px;
  height: 270px;
  border: 1px solid #a96b3d26;
  border-radius: 50%;
  box-shadow: 0 0 0 22px #f5e8cf, 0 0 0 23px #a96b3d1c;
  pointer-events: none;
  z-index: -1;
}
.catalog::before {
  top: 28px;
  right: -175px;
}
.catalog::after {
  bottom: 18px;
  left: -205px;
  width: 370px;
  height: 370px;
}
.section-heading h2::after {
  content: "";
  display: block;
  width: 66px;
  height: 3px;
  margin-top: 19px;
  background: #b57656;
  border-radius: 3px;
}
.product {
  border-color: #b88d6352;
  box-shadow: 0 7px 22px #633f2310;
}
.photo-label {
  background: #fff3ddeb;
}
.contact {
  background-color: var(--ink);
  background-image:
    radial-gradient(ellipse at 0% 100%, #85423370, transparent 60%),
    radial-gradient(ellipse at 100% 0%, #b3764833, transparent 50%);
}
footer {
  border-top: 1px solid #9d694224;
}

/* TÍTULO — entrada suave al abrir la página; no se repite en bucle */
.title-entrance > span,
.title-entrance > em {
  display: inline-block;
  animation: title-appear 850ms cubic-bezier(.22, 1, .36, 1) both;
}
.title-entrance > span:first-child {
  animation-delay: 100ms;
}
.title-entrance > span:nth-of-type(2) {
  animation-delay: 230ms;
}
.title-entrance > em {
  animation-delay: 360ms;
}
@keyframes title-appear {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* TABLETA */
@media (min-width: 651px) and (max-width: 900px) {
  .hero::after {
    background: linear-gradient(90deg, #f5e8cff5, #f5e8cfbb 40%, transparent 85%);
  }
}

/* CELULAR — mantiene la foto debajo del título y las tarjetas en una columna */
@media (max-width: 650px) {
  .hero::after {
    background: linear-gradient(180deg, #f5e8cf 0%, #f5e8cfed 27%, #f5e8cf38 60%, transparent 85%);
  }
  .hero h1 {
    font-size: clamp(38px, 11.5vw, 53px);
  }
  .header nav {
    flex-shrink: 0;
  }
  .catalog::before {
    right: -225px;
  }
  .catalog::after {
    left: -310px;
  }
}

/* Respeta la preferencia del dispositivo de reducir movimiento */
@media (prefers-reduced-motion: reduce) {
  .title-entrance > span,
  .title-entrance > em {
    animation: none;
    opacity: 1;
    transform: none;
  }
}
/* ADORNOS DECORATIVOS DEL FONDO */

body {
  background-image:
    radial-gradient(circle at 8% 18%, #b8795730 0 3px, transparent 4px),
    radial-gradient(circle at 14% 24%, #b8795722 0 2px, transparent 3px),
    radial-gradient(circle at 92% 14%, #9bbfc633 0 3px, transparent 4px),
    radial-gradient(circle at 88% 20%, #9bbfc622 0 2px, transparent 3px),
    radial-gradient(ellipse at 0% 45%, #eac2b333 0%, transparent 30%),
    radial-gradient(ellipse at 100% 72%, #c4d6da44 0%, transparent 32%);
}

/* Círculo decorativo en la portada */
.hero::before {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  right: -90px;
  top: 55px;
  border: 1px solid #a96b3d38;
  border-radius: 50%;
  box-shadow:
    0 0 0 18px #f5e8cf55,
    0 0 0 19px #a96b3d22;
  z-index: 1;
  pointer-events: none;
}

/* Pequeños detalles en la sección de productos */
.catalog {
  background-image:
    radial-gradient(circle at 12% 17%, #b8795730 0 3px, transparent 4px),
    radial-gradient(circle at 16% 21%, #b8795722 0 2px, transparent 3px),
    radial-gradient(circle at 89% 78%, #9bbfc633 0 3px, transparent 4px),
    radial-gradient(circle at 94% 73%, #9bbfc622 0 2px, transparent 3px);
}

/* Líneas finas decorativas */
.section-heading::before {
  content: "";
  display: block;
  width: 90px;
  height: 1px;
  margin-bottom: 18px;
  background: #a96b3d66;
}

/* Evita que los adornos tapen el contenido */
.hero-content,
.section-heading,
.products,
.availability {
  position: relative;
  z-index: 2;
}

@media (max-width: 650px) {
  .hero::before {
    width: 180px;
    height: 180px;
    right: -85px;
    top: 125px;
  }

  .section-heading::before {
    margin-bottom: 14px;
  }
}