@font-face {
  font-family:'Mona Sans';
  src:url('../fuentes/mona-sans.woff2') format('woff2');
  font-weight:200 900;
  font-stretch:75% 125%;
  font-display:swap
}
@font-face {
  font-family:'Fraunces';
  src:url('../fuentes/fraunces.woff2') format('woff2');
  font-style:normal;
  font-weight:300 700;
  font-display:swap
}
@font-face {
  font-family:'Fraunces';
  src:url('../fuentes/fraunces-italica.woff2') format('woff2');
  font-style:italic;
  font-weight:300 600;
  font-display:swap
}
@font-face {
  font-family:'Jost';
  src:url('../fuentes/jost.woff2') format('woff2');
  font-weight:100 900;
  font-display:swap
}
@font-face {
  font-family:'Space Mono';
  src:url('../fuentes/space-mono.woff2') format('woff2');
  font-weight:400;
  font-display:swap
}
@font-face {
  font-family:'DM Sans';
  src:url('../fuentes/dm-sans.woff2') format('woff2');
  font-weight:400 700;
  font-display:swap
}
.coffee {
  --cf-serif:'Fraunces',Georgia,'Times New Roman',serif;
  --cf-titulos:'Jost','Futura','Century Gothic',Arial,sans-serif;
  --cf-mono:'Space Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --cf-sans:'DM Sans',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --cf-cafe:#4b3322;
  --cf-verde:#12251f;
  --cf-dorado:#af8e49;
  --cf-oro-oscuro:#81652e;
  --cf-papel:#fbf9f4;
  --cf-crema:#eee8db;
  --cf-texto:#293b34;
  background:var(--cf-papel);
  color:var(--cf-verde);
  font-family:var(--cf-sans)
}
.coffee .cabecera,
.coffee .menu-panel {
  font-family:'Mona Sans',Arial,Helvetica,sans-serif
}
.coffee main#contenido {
  padding-top:0;
  overflow-x:clip
}
.coffee .saltar {
  color:var(--cf-verde)
}
.coffee a:focus-visible,
.coffee button:focus-visible {
  outline-color:var(--cf-oro-oscuro)
}
.cf-ancho {
  width:min(1180px,calc(100% - 64px));
  margin-inline:auto
}
.cf-etiqueta {
  font-family:var(--cf-mono);
  font-size:11px;
  font-weight:400;
  letter-spacing:2px;
  text-transform:uppercase
}
.cf-titulo {
  font-family:var(--cf-titulos);
  font-size:clamp(36px,4.8vw,64px);
  font-weight:500;
  letter-spacing:-.02em;
  line-height:1.05
}
.cf-firma {
  display:block;
  margin-top:.04em;
  color:var(--cf-oro-oscuro);
  font-family:var(--cf-serif);
  font-style:italic;
  font-size:1em;
  font-weight:300;
  letter-spacing:-.02em;
  line-height:1.05
}
.cf-intro {
  max-width:460px;
  margin:26px auto 0;
  font-size:16px;
  line-height:1.7;
  color:var(--cf-texto)
}
.cf-encabezado {
  max-width:720px;
  margin:0 auto;
  text-align:center
}
.cf-encabezado .cf-etiqueta {
  margin-bottom:22px;
  color:var(--cf-oro-oscuro)
}
.cf-boton {
  min-height:48px;
  padding:13px 24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  border:1px solid var(--cf-verde);
  border-radius:999px;
  background:var(--cf-verde);
  color:var(--cf-papel);
  font:inherit;
  font-size:13px;
  font-weight:500;
  letter-spacing:.01em;
  transition:background .25s,color .25s,transform .25s
}
.cf-boton svg {
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5
}
.cf-boton:hover {
  background:#274638;
  transform:translateY(-2px)
}
.cf-boton-linea {
  background:transparent;
  color:var(--cf-verde)
}
.cf-boton-linea:hover {
  background:var(--cf-crema)
}
.cf-portada {
  padding-top:126px;
  position:relative;
  isolation:isolate
}
.cf-nav {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-bottom:48px
}
.cf-nav-logo {
  width:126px;
  height:auto
}
.cf-nav-enlaces {
  display:flex;
  align-items:center;
  gap:32px;
  font-size:13px
}
.cf-nav-enlaces a:hover {
  color:var(--cf-oro-oscuro)
}
.cf-portada-texto {
  position:relative;
  z-index:2;
  text-align:center
}
.cf-portada-texto .cf-etiqueta {
  margin-bottom:22px
}
.cf-portada h1 {
  font-family:var(--cf-titulos);
  font-size:clamp(58px,9.2vw,128px);
  font-weight:600;
  line-height:.98;
  letter-spacing:-.03em
}
.cf-titulo-principal {
  display:block
}
.cf-portada h1 .cf-firma {
  width:fit-content;
  margin:.06em auto 0;
  padding-left:30%;
  font-size:.4em;
  font-weight:400;
  transform:rotate(-4deg)
}
.cf-portada-texto .cf-intro {
  max-width:460px;
  margin-top:32px
}
.cf-acciones {
  margin-top:30px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px
}
.cf-vasos {
  position:relative;
  width:min(100%,960px);
  height:500px;
  margin:44px auto 0
}
.cf-vasos::before {
  content:'';
  position:absolute;
  width:84%;
  height:30%;
  left:8%;
  bottom:0;
  background:var(--cf-crema);
  border-radius:50%
}
.cf-sombra {
  position:absolute;
  bottom:9%;
  width:22%;
  height:7%;
  border-radius:50%;
  background:radial-gradient(closest-side,#12251f2e,#12251f00);
  will-change:transform
}
.cf-sombra-izq {
  left:13%
}
.cf-sombra-centro {
  left:39%;
  bottom:7%;
  width:24%
}
.cf-sombra-der {
  right:13%
}
.cf-vaso {
  position:absolute;
  bottom:11%;
  width:26%;
  aspect-ratio:2/3;
  will-change:transform
}
.cf-vaso img {
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:bottom;
  filter:drop-shadow(0 18px 16px #12251f14)
}
.cf-vaso-izq {
  left:10%;
  transform:rotate(-11deg);
  transform-origin:50% 100%;
  z-index:1
}
.cf-vaso-centro {
  left:35%;
  bottom:9%;
  width:30%;
  z-index:3
}
.cf-vaso-der {
  right:10%;
  transform:rotate(11deg);
  transform-origin:50% 100%;
  z-index:2
}
.cf-grano {
  position:absolute;
  width:22px;
  z-index:4;
  pointer-events:none;
  will-change:transform
}
.cf-grano svg {
  display:block;
  width:100%;
  height:auto;
  overflow:visible
}
.cf-grano ellipse {
  fill:var(--cf-cafe)
}
.cf-grano path {
  fill:none;
  stroke:#f3e6cf;
  stroke-width:1.6;
  stroke-linecap:round;
  opacity:.7
}
.cf-grano-1 {
  left:6%;
  top:14%;
  width:26px;
  transform:rotate(-30deg)
}
.cf-grano-2 {
  left:30%;
  top:2%;
  width:16px;
  transform:rotate(25deg);
  opacity:.8
}
.cf-grano-3 {
  right:28%;
  top:8%;
  width:20px;
  transform:rotate(-12deg)
}
.cf-grano-4 {
  right:5%;
  top:30%;
  width:28px;
  transform:rotate(40deg)
}
.cf-grano-5 {
  left:22%;
  bottom:6%;
  width:18px;
  transform:rotate(70deg);
  z-index:5
}
.cf-grano-6 {
  left:13%;
  top:2%;
  width:11px;
  transform:rotate(-55deg);
  opacity:.6
}
.cf-grano-7 {
  left:20%;
  top:20%;
  width:19px;
  transform:rotate(16deg)
}
.cf-grano-8 {
  left:43%;
  top:1%;
  width:22px;
  transform:rotate(-45deg)
}
.cf-grano-9 {
  right:41%;
  top:11%;
  width:11px;
  transform:rotate(63deg);
  opacity:.6
}
.cf-grano-10 {
  right:17%;
  top:5%;
  width:15px;
  transform:rotate(58deg)
}
.cf-grano-11 {
  right:11%;
  top:32%;
  width:10px;
  transform:rotate(-60deg);
  opacity:.8
}
.cf-grano-12 {
  right:24%;
  bottom:5%;
  width:20px;
  transform:rotate(-15deg)
}
.cf-grano-13 {
  left:8%;
  bottom:18%;
  width:12px;
  transform:rotate(20deg)
}
.cf-grano-7 ellipse,
.cf-grano-10 ellipse,
.cf-grano-13 ellipse {
  fill:#8a684d
}
.cf-portada-base {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:24px 0;
  border-bottom:1px solid #12251f24;
  font-size:10px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase
}
.cf-portada-base img {
  width:32px;
  height:18px
}
.cf-historia {
  padding:120px 0 96px
}
.cf-historia-grid {
  display:grid;
  grid-template-columns:.75fr 1.25fr;
  align-items:center;
  gap:70px;
  margin-top:60px
}
.cf-historia-copy {
  max-width:330px;
  justify-self:end
}
.cf-historia-copy .cf-etiqueta {
  color:var(--cf-oro-oscuro)
}
.cf-historia-copy h3 {
  margin-top:18px;
  font-family:var(--cf-serif);
  font-style:italic;
  font-size:40px;
  font-weight:300;
  letter-spacing:-.02em;
  line-height:1.12
}
.cf-historia-copy p:last-child {
  margin-top:22px;
  font-size:16px;
  line-height:1.8;
  color:var(--cf-texto)
}
.cf-historia-visual {
  position:relative;
  min-height:430px;
  isolation:isolate
}
.cf-historia-fondo {
  position:absolute;
  inset:40px 0 24px;
  z-index:-1;
  border-radius:30px;
  background:linear-gradient(#eee8dbef,#eee8dbef),url('../imagenes/coffee/patron.svg') center/450px;
  will-change:transform
}
.cf-mano {
  position:relative;
  width:118%;
  max-width:none;
  margin-left:-9%;
  height:500px;
  object-fit:contain;
  object-position:bottom;
  transform:rotate(-3deg);
  will-change:transform
}
@media(min-width:768px) {
  .cf-mano {
    width:calc(109% + (100vw - min(1180px,100vw - 64px)) / 2 + 16px);
    object-position:right bottom
  }
}
.cf-sello {
  position:absolute;
  width:100px;
  top:67px;
  left:26px;
  z-index:2;
  transform:rotate(-14deg);
  filter:drop-shadow(0 6px 12px #12251f0d);
  will-change:transform
}
.cf-menu {
  padding:65px 0 120px;
  position:relative;
  scroll-margin-top:100px
}
.cf-orbita {
  position:relative;
  height:510px;
  max-width:980px;
  margin:50px auto 0;
  touch-action:pan-y;
  isolation:isolate
}
.cf-orbita::before {
  content:'';
  position:absolute;
  top:22%;
  left:17%;
  width:66%;
  height:67%;
  border-radius:50%;
  background:#eee8db99;
  transform:rotate(-7deg);
  transition:background .6s;
  z-index:-1
}
.cf-orbita[data-activo='1']::before {
  background:#dedacb99
}
.cf-orbita[data-activo='2']::before {
  background:#e5dbd199
}
.cf-orbita[data-activo='4']::before {
  background:#eee0c599
}
.cf-orbita[data-activo='5']::before {
  background:#e9dfbd99
}
.cf-opcion {
  position:absolute;
  width:27%;
  height:420px;
  top:106px;
  left:36.5%;
  background:transparent;
  border:0;
  padding:0;
  border-radius:25px;
  transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .7s,opacity .7s;
  transform-origin:center 75%;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent
}
.cf-orbita.cf-con-gsap .cf-opcion {
  transition:none
}
.cf-opcion img {
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  filter:drop-shadow(0 18px 14px #12251f16)
}
.cf-opcion[data-posicion='0'] {
  transform:translate(0,0) scale(1.12);
  z-index:5
}
.cf-opcion[data-posicion='1'] {
  transform:translate(116%,-20%) scale(.82) rotate(10deg);
  z-index:4
}
.cf-opcion[data-posicion='-1'] {
  transform:translate(-116%,-20%) scale(.82) rotate(-10deg);
  z-index:4
}
.cf-opcion[data-posicion='2'] {
  transform:translate(92%,-67%) scale(.49) rotate(6deg);
  filter:blur(2px);
  opacity:.65;
  z-index:2
}
.cf-opcion[data-posicion='-2'] {
  transform:translate(-92%,-67%) scale(.49) rotate(-6deg);
  filter:blur(2px);
  opacity:.65;
  z-index:2
}
.cf-opcion[data-posicion='3'] {
  transform:translate(0,-83%) scale(.44);
  filter:blur(2.5px);
  opacity:.5;
  z-index:1
}
.cf-seleccion {
  max-width:570px;
  margin:8px auto 0;
  display:grid;
  grid-template-columns:48px 1fr 48px;
  align-items:start;
  gap:0 20px;
  text-align:center
}
.cf-detalle {
  grid-column:2;
  grid-row:1;
  min-height:151px
}
.cf-controles {
  display:contents
}
.cf-flecha[data-cf-anterior] {
  grid-column:1;
  grid-row:1
}
.cf-flecha[data-cf-siguiente] {
  grid-column:3;
  grid-row:1
}
.cf-numero {
  display:block;
  margin-bottom:10px;
  color:var(--cf-oro-oscuro);
  font-family:var(--cf-mono);
  font-size:13px;
  letter-spacing:2px;
  font-variant-numeric:tabular-nums
}
.cf-desliza {
  display:none
}
.cf-nota {
  margin-top:16px;
  text-align:center;
  font-size:10px;
  color:#617169
}
.cf-seleccion h3 {
  font-family:var(--cf-titulos);
  font-size:30px;
  font-weight:500;
  letter-spacing:-.02em;
  line-height:1.1
}
.cf-seleccion p {
  max-width:370px;
  margin:14px auto 0;
  font-size:15px;
  line-height:1.7;
  color:var(--cf-texto)
}
.cf-flecha {
  display:grid;
  place-items:center;
  width:48px;
  height:44px;
  margin-top:27px;
  border:1px solid #12251f88;
  border-radius:999px;
  background:transparent;
  color:var(--cf-verde);
  transition:background .25s,color .25s
}
.cf-flecha svg {
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5
}
.cf-flecha:hover {
  background:var(--cf-verde);
  color:var(--cf-papel)
}
.cf-paginacion {
  grid-column:1 / -1;
  grid-row:2;
  display:flex;
  gap:7px;
  justify-content:center;
  margin-top:24px
}
.cf-punto {
  width:28px;
  height:44px;
  border:0;
  background:transparent;
  position:relative
}
.cf-punto::before {
  content:'';
  position:absolute;
  width:5px;
  height:5px;
  top:19px;
  left:11px;
  border-radius:50%;
  background:#12251f33;
  transition:background .2s,transform .2s
}
.cf-punto[aria-pressed=true]::before {
  background:var(--cf-verde);
  transform:scale(1.7)
}
.cf-motivos {
  padding:0 0 130px
}
.cf-motivos-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:100px;
  margin-top:110px
}
.cf-motivos-visual {
  position:relative;
  height:475px;
  background:var(--cf-crema);
  border-radius:28px
}
.cf-motivos-visual::after {
  content:'';
  position:absolute;
  width:92px;
  height:92px;
  bottom:24px;
  right:24px;
  background:url('../imagenes/coffee/sello.svg') center/contain no-repeat;
  opacity:.45
}
.cf-motivos-visual img {
  width:100%;
  height:112%;
  object-fit:contain;
  position:absolute;
  bottom:-4%;
  left:0;
  transform:rotate(-16deg);
  will-change:transform
}
.cf-vapor {
  position:absolute;
  left:33%;
  top:-20%;
  width:26%;
  height:30%;
  z-index:2;
  display:flex;
  justify-content:center;
  gap:6%;
  pointer-events:none
}
.cf-vapor > span {
  width:22%;
  opacity:0;
  will-change:transform
}
.cf-vapor > span:nth-child(2) {
  margin-top:-12%
}
.cf-vapor svg {
  display:block;
  width:100%;
  height:100%;
  overflow:visible
}
.cf-vapor path {
  fill:none;
  stroke:#81652e;
  stroke-width:3.2;
  stroke-linecap:round;
  opacity:.45
}
.cf-lista-motivos {
  display:grid;
  gap:32px;
  max-width:420px
}
.cf-motivo {
  display:grid;
  grid-template-columns:52px 1fr;
  column-gap:20px
}
.cf-motivo-icono {
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:var(--cf-verde);
  color:var(--cf-papel)
}
.cf-motivo-icono svg {
  width:25px;
  height:25px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-linejoin:round
}
.cf-motivo h3 {
  font-family:var(--cf-titulos);
  font-size:22px;
  font-weight:500;
  letter-spacing:-.015em
}
.cf-motivo p {
  margin-top:8px;
  font-size:15px;
  line-height:1.7;
  color:var(--cf-texto)
}
.cf-compartir {
  position:relative;
  padding:115px 0 125px;
  background:var(--cf-verde);
  color:var(--cf-papel);
  isolation:isolate;
  scroll-margin-top:90px
}
.cf-compartir::before {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:url('../imagenes/coffee/patron-hojas.svg') center/640px;
  filter:invert(1);
  opacity:.025
}
.cf-compartir-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:85px
}
.cf-compartir-copy {
  max-width:470px
}
.cf-compartir .cf-etiqueta {
  margin-bottom:28px;
  color:var(--cf-dorado)
}
.cf-compartir .cf-titulo {
  font-size:clamp(36px,4vw,56px)
}
.cf-compartir .cf-firma {
  color:var(--cf-dorado);
  margin-top:6px
}
.cf-compartir-copy > p:not(.cf-etiqueta) {
  max-width:380px;
  margin-top:30px;
  color:#fbf9f4cf;
  font-size:16px;
  line-height:1.8
}
.cf-compartir .cf-boton {
  margin-top:30px;
  border-color:var(--cf-dorado);
  background:var(--cf-dorado);
  color:var(--cf-verde)
}
.cf-compartir .cf-boton:hover {
  background:#c7a96c
}
.cf-duo {
  position:relative;
  height:410px;
  isolation:isolate
}
.cf-duo-fondo {
  position:absolute;
  inset:28px 0 0;
  z-index:-1;
  border-radius:32px;
  background:var(--cf-crema);
  transform:rotate(-5deg)
}
.cf-duo-fondo::before {
  content:'';
  position:absolute;
  inset:0;
  background:url('../imagenes/coffee/patron.svg') center/520px;
  border-radius:inherit;
  opacity:.06
}
.cf-duo > img {
  position:absolute;
  width:65%;
  height:125%;
  object-fit:contain;
  top:-47px;
  max-width:none;
  filter:drop-shadow(0 18px 14px #12251f20);
  will-change:transform
}
.cf-chispas {
  position:absolute;
  left:50%;
  top:-92px;
  width:80px;
  height:56px;
  margin-left:-40px;
  z-index:3;
  pointer-events:none
}
.cf-chispas i {
  position:absolute;
  left:50%;
  bottom:0;
  width:3px;
  height:100%;
  margin-left:-1.5px;
  border-radius:3px;
  background:linear-gradient(#e2c285 0 55%,#e2c28500 55%);
  transform-origin:50% 100%;
  opacity:0
}
.cf-chispas i:nth-child(1) {
  transform:rotate(-64deg) scaleY(.75)
}
.cf-chispas i:nth-child(2) {
  transform:rotate(-32deg)
}
.cf-chispas i:nth-child(4) {
  transform:rotate(32deg)
}
.cf-chispas i:nth-child(5) {
  transform:rotate(64deg) scaleY(.75)
}
.cf-duo-uno {
  left:-5%;
  transform:rotate(-13deg);
  z-index:1
}
.cf-duo-dos {
  right:-6%;
  transform:rotate(12deg);
  z-index:2
}
.cf-duo-etiqueta {
  position:absolute;
  bottom:-8px;
  right:-12px;
  z-index:3;
  padding:15px 24px;
  border-radius:50%;
  background:var(--cf-dorado);
  color:var(--cf-verde);
  text-align:center;
  font-size:9px;
  font-weight:600;
  letter-spacing:.2em;
  transform:rotate(-8deg)
}
.cf-duo-etiqueta em {
  display:block;
  font-family:var(--cf-serif);
  font-size:24px;
  font-weight:400;
  line-height:1.05;
  letter-spacing:-.02em
}
.cf-visita {
  padding:120px 0;
  scroll-margin-top:90px
}
.cf-visita-grid {
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:90px;
  align-items:center;
  margin-top:62px
}
.cf-visita-copy p {
  font-size:16px;
  line-height:1.8;
  color:var(--cf-texto)
}
.cf-visita-copy .cf-boton {
  margin-top:25px
}
.cf-llegada {
  min-height:320px;
  position:relative;
  border-radius:26px;
  background:var(--cf-crema);
  display:grid;
  place-items:center;
  padding:40px;
  overflow:hidden;
  text-align:center
}
.cf-llegada::before {
  content:'';
  position:absolute;
  inset:0;
  background:url('../imagenes/coffee/patron-hojas.svg') center/550px;
  opacity:.06
}
.cf-llegada-logo {
  width:170px;
  position:relative;
  z-index:1
}
.cf-llegada p {
  margin-top:24px;
  font-family:var(--cf-serif);
  font-style:italic;
  font-weight:300;
  font-size:32px;
  line-height:1.15;
  position:relative
}
.cf-cierre {
  padding-bottom:100px
}
.cf-cierre-panel {
  position:relative;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  column-gap:55px;
  padding:60px 70px;
  border-radius:30px;
  background:var(--cf-crema);
  overflow:hidden
}
.cf-cierre-panel::before {
  content:'';
  position:absolute;
  inset:0;
  background:url('../imagenes/coffee/patron.svg') right/600px;
  opacity:.03;
  pointer-events:none
}
.cf-cierre .cf-etiqueta {
  margin-bottom:18px;
  color:var(--cf-oro-oscuro)
}
.cf-cierre h2 {
  font-family:var(--cf-titulos);
  font-size:clamp(40px,5vw,64px);
  font-weight:500;
  letter-spacing:-.025em;
  line-height:1.02
}
.cf-cierre p:last-child {
  margin-top:20px;
  max-width:450px;
  font-size:15px;
  line-height:1.7
}
.coffee .pie {
  background:var(--cf-verde);
  color:var(--cf-papel)
}
.cf-pie-marca img {
  display:block;
  width:200px;
  height:auto
}
.coffee .pie nav a:hover {
  color:var(--cf-dorado)
}
.coffee .pie-inferior {
  color:#f3efe1b3
}
@media(min-width:1440px) {
  .cf-portada {
    padding-top:140px
  }
  .cf-vasos {
    height:540px
  }
}
@media(max-width:767px) {
  .cf-ancho {
    width:calc(100% - 40px)
  }
  .cf-portada {
    padding-top:100px
  }
  .cf-nav {
    padding-bottom:38px
  }
  .cf-nav-logo {
    width:86px
  }
  .cf-nav-enlaces {
    gap:14px;
    font-size:11px
  }
  .cf-nav-enlaces a {
    display:flex;
    align-items:center;
    min-height:44px
  }
  .cf-nav-enlaces a:last-child {
    display:none
  }
  .cf-portada h1 {
    font-size:clamp(50px,14.5vw,84px);
    letter-spacing:-.035em
  }
  .cf-portada h1 .cf-firma {
    font-size:clamp(20px,6vw,28px);
    font-weight:300;
    line-height:1.2;
    letter-spacing:-.015em;
    padding-left:0;
    margin-top:14px;
    transform:none
  }
  .cf-portada-texto .cf-etiqueta {
    font-size:9px;
    margin-bottom:16px
  }
  .cf-portada-texto .cf-intro {
    margin-top:24px;
    font-size:15px;
    max-width:320px
  }
  .cf-acciones {
    display:flex;
    width:fit-content;
    max-width:100%;
    margin:26px auto 0
  }
  .cf-acciones .cf-boton-linea {
    display:none
  }
  .cf-acciones .cf-boton {
    min-height:48px;
    padding:13px 22px;
    font-size:13px
  }
  .cf-boton {
    padding-inline:18px;
    gap:10px;
    min-height:46px;
    font-size:12px
  }
  .cf-vasos {
    height:310px;
    margin-top:30px
  }
  .cf-vasos::before {
    width:96%;
    left:2%;
    height:26%
  }
  .cf-vaso {
    width:31%;
    bottom:10%
  }
  .cf-vaso-centro {
    left:30%;
    width:40%;
    bottom:8%
  }
  .cf-vaso-izq {
    left:5%
  }
  .cf-vaso-der {
    right:5%
  }
  .cf-sombra {
    width:28%;
    bottom:8%
  }
  .cf-sombra-izq {
    left:5%
  }
  .cf-sombra-centro {
    left:34%;
    width:32%;
    bottom:6%
  }
  .cf-sombra-der {
    right:5%
  }
  .cf-grano-1 {
    left:2%;
    top:6%;
    width:20px
  }
  .cf-grano-2 {
    left:27%;
    top:-4%;
    width:13px
  }
  .cf-grano-3 {
    right:24%;
    top:-2%;
    width:16px
  }
  .cf-grano-4 {
    right:1%;
    top:22%;
    width:21px
  }
  .cf-grano-5 {
    left:18%;
    bottom:2%;
    width:14px
  }
  .cf-grano-6 {
    left:14%;
    top:0;
    width:9px
  }
  .cf-grano-7 {
    left:12%;
    top:23%;
    width:12px
  }
  .cf-grano-8 {
    left:47%;
    top:-2%;
    width:16px
  }
  .cf-grano-9 {
    right:42%;
    top:12%;
    width:8px
  }
  .cf-grano-10 {
    right:12%;
    top:1%;
    width:10px
  }
  .cf-grano-11 {
    right:9%;
    top:31%;
    width:9px
  }
  .cf-grano-12 {
    right:18%;
    bottom:1%;
    width:12px
  }
  .cf-grano-13 {
    left:7%;
    bottom:17%;
    width:9px
  }
  .cf-portada-base {
    padding:19px 0;
    font-size:8px;
    letter-spacing:.12em
  }
  .cf-portada-base img {
    width:24px
  }
  .cf-historia {
    padding:80px 0 65px
  }
  .cf-titulo {
    font-size:clamp(34px,9.6vw,48px)
  }
  .cf-encabezado .cf-etiqueta {
    font-size:10px;
    margin-bottom:16px
  }
  .cf-intro {
    margin-top:20px;
    font-size:15px
  }
  .cf-historia-grid {
    grid-template-columns:1fr;
    gap:34px;
    margin-top:38px
  }
  .cf-historia-copy {
    justify-self:center;
    text-align:left;
    max-width:330px;
    grid-row:2
  }
  .cf-historia-copy h3 {
    font-size:34px
  }
  .cf-historia-copy p:last-child {
    font-size:15px;
    margin-top:16px
  }
  .cf-historia-visual {
    grid-row:1;
    min-height:315px;
    margin-top:12px
  }
  .cf-mano {
    width:122%;
    margin-left:-11%;
    height:350px
  }
  .cf-sello {
    width:75px;
    left:20px;
    top:52px
  }
  .cf-menu {
    padding:45px 0 80px
  }
  .cf-orbita {
    height:365px;
    margin-top:32px
  }
  .cf-opcion {
    width:43%;
    height:295px;
    left:28.5%;
    top:87px
  }
  .cf-opcion[data-posicion='1'] {
    transform:translate(74%,-16%) scale(.64) rotate(10deg)
  }
  .cf-opcion[data-posicion='-1'] {
    transform:translate(-74%,-16%) scale(.64) rotate(-10deg)
  }
  .cf-opcion[data-posicion='2'] {
    transform:translate(56%,-60%) scale(.38) rotate(6deg)
  }
  .cf-opcion[data-posicion='-2'] {
    transform:translate(-56%,-60%) scale(.38) rotate(-6deg)
  }
  .cf-opcion[data-posicion='3'] {
    transform:translate(0,-73%) scale(.36)
  }
  .cf-opcion[data-posicion='2'],
  .cf-opcion[data-posicion='-2'],
  .cf-opcion[data-posicion='3'] {
    filter:none
  }
  .cf-desliza {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin:0 auto 22px;
    font-size:8px;
    font-weight:600;
    letter-spacing:.15em;
    color:var(--cf-oro-oscuro)
  }
  .cf-desliza svg {
    width:17px;
    height:17px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.3
  }
  .cf-seleccion {
    display:flex;
    flex-direction:column;
    align-items:center;
    width:calc(100% - 40px);
    gap:12px;
    margin-top:5px
  }
  .cf-controles {
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:min(320px,100%);
    gap:7px
  }
  .cf-flecha {
    width:44px;
    flex:none;
    margin-top:0
  }
  .cf-detalle {
    width:100%;
    min-height:178px
  }
  .cf-seleccion h3 {
    font-size:27px
  }
  .cf-seleccion p {
    max-width:320px;
    font-size:15px;
    margin-top:10px
  }
  .cf-numero {
    font-size:14px
  }
  .cf-paginacion {
    margin-top:0;
    gap:2px
  }
  .cf-punto {
    width:26px;
    flex:none
  }
  .cf-punto::before {
    left:10px
  }
  .cf-motivos {
    padding-bottom:80px
  }
  .cf-motivos-grid {
    grid-template-columns:1fr;
    gap:48px;
    margin-top:96px
  }
  .cf-motivos-visual {
    height:350px
  }
  .cf-vapor {
    top:-16%;
    height:24%
  }
  .cf-lista-motivos {
    gap:28px
  }
  .cf-motivo {
    grid-template-columns:46px 1fr;
    gap:17px
  }
  .cf-motivo-icono {
    width:46px;
    height:46px;
    border-radius:13px
  }
  .cf-motivo h3 {
    font-size:20px
  }
  .cf-motivo p {
    font-size:14px
  }
  .cf-compartir {
    padding:75px 0 90px
  }
  .cf-compartir-grid {
    grid-template-columns:1fr;
    gap:65px
  }
  .cf-compartir-copy {
    max-width:380px;
    text-align:center;
    margin-inline:auto
  }
  .cf-compartir .cf-etiqueta {
    font-size:9px;
    margin-bottom:23px
  }
  .cf-compartir .cf-titulo {
    font-size:clamp(34px,9.4vw,46px)
  }
  .cf-compartir-copy > p:not(.cf-etiqueta) {
    font-size:15px;
    margin-top:24px
  }
  .cf-duo {
    height:295px;
    width:min(370px,100%);
    margin-inline:auto
  }
  .cf-duo-fondo {
    border-radius:25px
  }
  .cf-duo > img {
    height:126%;
    top:-32px
  }
  .cf-chispas {
    top:-66px;
    width:60px;
    height:42px;
    margin-left:-30px
  }
  .cf-duo-etiqueta {
    right:-2px;
    padding:13px 19px;
    font-size:8px
  }
  .cf-duo-etiqueta em {
    font-size:24px
  }
  .cf-visita {
    padding:80px 0
  }
  .cf-visita-grid {
    grid-template-columns:1fr;
    gap:32px;
    margin-top:36px
  }
  .cf-visita-copy {
    text-align:center
  }
  .cf-visita-copy p {
    font-size:15px
  }
  .cf-llegada {
    min-height:270px;
    padding:30px
  }
  .cf-llegada-logo {
    width:140px
  }
  .cf-llegada p {
    font-size:30px
  }
  .cf-cierre {
    padding-bottom:65px
  }
  .cf-cierre-panel {
    grid-template-columns:1fr;
    gap:30px;
    padding:38px 25px;
    text-align:center;
    border-radius:23px
  }
  .cf-cierre h2 {
    font-size:44px
  }
  .cf-cierre .cf-boton {
    justify-self:center
  }
}
.animar .cf-nav,
.animar .cf-portada-texto,
.animar .cf-vasos {
  visibility:hidden
}
@media(prefers-reduced-motion:reduce) {
  .cf-opcion,
  .cf-orbita::before,
  .cf-boton,
  .cf-flecha {
    transition:none
  }
}