:root {
  --wine: #5A1E2B;
  --wine-deep: #3E1620;
  --pink: #E7C6CE;
  --pink-soft: #F1DBDF;
  --yellow: #E7C6CE;
  --cream: #F4E7DD;
  --cream-2: #FBF3EC;
  --ink: #3A2A2C;
  --catbg: #E7C6CE;
  --radius: 18px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: "DM Sans", system-ui, sans-serif;
  background: var(--cream);
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 26px; }
.kick { font-family: Caveat, cursive; font-weight: 700; display: inline-block; }

/* Header */
header {
  position: sticky; top: 0; z-index: 80;
  background: rgba(244,231,221,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(99,0,31,0.14);
}
.nav { position: relative; display: flex; align-items: center; justify-content: space-between; height: 60px; }
.logo { display: inline-flex; align-items: baseline; gap: 0.06em; }
.logo .n { font-family: Anton, sans-serif; text-transform: uppercase; font-size: 1.5rem; color: var(--wine); letter-spacing: 0.01em; }
.logo .b { font-family: Caveat, cursive; font-weight: 700; font-size: 1.95rem; color: var(--wine); margin-left: 0.05em; line-height: 1; }

/* Botón hamburguesa */
.menu-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 46px; height: 40px; padding: 9px 11px; background: transparent; border: 0; cursor: pointer; border-radius: 10px; transition: background 0.2s; }
.menu-toggle span { display: block; height: 2.5px; width: 100%; background: var(--wine); border-radius: 2px; transition: transform 0.25s, opacity 0.2s; }
.menu-toggle:hover { background: rgba(99,0,31,0.06); }
.nav.open .menu-toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav.open .menu-toggle span:nth-child(2) { opacity: 0; }
.nav.open .menu-toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* Panel desplegable */
nav.menu { position: absolute; top: 100%; right: 0; margin-top: 10px; min-width: 232px; background: var(--cream-2); border: 1px solid rgba(99,0,31,0.14); border-radius: 16px; box-shadow: rgba(91,10,44,0.2) 0 20px 44px -20px; padding: 10px; display: none; z-index: 90; }
.nav.open nav.menu { display: block; }
nav.menu ul { display: flex; flex-direction: column; gap: 2px; list-style: none; }
nav.menu a { display: block; padding: 10px 14px; border-radius: 10px; color: var(--wine); opacity: 0.85; font-weight: 600; font-size: 0.98rem; transition: background 0.15s, opacity 0.15s; }
nav.menu a:hover { background: rgba(233,173,202,0.3); opacity: 1; }
nav.menu a.on { opacity: 1; font-weight: 700; background: rgba(233,173,202,0.22); }
nav.menu a.soy { color: #B0596E; background: transparent; font-weight: 700; margin-top: 5px; }
nav.menu a.soy:hover { background: rgba(231,198,206,0.35); color: #B0596E; }

/* Hero */
.hero { background: var(--wine); text-align: center; padding: 76px 0 92px; position: relative; overflow: hidden; }
.hero .kick { font-size: 2rem; color: var(--pink); opacity: 0.95; transform: rotate(-3deg); margin-bottom: 4px; }
.hero h1 { font-family: Anton, sans-serif; text-transform: uppercase; color: var(--pink); font-size: clamp(3rem, 10vw, 6.6rem); line-height: 0.94; letter-spacing: 0.035em; }
.hero h1 .y { position: relative; z-index: 1; }
.hero h1 .y::after { content: ""; position: absolute; left: -6px; right: -6px; bottom: 0.1em; height: 0.34em; background: transparent; z-index: -1; transform: rotate(-1.5deg); border-radius: 4px; }
.hero p { font-size: 0.98rem; color: var(--cream); max-width: 54ch; margin: 24px auto 0; opacity: 0.92; }
.flower { position: absolute; z-index: 1; pointer-events: none; opacity: 0.9; }

/* Contenedor de página de categoría (con flores repartidas de fondo) */
.catwrap { position: relative; overflow: hidden; background: var(--cream); isolation: isolate; }
.catwrap > .pagehero, .catwrap > .blog { background: transparent; }
.deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.deco .flower { position: absolute; }

/* Page hero (páginas de categoría) */
.pagehero { background: var(--cream); padding: 22px 0 16px; position: relative; z-index: 1; }
.pagehero .wrap { position: relative; z-index: 2; }
.pagehero .back { display: inline-block; color: var(--wine); opacity: 0.7; font-weight: 600; font-size: 0.9rem; margin-bottom: 2px; transition: 0.2s; }
.pagehero .back:hover { opacity: 1; }
.pagehero .kick { font-size: 1.7rem; color: var(--wine); opacity: 0.7; transform: rotate(-2deg); display: block; }
.pagehero h1 { font-family: Anton, sans-serif; text-transform: uppercase; color: var(--wine); font-size: clamp(2.4rem, 7vw, 4.6rem); line-height: 1.02; letter-spacing: 0.045em; margin-top: 14px; margin-bottom: 6px; }
.pagehero h1 .u { position: relative; z-index: 1; }
.pagehero h1 .u::after { content: ""; position: absolute; left: -4px; right: -4px; bottom: 0.07em; height: 0.3em; background: var(--pink); z-index: -1; transform: rotate(-1.5deg); border-radius: 4px; }
.pagehero p { color: var(--wine); opacity: 0.82; max-width: none; margin-top: 26px; font-size: 0.9rem; white-space: nowrap; }
@media (max-width: 820px){ .pagehero p { white-space: normal; font-size: 0.85rem; } }

/* Categorías */
.cats { background: var(--pink); color: var(--wine); padding: 46px 0 52px; position: relative; }
.cats .kick { font-size: 1.3rem; color: var(--wine); opacity: 0.7; transform: rotate(-2deg); }
.cats h2 { font-family: "DM Sans", sans-serif; font-weight: 700; color: var(--wine); font-size: clamp(1.35rem, 3vw, 1.85rem); line-height: 1.12; letter-spacing: -0.01em; margin-top: 2px; }
.cats .sub { color: #6D4A58; font-weight: 500; margin-top: 6px; max-width: none; font-size: 0.94rem; }
.catgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 9px; margin-top: 26px; }
.catcard {
  display: block;
  background: var(--cream-2);
  border: 1px solid rgba(91,10,44,0.14);
  border-radius: 15px;
  padding: 20px 10px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s;
  box-shadow: rgba(91,10,44,0.55) 0px 8px 20px -14px;
}
.catcard:hover { transform: translateY(-3px); box-shadow: rgba(91,10,44,0.6) 0px 14px 26px -13px; }
.catcard .ico { width: 34px; height: 34px; margin: 0 auto 10px; color: var(--wine); }
.catcard .ico svg { width: 100%; height: 100%; }
.cats h2 .hl { position: relative; z-index: 1; }
.cats h2 .hl::after { content: ""; position: absolute; left: -3px; right: -3px; bottom: 0.05em; height: 0.34em; background: var(--cream-2); z-index: -1; transform: rotate(-1.5deg); border-radius: 4px; }
.catcard h3 { font-family: "DM Sans", sans-serif; font-weight: 700; text-transform: uppercase; color: var(--wine); font-size: 0.88rem; letter-spacing: 0.02em; }
.catcard p { color: #8A6A72; font-size: 0.8rem; margin-top: 4px; font-weight: 500; }

/* Página Sobre mí (fondo claro) */
.sobremi { padding: 30px 0 74px; }
.sobremi .back { display: block; width: fit-content; color: var(--wine); opacity: 0.7; font-weight: 600; font-size: 0.9rem; margin-bottom: 6px; transition: 0.2s; }
.sobremi .back:hover { opacity: 1; }
.sobremi .kick { font-size: 1.7rem; color: var(--wine); opacity: 0.72; transform: rotate(-2deg); display: inline-block; }
.sobremi h2 { font-family: Anton, sans-serif; text-transform: uppercase; color: var(--wine); font-size: clamp(2.2rem, 6vw, 3.6rem); line-height: 1.04; letter-spacing: 0.03em; margin: 12px 0 28px; }
.sobremi h2 .hl { position: relative; z-index: 1; }
.sobremi h2 .hl::after { content: ""; position: absolute; left: -4px; right: -4px; bottom: 0.06em; height: 0.3em; background: var(--pink); z-index: -1; transform: rotate(-1.5deg); border-radius: 4px; }
.sobremi .grid2 { display: grid; grid-template-columns: 300px 1fr; gap: 54px; align-items: start; max-width: 960px; }
.sobremi .photo img { width: 100%; max-width: 300px; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 50%; border-radius: var(--radius); border: 3px solid var(--pink); transform: rotate(-2deg); box-shadow: rgba(91,10,44,0.25) 8px 10px 0px; }
.sobremi p { color: var(--ink); margin: 0 0 14px; max-width: 62ch; }
.sobremi .firma { font-family: Caveat, cursive; font-weight: 700; font-size: 1.85rem; color: var(--wine); margin-top: 12px; }
@media (max-width: 760px) {
  .sobremi .grid2 { grid-template-columns: 1fr; gap: 26px; }
  .sobremi .photo img { margin: 0 auto; }
}

/* Sobre mí (bloque en el inicio) */
.about { background: var(--cream-2); color: var(--ink); padding: 56px 0 66px; }
.about .grid2 { display: grid; grid-template-columns: 270px 1fr; gap: 70px; align-items: center; text-align: left; max-width: 860px; margin: 0 auto; }
.about .photo { position: relative; }
.about .photo img { width: 100%; max-width: 300px; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 50%; border-radius: var(--radius); border: 3px solid var(--wine); transform: rotate(-2deg); box-shadow: rgba(90,30,43,0.22) 8px 10px 0px; }
.about .kick { font-size: 1.6rem; color: var(--wine); opacity: 0.72; transform: rotate(-2deg); }
.about h2 { font-family: Anton, sans-serif; text-transform: uppercase; color: var(--wine); font-size: clamp(2rem, 5vw, 3.2rem); line-height: 0.98; letter-spacing: 0.03em; margin: 4px 0 14px; }
.about h2 .y { color: var(--wine); }
.about p { color: var(--ink); opacity: 1; margin: 0 0 3px; max-width: 48ch; }
.about .link { display: inline-block; margin-top: 6px; color: var(--cream); background: var(--wine); font-weight: 700; padding: 11px 22px; border-radius: 999px; transition: 0.2s; }
.about .link:hover { background: var(--pink); color: var(--wine); transform: translateY(-2px); }

/* Blog */
.blog { background: var(--cream); padding: 64px 0 76px; }
.blog.catpage { padding-top: 10px; }
.filters.catfilters { margin: 2px 0 22px; }
/* Filtros de Lugares (menús desplegables) */
.lugfilters { margin: 6px 0 28px; }
.lugselects { display: flex; gap: 12px; flex-wrap: wrap; }
.lugselect {
  appearance: none; -webkit-appearance: none;
  background-color: var(--cream-2); color: var(--wine);
  border: 2px solid rgba(91,10,44,0.25); border-radius: 999px;
  padding: 10px 40px 10px 18px;
  font-family: "DM Sans", sans-serif; font-weight: 600; font-size: 0.9rem;
  cursor: pointer; transition: border-color 0.2s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%235A1E2B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.8 6 6.2 11 1.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center; background-size: 12px;
}
.lugselect:hover, .lugselect:focus { border-color: var(--wine); outline: none; }
.lugselect option { color: var(--ink); }
.blog .head h2 { font-family: Anton, sans-serif; text-transform: uppercase; color: var(--wine); font-size: clamp(2rem, 5.5vw, 3.4rem); line-height: 0.98; letter-spacing: 0.03em; }
.blog .head h2 .p { position: relative; z-index: 1; }
.blog .head h2 .p::after { content: ""; position: absolute; left: -3px; right: -3px; bottom: 0.08em; height: 0.28em; background: var(--pink); z-index: -1; transform: rotate(-1.5deg); border-radius: 4px; }
.blog .head { margin-bottom: 30px; }
.blog .head p { color: #6A4254; margin-top: 8px; }
.filters { display: flex; gap: 9px; flex-wrap: wrap; margin: 24px 0 32px; }
.chip { border: 2px solid rgba(91,10,44,0.25); background: transparent; color: var(--wine); font-family: "DM Sans"; font-weight: 600; font-size: 0.9rem; padding: 8px 18px; border-radius: 999px; cursor: pointer; transition: 0.2s; }
.chip:hover { border-color: var(--wine); color: var(--wine); }
.chip.active { background: var(--wine); color: #fff; border-color: var(--wine); }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.card { background: #fff; border: 1px solid #ECDCCF; border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; }
.card:hover { transform: translateY(-5px); box-shadow: rgba(91,10,44,0.45) 0px 18px 34px -20px; }
.card .cover { position: relative; aspect-ratio: 3 / 2; background: #F6E7DB; display: grid; place-items: center; border-bottom: 3px solid var(--pink); }
.card .cover .frame { position: absolute; inset: 12px; border: 2px dashed #D9B9C6; border-radius: 9px; }
.card .cover .dot { width: 10px; height: 10px; border-radius: 50%; position: absolute; top: 13px; left: 13px; }
.card .cover .hint { position: relative; text-align: center; color: #C48AA1; }
.card .cover .hint .ico { font-size: 1.2rem; opacity: 0.7; }
.card .cover .hint small { display: block; font-size: 0.68rem; letter-spacing: 0.06em; margin-top: 2px; }
.card .body { padding: 18px; display: flex; flex-direction: column; gap: 7px; flex: 1 1 0%; color: var(--ink); }
.card .cat { color: var(--wine); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; }
.card h3 { font-family: "DM Sans"; font-weight: 700; font-size: 1.14rem; line-height: 1.25; letter-spacing: -0.01em; color: var(--wine); }
.card p { color: #7A5866; font-size: 0.9rem; font-weight: 400; flex: 1 1 0%; }
.card .foot { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; font-size: 0.84rem; color: #9C7080; }
.rating { color: var(--pink); letter-spacing: 2px; }
.card .foot .rm { font-weight: 700; color: var(--wine); }
.script { font-family: Caveat, cursive; font-weight: 700; }
.empty { grid-column: 1 / -1; text-align: center; color: #A97D90; padding: 40px; }

/* CTA */
.cta { background: var(--pink); color: var(--wine); padding: 70px 0 82px; text-align: center; position: relative; overflow: hidden; }
.cta .kick { font-size: 1.7rem; color: var(--wine); opacity: 0.8; transform: rotate(-2deg); }
.cta h2 { font-family: Anton, sans-serif; text-transform: uppercase; color: var(--wine); font-size: clamp(2.1rem, 6vw, 3.8rem); line-height: 0.98; letter-spacing: 0.03em; max-width: 20ch; margin: 6px auto 0; }
.cta h2 .y { position: relative; z-index: 1; }
.cta h2 .y::after { content: ""; position: absolute; left: -4px; right: -4px; bottom: 0.08em; height: 0.28em; background: var(--cream-2); z-index: -1; transform: rotate(-1.5deg); border-radius: 4px; }
.cta p { color: var(--wine); opacity: 0.82; max-width: 48ch; margin: 16px auto 26px; font-weight: 500; }
.cta .btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta .b1 { background: var(--wine); color: var(--cream); font-weight: 700; padding: 14px 28px; border-radius: 999px; transition: 0.2s; }
.cta .b1:hover { background: var(--wine-deep); color: var(--cream); transform: translateY(-2px); }
.cta .b2 { background: transparent; color: var(--wine); border: 2px solid var(--wine); font-weight: 700; padding: 14px 28px; border-radius: 999px; transition: 0.2s; }
.cta .b2:hover { background: var(--wine); color: var(--cream); }

/* Footer */
footer { background: var(--wine); color: var(--cream); padding: 54px 0 30px; }
.foot-grid { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; align-items: flex-start; }
.foot-brand { max-width: 30ch; }
.foot-brand .logo .n { color: var(--pink); }
.foot-brand .logo .b { color: var(--pink); }
.foot-brand p { color: var(--pink-soft); font-size: 0.92rem; margin-top: 10px; }
.socials { display: flex; gap: 14px; margin-top: 16px; }
.socials a { color: var(--pink); font-weight: 700; font-size: 0.85rem; transition: 0.2s; }
.socials a:hover { color: var(--cream); }
.foot-col h4 { font-family: Anton; text-transform: uppercase; font-weight: 400; font-size: 0.9rem; letter-spacing: 0.04em; color: var(--pink); margin-bottom: 12px; }
.foot-col a { display: block; color: var(--cream); padding: 5px 0; font-size: 0.92rem; opacity: 0.85; }
.foot-col a:hover { color: var(--pink); opacity: 1; }
.copy { text-align: center; color: var(--pink-soft); font-size: 0.83rem; margin-top: 36px; border-top: 1px solid rgba(249,175,209,0.2); padding-top: 22px; opacity: 0.85; }

@media (max-width: 860px) {
  .catgrid { grid-template-columns: repeat(2, 1fr); }
  .about .grid2 { grid-template-columns: 1fr; gap: 28px; }
  .about .photo img { max-width: 340px; margin: 0 auto; }
  .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .grid { grid-template-columns: 1fr; }
  .catgrid { grid-template-columns: 1fr; }
}

/* Dibujitos ilustrados (line-art, PNG transparente) */
.pagehero .wrap { position: relative; }
.pagehero .doodle { position: absolute; top: 10px; right: 4px; width: 90px; height: 90px; object-fit: contain; object-position: center; pointer-events: none; opacity: 0.9; }
@media (max-width: 820px){ .pagehero .doodle { width: 66px; height: 66px; top: 4px; } }
@media (max-width: 560px){ .pagehero .doodle { display: none; } }
.cta { position: relative; overflow: hidden; }
.cta .cta-doodle { position: absolute; right: 34px; bottom: 26px; width: 142px; height: auto; pointer-events: none; }
@media (max-width: 820px){ .cta .cta-doodle { position: static; display: block; width: 120px; margin: 8px auto 0; } }
.hero { position: relative; overflow: hidden; }
.hero .hero-doodle { position: absolute; left: 5%; bottom: 30px; width: 84px; height: auto; pointer-events: none; opacity: .95; transform: rotate(-14deg); }
@media (max-width: 820px){ .hero .hero-doodle { width: 74px; left: 5%; bottom: 16px; } }
@media (max-width: 560px){ .hero .hero-doodle { display: none; } }

/* Marquesina de texto en movimiento */
.marquee { background: var(--pink); color: var(--wine); overflow: hidden; white-space: nowrap; padding: 10px 0; border-top: 1px solid rgba(90,30,43,0.12); border-bottom: 1px solid rgba(90,30,43,0.12); }
.marquee .mtrack { display: inline-flex; will-change: transform; animation: marq 34s linear infinite; }
.marquee .mtrack span { font-family: Anton, sans-serif; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.9rem; }
@keyframes marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee:hover .mtrack { animation-play-state: paused; }
/* Sticker (dibujito) dentro de las tarjetas de categoría */
.catcard .ico { width: 52px; height: 52px; margin: 0 auto 10px; color: var(--wine); }
.catcard .ico img { width: 100%; height: 100%; object-fit: contain; }

/* ================= ONDA & CREATIVIDAD ================= */
/* Sticker sobre blob de color + inclinación alternada (tarjetas) */
.catcard .ico { position: relative; }
.catcard .ico::after { content:""; position:absolute; inset:-9px; border-radius:50%; z-index:0; }
.catcard:nth-child(3n+1) .ico::after { background:#F1DBDF; }
.catcard:nth-child(3n+2) .ico::after { background:#EAD9CF; }
.catcard:nth-child(3n) .ico::after { background:#E7C6CE; }
.catcard .ico img { position:relative; z-index:1; }
.catcard:nth-child(odd) .ico img { transform: rotate(-7deg); }
.catcard:nth-child(even) .ico img { transform: rotate(7deg); }

/* Cinta washi sobre las fotos */
.about .photo, .sobremi .photo { position: relative; }
.about .photo::before, .sobremi .photo::before { content:""; position:absolute; z-index:3; top:-11px; left:50%; width:100px; height:26px; transform:translateX(-50%) rotate(-5deg); background:rgba(231,198,206,0.72); border:1px dashed rgba(90,30,43,0.28); }

/* Tarjetas del blog tipo collage (leve inclinación) */





/* Sello circular giratorio */
.seal{ position:absolute; width:126px; height:126px; z-index:3; pointer-events:none; }
.seal svg{ width:100%; height:100%; animation: spin 20s linear infinite; }
.seal .sealtext{ font-family:"DM Sans",sans-serif; font-weight:700; font-size:9px; letter-spacing:1.3px; text-transform:uppercase; }
.seal .sealmark{ position:absolute; inset:0; display:grid; place-items:center; font-size:1.3rem; }
@keyframes spin{ to{ transform: rotate(360deg); } }
.hero .seal{ left:5%; bottom:18px; }
.hero .seal .sealtext{ fill: var(--pink); }
.pagehero .seal{ right:150px; top:16px; }
.pagehero .seal .sealtext{ fill: var(--wine); }
@media (max-width:760px){ .hero .seal,.pagehero .seal{ display:none; } .about .photo::before,.sobremi .photo::before{ display:none; } }

/* Inclinación collage SOLO en la principal (subpáginas derechas) */
.blog:not(.catpage) .grid .card:nth-child(3n+1){ transform: rotate(-0.9deg); }
.blog:not(.catpage) .grid .card:nth-child(3n+2){ transform: rotate(0.7deg); }
.blog:not(.catpage) .grid .card:nth-child(3n){ transform: rotate(-0.4deg); }
.blog:not(.catpage) .grid .card:hover{ transform: translateY(-5px) rotate(0deg); }

/* ================= INTERACCIONES (misma paleta) ================= */
@media (prefers-reduced-motion: no-preference){
  .hero .wrap > *{ animation: heroIn .7s cubic-bezier(.2,.7,.2,1) both; }
  .hero .wrap > *:nth-child(2){ animation-delay:.07s; }
  .hero .wrap > *:nth-child(3){ animation-delay:.14s; }
  @keyframes heroIn{ from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;} }
  .reveal{ opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
  .reveal.in{ opacity:1; transform:none; }
  .fade{ opacity:0; transition:opacity .6s ease; }
  .fade.in{ opacity:1; }
  .catcard:nth-child(odd) .ico img{ --r:-7deg; }
  .catcard:nth-child(even) .ico img{ --r:7deg; }
  .catcard:hover .ico img{ animation: wiggle .55s ease; }
  @keyframes wiggle{ 0%,100%{transform:rotate(var(--r,0deg));} 25%{transform:rotate(calc(var(--r,0deg) - 12deg)) scale(1.08);} 75%{transform:rotate(calc(var(--r,0deg) + 12deg)) scale(1.08);} }
}
.btn{ position:relative; overflow:hidden; z-index:0; transition: transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s ease; }
.btn::after{ content:""; position:absolute; inset:0; background:rgba(255,255,255,0.16); transform:scaleX(0); transform-origin:left center; transition:transform .4s cubic-bezier(.2,.7,.2,1); z-index:-1; }
.btn:hover::after{ transform:scaleX(1); }
.card .cover img{ transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.card:hover .cover img{ transform: scale(1.05); }
/* Botones reales: relleno + magnético (JS) */
.about .link, .cta .b1, .cta .b2{ position:relative; overflow:hidden; z-index:0; }
.about .link::after, .cta .b1::after, .cta .b2::after{ content:""; position:absolute; inset:0; background:rgba(255,255,255,0.16); transform:scaleX(0); transform-origin:left center; transition:transform .4s cubic-bezier(.2,.7,.2,1); z-index:-1; }
.about .link:hover::after, .cta .b1:hover::after, .cta .b2:hover::after{ transform:scaleX(1); }
.rm{ display:inline-block; transition: transform .2s ease; }
.card:hover .rm{ transform: translateX(4px); }

/* ================= INTERACCIÓN AVANZADA ================= */
/* Stickers arrastrables */
.hero{ overflow: visible; }
.about{ position: relative; overflow: visible; }
.drag{ position:absolute; z-index:6; cursor:grab; touch-action:none; user-select:none; -webkit-user-drag:none; filter: drop-shadow(0 5px 7px rgba(90,30,43,0.18)); transition: transform .16s cubic-bezier(.2,.7,.2,1); }
.drag:hover{ transform: rotate(-6deg) scale(1.06); }
.drag.grabbing{ cursor:grabbing; transform: scale(1.12) rotate(5deg); z-index:30; filter: drop-shadow(0 10px 16px rgba(90,30,43,0.3)); }
/* Tilt suave de fotos/tarjetas */
.about .photo, .card{ transition: transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .2s ease; will-change: transform; }
/* Cursor personalizado */
@media (hover:none),(pointer:coarse){ .drag{ display:none; } }
@media (max-width:760px){ .drag{ display:none; } }

/* Foto real en la portada de la tarjeta */
.card .cover{ overflow:hidden; }
.card .cover .coverimg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:2; }

/* ================= PÁGINA DE ARTÍCULO ================= */
.card.islink{ cursor:pointer; }
.card .cardlink{ display:contents; color:inherit; text-decoration:none; }
.catwrap.article{ padding-top: 26px; }
.article .wrap.narrow{ max-width: 760px; }
.post .back{ display:block; width:fit-content; color:var(--wine); opacity:0.7; font-weight:600; font-size:0.9rem; margin-bottom:14px; transition:0.2s; }
.post .back:hover{ opacity:1; }
.post .kick{ margin-top: 4px; }
.posttitle{ font-family:Anton, sans-serif; text-transform:uppercase; letter-spacing:.02em; font-size:clamp(2.1rem,5.5vw,3.4rem); line-height:.98; color:var(--wine); margin:.15rem 0 .5rem; }
.postmeta{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; color:var(--wine); opacity:.82; font-weight:600; font-size:.96rem; margin-bottom:6px; }
.postmeta .sep{ opacity:.4; }
.postmeta .rating{ letter-spacing:2px; }
.postcover{ border-radius:20px; overflow:hidden; margin:20px 0 26px; box-shadow:0 16px 36px rgba(90,30,43,.16); }
.postcover img{ width:100%; display:block; aspect-ratio:16/10; object-fit:cover; }
.postbody p{ color:#4a2b30; font-size:1.09rem; line-height:1.78; margin:0 0 1.15rem; }
.postbody p:first-child{ font-size:1.18rem; }
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:26px 0 30px; }
.gallery img{ width:100%; height:100%; aspect-ratio:3/4; object-fit:cover; border-radius:16px; box-shadow:0 10px 24px rgba(90,30,43,.14); transition:transform .4s cubic-bezier(.2,.7,.2,1); }
.gallery img:hover{ transform:translateY(-5px) scale(1.01); }
@media (max-width:700px){ .gallery{ grid-template-columns:1fr 1fr; } .postcover img{ aspect-ratio:4/3; } }

/* ===== Artículo: ficha con carrusel (fotos a la izq, texto a la der) ===== */
.postgrid{ display:grid; grid-template-columns: minmax(0, 340px) 1fr; gap:44px; align-items:start; margin-top:16px; }
.pcol-media{ position:sticky; top:96px; }
.pcol-text .kick{ margin-bottom:2px; }
.pcol-text .posttitle{ margin:2px 0 8px; }
.pcol-text .postmeta{ margin-bottom:18px; }
.pcol-text .postbody p{ color:#4a2b30; font-size:0.95rem; line-height:1.7; margin:0 0 0.9rem; }
.pcol-text .postbody p:first-child{ font-size:0.95rem; }
.postback2{ margin-top:26px; }
/* Carrusel */
.carousel .cframe{ position:relative; border-radius:16px; overflow:hidden; box-shadow:0 12px 28px rgba(90,30,43,.18); background:var(--cream-2); }
.carousel .track{ display:flex; transition:transform .45s cubic-bezier(.2,.7,.2,1); }
.carousel .track img{ min-width:100%; width:100%; aspect-ratio:3/4; object-fit:cover; display:block; }
.carousel .cprev,.carousel .cnext{ position:absolute; top:50%; transform:translateY(-50%); width:34px; height:34px; border-radius:50%; border:none; background:rgba(255,248,243,.9); color:var(--wine); font-size:1.25rem; line-height:1; cursor:pointer; display:grid; place-items:center; box-shadow:0 3px 10px rgba(0,0,0,.2); transition:background .2s ease; }
.carousel .cprev{ left:9px; } .carousel .cnext{ right:9px; }
.carousel .cprev:hover,.carousel .cnext:hover{ background:#fff; }
.carousel .cdots{ display:flex; gap:7px; justify-content:center; margin-top:12px; }
.carousel .cdot{ width:8px; height:8px; padding:0; border-radius:50%; border:none; background:rgba(90,30,43,.25); cursor:pointer; transition:background .2s ease, transform .2s ease; }
.carousel .cdot.on{ background:var(--wine); transform:scale(1.2); }
@media (max-width:820px){
  .postgrid{ grid-template-columns:1fr; gap:22px; }
  .pcol-media{ position:static; max-width:420px; margin:0 auto; }
}

/* Estrellas en amarillo clarito */
.rating{ color:#EAC04C; }
.postmeta .rating{ color:#EAC04C; }

/* Palabras clave resaltadas */
/*kw*/
.postbody .kw{ font-weight:700; color:var(--wine); background:linear-gradient(transparent 58%, rgba(231,198,206,.75) 58%); padding:0 1px; }

/* Bajar un poco la foto en Sobre mí */
.sobremi .photo{ margin-top: 40px; }

/* Notas sin fotos (una columna) + secciones/listas */
.post.noimg .postbody p, .post .postbody li{ color:#4a2b30; font-size:0.98rem; line-height:1.7; }
.post.noimg .postbody p{ margin:0 0 0.9rem; }
.postbody h3.psub{ font-family:Anton, sans-serif; text-transform:uppercase; letter-spacing:.02em; color:var(--wine); font-size:1.2rem; margin:1.5rem 0 .5rem; }
.postbody .plabel{ font-weight:700; color:var(--wine); margin:.5rem 0 .2rem; }
.postbody ul.plist{ list-style:none; margin:0 0 1rem; padding:0; }
.postbody ul.plist li{ position:relative; padding-left:18px; margin-bottom:.28rem; }
.postbody ul.plist li::before{ content:""; position:absolute; left:2px; top:.62em; width:6px; height:6px; border-radius:50%; background:var(--pink); }
.postbody .pdisc{ font-size:0.9rem; opacity:.9; border-left:3px solid var(--pink); padding-left:12px; margin-top:1.3rem; }

/* Gráficos dentro de las notas */
.postbody .pfig{ margin:1.5rem 0; background:rgba(231,198,206,.2); border:1px solid rgba(90,30,43,.12); border-radius:16px; padding:18px 18px 14px; text-align:center; }
.postbody .pfig svg{ width:100%; max-width:360px; height:auto; }
.postbody .pfig figcaption{ margin-top:6px; font-size:.85rem; color:var(--wine); opacity:.8; }

/* Portada de nota (ilustración) + aire antes del pie */
.post .notecover{ margin:14px auto 24px; max-width:540px; background:#fff; border-radius:18px; overflow:hidden; box-shadow:0 12px 30px rgba(90,30,43,.14); }
.post .notecover img{ display:block; width:100%; max-height:360px; object-fit:cover; }
.catwrap.article{ padding-bottom:64px; }

/* Figura de riñones con etiquetas (dentro del texto, más chica) */
.postbody .kfig{ max-width:340px; margin:1.4rem auto; background:#fff; border-radius:16px; padding:12px 12px 4px; box-shadow:0 10px 24px rgba(90,30,43,.12); }
.postbody .kfig .kwrap{ position:relative; line-height:0; }
.postbody .kfig img{ display:block; width:100%; height:auto; }
.postbody .kfig .kover{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }

/* ===== Notas dinámicas: figuras a los costados + comparación ===== */
.article .wrap.note{ max-width: 860px; }
.postbody .pfig.fright{ float:right; max-width:270px; margin:4px 0 14px 26px; }
.postbody .pfig.fleft{ float:left; max-width:270px; margin:4px 26px 14px 0; }
.postbody .clearfix{ clear:both; height:0; }
.postbody .compare{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:1.6rem 0; clear:both; }
.postbody .ccard{ border-radius:16px; padding:16px 18px 12px; }
.postbody .ccard h3{ font-family:Anton, sans-serif; text-transform:uppercase; letter-spacing:.02em; color:var(--wine); font-size:1.05rem; margin:0 0 .5rem; }
.postbody .ccard-alto{ background:rgba(90,30,43,.07); border:1px solid rgba(90,30,43,.14); }
.postbody .ccard-bajo{ background:rgba(231,198,206,.28); border:1px solid rgba(90,30,43,.1); }
.postbody .ccard .plabel{ margin-top:.4rem; }
.postbody .tipcard{ clear:both; margin:1.6rem 0; background:linear-gradient(180deg, rgba(231,198,206,.4), rgba(231,198,206,.16)); border:1px solid rgba(90,30,43,.12); border-radius:18px; padding:18px 20px 14px; }
.postbody .tipcard h3{ font-family:Anton, sans-serif; text-transform:uppercase; letter-spacing:.02em; color:var(--wine); font-size:1.18rem; margin:0 0 .6rem; }
.postbody ul.plist.checks li{ padding-left:24px; }
.postbody ul.plist.checks li::before{ content:"✓"; position:absolute; left:0; top:0; width:auto; height:auto; background:none; border-radius:0; color:var(--wine); font-weight:800; font-size:.95rem; }
.postbody .pdisc{ background:rgba(231,198,206,.25); border-left:4px solid var(--wine); border-radius:12px; padding:12px 16px; }
@media (max-width:720px){
  .postbody .pfig.fright, .postbody .pfig.fleft{ float:none; max-width:320px; margin:1.2rem auto; }
  .postbody .compare{ grid-template-columns:1fr; }
}

/* Fix: el kicker manuscrito (Caveat) se recortaba en iOS por la inclinación */
.kick{ padding: 0 0.22em; }
@media (max-width: 600px){
  .about .kick, .sobremi .kick, .pagehero .kick, .cats .kick, .cta .kick { transform: rotate(-1deg); font-size: 1.35rem; white-space: normal; }
  .hero .kick{ transform: rotate(-1.5deg); }
}