/* Public site · CLÍNICA PREMIUM (premium template 03, docs/design/plantillas/03-clinica-premium, mockup «Alba Derma»):
   dermatology clinic with a team. Loaded after public-site-premium-urbana.css: the shared blocks (.pu-*: booking, my
   appointment, events) take this template's values through the --pu-* tokens below; its own blocks are .cp-*. Every token
   lives in the :root block; the only per-center value is the brand colour (TenantTheme, AA-adjusted). Mobile first (375 px),
   then 720 / 1024 / 1180 px. Fonts: Cormorant Garamond + Manrope, self-hosted OFL woff2. Reading text >= 16 px, labels
   >= 14 px, touch targets >= 44 px. */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin.v1.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-ext.v1.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope-latin.v1.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope-latin-ext.v1.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---- Design tokens ---- */
:root[data-template="clinica-premium"]{
  --pu-font-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --pu-font-body:"Manrope","Segoe UI",system-ui,sans-serif;
  --pu-heading:#1E2320;
  --pu-ink-strong:#1E2320;
  --pu-ink-lead:#2A2F2C;
  --pu-ink:#2A2F2C;
  --pu-ink-2:#59605C;
  --pu-ink-3:#414844;
  --pu-line:#E7E3DC;
  --pu-line-2:#D3CDC3;
  --pu-pill:#EEF2EE;
  --pu-bg:#FBFAF7;
  --pu-bg-hero:#F4F1EC;
  --pu-veil:#F4F1EC;
  --pu-bg-booking:#F4F1EC;
  --pu-bg-articles:#F7F5F1;
  --pu-bg-reviews:#F7F5F1;
  --pu-bg-values:#F7F5F1;
  --pu-star:#C98A1A;
  --pu-accent:var(--brand);
  --pu-on-accent:var(--on-brand);
  --pu-accent-text:var(--brand-text);
  --pu-accent-strong:var(--brand-strong);
  --pu-icon-bg:var(--brand-soft);
  --pu-mark-leaf:#FFFFFF;
  --pu-focus:var(--brand-strong);
  --pu-radius-btn:8px;
  --pu-radius-card:12px;
  --pu-radius-lg:14px;
  --pu-radius-pill:999px;
  --pu-max:1320px;
  --pu-gutter:16px;
  --pu-shadow:0 6px 24px rgba(30,35,32,.07);
  --cp-surface:#FFFFFF;
  --cp-tile:#F4F1EC;
  --cp-demo:#FFF4E5;
  --cp-demo-ink:#7A4E00;
  /* Base tokens of public-pharmacy.css (booking internals) mapped to this design. */
  --paper:var(--pu-bg);
  --ink:var(--pu-ink);
  --muted:var(--pu-ink-2);
  --line:var(--pu-line);
  --font-body:var(--pu-font-body);
  --font-display:var(--pu-font-display);
  --site-button-radius:var(--pu-radius-btn);
  --site-radius-scale:.6;
}
@media (min-width:720px){:root[data-template="clinica-premium"]{--pu-gutter:32px}}

/* ---- Base ---- */
body.cp{font-size:17px;line-height:1.6}
.cp .pu-intro,.cp .pu-muted{font-size:16px}
.cp .pu-btn{font-size:16px}
.cp .pu-pill,.cp .pu-pill-sm{font-size:14px}
.cp .pu-map-note{font-size:14px}
.cp .pu-steps li span{width:28px;height:28px;font-size:14px}
.cp-btn{padding:12px 22px}
.cp-btn-ghost{background:var(--cp-surface);color:var(--pu-ink-strong);border-color:var(--pu-ink-strong)}
.cp-btn-ghost:hover{background:var(--pu-bg-hero)}
.cp-eyebrow{display:block;font-size:14px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--pu-ink-3)}
.cp-h1{margin:0;font:500 clamp(40px,4.6vw,60px)/1.06 var(--pu-font-display);color:var(--pu-heading);text-wrap:balance}
.cp-h2{margin:0;font:500 clamp(30px,3vw,40px)/1.1 var(--pu-font-display);color:var(--pu-heading);text-wrap:balance}
.cp-h2-sm{font-size:clamp(26px,2.4vw,32px)}
.cp-h3{margin:0;font:700 19px/1.3 var(--pu-font-body);color:var(--pu-heading)}
.cp-h4{margin:0;font:700 17px/1.3 var(--pu-font-body);color:var(--pu-heading)}
.cp-h4 a{color:inherit;text-decoration:none}
.cp-lead{margin:0;font-size:18px;color:var(--pu-ink-lead);max-width:34em}
.cp-intro{margin:4px 0 0;color:var(--pu-ink-2);font-size:16px;max-width:42em}
.cp-muted{margin:0;color:var(--pu-ink-2);font-size:15px}
.cp-note{margin:10px 0 0;color:var(--pu-ink-2);font-size:14px}
.cp-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:700;font-size:16px;color:var(--pu-ink-strong);text-decoration:underline;text-underline-offset:3px}
.cp-pill{display:inline-flex;align-items:center;min-height:32px;padding:4px 12px;border-radius:999px;background:var(--pu-accent);color:var(--pu-on-accent);font-size:14px;font-weight:600;white-space:nowrap}
.cp-section{padding:40px 0}
.cp-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:8px 24px;margin-bottom:20px}
.cp-demo-strip{margin:0;padding:10px 16px;background:var(--cp-demo);color:var(--cp-demo-ink);font-size:15px;text-align:center}

/* ---- Header ---- */
.cp-header{background:var(--cp-surface)}
.cp-brand .pu-brand-name{font-size:24px;letter-spacing:.08em;text-transform:uppercase}
.cp-brand .pu-brand-motto{font-size:14px;letter-spacing:.14em}
.cp-header-cta{display:none}

/* ---- Hero ---- */
.cp-hero{position:relative;background:var(--pu-bg-hero);overflow:hidden}
.cp-hero-photo{display:block;width:100%;height:300px;object-fit:cover;object-position:70% 25%}
.cp-hero-inner{position:relative;display:grid;gap:20px;padding-top:24px;padding-bottom:36px}
.cp-hero-copy{display:flex;flex-direction:column;gap:16px;max-width:600px}
.cp .cp-hero .pu-actions .pu-btn{flex:1 1 100%}
.cp-badges{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.cp-badges li{display:flex;align-items:center;gap:10px;font-size:15px;line-height:1.3;color:var(--pu-ink)}
.cp-badge-icon{flex:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--pu-line-2);display:inline-flex;align-items:center;justify-content:center;color:var(--pu-ink-strong);background:var(--cp-surface)}
.cp-quote{margin:0;max-width:260px;padding:14px 16px;border-radius:12px;background:rgba(244,241,236,.9)}
.cp-quote blockquote{margin:0;font:italic 500 26px/1.25 var(--pu-font-display);color:var(--pu-ink-strong)}
.cp-quote figcaption{margin-top:10px;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--pu-ink-3)}

/* ---- Pairs and card sections ---- */
.cp-pair{display:grid;gap:0}
.cp-pair > .cp-card-section{padding-left:0;padding-right:0}
.cp-card-section{padding-left:var(--pu-gutter);padding-right:var(--pu-gutter);max-width:var(--pu-max);margin:0 auto;width:100%}
.cp-scroller{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
.cp-scroller > *{flex:0 0 min(100%,420px);scroll-snap-align:start}
.cp-scroller:focus-visible,.cp-concerns-list:focus-visible{outline:3px solid var(--pu-focus);outline-offset:4px}

/* ---- Concerns ---- */
.cp-concerns-list{list-style:none;margin:0;padding:0 0 8px;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory}
.cp-concern{position:relative;flex:0 0 150px;scroll-snap-align:start;background:var(--cp-surface);border:1px solid var(--pu-line);border-radius:var(--pu-radius-card);overflow:hidden}
.cp-concern a{display:block;color:inherit;text-decoration:none}
.cp-concern img,.cp-concern-initial{display:flex;width:100%;aspect-ratio:4/3;object-fit:cover;align-items:center;justify-content:center;background:var(--cp-tile);font:500 40px/1 var(--pu-font-display);color:var(--pu-ink-strong)}
.cp-concern-label{display:flex;align-items:center;min-height:48px;padding:8px 12px;font-size:15px;font-weight:600;line-height:1.25;color:var(--pu-ink);overflow-wrap:break-word;hyphens:auto}
/* The arrow sits on the photo's corner (mockup). */
.cp-arrow{position:absolute;right:10px;bottom:58px;width:30px;height:30px;border-radius:50%;background:var(--cp-surface);box-shadow:var(--pu-shadow);display:inline-flex;align-items:center;justify-content:center;color:var(--pu-ink-strong)}

/* ---- Cases ---- */
.cp-case{background:var(--cp-surface);border:1px solid var(--pu-line);border-radius:var(--pu-radius-lg);overflow:hidden;display:grid}
.cp-case-photos{display:grid;grid-template-columns:1fr 1fr}
.cp-case-photos figure{position:relative;margin:0}
.cp-case-photos img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover}
.cp-case-photos figcaption{position:absolute;top:10px;left:10px;padding:4px 10px;border-radius:6px;background:rgba(30,35,32,.78);color:#FFFFFF;font-size:14px}
.cp-case-body{padding:18px;display:flex;flex-direction:column;gap:10px}
.cp-case-body p{margin:0;font-size:16px;color:var(--pu-ink-2)}
.cp-facts{margin:0;display:grid;gap:8px}
.cp-facts div{display:flex;flex-direction:column}
.cp-facts dt{font-weight:700;font-size:15px;color:var(--pu-ink-strong)}
.cp-facts dd{margin:0;font-size:15px;color:var(--pu-ink-2)}

/* ---- Specialist ---- */
.cp-specialist-card{display:grid;gap:18px;background:var(--cp-surface);border:1px solid var(--pu-line);border-radius:var(--pu-radius-lg);padding:16px}
.cp-specialist-img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--pu-radius-card)}
.cp-specialist-copy{display:flex;flex-direction:column;gap:8px}
.cp-specialist-copy p{margin:0;font-size:16px}
.cp-specialist-copy .pu-btn{align-self:flex-start;margin-top:8px}
.cp-societies{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:10px}
.cp-societies li{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--pu-ink)}
.cp-societies svg{flex:none;color:var(--pu-ink-strong)}

/* ---- Treatments ---- */
.cp-grid4,.cp-grid3{display:grid;grid-template-columns:1fr;gap:20px}
.cp-tile{display:flex;flex-direction:column;gap:8px;background:var(--cp-surface);border:1px solid var(--pu-line);border-radius:var(--pu-radius-card);padding:10px 10px 6px}
.cp-tile img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px}
.cp-tile p{margin:0;font-size:15px;color:var(--pu-ink-2)}

/* ---- Technology ---- */
.cp-tech{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.cp-tech li{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.cp-tech img,.cp-tech-icon{display:flex;width:100%;aspect-ratio:4/3;object-fit:cover;align-items:center;justify-content:center;background:var(--cp-tile);border-radius:var(--pu-radius-card);color:var(--pu-ink-strong);margin-bottom:6px}
.cp-tech strong{font-size:16px;color:var(--pu-ink-strong)}
.cp-tech span{font-size:14px;color:var(--pu-ink-2)}

/* ---- Steps ---- */
.cp-steps-list{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.cp-steps-list li{display:grid;grid-template-columns:44px 1fr;column-gap:12px;align-items:start}
.cp-steps-list img{grid-column:1 / -1;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--pu-radius-card);margin-bottom:10px}
.cp-step-num{grid-row:span 2;width:40px;height:40px;border-radius:50%;background:var(--pu-bg-hero);border:1px solid var(--pu-line-2);display:inline-flex;align-items:center;justify-content:center;font:600 20px/1 var(--pu-font-display);color:var(--pu-ink-strong)}
.cp-steps-list strong{font-size:17px;color:var(--pu-ink-strong)}
.cp-steps-list span:not(.cp-step-num){font-size:15px;color:var(--pu-ink-2)}

/* ---- Assistant ---- */
.cp-chat{background:var(--cp-surface);border:1px solid var(--pu-line);border-radius:var(--pu-radius-lg);padding:18px;display:flex;flex-direction:column;gap:12px}
.cp-chat-label{margin:0;font-size:14px;font-weight:600;color:var(--pu-ink-3);text-transform:uppercase;letter-spacing:.08em}
.cp-msg{margin:0;padding:12px 14px;border-radius:12px;font-size:16px;line-height:1.5;max-width:90%}
.cp-msg-patient{align-self:flex-end;background:var(--pu-pill);color:var(--pu-ink)}
.cp-msg-bot{align-self:flex-start;background:var(--pu-bg-hero);color:var(--pu-ink)}
.cp-chat-actions{display:flex;flex-wrap:wrap;gap:10px}

/* ---- Reviews ---- */
.cp-rating{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 14px;font-size:16px;color:var(--pu-ink-2)}
.cp-rating strong{font:500 40px/1 var(--pu-font-display);color:var(--pu-ink-strong)}
.cp-review{margin:0;background:var(--cp-surface);border:1px solid var(--pu-line);border-radius:var(--pu-radius-card);padding:18px;display:flex;flex-direction:column;gap:10px}
.cp-review blockquote{margin:0;font-size:16px;line-height:1.55;color:var(--pu-ink)}
.cp-review figcaption{font-weight:700;font-size:15px;color:var(--pu-ink-strong)}

/* ---- Blog ---- */
.cp-post{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:start}
.cp-post img{width:96px;height:96px;object-fit:cover;border-radius:var(--pu-radius-card)}
.cp-post p{margin:6px 0 0;font-size:15px;color:var(--pu-ink-2)}

/* ---- Footer ---- */
.cp-footer{background:var(--pu-bg-hero);padding:40px 0 calc(28px + env(safe-area-inset-bottom));margin-top:24px}
.cp-footer-grid{display:grid;gap:28px}
.cp-footer-brand p{margin:12px 0 0;font-size:15px;color:var(--pu-ink-2);max-width:26em}
.cp-footer-title{margin:0 0 10px;font:700 16px/1.3 var(--pu-font-body);color:var(--pu-ink-strong)}
.cp-footer-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cp-footer-list li{display:flex;gap:10px;font-size:15px;color:var(--pu-ink)}
.cp-footer-list svg{flex:none;margin-top:3px;color:var(--pu-ink-strong)}
.cp-footer-list a{color:var(--pu-ink)}
.cp-footer .pu-social a{color:var(--pu-ink-strong)}
.cp-made{margin:14px 0 0;font-size:14px;color:var(--pu-ink-2)}
.cp-footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;margin-top:28px;padding-top:16px;border-top:1px solid var(--pu-line);font-size:14px;color:var(--pu-ink-2)}
.cp-footer-bottom nav{display:flex;flex-wrap:wrap;gap:4px 18px}
.cp-footer-bottom a{display:inline-flex;align-items:center;min-height:44px;color:var(--pu-ink-2)}
.cp-footer .pu-legal-data{color:var(--pu-ink-2);font-size:14px;margin:8px 0 0}
.cp .pu-mobile-bar{padding-bottom:env(safe-area-inset-bottom)}
/* Service page (shares the DERMO CLÍNICA markup). */
.cp .dc-wordmark{display:flex;flex-direction:column;gap:2px;margin-right:auto;text-decoration:none}
.cp .dc-wordmark-name{font:500 22px/1.1 var(--pu-font-display);letter-spacing:.08em;text-transform:uppercase;color:var(--pu-ink-strong)}
.cp .dc-wordmark-motto{font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--pu-ink-3)}
.cp .dc-footer{background:var(--pu-bg-hero);padding:32px 0}
.cp .dc-footer-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px}
.cp .dc-footer-links a{display:inline-flex;align-items:center;min-height:44px;color:var(--pu-ink)}

/* ---- 720 px ---- */
@media (min-width:720px){
  .cp-section{padding:56px 0}
  .cp .cp-hero .pu-actions .pu-btn{flex:0 0 auto}
  .cp-badges{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cp-grid4{grid-template-columns:repeat(2,1fr)}
  .cp-grid3{grid-template-columns:repeat(3,1fr)}
  .cp-tech{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cp-steps-list{grid-template-columns:repeat(2,1fr)}
  .cp-specialist-card{grid-template-columns:2fr 3fr;align-items:start}
  .cp-case{grid-template-columns:1.3fr 1fr}
  .cp-footer-grid{grid-template-columns:repeat(2,1fr)}
}

/* ---- 1024 px ---- */
@media (min-width:1024px){
  .cp-header-cta{display:inline-flex}
  .cp-hero-photo{position:absolute;inset:0;height:100%}
  .cp-hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--pu-bg-hero) 0%,var(--pu-bg-hero) 30%,rgba(244,241,236,0) 55%)}
  .cp-hero-inner{z-index:2;grid-template-columns:1fr auto;align-items:end;min-height:540px;padding-top:56px;padding-bottom:56px}
  /* The quote sits low on the right, clear of the face of the photo. */
  .cp-quote{align-self:end;justify-self:end;max-width:300px;margin-bottom:-28px}
  .cp-quote blockquote{font-size:20px}
  .cp-hero.no-image::before{display:none}
  .cp-concerns-list{overflow-x:visible;flex-wrap:nowrap}
  .cp-concern{flex:1 1 0;min-width:0}
  .cp-grid4{grid-template-columns:repeat(4,1fr)}
  .cp-steps-list{grid-template-columns:repeat(4,1fr)}
  .cp-footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}
}

/* ---- 1180 px: half-width blocks side by side ---- */
@media (min-width:1180px){
  .cp-pair{grid-template-columns:1fr 1fr;gap:40px;align-items:start}
  .cp-pair .cp-grid4{grid-template-columns:repeat(2,1fr)}
  .cp-pair .cp-tech{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cp-pair .cp-steps-list{grid-template-columns:repeat(2,1fr)}
}

@media (prefers-reduced-motion:reduce){.cp *{scroll-behavior:auto!important}}

/* Team (Mi web → Equipo) in the #equipo place: 1 column, 2 from 480px, up to 4 on wide screens. */
.cp-team-list{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr))}
.cp-team-member{background:#fff;border:1px solid var(--pu-line);border-radius:var(--pu-radius-lg);padding:16px;display:flex;flex-direction:column;gap:6px;font-size:16px}
.cp-team-img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--pu-radius-card)}
.cp-team-initial{display:grid;place-items:center;width:100%;aspect-ratio:4/5;border-radius:var(--pu-radius-card);background:var(--pu-icon-bg);color:var(--pu-heading);font-size:40px;font-weight:600}
.cp-team-member .cp-muted{font-size:15px;margin:0}